/* ════════════════════════════════════════════════════════════════════
   EXHUBB — Premium theme layer  (LIGHT "trust" default + DARK toggle)
   Shared, additive. Linked AFTER each page's inline <style>. Token-driven:
   the theme is switched via data-theme on <html> (exhubb-theme.js).
   Default = a clean light fintech-trust palette (deep blue + emerald +
   white) chosen for an escrow marketplace; data-theme="dark" gives the
   dark variant. Brand is blue across both. No structural layout, IDs or
   JS hooks touched. Researched: blue = stability/trust, green = money/
   safety (cf. escrowvillage + fintech colour research).
   ════════════════════════════════════════════════════════════════════ */

:root{ --xp-ease:cubic-bezier(.2,.7,.2,1); }

/* ═══ LIGHT "TRUST" TOKENS — default (applies unless data-theme="dark") ═══ */
:root:not([data-theme="dark"]){
  --bg:#F2F6FC!important; --bg2:#FFFFFF!important; --bg3:#EAF1FA!important; --bg4:#DCE7F4!important;
  --accent:#1D4ED8!important; --accent2:#2E6BE6!important; --link:#1A56DB!important;
  --text:#0E1B2E!important; --muted:#586679!important;
  --border:rgba(13,27,46,.10)!important; --border2:rgba(29,78,216,.30)!important;
  --green:#0E9F6E!important; --green-bg:rgba(14,159,110,.10)!important;
  --red:#E5484D!important; --red-bg:rgba(229,72,77,.10)!important; --amber-bg:rgba(245,158,11,.14)!important;
  --like:#F43F5E!important;
  --xp-card:0 1px 2px rgba(13,27,46,.05), 0 14px 30px -12px rgba(13,27,46,.14);
  --xp-cardh:0 6px 12px rgba(13,27,46,.06), 0 30px 60px -20px rgba(29,78,216,.22);
  --xp-modal:0 40px 90px -30px rgba(13,27,46,.40), 0 8px 24px -12px rgba(13,27,46,.24);
  --xp-btnsh:0 6px 16px -6px rgba(29,78,216,.45);
  --xp-btnshh:0 14px 28px -8px rgba(29,78,216,.55);
}
/* ═══ DARK TOKENS — only when explicitly chosen ═══ */
:root[data-theme="dark"]{
  --bg:#0A0E16!important; --bg2:#121723!important; --bg3:#1A2030!important; --bg4:#232C40!important;
  --accent:#4F8BFF!important; --accent2:#60A5FA!important; --link:#8FB4FF!important;
  --text:#EAF0FA!important; --muted:#8A97AD!important;
  --border:rgba(255,255,255,.08)!important; --border2:rgba(79,139,255,.42)!important;
  --green:#2DD4A0!important; --green-bg:rgba(45,212,160,.13)!important;
  --red:#FB7185!important; --red-bg:rgba(251,113,133,.14)!important; --amber-bg:rgba(245,158,11,.16)!important;
  --like:#FB7185!important;
  --xp-card:0 1px 0 rgba(255,255,255,.045) inset, 0 14px 38px -20px rgba(0,0,0,.72);
  --xp-cardh:0 0 0 1px rgba(79,139,255,.42), 0 26px 60px -22px rgba(40,90,220,.5);
  --xp-modal:0 40px 100px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
  --xp-btnsh:0 8px 22px -8px rgba(79,139,255,.6);
  --xp-btnshh:0 16px 34px -10px rgba(79,139,255,.75);
}

/* ═══════════════ UNIVERSAL (both themes) ═══════════════ */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:rgba(29,78,216,.18);color:#0E1B2E}
:root[data-theme="dark"] ::selection{background:rgba(79,139,255,.32);color:#fff}
*{scrollbar-width:thin;scrollbar-color:rgba(29,78,216,.40) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(29,78,216,.45),rgba(46,107,230,.45));border-radius:10px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(29,78,216,.7),rgba(46,107,230,.7));background-clip:padding-box}

/* surfaces: theme-aware depth via vars */
.card,.panel,.dcard,.reqcard,.rq-step,.offercard,.notifpanel,.pmenu,
.step,.wcard,.fcard,.composer,.post,.pool,.sellerbar,.tu-card{box-shadow:var(--xp-card)}
.modal{box-shadow:var(--xp-modal)!important}
.card{transition:transform .34s var(--xp-ease),box-shadow .34s var(--xp-ease),border-color .3s var(--xp-ease)!important;animation:xpRise .5s var(--xp-ease) both}
.card:hover{transform:translateY(-6px)!important;box-shadow:var(--xp-cardh)!important;border-color:var(--border2)!important}
.card-img{overflow:hidden}
.card-img img{transition:transform .55s var(--xp-ease)}
.card:hover .card-img img{transform:scale(1.07)}
.reqcard,.rq-step,.step,.wcard,.fcard,.pool{transition:transform .3s var(--xp-ease),box-shadow .3s var(--xp-ease),border-color .3s var(--xp-ease)!important}
.reqcard:hover,.rq-step:hover,.step:hover,.wcard:hover,.fcard:hover,.pool:hover{transform:translateY(-4px);box-shadow:var(--xp-cardh)!important;border-color:var(--border2)!important}
.pool .pimg,.post .pimg,.thumb{overflow:hidden}
.pool:hover .pimg img{transform:scale(1.05);transition:transform .5s var(--xp-ease)}

