/* ==========================================================================
   BOTTOM NAVIGATION BAR — Zobrazuje sa len na mobile (< 768px)
   ========================================================================== */

/* ==========================================================================
   1. HLAVNÝ WRAPPER
   ========================================================================== */

.bottom-nav {
    display: none; /* Skrytý na desktop a tablete */
}

@media (max-width: 767px) {
    /* Kompenzácia výšky bottom nav — aby obsah stránky nebol zakrytý */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    .bottom-nav {
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background-color: var(--text-white);
        border-top: 1px solid var(--border-primary);
        z-index: 400; /* Nad cart dropdown (201), nad navbar (200) */
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.07);
        -webkit-tap-highlight-color: transparent;
    }
}

/* ==========================================================================
   2. POLOŽKY (TABS)
   ========================================================================== */

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    padding: 8px 4px;
    background: none;
    border: none;
    color: var(--text-secondary, #a1a1a1);
    font-size: 10px;
    font-family: 'VolteRegular', sans-serif;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    user-select: none;
}

.bottom-nav-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.bottom-nav-item span {
    line-height: 1;
    white-space: nowrap;
}

/* Aktívna položka */
.bottom-nav-item.is-active,
.bottom-nav-item:focus-visible {
    color: var(--primary-color, #F39200);
    outline: none;
}

.bottom-nav-item.is-active svg {
    transform: translateY(-1px);
}

/* Tap efekt na dotykovom */
@media (hover: none) {
    .bottom-nav-item:active {
        color: var(--primary-color, #F39200);
        background-color: transparent;
    }
}

/* ==========================================================================
   3. BADGE (počet položiek v košíku)
   ========================================================================== */

.bottom-nav-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-nav-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--primary-color, #F39200);
    color: #fff;
    font-size: 9px;
    font-family: 'VolteSemibold', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   4. ŠPECIÁLNY TAB — Kategórie (zvýraznený keď je overlay otvorený)
   ========================================================================== */

.bottom-nav-item--categories.is-open {
    color: var(--primary-color, #F39200);
}

/* ==========================================================================
   5. KOMPENZÁCIA VÝŠKY PRE CONTENT (aby bottom nav nezakrýval obsah)
   ========================================================================== */

/* Footer dostáva extra padding na mobile (ak nemá padding-bottom sám) */
@media (max-width: 767px) {
    footer {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
    }
}


/* ==========================================================================
   DOPLNKY K _bottom-nav.css
   Pridaj na koniec existujúceho _bottom-nav.css
   ========================================================================== */


/* ==========================================================================
   [Issue 3] MOBILE CART BOTTOM SHEET
   Štruktúra: .mobile-cart-sheet (wrapper) → backdrop + panel
   HTML je umiestnený v cartSummary.latte (vnútri {snippet cartNavSummary}).
   JS toggle je v bottomNav.latte.
   ========================================================================== */

/* Na desktop a tablete je wrapper neviditeľný — iba pre mobile */


@media (max-width: 767px) {

    

    /* --- Jedna položka --- */
    .mobile-cart-item {
        display:      flex;
        align-items:  center;
        gap:          10px;
        padding:      12px 0;
        border-bottom: 1px solid var(--border-primary);
        position:     relative;
    }

    .mobile-cart-item:last-child {
        border-bottom: none;
    }

    /* Tlačidlo ×  (odstrániť položku) */
    .mobile-cart-item-remove {
        position:        absolute;
        top:             10px;
        right:           0;
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           26px;
        height:          26px;
        border-radius:   999px;
        background:      var(--surface-smoke);
        border:          1px solid var(--border-primary);
        color:           #858584;
        text-decoration: none;
        flex-shrink:     0;
        transition:      background-color 0.15s;
    }

    .mobile-cart-item-remove:active {
        background: #FEF0ED;
        color:      #E53012;
    }

    /* Náhľad produktu */
    .mobile-cart-item-img {
        width:       52px;
        height:      52px;
        object-fit:  contain;
        flex-shrink: 0;
        border-radius: 8px;
        border:      1px solid var(--border-primary);
        background:  var(--text-white);
    }

    /* Text info o produkte */
    .mobile-cart-item-info {
        flex:         1;
        min-width:    0;
        padding-right: 32px; /* miesto pre × tlačidlo */
    }

    .mobile-cart-item-name {
        font-size:   13px;
        color:       var(--text-primary);
        line-height: 1.3;
        margin-bottom: 4px;
        display:     -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow:    hidden;
    }

    .mobile-cart-item-price {
        font-family: 'VolteSemibold', sans-serif;
        font-size:   12px;
        color:       var(--text-primary);
    }

    .mobile-cart-item-price--free {
        color: #10B981;
    }

    /* Badge DARČEK */
    .mobile-cart-gift-badge {
        display:       inline-block;
        font-size:     9px;
        font-weight:   bold;
        background:    var(--primary-color, #F39200);
        color:         white;
        padding:       2px 5px;
        border-radius: 4px;
        vertical-align: middle;
        margin-left:   4px;
    }

    /* Statický počet pre darčeky */
    .mobile-cart-qty-text {
        font-family: 'VolteSemibold', sans-serif;
        font-size:   13px;
        color:       var(--text-primary);
        white-space: nowrap;
    }

    /* Counter wrapper v mobile sheet — menšie rozmery ako na desktop */
    .mobile-cart-item .modern-amount {
        gap: 4px;
    }

    .mobile-cart-item .btn-modern-counter {
        width:  28px;
        height: 28px;
    }
}