/* Bolago-M Custom Styles for Multikart Theme */

/* =========================================
   QUANTITY INPUT - ujednačen izgled product/cart
   ========================================= */

/* Product strana - dugmad da izgledaju kao na korpi (border umesto box-shadow) */
.product-page-details .qty-section .qty-box .input-group button {
    border: 1px solid #dee2e6 !important;
    box-shadow: none !important;
    background-color: #fff !important;
}

/* Ukloni outer border sa grupe jer Bootstrap input-group već ima svoje */
.product-page-details .qty-section .qty-box .input-group {
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* Input unutar grupe - border kao Bootstrap default */
.product-page-details .qty-section .qty-box .input-group input {
    border: 1px solid #dee2e6 !important;
    background-color: #fff !important;
}

/* Tabela varijacija na product strani - isti stil */
.cart-table .qty-box .input-group button {
    border: 1px solid #dee2e6 !important;
    box-shadow: none !important;
    background-color: #fff !important;
}
.cart-table .qty-box .input-group input {
    border: 1px solid #dee2e6 !important;
    background-color: #fff !important;
}
/* Sprečava prelamanje qty dugmadi kad je kolona sužena */
.cart-table .qty-box .input-group {
    flex-wrap: nowrap !important;
    min-width: 110px;
}


.qty-box input[type=number]::-webkit-inner-spin-button,
.qty-box input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qty-box input[type=number] {
    -moz-appearance: textfield;
}

/* =========================================
   PRODUCT TITLE - ujednačena visina (1 ili 2 reda)
   ========================================= */
.basic-product .product-title {
    min-height: 2.8em;
}

/* =========================================
   BOOTSTRAP NOTIFY ALERT
   ========================================= */

/* Notify postavlja display:inline-block inline, override na flex da ikona i tekst stoje u redu */
div[data-notify="container"].alert-success {
    display: flex !important;
}



/* =========================================
   SIDEBAR MENU
   ========================================= */

/* Glavni sidebar meni MORA biti IZNAD sticky sidebar-a iz "Izdvajamo" */
.sidenav {
    z-index: 99999 !important;  /* Viši od sticky sidebar-a (9999) */
}

/* Sidebar NAV */
.sidenav nav {
    z-index: 100001 !important;  /* Iznad overlay-a (10000) — nav sadržaj vidljiv */
    position: relative !important;  /* Containing block za sub-menije */
    overflow-anchor: none;
    scroll-behavior: auto !important;
}

/* FIX: JS ubacuje .sn-scroll-inner div između nav i #sub-menu(.pixelstrap),
   čime se kida CSS > direktni child selektor iz style.css:
   ".sidenav nav > .pixelstrap > li > a" → ne matchuje više.
   Ove dvije rule ga nadomještaju. */
.sidenav nav .sn-scroll-inner > .pixelstrap > li > .has-submenu,
.sidenav nav .sn-scroll-inner > .pixelstrap > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    padding: 5px 20px !important;
}

/* Sidebar overlay - pokriva CELU stranicu */
.sidenav .sidebar-overlay {
    z-index: 10000 !important;  /* Iznad sticky sidebar-a (1), ali ispod nav-a (100001) */
}

.sidenav.open-side .sidebar-overlay {
    left: 0 !important;
    width: 100vw !important;
}

/* Mega meni — z-index samo, pozicija se nasljeđuje iz jedinstvene fixed rule ispod */
.sidenav #sub-menu li.mega > ul.mega-menu,
.sidenav #sub-menu li.mega > ul.full-mega-menu {
    z-index: 100000 !important;
}

/* =========================================
   FIX: Centriranje dugmeta u Recommendations Tabs
   ========================================= */

