/* ==========================================================================
   KOŠÍK A OBJEDNÁVKA
   ==========================================================================
   Tabuľka košíka, súhrn cien, formulár objednávky a výber dopravy.
   Načítava sa v resources/views/layouts/app.blade.php. Poradie je dôležité:
   base.css definuje premenné, ktoré používajú všetky ostatné moduly, a
   responzívne pravidlá sa vpisujú do hlavičky stránky až za všetky tieto
   súbory, aby prebili predvolené hodnoty. Skladá ich
   App\Services\VzhladService::cssObchodu() z hodnôt v Nastaveniach.
   ========================================================================== */

/* --------------------------------------------------------------------------
   9. CART AND CHECKOUT
   -------------------------------------------------------------------------- */
.cart-table { width: 100%; border-collapse: collapse; }

.cart-table th {
    text-align: left;
    padding: var(--space-3);
    border-bottom: 2px solid var(--color-border);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.cart-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.cart-table .thumb-sm { width: 60px; height: 60px; object-fit: contain; background: var(--color-bg-subtle);
    border-radius: var(--radius); }

.cart-table .num { text-align: right; white-space: nowrap; }

.totals-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--color-bg-subtle);
}

.totals-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; }
.totals-row.grand {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: 18px;
    font-weight: 700;
}

.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-6); align-items: start; }

/* --------------------------------------------------------------------------
   Súhrn objednávky sa posúva spolu so stránkou
   --------------------------------------------------------------------------
   Formulár pokladne je dlhý. Kým ho zákazník vypĺňal, súhrn aj tlačidlo
   "Objednať a zaplatiť" mu zmizli nad horným okrajom a musel sa kvôli nim
   vracať hore. Nahlásil to používateľ.

   position: sticky drží súhrn pri hornom okraji okna, kým sa posúva formulár
   vedľa neho. Tlačidlo je tak na dosah po celý čas.

   ZASTAVÍ SA AŽ POD HLAVIČKOU
   --------------------------------------------------------------------------
   Hlavička e-shopu je tiež prilepená a leží nad obsahom. Pri top: 16px sa
   súhrn zastavil za ňou a jeho nadpis aj prvé položky zoznamu sa schovali.
   --vyska-hlavicky drží jej skutočnú výšku, meria ju js/app.js.

   FUNGUJE TO VĎAKA align-items: start VYŠŠIE
   --------------------------------------------------------------------------
   Prilepený prvok sa smie posúvať len v rámci svojho rodiča. Keby sa bunka
   mriežky roztiahla na výšku formulára (čo je predvolené správanie), nemal by
   sa kam posúvať a nestalo by sa nič. Pri align-items: start má bunka výšku
   celého riadku mriežky, a to je presne tá dráha, po ktorej súhrn cestuje.

   PRI DLHOM KOŠÍKU SA ROLUJE SÁM
   --------------------------------------------------------------------------
   Pri mnohých položkách by bol súhrn vyšší než obrazovka a tlačidlo na jeho
   konci by sa nedalo dosiahnuť vôbec. Strop výšky s vlastným posúvaním to
   rieši - hore zostane prilepený a jeho obsah sa posúva vnútri.
   -------------------------------------------------------------------------- */
.checkout-layout > aside {
    position: sticky;
    top: calc(var(--vyska-hlavicky) + var(--space-4));

    max-height: calc(100vh - var(--vyska-hlavicky) - var(--space-6));
    overflow-y: auto;
}

.method-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
    cursor: pointer;
}
.method-option:hover { background: var(--color-bg-subtle); }
.method-option .method-price { margin-left: auto; font-weight: 700; white-space: nowrap; }

.fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-4); margin-bottom: var(--space-5); }
.fieldset > h2 { margin-bottom: var(--space-4); }   /* písmo H2 z nastavení Písma */

/* --------------------------------------------------------------------------
   Pätička košíka: tlačidlá vľavo, súčty vpravo
   --------------------------------------------------------------------------
   Definované ako trieda (nie inline v šablóne), aby to responzívne pravidlá
   z VzhladService::cssObchodu() vedeli pri užších šírkach preskládať pod seba.
   -------------------------------------------------------------------------- */
.cart-footer {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-6);
    align-items: start;
}

/* --- Hlavička košíka a pokladne: nadpis a kroky (x-checkout.kroky, Trello 937qIYUq) ------------------------------------------ */
.kr-hlavicka {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 0 25px;
    margin-bottom: 35px;
    border-bottom: 1px solid #DDDDDD;
}

