/**
 * Minikošík v hlavičke – nový vzhľad.
 *
 * Etapa 1: farby, typografia, rozostupy. Pracuje výhradne s údajmi, ktoré
 * šablóna už dostáva (obrázok, názov, množstvo, cena, spolu) – nič nové
 * z backendu sa nepridáva.
 *
 * Pôvodne bol panel tmavomodrý (#292f36) s bielym textom a nadpismi
 * verzálkami. Meníme ho na svetlý.
 *
 * Súbor sa načítava z _blocks/top-minicart.latte, takže platí na všetkých
 * stránkach. Do web.css ani global.css nesiahame.
 */

/* --- Suma v hlavičke ------------------------------------------------------ */
/*
 * Suma a mena sú dva <span> vnútri <p>, ktoré je na mobile široké 31 px –
 * „3041“ a „Kč“ sa preto lámali pod seba. Držíme ich na jednom riadku.
 */
.header__action__cart p {
    white-space: nowrap;
}

.header__action__cart p .currency {
    margin-left: 3px;
}

/* --- Panel ako zásuvka sprava --------------------------------------------- */
/*
 * Framework prepína triedy is-visible / is-hidden a k tomu display block/none.
 * Kvôli vysúvaniu potrebujeme prvok stále v rozložení, preto display držíme
 * natvrdo a zatvorený stav riešime posunom mimo obrazovku.
 *
 * visibility: hidden je dôležitá – bez nej by zatvorená zásuvka ostala
 * čitateľná pre čítačky obrazovky a dala by sa do nej tabovať.
 */
.headerCart__dropdown {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0;
    height: 100%;
    width: 400px;
    max-width: 100%;
    padding: 0;
    display: flex !important;
    flex-direction: column;
    background-color: #ffffff;
    border: 0;
    border-left: 1px solid #e5e7eb;
    border-radius: 0;
    box-shadow: -20px 0 45px rgba(17, 24, 39, 0.16);
    overflow: hidden;
    z-index: 1200;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.26s ease, visibility 0.26s;
    animation: none !important;
}

