/* =====================================================================
   AweSum Brands: shared site navigation (header, account menu, side menu)
   Used by every public page. Markup is generated by nav.js.
   ===================================================================== */
.sn, .sn-drawer{   /* the side menu sits outside the header, so it needs the colours too */
  --sn-navy:#0B1B33; --sn-navy-2:#13284A; --sn-orange:#F5820B; --sn-orange-dark:#D96F00;
  --sn-text:#C9D2E3; --sn-line:rgba(255,255,255,.09);
}
.sn{
  --sn-h:72px;
  position:sticky; top:0; z-index:1000; margin:0; padding:0; border:0; box-shadow:none;
  background:var(--sn-navy); color:#fff; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  border-bottom:1px solid var(--sn-line); transition:box-shadow .2s ease, background .2s ease;
}
.sn.sn-scrolled{ box-shadow:0 8px 24px rgba(5,12,26,.28); background:rgba(11,27,51,.97); }
.sn *, .sn *::before, .sn *::after, .sn-drawer *, .sn-drawer *::before, .sn-drawer *::after{ box-sizing:border-box; }
.sn a{ text-decoration:none; color:inherit; }
.sn button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; margin:0; }
.sn svg, .sn-drawer svg{ display:block; flex:none; }
.sn :focus-visible, .sn-drawer :focus-visible{ outline:3px solid rgba(245,130,11,.6); outline-offset:2px; border-radius:10px; }

.sn-inner{ max-width:1360px; height:var(--sn-h); margin:0 auto; padding:0 48px; display:flex; align-items:center; gap:28px; }

