/* =========================
   COMPARE TABLE LOOK
========================= */

.compare-page .compare-wrap{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* HEADER (zgoraj: prazno + 3 vozila) */
.compare-page .compare-header{
    display:grid;
    grid-template-columns: 260px repeat(3, minmax(240px, 1fr));
    gap:15px;
    align-items:start;
}

.compare-page .compare-header .compare-header-left .title{
    font-size:18px;
    font-weight:800;
    margin:0 0 6px 0;
    color:#111827;
}
.compare-page .compare-header .compare-header-left .subtitle{
    margin:0;
    color:#6B7280;
    font-size:14px;
}

/* Vehicle mini card (zgoraj) */
.compare-page .compare-vehicle-mini{
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:12px;
    padding:14px;
}

.compare-page .compare-vehicle-mini .img-box{
    width:100%;
    aspect-ratio: 16/9;
    border-radius:10px;
    overflow:hidden;
    background:#F3F4F6;
    margin-bottom:10px;
}
.compare-page .compare-vehicle-mini .img-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.compare-page .compare-vehicle-mini h3{
    font-size: 14px;
    font-weight: 700;
    color:#111827;

    /* če je naslov dolg */
    overflow:hidden;
    text-align: center;
    margin: 0px;
}

.compare-page .compare-vehicle-mini .mini-meta{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
    color:#111827;
    font-size:14px;
}

/* =========================
   TABLE (vrstice)
========================= */

.compare-page .compare-table{
    border-top:1px solid #111827; /* zgornja črta kot na screenshotu */
    margin-top: 20px;
}

.compare-page .compare-row{
    display:grid;
    grid-template-columns: 260px repeat(3, minmax(240px, 1fr));
    column-gap:15px;
    align-items:center;
    padding:18px 0;
    border-bottom:1px solid #111827; /* vodoravne črte */
    font-size: 16px;
}

.compare-page .compare-row .compare-label{
    font-size: 16px;
    font-weight: 700;
    color:#111827;
    padding-left:8px; /* rahlo notri */
}

.compare-page .compare-row .compare-cell{
    font-size: 16px;
    color:#111827;
    text-align:left;
    padding-right:10px;
    word-break:break-word;
}

/* malo bolj “centered” kot na screenshotu (optional) */
.compare-page .compare-row .compare-cell{
    display:flex;
    align-items:center;
    min-height: 18px;
}

/* placeholder, ko ni vozila v slotu */
.compare-page .compare-cell.is-empty{
    color:#9CA3AF;
}

.no-vehicles{
    text-align: center;
    font-size: 20px;
    text-decoration: underline;
}

.compare-page .compare-vehicle-mini{
    position:relative;
}

.compare-page .compare-vehicle-mini .compare-remove{
    position:absolute;
    top:10px;
    right:10px;
    width:32px;
    height:32px;
    border-radius:10px;
    border:1px solid #E5E7EB;
    background:#fff;
    font-size:20px;
    line-height:28px;
    cursor:pointer;
}

.compare-page .compare-vehicle-mini .compare-remove:hover{
    background:#F9FAFB;
}

/* =========================
   MOBILE: horizontal scroll
========================= */
@media (max-width: 900px){
    /* vse skupaj naj se skrola horizontalno */
    .compare-page .compare-scroll{
        overflow-x:auto;
        -webkit-overflow-scrolling: touch;
    }

    /* nastavi minimalno širino, da se vidi 3 stolpce */
    .compare-page .compare-scroll-inner{
        min-width: 1040px;             /* 260 + 3*260 */
    }

    .compare-page .compare-header,
    .compare-page .compare-row{
        grid-template-columns: 200px repeat(3, 260px);
    }

    .compare-page .compare-row .compare-label{
        font-size:18px;
    }

    .compare-page .compare-row .compare-cell{
        font-size:16px;
    }
}

/* Cena vrstica — izpostavljena */
.compare-row--price {
    background: #fff8f8;
}

.compare-row--price .compare-label {
    color: #d0352f;
}

.compare-row--price .compare-cell {
    font-weight: 700;
    font-size: 18px !important;
    color: #d0352f;
}

.compare-row--price .compare-cell s {
    font-weight: 400;
    font-size: 14px !important;
    color: #9CA3AF;
    margin-right: 6px;
}