/* ===================== AGD NAV — CLEAN BASE ===================== */
:root{
  /* Paleta */
  --agd-bg-0:#18181c;   /* navbar/page */
  --agd-bg-1:#1f1f25;   /* dropdown & panels */
  --agd-bg-2:#23232b;   /* hover/active */
  --agd-bg-3:#2a2d36;   /* nested active */
  --agd-fg:#e9ecf2;
  --agd-accent:#ffb100;

  /* Layout / motion */
  --panel-w:320px;                                 /* UJEDNAÄŒENA ?irina svih panela */
  --panel-h:clamp(360px, 68vh, 520px);             /* UJEDNAÄŒENA visina svih panela */
  --panel-head-h:46px;
  --radius:12px;
  --dur:.18s;
  --shadow-lg:0 10px 32px rgba(0,0,0,.70);
  --shadow-nav:0 3px 18px rgba(0,0,0,.16);
  --z-nav:200;
  --z-menu:1000;
}

/* NAVBAR */
.navbar{
  background:var(--agd-bg-0);
  font-family:"Satoshi","Plus Jakarta Sans","Segoe UI Variable","Segoe UI","Helvetica Neue",Arial,sans-serif;
  box-shadow:var(--shadow-nav);
  z-index:var(--z-nav);
  font-size:1.12rem;
}
.navbar .container-fluid{ max-width:1480px; margin:0 auto; width:100%; padding:0 36px; box-sizing:border-box; }
@media (min-width:1400px){ .navbar .container-fluid{ max-width:1320px; padding:0 32px; } }

/* DESKTOP GRID */
@media (min-width:992px){
  .navbar{
    min-height: 104px;
  }
  .navbar .container-fluid{
    max-width: 100%;
    padding-inline: clamp(20px, 3.8vw, 72px);
  }
  .nav-desktop{
    display:grid !important;
    grid-template-columns: minmax(540px, 1fr) minmax(520px, 1.2fr) minmax(220px, .7fr);
    column-gap: clamp(24px, 2.8vw, 56px);
    align-items:center;
    width:100%;
  }
  .nav-left{ overflow:visible; }
  .nav-left .navbar-nav{
    width:100%;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap: clamp(.45rem, 1.2vw, 1.35rem);
  }
  .nav-left .nav-link{ white-space:nowrap; }
  .nav-middle, .nav-middle .search-form, .nav-middle .input-group{ width:100%; }
  .nav-middle .form-control, .nav-middle .input-group-text{ height:62px; }
  .nav-middle .btn{ height:62px; font-size:1.08rem; font-weight:800; padding-inline:1.3rem; }
  .nav-middle .form-control{ font-size:1.1rem; }
  .nav-middle .agd-search-icon{ width:62px; }
  .nav-right{
    display:flex;
    justify-content:flex-end;
  }
  .nav-right .nav-link{
    min-height:62px;
    padding-inline:18px !important;
    font-size:1.18rem !important;
  }
}

/* LINKOVI 1. NIVOA */
.navbar .navbar-nav > .nav-item > .nav-link{
  color:var(--agd-accent) !important; font-weight:600; letter-spacing:.02em;
  border-radius:12px; padding:.98em 1.45em; font-size:1.2rem;
  transition:color .15s, background .18s, box-shadow .17s;
}
.navbar .navbar-nav > .nav-item > .nav-link:hover,
.navbar .navbar-nav > .nav-item > .nav-link:focus,
.navbar .navbar-nav > .nav-item > .nav-link.active{
  color:var(--agd-accent) !important;
  background:var(--agd-bg-2);
  box-shadow:0 3px 18px rgba(255,177,0,.28);
}
.navbar .dropdown-toggle::after{ display:none !important; } /* bez caret-a */

.nav-link-icon{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}
.nav-link-icon i{
  font-size:1.08rem;
  opacity:1;
}

@media (min-width:1200px){
  .nav-left .navbar-brand{
    font-size: 1.28rem !important;
    padding-inline: .8rem !important;
  }
  .navbar .navbar-nav > .nav-item > .nav-link{
    font-size: 1.22rem;
  }
  .nav-link-icon i{
    font-size: 1.12rem;
  }
}

/* Brand dropdown: keep menu out of layout flow */
.nav-left .nav-item.dropdown{ position:relative; }
.nav-left .nav-item.dropdown .nav-link{
  display:inline-flex; align-items:center; gap:.35rem;
}
.nav-left .nav-item.dropdown .dropdown-menu{
  position:absolute; top:calc(100% + 6px); left:0;
  min-width:180px; margin:0;
}
.nav-left .agd-brand-menu{
  background: var(--agd-bg-1) !important;
  border: 1px solid #2b2d34;
  padding: .35rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
  min-width: 200px;
}
.nav-left .agd-brand-menu .dropdown-item{
  color: var(--agd-fg);
  border-radius: 10px;
  padding: .55rem .85rem;
}
.nav-left .agd-brand-menu .dropdown-item:hover,
.nav-left .agd-brand-menu .dropdown-item:focus{
  color: var(--agd-accent);
  background: var(--agd-bg-2);
}


/* ===================== MEGA MENI — LEVA KOLONA ===================== */
.navbar .navbar-nav .nav-item.dropdown{ position:relative; }

/* FIX: leve i desne “prozor?ad” iste su visine, ?ire se bez raspora */
#megaMenuDropdown{
  position:absolute !important;
  top:calc(100% + 6px); left:0;
  z-index:var(--z-menu);
  width:var(--panel-w); height:var(--panel-h);
  background:var(--agd-bg-1);
  border-radius:var(--radius) 0 0 var(--radius);
  padding:0;
  box-shadow:0 8px 24px rgba(0,0,0,.55);
  overflow:visible;                     /* ⬅️ promenjeno */
  border:1px solid #2b2d34;
}

/* Naslov sekcije */
.categories-header{
  color:var(--agd-accent); font-weight:800; text-transform:uppercase;
  font-size:1rem; letter-spacing:.5px;
  padding:12px 16px 8px 16px;
  border-bottom:1px solid color-mix(in oklab, var(--agd-accent) 25%, transparent);
  position:sticky; top:0; background:var(--agd-bg-1); z-index:2;
}

/* Lista kategorija (leva kolona) skroluje unutar fiksne visine */
.lista-kategorija{ max-height:calc(var(--panel-h) - var(--panel-head-h) - 6px); overflow:auto; padding:6px; margin:0; }