.headerCart__dropdown.is-visible,
.headerCart__dropdown.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 500px) {
    .headerCart__dropdown {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .headerCart__dropdown {
        transition: none;
    }
}

/* Hlavička hore, zoznam sa rolluje, súčet a tlačidlo držia dole. */
.headerCart__dropdown .headerCart__dropdown--container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* --- Prekrytie pozadia ---------------------------------------------------- */

.mc-overlay {
    position: fixed;
    inset: 0;
    z-index: 1199;
    background-color: rgba(17, 24, 39, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.26s ease, visibility 0.26s;
}

.mc-overlay.is-on {
    opacity: 1;
    visibility: visible;
}

/* --- Zatváracie tlačidlo -------------------------------------------------- */

.mc-close {
    width: 32px;
    height: 32px;
    margin-left: 10px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mc-close:hover {
    background-color: #f3f5f7;
    color: #111827;
}

/* --- Hlavička ------------------------------------------------------------- */

.headerCart__dropdown .headerCart__dropdown__title {
    padding: 15px 18px;
    color: #111827;
    border-bottom: 1px solid #eef0f3;
}

.headerCart__dropdown .headerCart__dropdown__title .text--h5 {
    font-size: 1.7rem;
    font-weight: 700;
    color: #111827;
}

.headerCart__dropdown .total-items {
    height: 22px;
    min-width: 22px;
    width: auto;
    padding: 0 7px;
    border-radius: 999px;
    background-color: #eaf3fb;
    color: #167ac6;
    font-size: 12px;
    font-weight: 700;
}

/* --- Zoznam položiek ------------------------------------------------------ */

.headerCart__dropdown .headerCart__dropdown__products {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    padding-right: 0;
    border-radius: 0;
    overflow-y: auto;
}

.headerCart__singleProduct {
    align-items: flex-start;
    padding: 14px 18px;
    border-radius: 0;
    background-color: transparent;
}

.headerCart__singleProduct:not(:last-child) {
    margin-bottom: 0;
    border-bottom: 1px solid #f1f3f5;
}

.headerCart__singleProduct:hover {
    background-color: #f8fafc;
}

.headerCart__singleProduct .headerCart__singleProduct__preview {
    margin-right: 14px;
}

/*
 * object-fit: contain, nie cover – obaly produktov sú vysoké a cover ich
 * orezával po stranách.
 */
.headerCart__singleProduct .headerCart__singleProduct__preview img {
    width: 48px;
    height: 62px;
    object-fit: contain;
    background-color: #ffffff;
    border: 1px solid #f1f3f5;
    border-radius: 6px;
}

.headerCart__singleProduct .headerCart__singleProduct__title {
    display: block;
    text-transform: none;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.35;
    color: #1f2937;
}

.headerCart__singleProduct .headerCart__singleProduct__title:hover {
    color: #167ac6;
}

.headerCart__singleProduct .headerCart__singleProduct__quantity {
    margin-top: 8px;
}

/* Popisok „Množstvo“ – pri krokovači je nadbytočný. */
.headerCart__singleProduct .headerCart__singleProduct__quantity > span {
    display: none;
}

/* --- Krokovač množstva ---------------------------------------------------- */
/*
 * Trieda mc-stepper pridáva minicart.js až vtedy, keď sa krokovač podarí
 * postaviť. Kým ju pole nemá, ostáva pôvodné rozhranie s tlačidlom OK.
 */
.headerCart__singleProduct .quantityInput.mc-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background-color: #ffffff;
}

.headerCart__singleProduct .quantityInput.mc-stepper .mc-step {
    width: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #9ca3af;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.headerCart__singleProduct .quantityInput.mc-stepper .mc-step:hover:not(:disabled) {
    background-color: #f3f5f7;
    color: #167ac6;
}

.headerCart__singleProduct .quantityInput.mc-stepper .mc-step:disabled {
    color: #dfe3e8;
    cursor: default;
}

.headerCart__singleProduct .quantityInput.mc-stepper input[type="number"] {
    width: 34px;
    min-width: 0;
    height: 100%;
    padding: 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
    color: #111827;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent;
    -moz-appearance: textfield;
    appearance: textfield;
}

.headerCart__singleProduct .quantityInput.mc-stepper input[type="number"]:focus {
    outline: none;
}

.headerCart__singleProduct .quantityInput.mc-stepper input[type="number"]::-webkit-outer-spin-button,
.headerCart__singleProduct .quantityInput.mc-stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* OK schovávame až keď krokovač naozaj existuje. */
.headerCart__singleProduct .quantityInput.mc-stepper button.ok {
    display: none;
}

.headerCart__singleProduct .headerCart__singleProduct__footer {
    margin-top: 8px;
    color: #111827;
}

.headerCart__singleProduct .headerCart__singleProduct__footer .amount,
.headerCart__singleProduct .headerCart__singleProduct__footer .currency {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
}

.headerCart__singleProduct .headerCart__singleProduct__footer .delete {
    color: #9ca3af;
}

.headerCart__singleProduct .headerCart__singleProduct__footer .delete:hover {
    color: #e84c3d;
}

/* --- Súčet ---------------------------------------------------------------- */

.headerCart__dropdown .headerCart__dropdown__total {
    padding: 14px 18px;
    color: #111827;
    background-color: #fbfcfd;
    border-top: 1px solid #eef0f3;
}

/* Kým beží uloženie množstva, súčet stlmíme – inak by chvíľu ukazoval starú sumu. */
.headerCart__dropdown .headerCart__dropdown__total.mc-pending {
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

.headerCart__dropdown .headerCart__dropdown__total > p:first-child {
    font-size: 1.4rem;
    color: #6b7280;
}

.headerCart__dropdown .headerCart__dropdown__total .amount,
.headerCart__dropdown .headerCart__dropdown__total .currency {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111827;
}

/* --- Tlačidlo do košíka --------------------------------------------------- */

/*
 * Tlačidlo nesie utilitnú triedu --w-100 so šírkou 100 % cez !important.
 * S okrajmi by pretekalo z panela, preto ju musíme prebiť rovnako.
 */
.headerCart__dropdown .headerCart__dropdown--container > .btn {
    width: calc(100% - 36px) !important;
    margin: 0 18px 18px;
    height: 46px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: none;
}

/* --- Prázdny košík -------------------------------------------------------- */

.headerCart__dropdown .emptyMessage {
    padding: 28px 18px;
    color: #6b7280;
}

.headerCart__dropdown .emptyMessage i {
    color: #cbd2d9;
}