/* buttons: gradient + sheen sweep + glow (accent is per-theme) */
.btn,.rq-cta-btn,.rq-contact,.hero-search button,.chat-send,.cta,.cta-btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .16s var(--xp-ease),box-shadow .22s var(--xp-ease),filter .16s var(--xp-ease)!important}
.btn:not(.ghost),.rq-contact,.hero-search button,.chat-send,.cta{box-shadow:var(--xp-btnsh)}
.btn:not(.ghost):hover,.rq-cta-btn:hover,.rq-contact:hover,.hero-search button:hover,.chat-send:hover,.cta:hover{transform:translateY(-2px);box-shadow:var(--xp-btnshh)!important}
.btn::after,.rq-cta-btn::after,.rq-contact::after,.cta::after,.hero-search button::after{content:'';position:absolute;top:0;left:-135%;width:55%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-22deg);pointer-events:none;z-index:1}
.btn:hover::after,.rq-cta-btn:hover::after,.rq-contact:hover::after,.cta:hover::after,.hero-search button:hover::after{animation:xpSheen .85s var(--xp-ease)}
@keyframes xpSheen{from{left:-135%}to{left:165%}}
.act,.iconbtn{transition:transform .15s var(--xp-ease),background .15s,color .15s,border-color .15s}
.act:hover,.iconbtn:hover{transform:translateY(-1px)}
.navbtn,.chip,.fchip,.modeseg button,.subnav button,.nl{transition:all .18s var(--xp-ease)!important}
.chip:hover{transform:translateY(-1px)}
.navbtn.active,.modeseg button.on,.subnav button.on{box-shadow:var(--xp-btnsh)}

/* inputs: soft focus ring */
.inp:focus,textarea:focus,select:focus,.chat-input:focus,input:focus,.a-inp:focus{box-shadow:0 0 0 4px rgba(29,78,216,.16)!important;transition:box-shadow .2s var(--xp-ease),border-color .2s var(--xp-ease)}
:root[data-theme="dark"] .inp:focus,:root[data-theme="dark"] input:focus,:root[data-theme="dark"] textarea:focus,:root[data-theme="dark"] select:focus,:root[data-theme="dark"] .a-inp:focus{box-shadow:0 0 0 4px rgba(79,139,255,.22)!important}

/* hero motion */
.hero-title .hl{background-size:220% auto;animation:xpShine 7s linear infinite}
@keyframes xpShine{to{background-position:220% center}}
.hero{position:relative}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(45% 55% at 78% 0%,rgba(46,107,230,.12),transparent 60%);animation:xpDrift 16s ease-in-out infinite}
.hero-inner,.hero-left{position:relative;z-index:1}
@keyframes xpDrift{0%,100%{opacity:.6;transform:translateX(0)}50%{opacity:1;transform:translateX(-3%)}}
.rq-hero,.cta-band{box-shadow:0 26px 64px -24px rgba(29,78,216,.45)!important}

/* entrance + stagger */
@keyframes xpRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.reqcard,.pool,.dcard,.panel,.post{animation:xpRise .45s var(--xp-ease) both}
.grid .card:nth-child(2){animation-delay:.04s}.grid .card:nth-child(3){animation-delay:.08s}
.grid .card:nth-child(4){animation-delay:.12s}.grid .card:nth-child(5){animation-delay:.16s}
.grid .card:nth-child(6){animation-delay:.20s}.grid .card:nth-child(7){animation-delay:.24s}
.grid .card:nth-child(8){animation-delay:.28s}