/* Stavke kategorija */
.nav-kat-item{ margin-bottom:3px; position:static !important; }
#megaMenuDropdown .nav-kat-item > .dropdown-item{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  width:100%; color:var(--agd-fg) !important; background:transparent !important;
  padding:11px 12px; border-radius:8px; font-weight:500; transition:background var(--dur), color var(--dur);
}
#megaMenuDropdown .nav-kat-item > .dropdown-item:hover{ color:var(--agd-accent) !important; background:var(--agd-bg-2) !important; }
.nav-kat-item .kat-strelica{ display:none; margin-left:auto; color:var(--agd-accent); opacity:.65; transition:transform var(--dur), opacity var(--dur); }
.nav-kat-item.ima-decu .kat-strelica{ display:inline-block; }
.nav-kat-item.open > .dropdown-item .kat-strelica{ opacity:1; transform:translateX(2px); }
.nav-kat-item.open > .dropdown-item{ background:var(--agd-bg-2) !important; color:var(--agd-accent) !important; }

/* ===================== UJEDNAÄŒENI PANELI (desno) ===================== */
.mega-panel{
  position:absolute; top:0; left:100%;                  /* naleže odmah uz levi panel */
  width:var(--panel-w); height:var(--panel-h);
  background:var(--agd-bg-1);
  border-radius:0 var(--radius) var(--radius) 0;         /* samo spoljne ivice zaokružene */
  border-left:1px solid #2b2d34;                         /* “?av” bez razmaka */
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateX(6px);
  transition:opacity var(--dur) ease, transform var(--dur) ease;
  overflow:hidden; z-index:var(--z-menu);
}
.mega-panel.show{ opacity:1; visibility:visible; transform:none; }

/* 3. nivo ide odmah desno od 2. (oba ujednačena) */
.mega-panel.level-2{ left:calc(100% + var(--panel-w)); }

/* Glava panela + skrol */
.mega-panel .panel-head{
  height:var(--panel-head-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; background:var(--agd-bg-1);
  border-bottom:1px solid color-mix(in oklab, var(--agd-accent) 25%, transparent);
  position:sticky; top:0; z-index:1;
}
.mega-panel .panel-title{ color:var(--agd-fg); font-weight:800; }
.mega-panel .btn.btn-xs{ padding:.22rem .6rem; font-size:.78rem; border-radius:10px; }
.mega-panel .panel-scroll{ height:calc(var(--panel-h) - var(--panel-head-h)); overflow:auto; padding:8px; }
.mega-panel .dropdown-item{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; color:var(--agd-fg) !important; background:transparent !important; padding:9px 12px; border-radius:8px; font-weight:500; }
.mega-panel .dropdown-item:hover{ color:var(--agd-accent) !important; background:var(--agd-bg-2) !important; }
.subcat-item.open > .dropdown-item{ background:var(--agd-bg-3) !important; color:var(--agd-accent) !important; }

/* Tastatura */
#megaMenuDropdown .dropdown-item:focus-visible{
  outline:2px solid color-mix(in oklab, var(--agd-accent) 70%, white 10%);
  outline-offset:2px; border-radius:8px;
}