/* brand */
.sn-logo{ display:flex; align-items:center; gap:12px; flex:none; min-width:0; }
.sn-logo img{ width:44px; height:44px; border-radius:11px; background:#fff; padding:3px; object-fit:contain; display:block; box-shadow:0 2px 10px rgba(0,0,0,.25); }
.sn-brand{ font-size:17px; font-weight:600; letter-spacing:-.2px; color:#fff; white-space:nowrap; }
.sn-brand b{ font-weight:800; color:var(--sn-orange); }

/* main links (desktop) */
.sn-links{ display:flex; align-items:stretch; align-self:stretch; gap:4px; margin:0 auto; }
.sn-links a{ position:relative; display:flex; align-items:center; padding:0 14px; font-size:15px; font-weight:500; color:var(--sn-text); transition:color .15s ease; white-space:nowrap; }
.sn-links a::after{ content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--sn-orange); transform:scaleX(0); transition:transform .2s ease; }
.sn-links a:hover{ color:#fff; }
.sn-links a:hover::after{ transform:scaleX(.5); opacity:.6; }
.sn-links a[aria-current="page"]{ color:#fff; font-weight:600; }
.sn-links a[aria-current="page"]::after{ transform:scaleX(1); opacity:1; }

/* right-hand actions */
.sn-actions{ display:flex; align-items:center; gap:10px; flex:none; margin-left:auto; }
.sn-links + .sn-actions{ margin-left:0; }
.sn-icon{ position:relative; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; transition:background .15s ease; }
.sn-icon:hover, .sn-icon[aria-current="page"]{ background:rgba(255,255,255,.08); }
.sn-icon svg{ width:22px; height:22px; }
.sn-badge{ position:absolute; top:3px; right:-3px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--sn-orange); color:#fff; font-size:11px; font-weight:700; line-height:16px; text-align:center; border:2px solid var(--sn-navy); box-sizing:border-box; pointer-events:none; }
.sn-badge[data-empty="true"]{ display:none; }
.sn-acct{ display:flex; align-items:center; gap:8px; }
.sn-btn{ display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 18px; border-radius:11px; font-size:14.5px; font-weight:600; white-space:nowrap; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.sn-btn-ghost{ color:#fff; border:1.5px solid rgba(255,255,255,.22); }
.sn-btn-ghost:hover{ border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.05); }
.sn-btn-primary{ background:var(--sn-orange); color:#fff; box-shadow:0 4px 14px rgba(245,130,11,.3); }
.sn-btn-primary:hover{ background:var(--sn-orange-dark); }

/* account button + dropdown (desktop / tablet) */
.sn-user{ position:relative; display:flex; align-items:center; gap:10px; height:44px; padding:0 10px 0 5px; border-radius:999px; border:1.5px solid rgba(255,255,255,.16) !important; transition:background .15s ease, border-color .15s ease; }
.sn-user:hover, .sn-user[aria-expanded="true"]{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.32) !important; }
.sn-avatar{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff; background:linear-gradient(135deg,#F5820B,#D96F00); letter-spacing:.02em; flex:none; }
.sn-uname{ font-size:14.5px; font-weight:600; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sn-user .sn-chev{ width:16px; height:16px; opacity:.75; transition:transform .2s ease; }
.sn-user[aria-expanded="true"] .sn-chev{ transform:rotate(180deg); }
.sn-pop{ position:absolute; right:0; top:calc(100% + 10px); width:260px; background:#fff; color:#101828; border-radius:16px; box-shadow:0 24px 60px rgba(11,27,51,.28), 0 2px 6px rgba(11,27,51,.08); padding:8px; z-index:1001; transform-origin:top right; animation:sn-pop .16s ease; }
.sn-pop[hidden]{ display:none; }
@keyframes sn-pop{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:none; } }
.sn-pop-head{ display:flex; align-items:center; gap:12px; padding:10px 10px 12px; border-bottom:1px solid #EEF1F6; margin-bottom:6px; }
.sn-pop-head b{ display:block; font-size:14.5px; color:#101828; }
.sn-pop-head small{ display:block; font-size:12.5px; color:#667085; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:170px; }
.sn-pop a, .sn-pop button{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 10px; border-radius:10px; font-size:14.5px; font-weight:500; color:#344054; text-align:left; }
.sn-pop a:hover, .sn-pop button:hover{ background:#F3F5F9; color:#101828; }
.sn-pop svg{ width:18px; height:18px; color:#667085; }
.sn-pop hr{ border:0; border-top:1px solid #EEF1F6; margin:6px 0; }
.sn-pop .sn-danger, .sn-pop .sn-danger svg{ color:#B42318; }
.sn-pop .sn-danger:hover{ background:#FEF3F2; color:#B42318; }
.sn-wrap-rel{ position:relative; }

.sn-burger{ display:none; }

/* ---------------- side menu ---------------- */
.sn-backdrop{ position:fixed; inset:0; z-index:1100; background:rgba(7,14,28,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; transition:opacity .25s ease; }
.sn-drawer{ position:fixed; top:0; right:0; bottom:0; z-index:1101; width:min(88vw,360px); background:#fff; color:#101828; display:flex; flex-direction:column; box-shadow:-24px 0 60px rgba(7,14,28,.35); transform:translateX(102%); transition:transform .3s cubic-bezier(.2,.8,.2,1); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; outline:none; }
.sn-backdrop[hidden], .sn-drawer[hidden]{ display:none; }
.sn-open .sn-backdrop{ opacity:1; }
.sn-open .sn-drawer{ transform:none; }
html.sn-lock, html.sn-lock body{ overflow:hidden; }
.sn-drawer a{ text-decoration:none; color:inherit; }
.sn-drawer button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; margin:0; }

.snd-top{ background:linear-gradient(150deg,#0B1B33 0%,#16305A 100%); color:#fff; padding:18px 18px 20px; position:relative; overflow:hidden; }
.snd-top::after{ content:""; position:absolute; right:-70px; top:-90px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(245,130,11,.45),transparent 65%); pointer-events:none; }
.snd-bar{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.snd-bar .sn-logo img{ width:40px; height:40px; }
.snd-bar .sn-brand{ font-size:16px; }
.snd-close{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.08); }
.snd-close:hover{ background:rgba(255,255,255,.16); }
.snd-close svg{ width:20px; height:20px; }
.snd-acct{ position:relative; z-index:1; margin-top:18px; display:flex; align-items:center; gap:12px; }
.snd-acct .sn-avatar{ width:46px; height:46px; font-size:16px; box-shadow:0 4px 14px rgba(245,130,11,.35); }
.snd-acct b{ display:block; font-size:15.5px; }
.snd-acct small{ display:block; font-size:13px; color:#AFC0DC; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px; }
.snd-guest{ position:relative; z-index:1; margin-top:16px; }
.snd-guest p{ font-size:14px; color:#C9D2E3; line-height:1.5; margin:0 0 14px; }
.snd-guest .snd-btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.snd-guest .sn-btn{ height:44px; padding:0 12px; }

.snd-body{ flex:1; overflow-y:auto; padding:14px 12px; -webkit-overflow-scrolling:touch; }
.snd-label{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#98A2B3; padding:14px 12px 6px; margin:0; }
.snd-link{ position:relative; display:flex; align-items:center; gap:14px; min-height:50px; padding:0 12px; border-radius:12px; font-size:15.5px; font-weight:500; color:#344054; transition:background .15s ease, color .15s ease; width:100%; text-align:left; }
.snd-link:hover{ background:#F3F5F9; color:#101828; }
.snd-ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#F3F5F9; color:#475467; flex:none; transition:background .15s ease, color .15s ease; }
.snd-ic svg{ width:19px; height:19px; }
.snd-link[aria-current="page"]{ background:#FFF4E8; color:#0B1B33; font-weight:600; }
.snd-link[aria-current="page"] .snd-ic{ background:var(--sn-orange,#F5820B); color:#fff; }
.snd-link[aria-current="page"]::before{ content:""; position:absolute; left:-12px; top:12px; bottom:12px; width:4px; border-radius:0 4px 4px 0; background:#F5820B; }
.snd-count{ margin-left:auto; min-width:24px; height:24px; padding:0 8px; border-radius:999px; background:#F5820B; color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center; }
.snd-chev{ margin-left:auto; width:16px; height:16px; color:#C0C7D4; }
.snd-count + .snd-chev{ margin-left:8px; }
.snd-danger, .snd-danger .snd-ic{ color:#B42318; }
.snd-danger .snd-ic{ background:#FEF3F2; }
.snd-danger:hover{ background:#FEF3F2; color:#B42318; }

.snd-foot{ border-top:1px solid #EEF1F6; padding:16px 22px 22px; background:#FAFBFD; }
.snd-foot p{ margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#98A2B3; }
.snd-foot a{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14px; color:#344054; }
.snd-foot a:hover{ color:#D96F00; }
.snd-foot svg{ width:17px; height:17px; color:#F5820B; }

/* ---------------- responsive ---------------- */
@media (max-width:980px){
  .sn-inner{ padding:0 24px; }   /* same breakpoint as the pages' .wrap */
}
@media (max-width:1080px){
  .sn-links{ display:none; }
  .sn-burger{ display:grid; }
  .sn-actions{ margin-left:auto; }
  .sn-links + .sn-actions{ margin-left:auto; }
}
@media (max-width:640px){
  .sn{ --sn-h:64px; }
  .sn-inner{ padding:0 14px 0 16px; gap:12px; }
  .sn-logo img{ width:40px; height:40px; border-radius:10px; }
  .sn-brand{ font-size:16px; }
  .sn-acct{ display:none; }              /* account actions live in the side menu on phones */
  .sn-actions{ gap:4px; }
}
@media (max-width:360px){
  .sn-brand{ display:none; }
}
@media (min-width:1081px){
  .sn-backdrop, .sn-drawer{ display:none !important; }
}
@media (prefers-reduced-motion:reduce){
  .sn *, .sn-drawer, .sn-backdrop, .sn-pop{ transition:none !important; animation:none !important; }
}