.kr-hlavicka .kr-nadpis {
    margin: 0;
}

.kr-kroky {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    font-weight: 700;
    color: #4D4D4D;
}

.kr-kroky li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kr-kroky li + li::before {
    content: '›';
    margin-right: 12px;
    font-size: 26px;
    line-height: 1;
    color: #000000;
}

.kr-kroky a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.kr-kroky a:hover {
    text-decoration: underline;
}

.kr-kroky .je-aktivny {
    color: #E4202A;
}

.kr-cislo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #E4202A;
    color: #FFFFFF;
    font-size: 13px;
}

@media (max-width: 600px) {
    .kr-kroky {
        gap: 12px;
        font-size: 13px;
    }
}


/* --- Nákupný košík (Trello 937qIYUq, 29. 9. 2026) - cart/show.blade.php ------ */
.ks {
    padding-bottom: 60px;
}

.ks-doprava-zadarmo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px 20px;
    border: 1px solid #E3E6B0;
    border-radius: 6px;
    background: #FAFBE3;
    font-size: 20px;
    color: #4D4D4D;
}

.ks-doprava-zadarmo--chyba {
    border-color: #DDDDDD;
    background: #F2F2F2;
}

.ks-doprava-zadarmo img {
    width: 34px;
    height: 34px;
}