/* Ukloni margine koje slider dodaje */
.theme-tab .game-product .product-m .slick-slide > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Dugme centralno - margin auto override */
.theme-tab .game-product .basic-product.theme-product-6 .addtocart_btn {
    margin-left: auto !important;
    margin-right: auto !important;
}
.banner-sidebar {margin-bottom:calc(17px + 11*(100vw - 320px) / 1600)}
.napomena {padding: 13px 29px;    color: #fff;    letter-spacing: 0.05em;    font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1920 - 320)));    border: 2px solid #dd1018;    background-image: linear-gradient(30deg, rgba(221, 16, 24, 0.5) 0%, rgba(237, 28, 36, 0.7) 100%);    background-size: 850px;    background-repeat: no-repeat;    background-position: 0;    -webkit-transition: background 300ms ease-in-out;    transition: background 300ms ease-in-out;}
.cart-table tbody td {    vertical-align: middle;}
.cart-table .price strong {color:#ed1c24; text-align: center; display: block;}
.extra-delivery {background: #e3f2fd; color: #1565c0; padding: 2px 8px; border-radius: 4px; display: inline-block; font-size: 12px;}

/* Pregled porudžbine (carttotal.php) — šira leva kolona, poravnanje levo
   Selektor .cart-totals .table th pogađa samo carttotal.php (quantities.php koristi td) */
.cart-section .cart-totals .table th,
.cart-section .cart-totals .table td {
    text-align: left !important;
}
.cart-section .cart-totals .table th {
    white-space: nowrap;
    font-weight: normal;
    width: 55%;
}
.cart-section .cart-totals .table td:first-child {
    white-space: nowrap;
    width: 55%;
}
.cart-section .cart-totals .table td.text-end {
    text-align: right !important;
    white-space: nowrap;
}

/* Ograniči kolonu Naziv artikla da ne suzi Cenu, Količinu i Akciju */
.cart-table td:nth-of-type(2) {
    width: 30%;
    word-break: break-word;
}

/* =====================================================
   SLIČNI PROIZVODI — fix za 1 proizvod (Slick ne inicijalizuje)
   JS preskače slick() ako ima <= 1 dete, pa .product-5 ostaje
   bez layout-a. :not(.slick-initialized) hvata taj slučaj.
   ===================================================== */
.product-5:not(.slick-initialized) {
    display: flex;
    flex-wrap: wrap;
}
.product-5:not(.slick-initialized) > * {
    flex: 0 0 calc(100% / 5);
    max-width: calc(100% / 5);
    padding: 0 15px;
}
@media (max-width: 991px) {
    .product-5:not(.slick-initialized) > * {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Pregled porudžbine - smanjen padding redova */
.cart-section tfoot tr.pregled-row td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Mobilni: ceo tfoot sakriven, mobilni div preuzima */
@media (max-width: 767.98px) {
    .cart-section .cart-table tfoot {
        display: none !important;
    }

    /* Pregled porudžbine — cena "Ukupno za naplatu" ne prelama na mobilnom */
    .cart-section .cart-totals .table .fs-5 {
        font-size: 1rem !important;
        font-weight: bolder !important;
    }

    /* Mobilni quantities — h2 cena u red-text ćeliji ne prelama */
    .cart-section .cart-totals td.red-text h2 {
        font-size: 1rem !important;
        font-weight: bolder !important;
        margin: 0;
    }

    /* Checkout dugmad — puna širina na mobilnom */
    .continue-to-delivery,
    .continue-to-billing,
    .continue-to-placeorder {
        width: 100% !important;
    }

    /* Pregled porudžbine — dozvoli lomljenje teksta na mobilnom */
    .cart-section .cart-totals .table td:first-child,
    .cart-section .cart-totals .table td.text-end {
        white-space: normal;
    }
    .cart-buttons .col-6.offset-6 {
        width: 100%;
        margin-left: 0;
        text-align: center ! important;
    }
}



/* =====================================================
   MOBILE KATEGORIJE — horizontalni pill scroll
   Breakpoint: ispod Bootstrap lg (< 992px)
   ===================================================== */

@media (max-width: 991.98px) {

    /* --- Sidebar wrapper --- */
    .left-sidebar {
        margin-bottom: 1.25rem;
    }

    /* Deaktivira sticky pozicioniranje na mobilnom */
    .left-sidebar .sticky-sidebar {
        position: static !important;
        top: auto !important;
    }

    /* --- Nav lista: horizontalni scroll strip --- */
    ul#category-menu.nav-sidebar {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.5rem;
        padding: 0.375rem 0 0.75rem;

        /* Sakrij scrollbar vizuelno */
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

    ul#category-menu.nav-sidebar::-webkit-scrollbar {
        display: none;
    }

    /* --- Nav item: ne sme da prelomi --- */
    ul#category-menu.nav-sidebar .nav-item {
        flex: 0 0 auto;
        width: auto;
    }

    /* --- Pill tab stilizacija --- */
    ul#category-menu.nav-sidebar .nav-link.category-link {
        display: inline-block;
        white-space: nowrap;
        padding: 0.375rem 1rem;
        border: 1px solid #eee;
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--theme-color);
        background: #fff;
        line-height: 1.4;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    /* Aktivna / hover kategorija */
    ul#category-menu.nav-sidebar .nav-link.category-link.active,
    ul#category-menu.nav-sidebar .nav-link.category-link:hover {
        background:  var(--theme-color);
        color: #fff;
        border-color: var(--theme-color);
        font-weight: 700;
    }

}
/* =====================================================
   FOOTER — payment card logos mobile fix
   ===================================================== */

.payment-card-bottom {
    flex-wrap: wrap;        /* dozvoli prelamanje u red */
    justify-content: center; /* centriraj na mobilnom */
    gap: 0.5rem;
}

/* Skaliranje samih logotipa */
.payment-card-bottom a img,
.payment-card-bottom a svg {
    max-height: 50px;
    width: auto;
}

/* Ako su inline elementi bez img/svg unutra */
.payment-card-bottom a {
    display: inline-flex;
    align-items: center;
    flex-shrink: 1;        /* dozvoli skupljanje */
}

/* Mobile — dodatno smanjivanje ako je i dalje tijesno */
@media (max-width: 575.98px) {
    .payment-card-bottom {
        justify-content: center;
        gap: 0.375rem;
    }

    .payment-card-bottom a img,
    .payment-card-bottom a svg {
        max-height: 22px;
    }
}
.order-preview {    height: auto !important;    display: flex;    flex-direction: column;}
.checkout-page .order-preview > section, .cart-page .cart-preview > section  {
    flex-grow: 1;
    padding-top: 0;
}
.order-preview-sticky {
    position: sticky;
    top: 107px;
}
.cart-section .theme-card .form-box .form-control.is-invalid {
    border: 1px solid #ed1c24;
    box-shadow: none;

}


.cart-table td.delivery-info a {

    width: calc(30px + (40 - 30) * ((100vw - 320px) / (1920 - 320)));
    height: calc(30px + (40 - 30) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 100%;
    color:#fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-shadow: 0px 5px 12px 0px rgba(155, 155, 155, 0.05);
    box-shadow: 0px 5px 12px 0px rgba(155, 155, 155, 0.05)
}
.cart-table td.delivery-info a.free-delivery {   --bs-text-opacity: 1; background-color:  rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important; }
.cart-table td.delivery-info a.free-delivery-if {    background-color:  var(--theme-color)}

.autocomplete-suggestions {
    position: absolute !important;
    z-index: 999999;
    padding: 20px;
}
.autocomplete-suggestion .info {
    height: auto !important;
    max-height: 50px !important;
}
.autocomplete-suggestion .name a {
    color: #222;
}
.autocomplete-suggestion .name a:hover {
    color: #ed1c24 !important;
}

#mouse-tooltip {
    background: rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(4px);
    color: #333 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    padding: 10px 14px;
    max-width: 200px;
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 999999;
}
@media (max-width: 760px) {

    .table-responsive {
        overflow: visible !important;
        padding: 0;
    }

    .cart-table {
        width: 100% !important;
        min-width: unset !important;
    }
    .cart-section .cart-table {border: none !important; }
    .cart-table thead {
        display: none;
    }

    /* Resetuj desktop width na mobilnom */
    .cart-table td:nth-of-type(2) {
        width: auto;
    }

    /* ---- VARIATION TABELA — grid layout (opšti cart-table) ---- */

    .cart-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-bottom: 15px;
        padding: 12px;
        border: 1px solid #eee;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        width: 100%;
    }

    /* Slika — puna širina, red 1 (kad postoji) */
    .cart-table .product-child-image {
        grid-column: 1 / -1;
        grid-row: 1;
        border: none;
        padding: 0 0 8px 0;
        text-align: center;
    }

    /* Naziv — puna širina, red 2 */
    .cart-table td:nth-of-type(2) {
        grid-column: 1 / -1;
        grid-row: 2;
        border: none;
        padding: 4px 0;
    }

    /* Šifra — puna širina, red 3 */
    .cart-table td:nth-of-type(3) {
        grid-column: 1 / -1;
        grid-row: 3;
        border: none;
        padding: 0 0 4px 0;
        font-size: 13px;
        color: #999;
    }

    /* Jed. mere, Dostupnost, Cena — centriran tekst i labela */
    .cart-table td:nth-of-type(4),
    .cart-table td:nth-of-type(5),
    .cart-table td:nth-of-type(6) {
        border: none;
        padding: 4px 0;
        font-size: 13px;
        text-align: center;
        align-self: center;
    }

    .cart-table td:nth-of-type(4):before,
    .cart-table td:nth-of-type(5):before,
    .cart-table td:nth-of-type(6):before {
        color: #999;
        font-size: 11px;
        display: block;
        text-align: center;
    }

    /* Red 4: Jed. mere (levo) | Dostupnost (desno) */
    .cart-table td:nth-of-type(5) {
        grid-column: 1;
        grid-row: 4;
    }

    .cart-table td:nth-of-type(5):before {
        content: "Jed. mere:";
    }

    .cart-table td:nth-of-type(4) {
        grid-column: 2;
        grid-row: 4;
    }

    .cart-table td:nth-of-type(4):before {
        content: "Dostupnost:";
    }

    .cart-table td:nth-of-type(4) p {
        font-size: 11px;
        margin: 0;
    }

    /* Red 5: Cena (levo) | Količina (desno) */
    .cart-table td:nth-of-type(6) {
        grid-column: 1;
        grid-row: 5;
    }

    .cart-table td:nth-of-type(6):before {
        content: "Cena:";
    }

    .cart-table td:nth-of-type(7) {
        grid-column: 2;
        grid-row: 5;
        border: none;
        padding: 4px 0;
        align-self: center;
        display: flex;
        justify-content: flex-end;
    }

    /* Red 6: Dugme (levo) | Ikona dostave (desno) */
    .cart-table td:nth-of-type(8) {
        grid-column: 1;
        grid-row: 6;
        border: none;
        padding: 4px 0;
        align-self: center;
    }

    .cart-table td:nth-of-type(8) .btn {
        width: 100%;
        font-size: 12px;
        padding: 8px 10px;
        white-space: nowrap;
    }

    .cart-table td:nth-of-type(9) {
        grid-column: 2;
        grid-row: 6;
        border: none;
        padding: 4px 0;
        align-self: center;
        text-align: right;
    }

    .cart-table td.delivery-info {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ---- CART STRANICA — block layout override (viša specifičnost) ---- */

    .main-cart-table .cart-table,
    .main-cart-table .cart-table tbody {
        display: block;
    }

    .main-cart-table .cart-table tbody tr {
        display: block;
        position: relative;
        margin-bottom: 15px;
        padding: 12px;
        border: 1px solid #eee;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        width: 100%;
    }

    .main-cart-table .cart-table tbody tr td:first-child {
        display: block;
        text-align: center;
        padding: 0 0 10px 0;
        border: none;
    }

    .main-cart-table .cart-table tbody tr td:first-child img {
        max-width: 140px;
        height: auto;
    }

    .main-cart-table .cart-table td:nth-of-type(2) {
        display: block;
        width: auto !important;
        text-align: center;
        border: none;
        padding: 0;
    }

    .main-cart-table .cart-table .mobile-cart-content .col:last-child {
        position: absolute !important;
        top: 10px;
        right: 10px;
        width: auto !important;
        flex: none !important;
        padding: 0 !important;
    }

    .main-cart-table .cart-table .mobile-cart-content {
        justify-content: center;
        margin-top: 10px;
    }

    .main-cart-table .cart-table .mobile-cart-content .qty-box .input-group .form-control {
        width: 60px;
    }
    .main-cart-table .cart-table .mobile-cart-content .col.table-price .amount,   .main-cart-table .cart-table .mobile-cart-content .table-quantity,   .main-cart-table .cart-table .mobile-cart-content .table-total .amount {
        white-space: nowrap;
    }


    /* ---- FAVS TABELA — kartice na mobilnom ---- */
    .favs-table thead {
        display: none;
    }

    .favs-table tbody tr {
        display: block;
        position: relative;
        margin-bottom: 15px;
        padding: 12px;
        border: 1px solid #eee;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        width: 100%;
    }

    /* Slika — centrirana */
    .favs-table tbody tr td:first-child {
        display: block;
        text-align: center;
        padding: 0 0 10px 0;
        border: none;
    }

    /* Naziv — puna širina */
    .favs-table tbody tr td:nth-of-type(2) {
        display: block;
        width: auto !important;
        text-align: center;
        border: none;
        padding: 0;
    }
    .favs-table tbody tr td h2 {font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320))); white-space: nowrap;}
    .favs-table tbody tr td p {margin-bottom: .5rem;}
    .favs-table .mobile-cart-content {margin-top: 10px; align-items: center; justify-content: center;}
    .dashboard-section .wallet-table .table-responsive {border: none;}

    /* Sakrij desktop kolone (Cena, Dostupnost, Akcija) */
    .favs-table tbody tr td:nth-of-type(3),
    .favs-table tbody tr td:nth-of-type(4),
    .favs-table tbody tr td:nth-of-type(5) {
        display: none;
    }

    /* Order tabela: ikona oka — centrirana */
    .order-table tbody tr td:first-child {
        display: block;
        text-align: center;
        padding: 10px 0 5px 0;
        border: none;
    }

    /* Order tabela: broj narudžbine sa mobilnim blokom */
    .order-table tbody tr td:nth-of-type(2) {
        display: block;
        width: auto !important;
        border: none;
        padding: 0 12px 10px 12px;
    }

    /* Order tabela: broj narudžbine u td:nth-of-type(2) > span — sakrij desktop verziju */
    .order-table tbody tr td:nth-of-type(2) > span {
        display: none;
    }

    /* Sakrij desktop kolone za order tabelu (Datum, Proizvoda, Iznos, Status, Praćenje) */
    .order-table tbody tr td:nth-of-type(3),
    .order-table tbody tr td:nth-of-type(4),
    .order-table tbody tr td:nth-of-type(5),
    .order-table tbody tr td:nth-of-type(6),
    .order-table tbody tr td:nth-of-type(7) {
        display: none;
    }
}