/* floating theme toggle (injected by exhubb-theme.js) */
#xpThemeToggle{position:fixed;left:18px;bottom:18px;z-index:520;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--bg2);color:var(--text);border:1px solid var(--border2);box-shadow:0 10px 28px -10px rgba(13,27,46,.25);backdrop-filter:blur(10px);transition:transform .18s var(--xp-ease),box-shadow .2s,border-color .2s}
#xpThemeToggle:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 16px 36px -12px rgba(29,78,216,.4);border-color:var(--accent)}
#xpThemeToggle:active{transform:scale(.95)}
#xpThemeToggle svg{width:21px;height:21px}
@media(max-width:760px){#xpThemeToggle{width:42px;height:42px;left:14px;bottom:78px}}

/* nav dropdown: Browse / Requests / My Purchases */
.navdd{position:relative;display:inline-flex}
.navdd-trigger{display:inline-flex!important;align-items:center;gap:7px;background:var(--bg3)!important;border:1px solid var(--border)!important;color:var(--text)!important;font-weight:600!important}
.navdd-trigger:hover{border-color:var(--border2)!important;color:var(--text)!important}
.navdd-caret{transition:transform .2s var(--xp-ease);opacity:.75;flex-shrink:0}
.navdd.open .navdd-caret{transform:rotate(180deg);opacity:1}
.navdd-menu{position:absolute;top:calc(100% + 9px);left:0;min-width:200px;padding:7px;background:var(--bg2);border:1px solid var(--border);border-radius:13px;box-shadow:var(--xp-modal);display:none;flex-direction:column;gap:3px;z-index:60}
.navdd.open .navdd-menu{display:flex;animation:xpRise .18s var(--xp-ease) both}
.navdd-menu .navbtn{width:100%;text-align:left;border-radius:9px;font-weight:600}

/* storefront footer */
.mkt-foot{border-top:1px solid var(--border);margin-top:56px;padding:30px 0 46px;position:relative;z-index:1}
.mkt-foot-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.mkt-foot-copy{color:var(--muted);font-size:13px}
.mkt-foot-links{display:flex;gap:22px;flex-wrap:wrap}
.mkt-foot-links a{color:var(--muted);font-size:13.5px;font-weight:600;transition:color .15s var(--xp-ease)}
.mkt-foot-links a:hover{color:var(--accent)}

/* prevent horizontal overflow + wrap the packed storefront nav on mid widths */
html{overflow-x:clip}
@media (min-width:769px) and (max-width:1680px){
  header .bar{flex-wrap:wrap!important;height:auto!important;min-height:62px;row-gap:7px;padding-top:8px!important;padding-bottom:8px!important}
  header .bar .hspacer{flex:0 0 100%!important;height:0!important;min-width:0!important;margin:0!important}
  header .bar a[href="/groupbuy"]{margin-left:auto!important}
}

/* ═══════════════ DARK-ONLY surface fixes (only when data-theme="dark") ═══════════════ */
html[data-theme="dark"] header{background:rgba(12,16,26,.7)!important;backdrop-filter:blur(20px) saturate(150%)!important;-webkit-backdrop-filter:blur(20px) saturate(150%)!important;border-bottom:1px solid rgba(255,255,255,.07)!important;box-shadow:0 12px 40px -28px rgba(0,0,0,.9)}
html[data-theme="dark"] .hero:has(.hero-inner){background-image:
  radial-gradient(circle at 82% 6%, rgba(79,139,255,.20), transparent 52%),
  radial-gradient(circle at 4% 96%, rgba(46,107,230,.18), transparent 50%),
  linear-gradient(180deg,#0F1626 0%,#0A0E16 100%)!important;border-bottom:1px solid var(--border)!important}
html[data-theme="dark"] .hero-search{background:var(--bg2)!important;box-shadow:0 24px 60px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05)!important}
html[data-theme="dark"] .hero-search input{color:var(--text)!important}
html[data-theme="dark"] .hero-card{background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(79,139,255,.10))!important;border-color:var(--border2)!important;backdrop-filter:blur(10px)}
html[data-theme="dark"] .stars .st{color:rgba(255,255,255,.18)!important}
html[data-theme="dark"] .rq-hero-card{color:#0E1B2E!important}
html[data-theme="dark"] .logo .dot{box-shadow:0 0 16px rgba(79,139,255,.7)!important}
html[data-theme="dark"] .logo .logoimg{filter:drop-shadow(0 0 12px rgba(79,139,255,.55))!important}
.stars .st.on{color:#F59E0B!important}

/* ═══════════════ LIGHT-DEFAULT recolour of hardcoded-purple areas → blue ═══════════════ */
:root:not([data-theme="dark"]) .rq-hero{background:linear-gradient(120deg,#1D4ED8 0%,#2563EB 55%,#3B82F6 100%)!important}
:root:not([data-theme="dark"]) #authScreen .a-left{background:linear-gradient(150deg,#13316E 0%,#1D4ED8 55%,#2E6BE6 100%)!important}
:root:not([data-theme="dark"]) #authScreen .g1{background:#60A5FA!important}
:root:not([data-theme="dark"]) #authScreen .g2{background:#1D4ED8!important}
:root:not([data-theme="dark"]) #authScreen .a-pill{color:#13316E!important}
:root:not([data-theme="dark"]) .hero:has(.hero-inner){background-image:
  radial-gradient(circle at 82% 8%, rgba(46,107,230,.14), transparent 52%),
  radial-gradient(circle at 6% 95%, rgba(29,78,216,.10), transparent 50%),
  linear-gradient(180deg,#EAF1FB 0%,#F2F6FC 100%)!important}
:root:not([data-theme="dark"]) body{background-image:radial-gradient(circle at 12% -8%,rgba(29,78,216,.07),transparent 42%),radial-gradient(circle at 90% 0%,rgba(46,107,230,.05),transparent 42%)!important}

/* ═══ "Join our community" popup: fit any phone width & stay centered (so it
       reliably shows on mobile, not pushed off-screen) ═══ */
#commPop{padding:16px!important}
#commPop > div{max-width:min(400px,calc(100vw - 32px))!important;width:100%!important}

/* ═══ accessibility ═══ */
@media (prefers-reduced-motion:reduce){
  .card,.reqcard,.pool,.dcard,.panel,.post,.hero-title .hl,.hero::after{animation:none!important}
  *{transition-duration:.01ms!important}
}
