/* SnipeEX header — port of snipeex-header.html (design intact) */
.sx-hdr{
  --bg:#181a20; --bg-2:#0b0e11; --panel:#1e2329; --line:#2b3139; --line-2:#363d47;
  --text:#eaecef; --muted:#848e9c;
  /* Brand theme green (same as site) — never a different lime */
  --accent:var(--brand-green,var(--xt-yellow,var(--primary-color,#A9DA29)));
  --accent-ink:var(--brand-on-accent,#1E2329);
  --hover:#2b3139;
  --shadow:0 12px 32px rgba(0,0,0,.5);
  --font:var(--sx-font,"Tajawal"),ui-sans-serif,system-ui,sans-serif;
  --h:64px;
  font-family:var(--font);
  color:var(--text);
  box-sizing:border-box;
}
html[data-theme="light"] .sx-hdr{
  --bg:#fff; --bg-2:#f5f5f5; --panel:#fff; --line:#eaecef; --line-2:#dfe2e8;
  --text:#1e2329; --muted:#707a8a;
  --accent:var(--brand-green,var(--xt-yellow,var(--primary-color,#A9DA29)));
  --accent-ink:var(--brand-on-accent,#1E2329);
  --hover:#f3f4f6;
  --shadow:0 12px 32px rgba(20,30,50,.14);
}
.sx-hdr *,.sx-hdr *::before,.sx-hdr *::after{box-sizing:border-box}
.sx-hdr button,.sx-hdr a{font:inherit;color:inherit}
.sx-hdr button{background:none;border:0;cursor:pointer;padding:0}
.sx-hdr a{text-decoration:none}
.sx-hdr svg.i{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sx-hdr :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

.sx-hdr .hdr{
  position:sticky;top:0;z-index:1050;width:100%;
  min-height:var(--h);
  height:auto;
  background:var(--bg);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px);
  box-sizing:border-box;
  overflow:visible
}
.sx-hdr .hdr-in{
  max-width:1600px;min-height:var(--h);width:100%;margin:auto;
  padding:10px 24px;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
  display:flex;align-items:center;gap:16px;
  box-sizing:border-box;min-width:0
}
.sx-hdr .logo{display:inline-flex;align-items:center;height:32px;flex:none;min-width:0;max-width:46vw}
.sx-hdr .logo img{height:28px;width:auto;max-width:100%;display:block;object-fit:contain;object-position:left center}
.sx-hdr .nav{display:flex;align-items:center;height:100%}
.sx-hdr .nav-i{position:relative;height:100%;display:flex;align-items:center}
.sx-hdr .nav-b{display:flex;align-items:center;gap:4px;height:36px;padding:0 14px;border-radius:6px;font-size:14px;font-weight:500;color:var(--text);transition:color .15s,background .15s;background:transparent;border:0;cursor:pointer;text-decoration:none}
.sx-hdr .nav-b:hover,.sx-hdr .nav-i.open .nav-b{color:var(--accent)}
.sx-hdr .nav-b .chev{width:14px;height:14px;color:var(--muted);transition:transform .2s}
.sx-hdr .nav-i.open .chev{transform:rotate(180deg);color:var(--accent)}

.sx-hdr .mega{position:absolute;top:100%;left:0;width:var(--w,600px);max-width:calc(100vw - 32px);max-height:calc(100vh - var(--h) - 16px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:0 0 8px 8px;box-shadow:var(--shadow);padding:8px;
  column-count:2;column-gap:0;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:1060}
.sx-hdr .nav-i.open .mega{opacity:1;visibility:visible;transform:none}
.sx-hdr .sec{break-inside:avoid;padding:6px 0}
.sx-hdr .sec h4{font-size:12px;font-weight:500;color:var(--muted);padding:6px 12px 4px;margin:0}
.sx-hdr .mi{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:6px;transition:background .12s;text-decoration:none;color:inherit}
.sx-hdr .mi:hover{background:var(--hover)}
.sx-hdr .ic{width:22px;height:20px;display:grid;place-items:center;color:var(--muted);flex:none;transition:color .12s}
.sx-hdr .mi:hover .ic{color:var(--accent)}
.sx-hdr .mi strong{display:block;font-size:14px;font-weight:600;line-height:20px;color:var(--text)}
.sx-hdr .mi span.d{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}

.sx-hdr .tools{margin-left:auto;display:flex;align-items:center;gap:8px}
/* Naked icons — NO bg / NO border / NO box on hover */
.sx-hdr .ib{
  width:36px;height:36px;min-width:36px;border-radius:0;
  display:grid;place-items:center;
  color:var(--text);opacity:.88;position:relative;
  transition:opacity .15s,color .15s;
  background:transparent!important;border:0!important;box-shadow:none!important;
  cursor:pointer;text-decoration:none;flex:none;padding:0
}
.sx-hdr .ib:hover,.sx-hdr .ib:focus{
  background:transparent!important;border:0!important;box-shadow:none!important;
  opacity:1;color:#fff
}
html[data-theme="light"] .sx-hdr .ib:hover,
html[data-theme="light"] .sx-hdr .ib:focus{color:var(--text)}
.sx-hdr .ib svg.i{width:20px;height:20px}
.sx-hdr .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
.sx-hdr .sep{width:1px;height:20px;background:var(--line-2);margin:0 4px;flex:none}
.sx-hdr .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 16px;border-radius:6px;
  background:var(--accent)!important;color:var(--accent-ink)!important;
  font-weight:600;font-size:14px;margin:0;transition:filter .15s;
  text-decoration:none;border:0;flex:none;box-shadow:none
}
.sx-hdr .btn:hover{filter:brightness(1.08);color:var(--accent-ink)!important}
.sx-hdr .btn svg.i{width:16px;height:16px;stroke-width:2.2;color:inherit}
.sx-hdr .burger{display:none!important}
.sx-hdr .theme-btn .moon{display:none}
html[data-theme="light"] .sx-hdr .theme-btn .sun{display:none}
html[data-theme="light"] .sx-hdr .theme-btn .moon{display:block}

.sx-hdr .lang-pop{
  position:absolute;top:calc(100% + 6px);right:0;min-width:160px;max-height:280px;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);
  padding:6px;z-index:1070;display:none
}
.sx-hdr .lang-wrap.open .lang-pop{display:block}
.sx-hdr .lang-pop a{
  display:block;padding:8px 10px;border-radius:6px;font-size:13px;color:var(--text);text-decoration:none
}
.sx-hdr .lang-pop a:hover{background:var(--hover)}

/* Profile dropdown — same panel language as mega menus */
.sx-hdr .prof-wrap{position:relative;flex:none}
.sx-hdr .prof-pop{
  position:absolute;top:calc(100% + 8px);right:0;width:280px;max-width:calc(100vw - 24px);
  background:var(--panel);border:1px solid var(--line);border-radius:0 0 8px 8px;box-shadow:var(--shadow);
  padding:8px;z-index:1070;opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .15s,transform .15s,visibility .15s
}
.sx-hdr .prof-wrap.open .prof-pop{opacity:1;visibility:visible;transform:none}
.sx-hdr .prof-head{
  display:flex;align-items:center;gap:12px;padding:10px 12px 12px;margin-bottom:4px;
  border-bottom:1px solid var(--line)
}
.sx-hdr .prof-head img{
  width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--hover)
}
.sx-hdr .prof-head strong{display:block;font-size:14px;font-weight:600;line-height:1.3;color:var(--text)}
.sx-hdr .prof-head span{display:block;font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.sx-hdr .prof-pop .mi{width:100%;text-align:left}
.sx-hdr .prof-pop button.mi{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer}
.sx-hdr .prof-pop .mi.danger strong{color:var(--muted)}
.sx-hdr .prof-pop .mi.danger:hover .ic{color:#ec445f}
.sx-hdr .prof-pop .mi.danger:hover strong{color:#ec445f}

/* Mobile drawer — do NOT use Bootstrap .row (negative margins crop text) */
.sx-hdr .drawer{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  width:100%;
  max-width:100vw;
  background:var(--bg);
  z-index:1040; /* under sticky header (1050) so burger stays tappable */
  padding:calc(var(--h) + env(safe-area-inset-top,0px) + 8px) max(20px, env(safe-area-inset-right,0px)) 28px max(20px, env(safe-area-inset-left,0px));
  overflow-x:hidden;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  transition:transform .22s ease,visibility .22s;
  visibility:hidden;
  box-sizing:border-box;
  margin:0
}
.sx-hdr .drawer.open{transform:none;visibility:visible}
.sx-hdr .drawer .dlink,
.sx-hdr .drawer summary{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;min-height:52px;height:auto;
  padding:14px 2px!important;margin:0!important;
  font-size:15px;font-weight:600;line-height:1.3;
  border-bottom:1px solid var(--line);
  list-style:none;cursor:pointer;color:var(--text);text-decoration:none;
  box-sizing:border-box
}
.sx-hdr .drawer summary{list-style:none}
.sx-hdr .drawer summary::-webkit-details-marker,
.sx-hdr .drawer summary::marker{display:none;content:""}
.sx-hdr .drawer summary > span{flex:1;min-width:0;text-align:start}
.sx-hdr .drawer summary .chev{width:18px;height:18px;color:var(--muted);transition:transform .2s;flex:none;margin-left:8px}
.sx-hdr .drawer details[open] summary .chev{transform:rotate(180deg)}
.sx-hdr .drawer details{margin:0;padding:0;width:100%}
.sx-hdr .drawer h4{font-size:12px;font-weight:500;color:var(--muted);padding:14px 4px 4px;margin:0}
.sx-hdr .drawer .mi{padding:10px 4px;margin:0;width:100%;box-sizing:border-box}
.sx-hdr .drawer .mi span.d{white-space:normal}
.sx-hdr .drawer-cta{
  display:flex!important;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;margin:4px 0 14px;padding:0 16px;
  border-radius:8px;box-sizing:border-box;
  background:var(--accent)!important;color:var(--accent-ink)!important;
  font-weight:700;font-size:15px;text-decoration:none!important;border:0
}
.sx-hdr .drawer-cta svg.i{width:18px;height:18px;stroke-width:2.2;color:inherit}

@media (max-width:1080px){
  .sx-hdr .nav{display:none!important}
  .sx-hdr .hide-m{display:none!important}
  .sx-hdr .sep{display:none!important}
  /* Phone/tablet bar: logo | theme | sandwich — Sign In/Deposit ONLY in drawer */
  .sx-hdr .btn.hide-m{display:none!important}
  .sx-hdr .burger{
    display:grid!important;
    order:99;
    width:44px!important;height:44px!important;min-width:44px!important;
    opacity:1!important;color:var(--text)!important;
    flex:none!important;visibility:visible!important
  }
  .sx-hdr .burger svg.i{width:24px!important;height:24px!important}
  .sx-hdr .tools{
    gap:2px;flex:none;margin-left:auto;
    display:flex!important;align-items:center;flex-wrap:nowrap;
    overflow:visible!important;min-width:0
  }
  .sx-hdr .hdr{overflow:visible!important}
  .sx-hdr .hdr-in{
    gap:10px;overflow:visible!important;
    padding-left:max(12px, env(safe-area-inset-left,0px));
    padding-right:max(12px, env(safe-area-inset-right,0px))
  }
  .sx-hdr .ib{width:40px;height:40px;min-width:40px}
  .sx-hdr .ib svg.i{width:22px;height:22px}
}
@media (max-width:760px){
  .sx-hdr .mega{column-count:1}
}
@media (max-width:520px){
  .sx-hdr .hdr-in{gap:8px}
  .sx-hdr .logo img{height:24px}
}
@media (prefers-reduced-motion:reduce){.sx-hdr *{transition:none!important}}

/* Offset page content under sticky header when this header is used */
body:has(.sx-hdr) .xt-landing,
body:has(.sx-hdr) .cp-user-main-wrapper{
  padding-top:0;
}