/* =====================================================
   SIDEBAR — sub-menus pozicioniranje

   PROBLEM: sidebar-unset (script.js) na hover #sub-menu > li dodaje klasu
   .sidebar-unset na nav → tema CSS: overflow-y: unset → nav GUBI scroll
   container → scrollTop resetuje na 0 → meni skoči.
   Wheel scroll ne radi jer scrollBy() ignorisan bez overflow.

   RJEŠENJE — dva koraka:
   1. position:fixed za desktop sub-menije (bypass svega overflow clipping)
   2. .sidebar-unset override — zadržava overflow-y:auto bez obzira na klasu

   ZAŠTO fixed radi:
   - Fixed elementi zaobilaze SVE ancestor overflow clipping
   - SmartMenus računa top = $li.offset().top − sidenav.offset().top
     = (viewportTop + scrollY) − (0 + scrollY) = viewportTop ✓
   - isCollapsible() → false (fixed ≠ static) → flyout mod ✓
   - isTouchMode() → false → hover aktivacija ✓

   ZAŠTO .sidebar-unset override:
   - Tema CSS postavlja overflow-y:unset kad je .sidebar-unset prisutan
   - Mi vraćamo overflow-y:auto !important (naš stylesheet učitava poslije teme)
   - nav zadržava scroll container → scrollTop se ne resetuje
   - fixed sub-menji su vidljivi bez obzira na overflow-y

   Mobile < 1200px: position:static → collapsible push-down.
   ===================================================== */

