/**
 * Primerjalna tabela izdelkov (nov tab na produktni strani).
 * Glej includes/class-ipo-custom-comparison-table.php
 *
 * POMEMBNO: ta tabela NAMENOMA ne deli razreda ".comparison-table" ali
 * ".table-wrapper" z drugimi (rocno izdelanimi) primerjalnimi tabelami na
 * strani - tista sitewide pravila (v Avada-Child-Theme/style.css) vsiljujejo
 * "width:1800px !important" in "table-layout:auto !important", kar je
 * popolnoma podrlo sirino stolpcev tukaj. Ta tabela je zato v celoti
 * neodvisna (lasten razred, brez podedovanih pravil).
 */
.ipoteh-ct-wrapper {
    margin: 16px 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
}

table.ipoteh-ct-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

/* Labela stolpec (levo) - fiksna sirina v pikslih prek <colgroup>, kar je
   edini zanesljiv nacin za doloceno sirino stolpca pri table-layout:fixed. */
table.ipoteh-ct-table col.ipoteh-ct-label-col-width {
    width: 150px;
}

table.ipoteh-ct-table thead th {
    background: #1c1c1e;
    color: #fff;
    padding: 16px 12px 14px;
    vertical-align: bottom;
    text-align: center;
    border: none;
    border-bottom: 3px solid #2563eb;
}
table.ipoteh-ct-table thead th.ipoteh-ct-label-col {
    background: #1c1c1e;
}

table.ipoteh-ct-table tbody td {
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 400;
    color: #2c2c2c;
    border: none;
}

table.ipoteh-ct-table tbody td.ipoteh-ct-label-col {
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    background: #eef0f2;
    white-space: nowrap;
}

/* Labela stolpec ostane viden (prilepljen levo), ko uporabnik vodoravno
   drsi skozi izdelke - drugace bi ob drsenju izgubil kontekst, katera
   vrstica je katera lastnost. Ozadje na teh celicah je ze neprosojno
   (glej zgoraj/spodaj), zato "sticky" ne povzroca prosevanja vsebine. */
table.ipoteh-ct-table thead th.ipoteh-ct-label-col,
table.ipoteh-ct-table tbody td.ipoteh-ct-label-col {
    position: sticky;
    left: 0;
    z-index: 2;
}

table.ipoteh-ct-table tbody tr:nth-child(odd) td:not(.ipoteh-ct-label-col) {
    background: #ffffff;
}
table.ipoteh-ct-table tbody tr:nth-child(even) td:not(.ipoteh-ct-label-col) {
    background: #f6f7f8;
}

/* Cena - zadnja vrstica, namerno izpostavljena (boldano, drugacna barva) */
table.ipoteh-ct-table tbody tr.ipoteh-ct-price-row td {
    font-weight: 700;
    font-size: 14px;
    color: #1c1c1e;
    border-top: 2px solid #e5e5e5;
}
table.ipoteh-ct-table tbody tr.ipoteh-ct-price-row .woocommerce-Price-amount {
    color: #2563eb;
}
table.ipoteh-ct-table tbody tr.ipoteh-ct-price-row ins {
    text-decoration: none;
}
table.ipoteh-ct-table tbody tr.ipoteh-ct-price-row del .woocommerce-Price-amount {
    color: #9a9a9a;
    font-weight: 400;
    font-size: 12px;
}

/* Vsi stolpci v glavi imajo IDENTICNO postavitev (znacka-slika-naslov), da so
   slike in naslovi med seboj poravnani ne glede na to, ali je stolpec
   "trenutni izdelek" (ki ima dodatno znacko) ali ne, in ne glede na to, ali
   se naslov prelomi v 1 ali 2 vrstici - vsak razdelek ima fiksno rezervirano
   visino (glej spodaj), zato se "vertical-align:bottom" na <th> obnasa
   predvidljivo za vse stolpce enako. */
.ipoteh-ct-product-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ipoteh-ct-current-badge {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
}
/* Pri stolpcih, ki NISO trenutni izdelek, znacko samo skrijemo (ne
   odstranimo iz postavitve) - tako vsi stolpci rezervirajo enako visino
   na vrhu, ne glede na to, kateri stolpec je trenutni izdelek. */
.ipoteh-ct-current-badge--hidden {
    visibility: hidden;
}
.ipoteh-ct-product-head img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    display: block;
    background: #fff;
    border-radius: 6px;
    padding: 5px;
}
.ipoteh-ct-product-title {
    min-height: 2.6em;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.ipoteh-ct-product-title a {
    color: #fff;
    text-decoration: none;
}
.ipoteh-ct-product-title a:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    /* Namesto "table-layout:fixed" + "width:100%" (ki bi VSE izdelke stisnil
       v sirino zaslona, ne glede na to, koliko jih je - natanko tezava s
       screenshota), na mobilnem vsak stolpec izdelka dobi svojo FIKSNO
       sirino (v "vw" enotah) - tako sta naenkrat vidna cca. 2 izdelka,
       za ostale pa uporabnik vodoravno podrsa (glej ".ipoteh-ct-wrapper"
       zgoraj, ki ze ima "overflow-x:auto"). */
    table.ipoteh-ct-table {
        table-layout: auto;
        width: auto;
        min-width: 100%;
    }
    table.ipoteh-ct-table col.ipoteh-ct-label-col-width {
        width: 88px;
    }
    table.ipoteh-ct-table thead th:not(.ipoteh-ct-label-col),
    table.ipoteh-ct-table tbody td:not(.ipoteh-ct-label-col) {
        width: 42vw;
        min-width: 42vw;
    }
    table.ipoteh-ct-table thead th,
    table.ipoteh-ct-table tbody td {
        padding: 8px 10px;
        font-size: 12px;
    }
    .ipoteh-ct-product-head img {
        width: 62px;
        height: 62px;
    }
    .ipoteh-ct-product-title {
        font-size: 11.5px;
        min-height: 2.4em;
    }
}