/* Značka korpe */
.nav-right .badge-korpa{
  position:absolute; top:-6px; right:2px; background:var(--agd-accent); color:var(--agd-bg-0);
  border-radius:999px; font-weight:700; font-size:.72rem; line-height:1; padding:2px 6px; min-width:18px; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* ===================== MOBILE (OFFCANVAS + “PROZORI”) ===================== */
@media (max-width:991.98px){
  .mobile-cart-fab{
    position:fixed;
    right:16px;
    bottom:calc(64px + env(safe-area-inset-bottom));
    width:56px;
    height:56px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--agd-accent);
    border:0;
    color:var(--agd-bg-0);
    text-decoration:none;
    box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 22px rgba(255,177,0,.35);
    z-index:calc(var(--z-menu) + 5);
    isolation:isolate;
  }
  .mobile-cart-fab::after{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:20px;
    background:radial-gradient(60% 60% at 50% 45%, rgba(255,177,0,.35), rgba(255,177,0,0));
    opacity:.55;
    z-index:-1;
  }
  .mobile-cart-fab.has-items{
    box-shadow:0 16px 36px rgba(0,0,0,.5), 0 0 28px rgba(255,177,0,.45);
    animation:cartBounce 5.5s ease-in-out infinite;
  }
  .mobile-cart-fab:active{ transform:translateY(1px); }
  .mobile-cart-fab i{ font-size:1.25rem; }
  .mobile-cart-fab .mobile-cart-badge{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    background:var(--agd-accent);
    color:var(--agd-bg-0);
    font-weight:800;
    font-size:.72rem;
    line-height:20px;
    text-align:center;
    border:1px solid rgba(0,0,0,.55);
    box-shadow:0 8px 18px rgba(0,0,0,.45);
  }
  .badge-korpa.is-hidden,
  .badge-korpa--mobile.is-hidden,
  .mobile-cart-badge.is-hidden{
    display:none !important;
  }
  .badge-korpa--mobile{
    position:absolute;
    top:-6px;
    right:-6px;
    width:20px;
    height:20px;
    padding:0;
    border-radius:999px;
    font-size:.68rem;
    line-height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--agd-accent);
    color:var(--agd-bg-0);
    border:1px solid rgba(0,0,0,.55);
    box-shadow:0 6px 14px rgba(0,0,0,.45);
  }
  @keyframes cartBounce{
    0%, 74%, 100%{ transform:translateY(0) scale(1); }
    80%{ transform:translateY(-10px) scale(1.03); }
    85%{ transform:translateY(0) scale(1); }
    90%{ transform:translateY(-5px) scale(1.02); }
    95%{ transform:translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion:reduce){
    .mobile-cart-fab.has-items{ animation:none; }
  }
  .offcanvas.bg-dark{ background:var(--agd-bg-0) !important; color:var(--agd-fg); }
  .offcanvas.custom-offcanvas-anim{
    transition:transform .44s cubic-bezier(.41,.55,.43,1.19), opacity .36s cubic-bezier(.65,0,.26,1);
    box-shadow:0 12px 48px #000a, 0 2px 8px #ffb10033;
    z-index:1125;
  }
  /* Primarni linkovi */
  .offcanvas .navbar-nav .nav-link{
    color:var(--agd-accent) !important; font-weight:600; letter-spacing:.01em;
    background:none !important; transition:color .16s, background .16s;
    padding:.6rem .8rem; border-radius:8px;
  }
  .offcanvas .navbar-nav .nav-link:hover,
  .offcanvas .navbar-nav .nav-link:focus{
    color:#fff200 !important; text-shadow:0 2px 10px #fff20077; background:transparent !important;
  }
  /* Zaglavlja sekcija */
  .offcanvas .navbar-nav .nav-item.fw-semibold{
    color:#ffc24a !important; font-size:.98em; font-weight:700 !important;
    text-transform:uppercase; letter-spacing:.03em; margin:.9em .4em .25em .4em; list-style:none; pointer-events:none;
  }

  .mobile-menu{ display:flex; flex-direction:column; gap:14px; }
  .mobile-root-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
  .mobile-root-item{ display:flex; flex-direction:column; gap:6px; }
  .mobile-root-link,
  .mobile-root-toggle{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; border-radius:12px; border:1px solid #2c2e36;
    background:#202227; color:var(--agd-accent); font-weight:700; text-decoration:none;
    transition:background var(--dur), color var(--dur), border-color var(--dur), box-shadow var(--dur);
  }
  .mobile-root-link:hover,
  .mobile-root-link:focus,
  .mobile-root-toggle:hover,
  .mobile-root-toggle:focus{
    color:#fff; background:#23252c; border-color:color-mix(in oklab, var(--agd-accent) 35%, #2c2e36);
    box-shadow:0 3px 18px rgba(255,177,0,.18);
  }
  .mobile-root-toggle i{ transition:transform var(--dur); }
  .mobile-root-toggle[aria-expanded="true"] i{ transform:rotate(180deg); }
  .mobile-link{
    display:block; color:var(--agd-accent) !important; text-decoration:none;
    padding:10px 12px; border-radius:10px; border:1px solid #2c2e36;
    transition:background var(--dur), color var(--dur), border-color var(--dur), box-shadow var(--dur);
  }
  .mobile-link:hover,
  .mobile-link:focus{
    color:#fff !important; background:var(--agd-bg-2) !important;
    box-shadow:0 3px 18px rgba(255,177,0,.18);
  }
  .mobile-link.small{ font-size:.92rem; }
  .mobile-link-standalone{ margin:4px 2px; border:1px solid #2c2e36; background:#1c1e25; }

  .mobile-split-row{
    display:grid; grid-template-columns: 1fr 44px; gap:8px;
    align-items:center; width:100%;
  }
  .mobile-cat-list{
    list-style:none; padding:0; margin:8px 0 0;
    display:flex; flex-direction:column; gap:6px; align-items:stretch;
  }
  .mobile-cat-list > li,
  .mobile-sublist > li{
    width:100%;
  }
  .mobile-cat-item{ display:flex; flex-direction:column; gap:6px; align-items:stretch; }
  .mobile-cat-link,
  .mobile-sub-link,
  .mobile-split-btn{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; border-radius:10px; border:1px solid #2c2e36;
    background:#1c1e25; color:var(--agd-accent); font-weight:600;
    transition:background var(--dur), color var(--dur), border-color var(--dur), box-shadow var(--dur);
    text-decoration:none;
  }
  .mobile-cat-link,
  .mobile-sub-link{
    width:100%; justify-content:flex-start; text-align:left;
  }
  .mobile-split-btn{ width:44px; justify-content:center; }
  .mobile-cat-link:hover,
  .mobile-cat-link:focus,
  .mobile-sub-link:hover,
  .mobile-sub-link:focus,
  .mobile-split-btn:hover,
  .mobile-split-btn:focus{
    color:#fff; background:#23252c;
    box-shadow:0 3px 18px rgba(255,177,0,.12);
  }
  .mobile-split-btn i{ color:var(--agd-accent); }

  .mobile-panel-body{
    background:#202227; border:1px solid #2c2e36; border-radius:12px;
    padding:10px 12px 14px;
  }

  .mobile-panel-titlebar{
    justify-content:space-between;
  }
  .mobile-panel-titlebar .mobile-view-all{
    margin-left:auto;
  }
  .mobile-view-all{
    display:inline-flex; align-items:center; justify-content:center;
    padding:6px 8px; border-radius:8px; background:transparent; color:var(--agd-accent);
    border:1px solid transparent; text-decoration:none; font-weight:600;
    transition:color var(--dur), background var(--dur), border-color var(--dur);
  }
  .mobile-view-all:hover{
    color:#fff; background:#23252c; border-color:#2c2e36;
  }

  .mobile-subsections{ display:flex; flex-direction:column; gap:12px; }
  .mobile-collapse-btn i{ transition:transform var(--dur); }
  .mobile-collapse-btn[aria-expanded="true"] i{ transform:rotate(180deg); }
  .mobile-sublist{
    list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;
  }
  .mobile-sublist.nested{ padding-left:12px; margin-top:4px; border-left:1px solid #2b2d34; }

  /* === MOBILNI “PROZORI” (stack) === */
  .mobilni-omotac{
    position:relative;
    min-height:65vh;
    overflow:hidden;
    border-radius:12px;
    background:var(--agd-bg-0);
    isolation:isolate;
  }
  .mobilni-prozor{
    position:absolute; inset:0; padding:10px; overflow:auto; background:var(--agd-bg-0);
    transform:translateX(100%); opacity:0; pointer-events:none; visibility:hidden; z-index:0;
    transition:transform .32s ease, opacity .28s ease;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .mobilni-prozor.aktivan{ transform:none; opacity:1; pointer-events:auto; visibility:visible; z-index:2; }
  .mobilni-zaglavlje{
    position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px;
    padding:10px; background:linear-gradient(180deg, #191a1f, #18181c); border-bottom:1px solid #2c2e36;
  }
  .dugme-nazad{ display:flex; align-items:center; gap:6px; cursor:pointer; padding:6px 10px; border-radius:10px; background:#202227; color:#e4e7ee; }
  .dugme-nazad:active{ transform:translateY(1px); }
  .mobilni-lista .nav-link{ display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--agd-fg); padding:12px; border-radius:10px; }
  .mobilni-lista .nav-link:hover{ background:#202227; color:var(--agd-accent); }

  /* Stariji “mobile-submenu” ostaje radi kompatibilnosti */
  .mobile-submenu{ min-height:60vh; background:var(--agd-bg-0); position:relative; z-index:20; animation:fadeIn .33s; }
  @keyframes fadeIn{ from{opacity:0;transform:translateX(32px);} to{opacity:1;transform:none;} }

  /* Mobilna pretraga (modal) */
  #mobileSearchModal .search-icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#b5b7bb; font-size:1.15em; z-index:2; pointer-events:none; }
  #mobileSearchModal .search-input{
    padding-left:2.5em; border-radius:9px; border:1.5px solid #31323a;
    background:#202227; color:#fff; font-size:1.09em; min-height:46px;
    transition:border-color .18s, background .17s, box-shadow .19s, transform .16s; box-shadow:0 0 0 0 #3488fa38;
  }
  #mobileSearchModal .search-input:focus{ border-color:#3488fa !important; background:#23232b; color:#fff; box-shadow:0 0 0 2px #3488fa38; transform:scale(1.012); }
  #mobileSearchModal .search-input::placeholder{ color:#b5b7bb; opacity:1; }
  #mobileSearchModal .search-clear{ position:absolute; right:18px; top:50%; transform:translateY(-50%); color:#b5b7bb; font-size:1.25em; cursor:pointer; z-index:2; display:none; }
  #mobileSearchModal .results-dropdown{
    position:absolute; left:0; right:0; top:100%; background:#23232b; border-radius:0 0 12px 12px;
    box-shadow:0 8px 24px #0008; max-height:320px; overflow-y:auto; margin-top:2px; z-index:5; display:none;
  }
  #mobileSearchModal .search-input::-webkit-search-clear-button, #mobileSearchModal .search-input::-ms-clear, #mobileSearchModal .search-input::-moz-clear, #mobileSearchModal .search-input::-o-clear{ display:none; }
}

/* Manje animacije po želji */
@media (prefers-reduced-motion:reduce){
  .mega-panel, #megaMenuDropdown .nav-kat-item > .dropdown-item, .offcanvas.custom-offcanvas-anim,
  .mobilni-prozor{ transition:none !important; }
}


.categories-header{
  height: var(--panel-head-h);
  display:flex; align-items:center;
  position:sticky; top:0; z-index:2;
  color:var(--agd-accent); font-weight:800; text-transform:uppercase;
  font-size:1rem; letter-spacing:.5px;
  padding:12px 16px 8px 16px;
  border-bottom:1px solid color-mix(in oklab, var(--agd-accent) 25%, transparent);
  background:var(--agd-bg-1);
}
.lista-kategorija{
  max-height: calc(var(--panel-h) - var(--panel-head-h));
  overflow-y: auto; overflow-x: hidden;
  padding: 6px 8px;
}

/* 2) Panels (Level-1, Level-2, Level-3, …) – all align flush to the right of their parent */
.mega-panel{
  position:absolute; top:0; left:100%;
  width:var(--panel-w); height:var(--panel-h);
  background:var(--agd-bg-1);
  border-left:1px solid #2b2d34;
  border-radius:0 var(--radius) var(--radius) 0;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  opacity:0; visibility:hidden; transform:translateX(6px);
  transition:opacity var(--dur) ease, transform var(--dur) ease;
  z-index: calc(var(--z-menu) + 1);
}
.mega-panel.show{ opacity:1; visibility:visible; transform:none; }

/* Head + inner scroll inside panels */
.mega-panel .panel-head{
  height:var(--panel-head-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; background:var(--agd-bg-1);
  border-bottom:1px solid color-mix(in oklab, var(--agd-accent) 25%, transparent);
  position:sticky; top:0; z-index:1;
}
.mega-panel .panel-title{ color:var(--agd-fg); font-weight:800; }
.mega-panel .panel-scroll{
  height: calc(var(--panel-h) - var(--panel-head-h));
  overflow-y: auto; overflow-x: hidden;
  padding: 8px;
}
.mega-panel .dropdown-item{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  color:var(--agd-fg) !important; background:transparent !important;
  padding:9px 12px; border-radius:8px; font-weight:500;
}
.mega-panel .dropdown-item:hover{
  color:var(--agd-accent) !important; background:var(--agd-bg-2) !important;
}

/* 3) If you had offsets for level-2/3, neutralize them (every child uses left:100%) */
.mega-panel.level-2{ left:100%; }
.mega-panel.level-3{ left:100%; }

/* 4) Bootstrap/Popper fix: keep dropdown anchored so absolute children align correctly */
#megaMenuDropdown[data-bs-popper]{ left:0 !important; transform:none !important; }

/* 5) Safety z-index */
.navbar .dropdown-menu, #megaMenuDropdown, .mega-panel{ z-index: var(--z-menu); }


.mega-panel{
  overflow: visible !important; /* L2 može da pokaže L3 van svoje širine */
}

/* Unutrašnje liste i dalje skroluju normalno */
.mega-panel .panel-scroll{
  overflow-y: auto;
  overflow-x: hidden;
}

/* 2) Svi nivoi deca stoje tačno desno od roditelja */
.mega-panel.level-2,
.mega-panel.level-3{
  left: 100% !important;  /* neutralize: left:calc(100% + var(--panel-w)) */
}

/* 3) Siguran stacking redosled (ako nešto prelazi preko) */
.mega-panel.level-2{ z-index: calc(var(--z-menu) + 2) !important; }
.mega-panel.level-3{ z-index: calc(var(--z-menu) + 3) !important; }

/* 4) Popper fix – već ima?, ali dupliramo za svaki slu?aj */
#megaMenuDropdown{
  overflow: visible !important;
}
#megaMenuDropdown[data-bs-popper]{
  left:0 !important;
  transform:none !important;
}

:root{
  --agd-row: color-mix(in oklab, var(--agd-fg) 14%, transparent);
}

/* 1) Leva kolona (kategorije): dodaj liniju iznad svake naredne stavke */
.lista-kategorija .nav-kat-item + .nav-kat-item > .dropdown-item{
  border-top: 1px solid var(--agd-row);
}

/* 2) Unutra?nji paneli (L2/L3): linije između stavki */
.mega-panel .panel-scroll .list-unstyled > li + li > .dropdown-item,
.mega-panel .panel-scroll .subcat-item + .subcat-item > .dropdown-item{
  border-top: 1px solid var(--agd-row);
}

/* 3) Aktivna/otvorena stavka – tanka akcentna “?ina” sa leve strane */
.nav-kat-item.open > .dropdown-item,
.subcat-item.open > .dropdown-item,
.podvrsta-grupa.open > .dropdown-item{
  box-shadow: inset 3px 0 0 var(--agd-accent);
}

/* 4) Hover/focus: linija ne nestaje, blago jača na hoveru */
#megaMenuDropdown .dropdown-item:hover,
#megaMenuDropdown .dropdown-item:focus{
  border-color: color-mix(in oklab, var(--agd-accent) 35%, var(--agd-row));
}

/* 5) (Opcionalno) Lagan “zebra” efekat – uklju?uje se dodavanjem .agd-rows-zebra na container */
.agd-rows-zebra .list-unstyled > li:nth-child(even) > .dropdown-item{
  background: color-mix(in oklab, var(--agd-bg-2) 18%, transparent);
}
.agd-rows-zebra .list-unstyled > li > .dropdown-item:hover{
  background: var(--agd-bg-2); /* hover i dalje pobedjuje zebra */
}

/* 6) (Opcionalno) Mobile: iste linije u offcanvas podmenijima */
@media (max-width:991.98px){
  .mobile-submenu .navbar-nav > li + li > .nav-link{
    border-top: 1px solid var(--agd-row);
    border-radius: 0; /* čiste ravne linije */
  }
}

:root{
  --agd-row: color-mix(in oklab, var(--agd-fg) 14%, transparent);
}

/* Scope to mobile */
@media (max-width: 991.98px){
  .mobilni-lista .otvoreno > .nav-link{
    box-shadow: inset 3px 0 0 var(--agd-accent);
  }
  .mobilni-lista li:active > .nav-link{
    box-shadow: inset 3px 0 0 var(--agd-accent);
  }

  /* List layout + clean dividers between rows (same feel as desktop) */
  .mobilni-lista li{
    display:flex; align-items:center; gap:8px;
  }
  .mobilni-lista li + li > .nav-link{
    border-top:1px solid var(--agd-row);
  }

  /* Links look/hover (match desktop hover/accent) */
  .mobilni-lista .nav-link{
    flex:1; color:var(--agd-fg) !important; background:transparent !important;
    padding:12px 12px; border-radius:10px; transition:background var(--dur), color var(--dur), box-shadow var(--dur);
  }
  .mobilni-lista .nav-link:hover,
  .mobilni-lista .nav-link:focus{
    color:var(--agd-accent) !important; background:var(--agd-bg-2) !important;
    box-shadow:0 3px 18px rgba(255,177,0,.18);
    text-decoration:none;
  }
  .mobilni-lista .nav-link:active{ transform:translateY(1px); }

  /* Right chevron button (same golden vibe) */
  .dugme-napred{
    display:flex; align-items:center; justify-content:center;
    min-width:42px; height:38px; margin-left:6px;
    border-radius:10px; border:1px solid #2c2e36;
    background:#202227; color:var(--agd-accent);
    transition:transform var(--dur), border-color var(--dur), box-shadow var(--dur), background var(--dur);
  }
  .dugme-napred i{ font-size:1rem; line-height:1; }
  .dugme-napred:hover,
  .dugme-napred:focus{
    border-color:color-mix(in oklab, var(--agd-accent) 45%, #2c2e36);
    background:#23252c;
    box-shadow:0 0 0 2px rgba(255,177,0,.10);
  }
  .dugme-napred:hover i{ transform:translateX(2px); }

  /* Back button styling to match */
  .dugme-nazad{
    display:flex; align-items:center; gap:6px;
    padding:6px 10px; border-radius:10px;
    border:1px solid #2c2e36; background:#202227; color:var(--agd-fg);
    transition:background var(--dur), border-color var(--dur), transform var(--dur);
  }
  .dugme-nazad i{ color:var(--agd-accent); }
  .dugme-nazad:hover{ background:#23252c; border-color:color-mix(in oklab, var(--agd-accent) 35%, #2c2e36); }
  .dugme-nazad:active{ transform:translateY(1px); }

  /* Window header & separator harmony */
  .mobilni-zaglavlje{
    position:sticky; top:0; z-index:5;
    display:flex; align-items:center; gap:8px;
    padding:10px; background:linear-gradient(180deg, #191a1f, #18181c);
    border-bottom:1px solid var(--agd-row);
  }

  /* Optional “zebra” like desktop (toggle by adding .agd-rows-zebra) */
  .agd-rows-zebra .mobilni-lista > li:nth-child(even) > .nav-link{
    background: color-mix(in oklab, var(--agd-bg-2) 14%, transparent) !important;
  }
  .agd-rows-zebra .mobilni-lista > li > .nav-link:hover{
    background: var(--agd-bg-2) !important;
  }

  /* Divider style in lists & modal */
  .dropdown-divider.bg-secondary{ opacity:.4; border-color:var(--agd-row) !important; }
}


.nav-middle .search-form { position: relative; }

/* share styles for both containers */
.as-results,
#mobileSearchModal .results-dropdown{
  position:absolute; left:0; right:0; top:100%;
  background:#1f1f25; border:1px solid #2b2d34; border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  margin-top:6px; z-index:2000; display:none; max-height:60vh; overflow:auto;
}

/* mobile modal has static layout by default; force absolute relative to form */
#mobileSearchModal .results-dropdown { position:absolute; }

.as-results.open,
#mobileSearchModal .results-dropdown.open{ display:block; }

.as-inner{ padding:8px; }
.as-group{ margin-bottom:8px; }
.as-group-title{ color:#ffb100; font-weight:800; font-size:.9rem; padding:6px 8px; }
.as-group-body{ display:flex; flex-direction:column; gap:4px; }

.as-item{
  display:flex; gap:10px; align-items:center;
  padding:8px; border-radius:8px; color:#e9ecf2; text-decoration:none;
}
.as-item:hover, .as-item.is-active{
  background:#23232b; color:#ffb100; text-decoration:none;
}
.as-thumb{ width:36px; height:36px; object-fit:cover; border-radius:6px; background:#2b2d34; }
.as-text{ min-width:0; }
.as-label{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-sub{ font-size:.85rem; color:#9aa3b2; }
.as-meta{ font-size:.78rem; color:#8390a9; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-badge{ margin-left:.35rem; background:#343642; color:#e9ecf2; padding:.1rem .4rem; border-radius:999px; font-size:.7rem; }
.as-badge--success{ background:#1b5b3d; color:#d8ffe9; }
.as-badge--warning{ background:#5d4a1d; color:#ffe9b3; }
.as-badge--danger{ background:#5c2a33; color:#ffd5dd; }

.as-view-all{
  display:block; margin-top:6px; padding:8px; text-align:center;
  background:#252633; border-radius:8px; color:#ffb100; text-decoration:none; font-weight:700;
}
.as-view-all:hover{ filter:brightness(1.06); }
.as-loading, .as-empty, .as-error{ color:#cfd2d9; padding:12px; text-align:center; }


/* Anchor the results to the input+button wrapper (desktop) */
.nav-middle .search-form .input-group {
  position: relative;
  overflow: visible; /* allow the dropdown to hang outside */
}

.nav-middle .search-form .as-results {
  left: 0;
  right: 0;
  top: calc(100% + 6px); /* below the group */
}

/* Avoid double blue outline: move focus ring to the whole group */
.nav-middle .form-control:focus {
  box-shadow: none !important; /* kill inner ring */
}
.nav-middle .input-group:focus-within {
  box-shadow: 0 0 0 2px #3488fa38;  /* one clean ring */
  border-radius: 10px;              /* optional: match your inputs */
}


/* Container look */
.agd-search-group{
  background:#202227;                     /* slightly lighter than navbar */
  border:1px solid #31323a;
  border-radius:12px;
  overflow:hidden;                         /* keeps pill ends clean */
  transition: box-shadow .18s, border-color .18s;
}

/* Icon chip */
.agd-search-icon{
  background:#202227;
  color:#aeb6c7;                          /* visible by default */
  border:0;
  border-right:1px solid #2b2d34;         /* gives separation from input */
  width:44px;                             /* square icon area */
  display:flex; align-items:center; justify-content:center;
}
.agd-search-icon i{ font-size:1.15rem; line-height:1; }

/* Input + button harmonize with our container */
.agd-search .form-control{
  background:transparent !important;
  border:0 !important;
  color:#fff;
}
.agd-search .btn.btn-primary{
  border-left:1px solid #2b2d34;
}

/* Hover/focus feedback */
.agd-search-group:hover .agd-search-icon{ color:#ffb100; }
.agd-search-group:focus-within{
  border-color:#3488fa;
  box-shadow:0 0 0 2px #3488fa38;         /* single soft ring around whole group */
}
.agd-search-group:focus-within .agd-search-icon{ color:#fff; }

/* Remove inner control rings so we only see the group ring */
.agd-search .form-control:focus,
.agd-search .btn:focus,
.agd-search .input-group-text:focus{
  box-shadow:none !important;
  outline:0 !important;
}

#megaMenuDropdown > .panel-head.level-0 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .625rem .9rem;
  background: #17171d;               /* same as panels */
  border-bottom: 1px solid #2a2a34;
  border-radius: 8px 8px 0 0;
  color: #ddd;
  /* IMPORTANT: do NOT make this sticky (children may be sticky in scroll panes) */
  position: relative;
  z-index: 1;
  margin-bottom: .25rem;              /* breathing room above the list */
}

#megaMenuDropdown > .panel-head.level-0 .panel-title {
  font-weight: 800;
  font-size: 1rem;                    /* same as child titles */
  line-height: 1.2;
}

#megaMenuDropdown > .panel-head.level-0 .btn.btn-xs.btn-warning {
  padding: .25rem .6rem;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 2px 8px #ffb10044;
}

/* Ensure the category list doesn’t collide with the header */
#megaMenuDropdown > .lista-kategorija {
  margin-top: 0;
  padding-top: .25rem;
}

/* ===================== DESKTOP NAV TUNE (balanced) ===================== */
@media (min-width:992px){
  .navbar{
    min-height: 92px !important;
  }
  .navbar .container-fluid{
    max-width: 1560px !important;
    margin-inline: auto !important;
    padding-inline: clamp(16px, 2vw, 34px) !important;
  }

  .nav-desktop{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(16px, 1.8vw, 30px) !important;
  }
  .nav-left{ flex: 1 1 auto; min-width: 0; }
  .nav-middle{ flex: 0 0 clamp(360px, 34vw, 620px); min-width: 360px; max-width: 620px; }
  .nav-right{ flex: 0 0 auto; margin-left: auto; display: flex; justify-content: flex-end; }

  .nav-left .navbar-nav{
    width: 100% !important;
    justify-content: flex-start !important;
    gap: clamp(.35rem, .8vw, .82rem) !important;
  }

  .nav-left .navbar-brand{
    font-size: 1.32rem !important;
    padding-inline: .45rem !important;
    margin-right: .4rem;
  }

  .navbar .navbar-nav > .nav-item > .nav-link{
    font-size: 1.06rem !important;
    font-weight: 700 !important;
    padding: .68rem .92rem !important;
    border-radius: 10px !important;
  }

  .nav-link-icon i{
    font-size: .95rem !important;
  }

  .nav-middle .form-control,
  .nav-middle .input-group-text,
  .nav-middle .btn{
    height: 50px !important;
  }
  .nav-middle .form-control{
    font-size: .98rem !important;
  }
  .nav-middle .btn{
    font-size: .92rem !important;
    font-weight: 700 !important;
    padding-inline: .95rem !important;
  }
  .nav-middle .agd-search-icon{
    width: 50px !important;
  }

  .nav-right .nav-link{
    min-height: 50px !important;
    font-size: 1.03rem !important;
    padding-inline: 8px !important;
  }
  .nav-right .badge-korpa{
    top: -7px;
    right: -4px;
  }
}

@media (min-width:1600px){
  .navbar .container-fluid{ max-width: 1640px !important; }
  .nav-middle{ flex-basis: 660px; max-width: 660px; }
}

/* ===================== DESKTOP NAV SKIN (final priority) ===================== */
@media (min-width: 992px){
  .navbar{
    min-height: 112px !important;
  }
  .nav-desktop{
    display: grid !important;
    grid-template-columns: max-content minmax(320px, 1fr) max-content !important;
    align-items: center !important;
    column-gap: clamp(12px, 1.2vw, 22px) !important;
  }
  .nav-left{
    min-width: 0 !important;
    position: relative;
    z-index: 2;
  }
  .nav-right{
    justify-self: end !important;
    position: relative;
    z-index: 2;
  }
  .nav-left .navbar-nav{
    flex-wrap: nowrap !important;
  }

  .nav-left .navbar-brand{
    font-size: clamp(1.48rem, .8vw + 1rem, 1.72rem) !important;
    font-weight: 650 !important;
    letter-spacing: .02em !important;
    color: #2f92ff !important;
    padding: .45rem .55rem !important;
  }

  .navbar .navbar-nav > .nav-item > .nav-link{
    display: inline-flex !important;
    align-items: center !important;
    gap: clamp(.5rem, .45vw, .68rem) !important;
    font-size: clamp(.96rem, .45vw + .72rem, 1.14rem) !important;
    line-height: 1.1 !important;
    font-weight: 460 !important;
    letter-spacing: .015em !important;
    padding: clamp(.7rem, .4vw + .52rem, .9rem) clamp(.76rem, .56vw + .48rem, 1.08rem) !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    color: #ffc73a !important;
  }

  .navbar .navbar-nav > .nav-item > .nav-link:hover,
  .navbar .navbar-nav > .nav-item > .nav-link:focus,
  .navbar .navbar-nav > .nav-item > .nav-link.active{
    background: linear-gradient(180deg, rgba(255,177,0,.2), rgba(255,177,0,.08)) !important;
    border-color: rgba(255,177,0,.35) !important;
    color: #ffe08a !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 2px rgba(255,177,0,.12) !important;
  }

  .navbar .navbar-nav > .nav-item > .nav-link i{
    font-size: clamp(1.34rem, .85vw + .7rem, 1.86rem) !important;
    margin-right: 0 !important;
    opacity: 1 !important;
    line-height: 1 !important;
  }

  .nav-middle{
    flex: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: relative;
    z-index: 1;
    overflow: visible !important; /* allow desktop search dropdown to escape */
  }
  .nav-middle .search-form{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .nav-middle .input-group{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .nav-middle .form-control,
  .nav-middle .input-group-text,
  .nav-middle .btn{
    height: clamp(54px, 2vw + 36px, 62px) !important;
  }
  .nav-middle .form-control{
    font-size: clamp(1rem, .45vw + .78rem, 1.14rem) !important;
  }
  .nav-middle .btn{
    font-size: clamp(.98rem, .4vw + .78rem, 1.12rem) !important;
    font-weight: 600 !important;
    padding-inline: clamp(1rem, .6vw + .72rem, 1.28rem) !important;
  }
  .nav-middle .agd-search-icon{
    width: clamp(54px, 2vw + 36px, 62px) !important;
  }

  .nav-right .nav-link{
    font-size: clamp(1rem, .4vw + .8rem, 1.12rem) !important;
    font-weight: 500 !important;
    min-height: clamp(54px, 2vw + 36px, 62px) !important;
    padding: clamp(.58rem, .3vw + .45rem, .7rem) .44rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: clamp(.4rem, .35vw, .56rem) !important;
  }
  .nav-right .nav-link i{
    font-size: clamp(1.38rem, .72vw + .82rem, 1.8rem) !important;
  }
  .nav-right .badge-korpa{
    font-size: .76rem !important;
    min-width: 20px !important;
    padding: 3px 6px !important;
  }
}

@media (min-width: 1600px){
  .nav-desktop{
    grid-template-columns: max-content minmax(360px, 1fr) max-content !important;
  }
  .nav-middle{ max-width: 100% !important; }
}

/* ===================== DESKTOP MEGA MENU SKIN (visual only) ===================== */
@media (min-width: 992px){
  :root{
    --panel-w: clamp(300px, 28vw, 380px);
    --panel-h: clamp(420px, 68vh, 620px);
    --panel-head-h: 54px;
  }

  #megaMenuDropdown{
    border-radius: 18px 0 0 18px !important;
    border: 1px solid #40465d !important;
    background:
      radial-gradient(120% 90% at 0% 0%, rgba(67,95,176,.22), rgba(67,95,176,0) 55%),
      linear-gradient(180deg, #222634 0%, #191d2a 100%) !important;
    box-shadow:
      0 28px 56px rgba(0,0,0,.58),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter: blur(5px);
  }

  #megaMenuDropdown > .panel-head.level-0{
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    padding: 1rem 1.15rem !important;
  }
  #megaMenuDropdown > .panel-head.level-0 .panel-title{
    font-size: clamp(1.06rem, .55vw + .72rem, 1.28rem) !important;
    letter-spacing: .04em !important;
    font-weight: 860 !important;
    color: #f6f8ff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.32);
  }

  .lista-kategorija{
    padding: 14px !important;
  }
  #megaMenuDropdown .nav-kat-item > .dropdown-item{
    min-height: clamp(46px, 2.1vw + 24px, 60px) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    font-size: clamp(.98rem, .45vw + .74rem, 1.18rem) !important;
    font-weight: 670 !important;
    color: #ebeffa !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
    transition: background .22s ease, color .22s ease, box-shadow .22s ease !important;
  }
  #megaMenuDropdown .kat-label{
    font-size: clamp(.98rem, .42vw + .74rem, 1.15rem) !important;
    font-weight: 680 !important;
    letter-spacing: .005em !important;
  }
  #megaMenuDropdown .nav-kat-item > .dropdown-item:hover{
    background: linear-gradient(180deg, #3a4154, #2f3547) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,177,0,.24),
      0 10px 22px rgba(0,0,0,.28) !important;
  }
  #megaMenuDropdown .kat-strelica{
    color: #ffd978 !important;
    opacity: .86 !important;
    font-size: 1.02rem !important;
  }
  #megaMenuDropdown .nav-kat-item.open > .dropdown-item .kat-strelica{
    opacity: 1 !important;
  }
  #megaMenuDropdown .lista-kategorija .nav-kat-item + .nav-kat-item > .dropdown-item{
    margin-top: 8px !important;
  }

  .mega-panel{
    border-left: 1px solid #454c64 !important;
    background:
      radial-gradient(140% 100% at 0% 0%, rgba(61,88,170,.2), rgba(61,88,170,0) 52%),
      linear-gradient(180deg, #242938 0%, #1a1f2d 100%) !important;
    box-shadow:
      0 30px 56px rgba(0,0,0,.6),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }
  .mega-panel .panel-head{
    min-height: var(--panel-head-h) !important;
    padding: 0 18px !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)) !important;
  }
  .mega-panel .panel-title{
    font-size: clamp(1.04rem, .55vw + .72rem, 1.24rem) !important;
    font-weight: 840 !important;
    letter-spacing: .012em !important;
    color: #f4f7ff !important;
  }
  .mega-panel .panel-scroll{
    padding: 14px !important;
  }
  .mega-panel .dropdown-item{
    min-height: clamp(44px, 1.9vw + 24px, 58px) !important;
    border-radius: 13px !important;
    padding: 12px 17px !important;
    font-size: clamp(.96rem, .42vw + .72rem, 1.14rem) !important;
    font-weight: 620 !important;
    color: #e9eefb !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)) !important;
    transition: background .22s ease, color .22s ease, box-shadow .22s ease !important;
  }
  .mega-panel .dropdown-item strong,
  .mega-panel .dropdown-item span{
    font-size: clamp(.95rem, .4vw + .72rem, 1.13rem) !important;
  }
  .mega-panel .dropdown-item:hover{
    background: linear-gradient(180deg, #3b4358, #31384c) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,177,0,.22),
      0 10px 22px rgba(0,0,0,.26) !important;
  }
  .mega-panel .panel-scroll .list-unstyled > li + li > .dropdown-item,
  .mega-panel .panel-scroll .subcat-item + .subcat-item > .dropdown-item{
    border-top: 1px solid rgba(255,255,255,.07) !important;
  }
  .mega-panel .fa-chevron-right{
    color: #ffda7c !important;
    opacity: .86 !important;
    font-size: 1rem !important;
  }

  .nav-kat-item.open > .dropdown-item,
  .subcat-item.open > .dropdown-item,
  .podvrsta-grupa.open > .dropdown-item{
    background: linear-gradient(180deg, #414a61, #333b50) !important;
    box-shadow:
      inset 3px 0 0 var(--agd-accent),
      inset 0 0 0 1px rgba(255,177,0,.24),
      0 8px 18px rgba(0,0,0,.2) !important;
  }
  .subcat-item.open > .dropdown-item .fa-chevron-right,
  .podvrsta-grupa.open > .dropdown-item .fa-chevron-right{
    opacity: 1 !important;
  }

  #megaMenuDropdown .dropdown-item:focus-visible,
  .mega-panel .dropdown-item:focus-visible{
    outline: 2px solid rgba(255,177,0,.7) !important;
    outline-offset: 2px !important;
  }

  #megaMenuDropdown .lista-kategorija,
  .mega-panel .panel-scroll{
    scrollbar-width: thin;
    scrollbar-color: rgba(255,177,0,.45) rgba(255,255,255,.08);
  }
  #megaMenuDropdown .lista-kategorija::-webkit-scrollbar,
  .mega-panel .panel-scroll::-webkit-scrollbar{
    width: 10px;
  }
  #megaMenuDropdown .lista-kategorija::-webkit-scrollbar-track,
  .mega-panel .panel-scroll::-webkit-scrollbar-track{
    background: rgba(255,255,255,.06);
    border-radius: 999px;
  }
  #megaMenuDropdown .lista-kategorija::-webkit-scrollbar-thumb,
  .mega-panel .panel-scroll::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, rgba(255,177,0,.8), rgba(255,177,0,.55));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  #megaMenuDropdown .btn.btn-xs.btn-warning,
  .mega-panel .btn.btn-xs.btn-warning{
    border-radius: 999px !important;
    padding: .45rem .95rem !important;
    font-size: .92rem !important;
    font-weight: 790 !important;
    box-shadow: 0 10px 20px rgba(255,177,0,.3) !important;
  }
  #megaMenuDropdown .btn.btn-xs.btn-warning:hover,
  .mega-panel .btn.btn-xs.btn-warning:hover{
    box-shadow: 0 14px 26px rgba(255,177,0,.35) !important;
    filter: brightness(1.03);
  }
}

@media (min-width: 1280px){
  :root{
    --panel-w: clamp(340px, 27vw, 430px);
    --panel-h: clamp(470px, 72vh, 700px);
    --panel-head-h: 60px;
  }
}

@media (min-width: 1680px){
  :root{
    --panel-w: clamp(390px, 26vw, 500px);
    --panel-h: clamp(540px, 76vh, 780px);
    --panel-head-h: 66px;
  }
}

@media (min-width: 992px) and (max-height: 820px){
  :root{
    --panel-h: clamp(390px, 64vh, 560px);
    --panel-head-h: 50px;
  }
}

/* ===================== Mobile Search v2 (authoritative) ===================== */
@media (max-width: 991.98px){
  #mobileSearchModal .modal-dialog.modal-dialog-top{
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh;
    display: flex;
    align-items: flex-start;
  }

  #mobileSearchModal .modal-content{
    width: 100%;
    border-radius: 0 0 16px 16px;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(255,177,0,.08), transparent 55%),
      #171a24 !important;
    border: 0;
    border-bottom: 1px solid #32374b;
    box-shadow: 0 22px 46px rgba(0,0,0,.55);
  }

  #mobileSearchModal .modal-body{
    padding: max(.8rem, env(safe-area-inset-top)) .8rem .8rem;
  }

  #mobileSearchModal form{
    display: grid;
    gap: .6rem;
  }

  #mobileSearchModal .mobile-search-input-wrap{
    position: relative;
  }

  #mobileSearchModal .search-icon{
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #b8c0d2;
    font-size: 1.05rem;
  }

  #mobileSearchModal .search-input{
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid #3a4158;
    background: #202534 !important;
    color: #f2f5fb !important;
    font-size: 1rem;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  }

  #mobileSearchModal .search-input:focus{
    border-color: #4a90ff !important;
    background: #23293a !important;
    box-shadow: 0 0 0 2px rgba(74,144,255,.22) !important;
    transform: none !important; /* prevent jump on tiny screens */
  }

  #mobileSearchModal .search-input::placeholder{
    color: #96a0b6;
  }

  #mobileSearchModal .search-clear{
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #aeb8cd;
    font-size: 1.08rem;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.04);
  }

  #mobileSearchModal .search-clear:hover{
    background: rgba(255,255,255,.08);
    color: #fff;
  }

  #mobileSearchModal .mobile-search-empty{
    display: grid;
    gap: .55rem;
  }

  #mobileSearchModal .mobile-search-block{
    background: #1b2030;
    border: 1px solid #2f364b;
    border-radius: 10px;
    padding: .5rem .52rem .5rem;
  }

  #mobileSearchModal .mobile-search-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .45rem;
  }

  #mobileSearchModal .mobile-search-title{
    margin: 0;
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #ffd47a;
    font-weight: 800;
  }

  #mobileSearchModal .mobile-search-clear-recent{
    background: transparent;
    border: 0;
    color: #aab6ce;
    font-size: .74rem;
    font-weight: 700;
    padding: .2rem .35rem;
    border-radius: 8px;
  }

  #mobileSearchModal .mobile-search-clear-recent:hover{
    background: rgba(255,255,255,.06);
    color: #fff;
  }

  #mobileSearchModal .mobile-search-recent-list{
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
  }

  #mobileSearchModal .mobile-search-recent-item,
  #mobileSearchModal .mobile-search-chip{
    border: 1px solid #3a425a;
    background: #23293a;
    color: #dde4f2;
    border-radius: 999px;
    font-size: .82rem;
    line-height: 1;
    padding: .4rem .56rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #mobileSearchModal .mobile-search-recent-item:hover,
  #mobileSearchModal .mobile-search-chip:hover{
    border-color: #ffb100;
    color: #ffdd91;
    background: #2a3042;
  }

  #mobileSearchModal .mobile-search-chip-list{
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
  }

  #mobileSearchModal .mobile-search-hint{
    margin: 0;
    color: #8f9bb3;
    font-size: .74rem;
    text-align: left;
    padding: 0 .15rem;
  }

  /* Keep mobile dropdown tied to the input and always above modal content */
  #mobileSearchModal .results-dropdown{
    position: absolute !important;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    margin-top: 0;
    z-index: 2055;
    max-height: min(62dvh, 460px);
    overflow: auto;
    background: #1f2433;
    border: 1px solid #343c54;
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(0,0,0,.48);
  }

  #mobileSearchModal .results-dropdown.open{
    display: block;
  }

  #mobileSearchModal .as-inner{
    padding: .45rem;
  }

  #mobileSearchModal .as-group-title{
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #ffcf66;
    padding: .35rem .5rem;
  }

  #mobileSearchModal .as-item{
    gap: .6rem;
    padding: .56rem;
    border-radius: 10px;
  }

  #mobileSearchModal .as-thumb{
    width: 42px;
    height: 42px;
    border-radius: 8px;
  }

  #mobileSearchModal .as-label{
    font-size: .94rem;
  }

  #mobileSearchModal .as-sub{
    font-size: .8rem;
    color: #a7b2c8;
  }

  #mobileSearchModal .as-meta{
    font-size: .72rem;
    color: #8793ad;
  }

  #mobileSearchModal .as-sub{
    font-size: .78rem;
  }

  #mobileSearchModal .as-view-all{
    margin-top: .3rem;
    border-radius: 10px;
    padding: .65rem .6rem;
  }
}