/* Korak 1 — sub-menji kao fixed pozicionirani flyout (desktop)
   NE postavljamo width — tema CSS kontroliše širinu (16em za regular, auto za mega)
   VAŽNO: inner uli unutar bolago-mega-menu su sadržaj panela (ne navigacijski sub-menji)
   — moraju ostati static, inače izađu iz toka i pojave se van bijelog panela! */
@media (min-width: 1200px) {
    .sidenav #sub-menu ul {
        position: fixed !important;
        z-index: 100000 !important;
    }

    /* Izuzmi inner ule koji su DIO SADRŽAJA mega menija (ne su sub-menji) */
    .sidenav #sub-menu .bolago-mega-menu ul {
        position: static !important;
        z-index: auto !important;
    }
}

/* Korak 2 — spriječi sidebar-unset da ukloni overflow-y sa nav */
.sidenav nav.sidebar-unset {
    overflow-y: auto !important;
}

@media (max-width: 1199.98px) {
    .sidenav #sub-menu ul {
        position: static !important;
    }
}

/* =====================================================
   BOLAGO MEGA MENU — prikaži inner ul (link-section)
   .sm ul { display: none } iz style.css sakrije SVE ul
   unutar #sub-menu, uključujući inner ul sa stavkama.
   SmartMenus ih označava kao in-mega i ne prikazuje ih.
   Ovdje ih prisilno prikazujemo da budu u toku dokumenta
   i da ih bijeli panel (.bolago-mega-menu) može sadržati.
   ===================================================== */