.ks-riadky {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ks-riadok {
    display: grid;
    grid-template-columns: 110px minmax(0, 1.6fr) 150px 210px 130px 130px 46px;
    align-items: center;
    gap: 20px;
    padding: 10px 10px 10px 10px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    background: #FFFFFF;
}

.ks-obrazok img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.ks-nazov {
    display: flex;
    flex-direction: column;
}

.ks-kod {
    font-size: 14px;
    color: #6E6E6E;
}

.ks-nazov a {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #000000;
    text-decoration: none;
}

.ks-nazov a:hover {
    text-decoration: underline;
}

.ks-upozornenie {
    margin-top: 4px;
    font-size: 13px;
    color: #E4202A;
}

.ks-popis {
    display: block;
    font-size: 14px;
    color: #6E6E6E;
}

.ks-sklad {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #E4202A;
}

.ks-sklad.je-skladom {
    color: #80BA3A;
}

.ks-sklad img {
    width: 34px;
    height: 34px;
}

.ks-pocet {
    text-align: center;
}

.ks-pocet-ovladanie {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ks-pocet-ovladanie input {
    width: 100px;
    height: 44px;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    font: inherit;
    font-size: 17px;
    text-align: center;
}

.ks-pocet-tlacidlo {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #CCCCCC;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #000000;
    cursor: pointer;
}

.ks-pocet-tlacidlo img {
    width: 22px;
    height: 22px;
}

.ks-cena {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.ks-cena strong {
    font-size: 20px;
    white-space: nowrap;
    color: #000000;
}

.ks-dph {
    font-size: 14px;
    color: #000000;
}

.ks .ks-odstranit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 6px;
    background: #E4202A;
}

.ks-odstranit img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

.ks-spodok {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin-top: 20px;
    align-items: stretch;
}

.ks-box {
    padding: 40px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    background: #FFFFFF;
}

.ks .ks-box-nadpis {
    margin: 0 0 6px;
}

.ks-box-text {
    margin: 0 0 22px;
    font-size: 16px;
}

.ks-zlava-formular {
    display: flex;
}

.ks-zlava-formular input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 18px;
    border: 1px solid #CCCCCC;
    border-right: 0;
    border-radius: 6px 0 0 6px;
    font: inherit;
    font-size: 16px;
}

.ks-zlava-tlacidlo {
    flex: none;
    height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 0 6px 6px 0;
    background: #000000;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    cursor: pointer;
}

.ks-suhrn {
    display: flex;
    flex-direction: column;
}

.ks-suhrn-riadok {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 20px;
    color: #4D4D4D;
}

.ks-suhrn-riadok--hlavny {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
}

.ks-suhrn-riadok--hlavny strong {
    font-size: 30px;
    white-space: nowrap;
}

.ks-rozpis {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    margin-top: 20px;
    border-top: 1px solid #DDDDDD;
}

.ks-rozpis-riadok {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #6E6E6E;
}

.ks-rozpis-sadzba {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 46px;
    border-radius: 4px;
    background: #F2F2F2;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
}

.ks-rozpis-popis {
    flex: 1;
}

.ks-rozpis-sumy {
    text-align: right;
}

.ks .ks-dalej {
    display: inline-flex;
    align-self: flex-end;
    align-items: center;
    gap: 10px;
    height: 50px;
    margin-top: 40px;
    padding: 0 20px;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .ks-riadok {
        grid-template-columns: 80px minmax(0, 1fr) auto;
        gap: 12px;
    }

    .ks-obrazok img {
        width: 80px;
        height: 80px;
    }

    .ks-spodok {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .ks-riadok {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .ks-box {
        padding: 24px 16px;
    }

    .ks-doprava-zadarmo {
        font-size: 16px;
    }
}

/* --- MOBILNÁ VERZIA KOŠÍKA (layout Vojto 1. 10. 2026) --------------------------
   Nadpis a kroky na stred; produkt ako karta: obrázok + kód a názov,
   dostupnosť na stred, Cena za kus | Cena celkovo, Počet (kôš / − , pole, +)
   - oddelené linkami; zľavový kód a súhrn na stred, tlačidlá na celú šírku. */
@media (max-width: 767px) {
    .kr-hlavicka {
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
        border-bottom: 0;
        text-align: center;
    }

    .kr-kroky {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 12px;
        font-size: 16px;
    }

    /* Šípka za krokom (nie pred ním) - pri zalomení neostane na začiatku riadka. */
    .kr-kroky li + li::before {
        content: none;
    }

    .kr-kroky li:not(:last-child)::after {
        content: '›';
        margin-left: 4px;
        font-size: 26px;
        line-height: 1;
        color: #000000;
    }

    .ks-doprava-zadarmo {
        font-size: 19px;
        line-height: 1.25;
    }

    .ks .ks-riadok {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "hlava hlava"
            "dost dost"
            "kus spolu"
            "pocet pocet";
        gap: 0;
        padding: 14px 16px;
        border-radius: 10px;
    }

    .ks .ks-obrazok {
        grid-area: hlava;
        align-self: start;
        justify-self: start;
    }

    .ks .ks-obrazok img {
        width: 110px;
        height: 110px;
    }

    .ks .ks-nazov {
        grid-area: hlava;
        padding: 0 0 14px 125px;
    }

    .ks .ks-dostupnost {
        grid-area: dost;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 12px 0;
        border-top: 1px solid #DDDDDD;
    }

    .ks .ks-cena--kus,
    .ks .ks-cena--spolu {
        padding: 12px 0;
        border-top: 1px solid #DDDDDD;
        text-align: center;
        align-items: center;
    }

    .ks .ks-cena--kus { grid-area: kus; }
    .ks .ks-cena--spolu { grid-area: spolu; }

    .ks .ks-pocet {
        grid-area: pocet;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 12px;
        border-top: 1px solid #DDDDDD;
    }

    /* Odobratie rieši kôš namiesto „−“ pri 1 kuse. */
    .ks .ks-odobrat {
        display: none;
    }

    .ks-spodok .ks-box {
        border-radius: 10px;
    }

    .ks-zlava .ks-box-nadpis {
        text-align: center;
    }

    .ks-zlava-formular {
        flex-direction: column;
        gap: 0;
    }

    .ks-zlava-formular input,
    .ks-zlava-tlacidlo {
        width: 100%;
    }

    .ks-suhrn-riadok {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ks-dalej {
        width: 100%;
        justify-content: center;
    }
}

/* --- Nové heslo zákazníka (Trello pEz6Llho) - auth/obnovit-heslo.blade.php --- */
.oh {
    max-width: 480px;
    padding-top: 30px;
    padding-bottom: 60px;
}

.oh .oh-nadpis {
    margin: 0 0 20px;
}

.oh-formular {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.oh-pole {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: #4D4D4D;
}

.oh-pole input {
    height: 44px;
    padding: 0 14px;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    font: inherit;
    font-size: 15px;
}

.oh-chyba {
    margin: 0;
    font-size: 14px;
    color: #E4202A;
}

.oh-napoveda {
    margin: 0;
    font-size: 13px;
    color: #6E6E6E;
}

.oh .oh-tlacidlo {
    align-self: flex-start;
    height: 46px;
    padding: 0 24px;
    border-radius: 6px;
}