/* ============================================================
   navbar.css — Navigation bar + nav-triggered overlays
   Covers: announcement bar, desktop category dropdown, mobile
   hamburger drawer, auth modal, welcome toast, and the
   notification bell/panel (all opened from the navbar).
   ============================================================ */

/* ── AUTH MODAL ── */
#auth-modal { display:none; }
#auth-modal.open { display:flex; }
#auth-modal-box { animation: modalIn 0.22s ease forwards; }

/* ── WELCOME TOAST ── */
#welcome-toast { display:none; animation: toastIn 0.35s cubic-bezier(.22,1,.36,1) forwards; }
#welcome-toast.hiding { animation: toastOut 0.3s ease forwards; }

/* ── PROMO NOTIFICATION BELL ── */
#notif-bell { position:relative; }
#notif-dot { display:none; position:absolute; top:4px; right:4px; width:9px; height:9px; background:#ef4444; border-radius:50%; border:2px solid #fff; }
#notif-dot.visible { display:block; }
#notif-bell.ringing svg { animation: bellRing 0.6s ease; }
/* Desktop: drops down from bell, fixed 320px wide (mobile override lives in responsive.css) */
#notif-panel { display:none; position:fixed; right:12px; top:64px; width:320px; max-width:calc(100vw - 24px); background:#fff; border-radius:16px; box-shadow:0 8px 40px rgba(79,70,229,0.15); border:1px solid #e5e7eb; z-index:200; overflow:hidden; }
#notif-panel.open { display:block; animation: modalIn 0.2s ease forwards; }
#promo-notif-toast { display:none; }
#promo-notif-toast.show { display:flex; animation: toastIn 0.4s cubic-bezier(.22,1,.36,1) forwards; }

/* ── ANNOUNCEMENT BAR ── */
#announcement-bar { background:#111827; color:#fff; overflow:hidden; position:relative; height:36px; }
#announcement-track { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.announce-msg { display:none; align-items:center; gap:6px; font-size:12px; font-weight:500; letter-spacing:0.01em; white-space:nowrap; animation: announceFade 0.5s ease; }
.announce-msg.show { display:flex; }

/* ── DESKTOP CATEGORY DROPDOWN ── */
.nav-dropdown { position:relative; }
.nav-dropdown-panel { display:none; position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 12px 40px rgba(17,24,39,0.12); padding:10px; min-width:190px; z-index:60; }
.nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown-panel.force-open { display:block; animation: modalIn 0.15s ease forwards; }
.nav-dropdown-panel a, .nav-dropdown-panel button { display:block; width:100%; text-align:left; padding:8px 12px; border-radius:8px; font-size:13px; color:#374151; transition:background 0.15s,color 0.15s; }
.nav-dropdown-panel a:hover, .nav-dropdown-panel button:hover { background:#eef2ff; color:#4f46e5; }

/* ── MOBILE DRAWER MENU ── */
#mobile-menu-overlay { display:none; position:fixed; inset:0; background:rgba(17,24,39,0.5); z-index:150; opacity:0; transition:opacity 0.25s ease; }
#mobile-menu-overlay.open { display:block; opacity:1; }
#mobile-menu-drawer { position:fixed; top:0; left:0; bottom:0; width:82%; max-width:320px; background:#fff; z-index:151; transform:translateX(-105%); transition:transform 0.3s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column; box-shadow:8px 0 40px rgba(0,0,0,0.15); }
#mobile-menu-overlay.open #mobile-menu-drawer { transform:translateX(0); }
/* Flex items default to min-height:auto, which stops this scroll container
   from ever shrinking to its allocated space — so overflow-y:auto never
   engages and menu items below the fold (Orders/Wishlist/Account/Logout)
   get silently clipped instead of scrolling into view on shorter screens. */
#mobile-menu-drawer .overflow-y-auto { min-height: 0; }
.drawer-link { display:flex; align-items:center; gap:12px; padding:13px 20px; font-size:14.5px; font-weight:500; color:#374151; transition:background 0.15s,color 0.15s; border-left:3px solid transparent; }
.drawer-link:hover, .drawer-link:active { background:#eef2ff; color:#4f46e5; border-left-color:#4f46e5; }
.drawer-section-label { padding:16px 20px 6px; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#9ca3af; }