.sidenav #sub-menu .bolago-mega-menu .link-section > ul {
    display: block !important;
}

/* =====================================================
   FLYOUT — native overflow scroll
   max-height i overflow-y se postavljaju i JS-om (dinamički
   prema visini headera), ali CSS daje fallback vrijednost.
   SmartMenus scroll arrows nisu potrebne (subH <= winH,
   SmartMenus ih ne kreira), ali ako se pojave — sakrijemo.
   ===================================================== */
@media (min-width: 1200px) {
    .sidenav #sub-menu > li > ul {
        max-height: calc(100vh - 110px);  /* JS override sa tačnom headerH visinom */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Sakrij scrollbar vizuelno — scroll radi wheel-om */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .sidenav #sub-menu > li > ul::-webkit-scrollbar {
        display: none;
    }

    /* Sakrij SmartMenus scroll arrows ako se ipak kreiraju */
    .sidenav #sub-menu .scroll-up,
    .sidenav #sub-menu .scroll-down {
        display: none !important;
    }

}

/* JS-injected scroll buttons — position:fixed u body, iznad flyouta.
   Ne diraju scroll container ul-a uopšte. */
.bl-scroll-btn {
    position: fixed !important;
    z-index: 200000 !important;
    display: none;
    cursor: pointer;
    text-align: center;
    padding: 4px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-color, #e9793a);
    background: rgba(255, 255, 255, 0.97);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
}
.bl-scroll-btn.bl-scroll-up  { border-bottom: 1px solid #ebebeb; }
.bl-scroll-btn.bl-scroll-down { border-top:    1px solid #ebebeb; }

/* =====================================================
   KORPA — pregled porudžbine (desna kolona u quantities)
   ===================================================== */
.cart-totals {
    padding: 30px;
    background-color: #f8f8f8;
    line-height: 1;
    border: 1px solid #eee;
}
.cart-totals h5 {font-weight:600}
.checkout-page .cart-totals {padding:0; border:none; background:transparent}
/* =====================================================
   DESNI MOBILNI MENI (.sm-horizontal) — z-index fix
   Tema daje z-index: 99, ali top-header ima z-index: 9999
   na mobilnom (position: sticky) → teget bar visi iznad menija.
   Podižemo na 10000 → iznad top-headera, ispod levog sajdbara (99999).
   ===================================================== */
@media (max-width: 1199px) {
    .sm-horizontal {
        z-index: 10000 !important;
    }
}

/* Teget bar i ikone idu ISPOD desnog menija SAMO kad je nav-open klasa aktivna */
@media (max-width: 991px) {
    body.nav-open header.marketplace .top-header {
        z-index: 1 !important;
    }
    body.nav-open .top-header .header-dropdown .mobile-account,
    body.nav-open .top-header .header-dropdown .mobile-wishlist {
        z-index: 1 !important;
    }
}

/* =====================================================
   MOBILNI SIDEBAR — visina i prekrivanje gornjeg/donjeg bara

   PROBLEM: .sidenav nav ima height: 100vh pa poslednji
   ajtemi padaju tačno u zonu .mobile-fix-option bara (60px).
   Ikone (srce, korisnik) su position:fixed bottom:16px z-index:9.
   Top-header je position:sticky top:0 z-index:9999 na mobilnom.

   FIX:
   1. Nav visina = 100vh - 60px → poslednji ajtem je iznad donjeg bara
   2. Kada je sidebar otvoren (body.sidebar-open), gornji i donji
      elementi dobijaju z-index:0 → definitvno ispod sidebar-a (z-index:99999)
   ===================================================== */
@media (max-width: 576px) {
    /* Nav ostaje 100vh (pokriva ceo ekran belo) —
       padding-bottom 60px osigurava da se poslednji ajtem može
       skrolovati do 60px iznad donjeg bara (mobile-fix-option) */
    .sidenav nav {
        padding-bottom: 60px !important;
    }

    /* Gornji teget bar (telefoni) ide ispod sajdbara kada je otvoren */
    body.sidebar-open header.marketplace .top-header {
        z-index: 0 !important;
    }

    /* Ikone dole (srce / korisnik) idu ispod sajdbara */
    body.sidebar-open .top-header .header-dropdown .mobile-account,
    body.sidebar-open .top-header .header-dropdown .mobile-wishlist {
        z-index: 0 !important;
    }
}
.delivery ul {margin-bottom:20px; padding-left:1.5rem }
.delivery ul li {list-style-type: disc !important; display: list-item !important; padding: 0 0 5px 0; margin: 0;}


/*strane*/
    :root {
      --bg: #ffffff;
      --surface: #f7f8fa;
      --border: #e2e5ea;
      --text: #1a1d23;
      --muted: #6b7280;
      --accent: #1a4fa0;
      --accent-light: #eef2fb;
      --radius: 6px;
      
    }
  .page {
      max-width: 960px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .toc {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px 32px;
      margin: 40px 0;
    }
    .toc h2 {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--muted);
      margin-bottom: 16px;
    }
    .toc ol {
      padding-left: 20px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 32px;
    }
    @media (max-width: 600px) {
      .toc ol { grid-template-columns: 1fr; }
    }
    .toc li { font-size: 0.9rem; }
    .toc a {
      color: var(--accent);
      text-decoration: none;
      font-weight: 500;
    }
    .toc a:hover { text-decoration: underline; }

    .section {
      border-bottom: 1px solid var(--border);
      padding: 48px 0;
      scroll-margin-top: 160px;
    }
    .section:last-child { border-bottom: none; }

    .section-header {
      display: flex;
      align-items: baseline;
      gap: 14px;
      margin-bottom: 24px;
    }
    .section-num {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--accent);
      background: var(--accent-light);
      padding: 3px 9px;
      border-radius: 20px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .section h2 {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--text);
    }
    .section h3 {
      font-size: 1rem;
      font-weight: 700;
      margin: 24px 0 10px;
      color: var(--text);
    }

    .section p { margin-bottom: 14px; color: #374151; }
    .section p:last-child { margin-bottom: 0; }

    .section ul, .section ol {
      padding-left: 22px;
      margin: 12px 0 14px;
    }
    .section li { margin-bottom: 7px; color: #374151; }

    .infobox {
      background: var(--accent-light);
      border-left: 3px solid var(--accent);
      border-radius: 0 var(--radius) var(--radius) 0;
      padding: 14px 18px;
      margin: 18px 0;
      font-size: 0.9rem;
      color: #1e3a6e;
    }

    .contact-block {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px 24px;
      margin-top: 18px;
      font-size: 0.9rem;
    }
    .contact-block strong.label {
      display: block;
      margin-bottom: 8px;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--muted);
    }
    .contact-block p { margin: 3px 0; color: #374151; }
    .contact-block a { color: var(--accent); text-decoration: none; }

    table {
      width: 100%;
      border-collapse: collapse;
      margin: 16px 0;
      font-size: 0.88rem;
    }
    th {
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 10px 14px;
      text-align: left;
      font-weight: 600;
      font-size: 0.8rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }
    td {
      border: 1px solid var(--border);
      padding: 10px 14px;
      color: #374151;
      vertical-align: top;
    }
    tr:nth-child(even) td { background: var(--surface); }

    footer {
      background: var(--surface);
      border-top: 1px solid var(--border);
      padding: 32px 0;
      text-align: center;
      font-size: 0.82rem;
      color: var(--muted);
      margin-top: 24px;
    }
    footer a { color: var(--accent); text-decoration: none; }