@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root{
  /* fresh, warm-calm identity — distinct from KoPartner */
  --teal:#14B8A6;          /* trust, sukoon */
  --teal-d:#0E9499;
  --teal-l:#5EEAD4;
  --amber:#F5A623;         /* apnapan, warmth */
  --amber-d:#D98E0B;
  --coral:#2DD4BF;
  --sun:#FBD449;
  --ink:#1F2937;           /* deep teal-tinted ink */
  --ink-2:#475569;
  --muted:#94A3B8;
  --bg:#F4FAF9;            /* soft mint-cream */
  --bg-2:#EAF6F4;
  --surface:#ffffff;
  --line:rgba(20,184,166,.1);
  --grad-brand:linear-gradient(115deg,#14B8A6 0%,#2DD4BF 45%,#F5A623 110%);
  --grad-warm:linear-gradient(120deg,#F5A623 0%,#2DD4BF 100%);
  --grad-soft:linear-gradient(135deg,#D6F2EC 0%,#FBF3E2 100%);
  --r:24px; --r-sm:16px; --r-lg:32px;
  --sh-sm:0 4px 18px rgba(31,41,55,.06);
  --sh:0 22px 60px rgba(20,184,166,.14);
  --sh-hover:0 30px 70px rgba(20,184,166,.2);
}
*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink); background:var(--bg); overflow-x:hidden; }
h1,h2,h3,h4,h5,.df{ font-family:'Sora',sans-serif; letter-spacing:-.025em; }
.text-grad{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.text-warm{ background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* WIDER container, tighter side gap */
.container{ max-width:1320px; padding-left:2rem; padding-right:2rem; }
@media (max-width:767px){ .container{ padding-left:1.1rem; padding-right:1.1rem; } }

/* buttons */
.btn{ border-radius:50px; font-weight:600; padding:.85rem 1.7rem; border:none; transition:transform .2s,box-shadow .2s,filter .2s; }
.btn:active{ transform:scale(.97); }
.btn-brand{ background:var(--grad-brand); color:#fff; box-shadow:0 12px 26px rgba(20,184,166,.3); }
.btn-brand:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 18px 34px rgba(20,184,166,.4); filter:saturate(1.08); }
.btn-outline-brand{ background:#fff; color:var(--teal-d); border:1.6px solid rgba(20,184,166,.28); }
.btn-outline-brand:hover{ border-color:var(--teal); color:var(--teal-d); transform:translateY(-2px); box-shadow:var(--sh-sm); }
.btn-ghost-w{ background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(8px); border:1.5px solid rgba(255,255,255,.4); }
.btn-ghost-w:hover{ background:rgba(255,255,255,.26); color:#fff; }

/* navbar */
.navbar{ background:rgba(246,251,249,.8); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--line); padding:.65rem 0; transition:.3s; }
.navbar.scrolled{ box-shadow:var(--sh-sm); background:rgba(246,251,249,.97); }
.brand{ font-family:'Sora'; font-weight:800; font-size:1.5rem; color:var(--ink); display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.brand .mark{ width:40px;height:40px;border-radius:14px;background:var(--grad-brand); display:grid;place-items:center;color:#fff;font-size:1.2rem; box-shadow:0 8px 18px rgba(20,184,166,.4); }
.nav-link{ color:var(--ink-2)!important; font-weight:600; font-size:.95rem; margin:0 .55rem; }
.nav-link:hover{ color:var(--teal-d)!important; }

/* ============ HERO (decluttered + animated) ============ */
.hero{ position:relative; padding:5rem 0 4rem; text-align:center; overflow:hidden; }
.orb{ position:absolute; border-radius:50%; filter:blur(70px); z-index:0; }
.orb-a{ width:440px;height:440px; background:rgba(20,184,166,.18); top:-120px; left:-80px; animation:drift 14s ease-in-out infinite; }
.orb-b{ width:380px;height:380px; background:rgba(250,204,21,.18); top:0; right:-100px; animation:drift 16s ease-in-out infinite reverse; }
.orb-c{ width:300px;height:300px; background:rgba(52,211,153,.12); bottom:-80px; left:45%; animation:drift 18s ease-in-out infinite; }
@keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(30px,-24px) scale(1.06);} }

.hero-inner{ max-width:920px; margin:0 auto; position:relative; z-index:1; }
.badge-pill{ display:inline-flex; align-items:center; gap:.55rem; background:#fff; color:var(--teal-d); font-weight:700; font-size:.82rem; padding:.55rem 1.2rem; border-radius:50px; box-shadow:var(--sh-sm); border:1px solid var(--line); }
.dotg{ width:8px;height:8px;border-radius:50%;background:var(--teal); box-shadow:0 0 0 4px rgba(20,184,166,.18); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(20,184,166,.18);} 50%{ box-shadow:0 0 0 7px rgba(20,184,166,.06);} }

.hero h1{ font-size:clamp(2.5rem,5.6vw,4.6rem); font-weight:800; line-height:1.06; margin:1.6rem 0 0; }
.hero-sub{ color:var(--ink-2); font-size:clamp(1.05rem,1.6vw,1.25rem); max-width:38rem; margin:1.5rem auto 0; line-height:1.65; }
.hero-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem; }
.hero-cta .btn{ padding:1.05rem 2.1rem; font-size:1.04rem; }

.social-proof{ display:inline-flex; align-items:center; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; justify-content:center; }
.avs{ display:flex; }
.avs img,.avs .ph{ width:46px;height:46px;border-radius:50%; border:3px solid #fff; object-fit:cover; margin-left:-14px; box-shadow:var(--sh-sm); }
.avs img:first-child{ margin-left:0; }
.avs .ph{ background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-weight:700; font-size:.82rem; }
.sp-text{ text-align:left; }
.sp-text .stars{ color:var(--sun); font-size:.9rem; }
.sp-text small{ color:var(--muted); font-weight:600; font-size:.85rem; }

.mini-trust{ display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; margin-top:2.2rem; color:var(--ink-2); font-weight:600; font-size:.92rem; }
.mini-trust span{ display:inline-flex; align-items:center; gap:.45rem; }
.mini-trust i{ color:var(--teal); }

.statband{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh); border:1px solid var(--line); padding:2rem 1.6rem; margin-top:3.6rem; position:relative; z-index:1; }
.stat .n{ font-family:'Sora'; font-weight:800; font-size:2.1rem; }
.stat .l{ color:var(--muted); font-size:.85rem; font-weight:600; margin-top:.2rem; }

/* animation utility */
.reveal{ opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
/* JS-enabled scroll animation: only hide when main.js has marked the page */
.js-reveal .reveal:not(.in){ opacity:0; transform:translateY(24px); }
.d1{ transition-delay:.08s; } .d2{ transition-delay:.16s; } .d3{ transition-delay:.24s; }
.d4{ transition-delay:.32s; } .d5{ transition-delay:.4s; } .d6{ transition-delay:.48s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } .orb{ animation:none; } }

/* sections */
.section{ padding:5.5rem 0; }
.eyebrow{ display:inline-block; background:var(--grad-soft); color:var(--teal-d); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding:.45rem 1.1rem; border-radius:50px; }
.sec-title{ font-size:clamp(2rem,4vw,3rem); font-weight:800; margin-top:1rem; }
.sec-sub{ color:var(--ink-2); max-width:40rem; margin:.7rem auto 0; }

.cat-row{ display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; margin-top:2.2rem; }
.cat{ display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line); padding:.65rem 1.2rem; border-radius:50px; font-weight:600; font-size:.92rem; color:var(--ink-2); cursor:pointer; transition:.2s; }
.cat:hover,.cat.active{ background:var(--grad-brand); color:#fff; border-color:transparent; transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,184,166,.25); }
.cat i{ font-size:1.05rem; }

.svc{ background:var(--surface); border-radius:var(--r); padding:1.7rem; height:100%; border:1px solid var(--line); transition:transform .25s,box-shadow .25s; position:relative; overflow:hidden; }
.svc::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad-brand); transform:scaleX(0); transform-origin:left; transition:.3s; }
.svc:hover{ transform:translateY(-8px); box-shadow:var(--sh-hover); }
.svc:hover::before{ transform:scaleX(1); }
.svc .emoji{ width:64px;height:64px;border-radius:18px; display:grid;place-items:center; font-size:1.9rem; margin-bottom:1.1rem; background:var(--grad-soft); transition:.3s; }
.svc:hover .emoji{ transform:scale(1.08) rotate(-4deg); }
.svc h5{ font-weight:700; font-size:1.18rem; margin-bottom:.3rem; }
.svc .desc{ color:var(--muted); font-size:.92rem; min-height:2.6em; }
.svc .price{ font-family:'Sora'; font-weight:800; font-size:1.5rem; margin:.9rem 0 1rem; }
.svc .from{ font-size:.78rem; color:var(--muted); font-weight:600; }
.svc .btn{ width:100%; padding:.7rem; font-size:.95rem; }

/* mobile: services as clean single-column horizontal cards */
@media (max-width:575px){
  #services .svc{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"emoji head" "emoji desc" "price price" "btn btn"; column-gap:1rem; row-gap:.25rem; align-items:center; padding:1.3rem; }
  #services .svc .emoji{ grid-area:emoji; width:56px;height:56px; margin:0; font-size:1.6rem; align-self:start; }
  #services .svc h5{ grid-area:head; margin:0; align-self:end; }
  #services .svc .desc{ grid-area:desc; min-height:0; align-self:start; }
  #services .svc .from{ display:none; }
  #services .svc .price{ grid-area:price; margin:.7rem 0 .8rem; font-size:1.6rem; }
  #services .svc .btn{ grid-area:btn; }
}

.how{ background:var(--bg-2); }
.step{ text-align:center; padding:1.4rem 1rem; position:relative; }
.step .circle{ width:96px;height:96px;border-radius:28px; background:#fff; box-shadow:0 16px 40px rgba(20,184,166,.12); display:grid;place-items:center; font-size:2.1rem; color:var(--teal-d); margin:0 auto 1.4rem; position:relative; transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s; z-index:2; }
.step .circle::after{ content:""; position:absolute; inset:-6px; border-radius:32px; background:var(--grad-soft); z-index:-1; opacity:0; transform:scale(.85); transition:.35s; }
.step:hover .circle{ transform:translateY(-6px) scale(1.04); box-shadow:0 24px 50px rgba(20,184,166,.22); }
.step:hover .circle::after{ opacity:1; transform:scale(1); }
.step:hover .circle i{ animation:wiggle .5s ease; }
@keyframes wiggle{ 0%,100%{ transform:rotate(0);} 30%{ transform:rotate(-8deg);} 60%{ transform:rotate(6deg);} }
.step .circle .n{ position:absolute; top:-10px; right:-10px; width:32px;height:32px;border-radius:50%; background:var(--grad-warm); color:#fff; font-size:.9rem; font-weight:700; display:grid;place-items:center; font-family:'Sora'; box-shadow:0 6px 16px rgba(250,204,21,.5); border:3px solid var(--bg-2); }
.step h5{ font-weight:700; font-size:1.22rem; }
.step p{ color:var(--muted); font-size:.94rem; max-width:17rem; margin:.4rem auto 0; }
.step-line{ position:absolute; top:48px; left:62%; width:76%; height:3px; overflow:hidden; border-radius:3px; }
.step-line::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,var(--teal-l) 0 8px,transparent 8px 16px); opacity:.4; }
.step-line::after{ content:""; position:absolute; left:0; top:0; height:100%; width:0; background:var(--grad-brand); border-radius:3px; transition:width 1.1s ease .3s; }
.how-steps.in .step-line::after{ width:100%; }

.plans{ background:var(--grad-soft); }
.plan{ background:#fff; border-radius:var(--r); padding:2rem 1.8rem; height:100%; border:1px solid var(--line); transition:.25s; position:relative; }
.plan:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
.plan.feat{ border:2px solid transparent; background:linear-gradient(#fff,#fff) padding-box, var(--grad-brand) border-box; box-shadow:var(--sh); }
.plan .tag{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--grad-warm); color:#fff; font-size:.72rem; font-weight:700; padding:.38rem 1.05rem; border-radius:50px; letter-spacing:.05em; }
.plan h4{ font-weight:700; }
.plan .pr{ font-family:'Sora'; font-weight:800; font-size:2.5rem; margin:.4rem 0; }
.plan .pr small{ font-size:.95rem; color:var(--muted); font-weight:600; }
.plan ul{ list-style:none; padding:0; margin:1.3rem 0; }
.plan li{ padding:.5rem 0; color:var(--ink-2); font-size:.93rem; display:flex; gap:.6rem; align-items:flex-start; }
.plan li i{ color:var(--teal); margin-top:.15rem; }

.safety-card{ background:linear-gradient(135deg,#14B8A6 0%,#0E9499 100%); border-radius:var(--r-lg); color:#fff; padding:3.4rem; position:relative; overflow:hidden; }
.safety-card .orb-w{ position:absolute; width:320px;height:320px;border-radius:50%; background:rgba(255,255,255,.07); top:-110px; right:-70px; }
.spill{ display:flex; gap:.9rem; align-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm); padding:1.05rem 1.2rem; margin-bottom:.85rem; position:relative; overflow:hidden; cursor:default; opacity:0; transform:translateX(28px); transition:transform .55s cubic-bezier(.2,.7,.2,1), opacity .55s, background .25s, border-color .25s; }
.safety-card.in .spill{ opacity:1; transform:none; }
.safety-card.in .spill:nth-child(1){ transition-delay:.1s; }
.safety-card.in .spill:nth-child(2){ transition-delay:.22s; }
.safety-card.in .spill:nth-child(3){ transition-delay:.34s; }
.safety-card.in .spill:nth-child(4){ transition-delay:.46s; }
.spill::before{ content:""; position:absolute; left:0; top:0; height:100%; width:3px; background:var(--sun); transform:scaleY(0); transform-origin:bottom; transition:transform .3s; }
.spill:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); transform:translateX(6px); }
.spill:hover::before{ transform:scaleY(1); }
.spill .sp-ico{ width:46px;height:46px;border-radius:13px; background:rgba(255,255,255,.12); display:grid;place-items:center; flex:none; transition:transform .3s; }
.spill:hover .sp-ico{ transform:scale(1.12) rotate(-6deg); background:rgba(255,255,255,.2); }
.spill i{ font-size:1.4rem; color:var(--sun); }

.earn-card{ background:var(--grad-soft); border-radius:var(--r-lg); padding:3.4rem; }

.quote{ background:#fff; border-radius:var(--r); padding:1.8rem; height:100%; border:1px solid var(--line); box-shadow:var(--sh-sm); transition:.25s; }
.quote:hover{ transform:translateY(-5px); box-shadow:var(--sh); }
.quote .stars{ color:var(--sun); font-size:.9rem; }
.quote p{ color:var(--ink); font-size:.97rem; line-height:1.6; }
.quote .who{ display:flex; align-items:center; gap:.7rem; margin-top:1rem; }
.quote .av{ width:44px;height:44px;border-radius:50%; background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-weight:700; }

.cta-card{ background:var(--grad-brand); border-radius:var(--r-lg); padding:3.8rem; text-align:center; color:#fff; position:relative; overflow:hidden; }
.cta-card .orb-w{ position:absolute; width:360px;height:360px;border-radius:50%; background:rgba(255,255,255,.09); }

/* ===== FOOTER (BOBOK-style: banner half-out, half-in) ===== */
.footer-wrap{ position:relative; }
.foot-cta-zone{ background:var(--bg); padding-top:5rem; }
.foot-cta{ background:var(--grad-brand); border-radius:var(--r-lg); padding:2.8rem 3rem; position:relative; overflow:hidden; box-shadow:var(--sh); z-index:2; margin-bottom:-5.5rem; }
.foot-cta .orb-w{ position:absolute; width:300px;height:300px;border-radius:50%; background:rgba(255,255,255,.1); }
.btn-amber{ background:var(--grad-warm); color:#fff; box-shadow:0 10px 24px rgba(250,204,21,.4); }
.btn-amber:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 16px 30px rgba(250,204,21,.5); }

footer{ background:#0B3A56; color:#94A3B8; padding:8rem 0 7rem; position:relative; }
footer::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; }
footer .container{ position:relative; z-index:1; }
.foot-logo{ display:flex; align-items:center; gap:.7rem; }
.foot-logo .mark{ width:46px;height:46px;border-radius:14px;background:var(--grad-brand); display:grid;place-items:center;color:#fff;font-size:1.3rem; box-shadow:0 8px 18px rgba(20,184,166,.4); }
.fl-name{ font-family:'Sora'; font-weight:800; font-size:1.4rem; color:#fff; }
.fl-tag{ font-size:.78rem; color:var(--teal-l); font-weight:600; }
.foot-desc{ margin:1.2rem 0; max-width:24rem; line-height:1.65; font-size:.93rem; }
.trust-badge{ display:inline-flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#BAE6FD; font-size:.8rem; font-weight:600; padding:.5rem .9rem; border-radius:50px; }
.trust-badge i{ color:var(--sun); }
.soc{ width:42px;height:42px;border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#BAE6FD!important; display:grid;place-items:center; font-size:1.05rem; transition:.2s; }
.soc:hover{ background:var(--grad-brand); color:#fff!important; border-color:transparent; transform:translateY(-3px); }
footer h6{ color:#fff; font-weight:700; margin-bottom:1.2rem; font-family:'Sora'; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; }
footer h6{ color:var(--sun); }
.foot-links a{ color:#94A3B8; text-decoration:none; font-size:.93rem; transition:.2s; width:fit-content; }
.foot-links a:hover{ color:#fff; padding-left:4px; }
.foot-contact .fc-item{ display:flex; gap:.7rem; align-items:flex-start; margin-bottom:1rem; }
.fc-ico{ width:38px;height:38px;border-radius:11px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--sun); display:grid;place-items:center; flex:none; }
.foot-contact small{ color:var(--muted); font-size:.74rem; display:block; }
.foot-contact .fc-item>div>div{ color:#D6F2EC; color:#D6F2EC; font-size:.9rem; font-weight:600; }
.store-btn{ display:flex; align-items:center; gap:.7rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.6rem .9rem; color:#fff!important; text-decoration:none; transition:.2s; }
.store-btn:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); border-color:rgba(255,255,255,.2); }
.store-btn i{ font-size:1.5rem; color:var(--teal-l); }
.store-btn small{ font-size:.66rem; color:var(--muted); display:block; }
.store-btn>div>div{ font-size:.92rem; font-weight:700; }
.foot-bottom a{ color:#94A3B8; text-decoration:none; }
.foot-bottom a:hover{ color:#fff; }
@media (max-width:991px){ .foot-cta{ margin-bottom:-7rem; padding:2.2rem 2.2rem 3rem; } footer{ padding:9rem 0 7rem; } .foot-cta-zone{ padding-top:2.5rem; } .foot-cta .row>div{ width:100%; } }

.app-bar{ position:fixed; bottom:0; left:0; right:0; z-index:1050; background:rgba(255,255,255,.93); backdrop-filter:blur(16px); border-top:1px solid var(--line); padding:.4rem .3rem calc(.4rem + env(safe-area-inset-bottom)); display:none; box-shadow:0 -10px 36px rgba(31,41,55,.08); }
.app-bar .item{ flex:1; text-align:center; color:var(--muted); font-size:.66rem; font-weight:700; text-decoration:none; padding:.3rem 0; transition:.2s; }
.app-bar .item i{ display:block; font-size:1.4rem; margin-bottom:.05rem; }
.app-bar .item.active{ color:var(--teal-d); }
.app-bar .center{ flex:none; width:66px; }
.app-bar .center .fab{ width:56px;height:56px;border-radius:50%; background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-size:1.55rem; margin:-26px auto 0; box-shadow:0 12px 26px rgba(20,184,166,.5); }

/* ===== PREMIUM MOBILE DRAWER ===== */
.menu-toggle{ background:#fff; border:1px solid var(--line); width:46px;height:46px; border-radius:14px; display:none; align-items:center; justify-content:center; color:var(--ink); font-size:1.4rem; box-shadow:var(--sh-sm); transition:.2s; }
.menu-toggle:active{ transform:scale(.94); }
.drawer-backdrop{ position:fixed; inset:0; background:rgba(12,33,29,.45); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:.3s; z-index:1090; }
.drawer-backdrop.open{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:min(86vw,360px); background:var(--bg); z-index:1100; transform:translateX(100%); transition:transform .42s cubic-bezier(.3,.8,.25,1); display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(12,33,29,.2); padding-bottom:env(safe-area-inset-bottom); }
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:1.3rem 1.4rem; border-bottom:1px solid var(--line); }
.drawer-close{ width:42px;height:42px;border-radius:12px; background:#fff; border:1px solid var(--line); display:grid;place-items:center; color:var(--ink); font-size:1.3rem; transition:.2s; }
.drawer-close:active{ transform:scale(.92); }
.drawer-links{ padding:1rem .9rem; display:flex; flex-direction:column; gap:.3rem; flex:1; overflow-y:auto; }
.drawer-links a{ display:flex; align-items:center; gap:.9rem; padding:.95rem 1rem; border-radius:14px; color:var(--ink); text-decoration:none; font-weight:600; font-size:1.02rem; transition:.2s; opacity:0; transform:translateX(20px); }
.drawer.open .drawer-links a{ opacity:1; transform:none; }
.drawer.open .drawer-links a:nth-child(1){ transition:.4s .08s; }
.drawer.open .drawer-links a:nth-child(2){ transition:.4s .14s; }
.drawer.open .drawer-links a:nth-child(3){ transition:.4s .2s; }
.drawer.open .drawer-links a:nth-child(4){ transition:.4s .26s; }
.drawer.open .drawer-links a:nth-child(5){ transition:.4s .32s; }
.drawer-links a .di{ width:40px;height:40px;border-radius:12px; background:var(--grad-soft); display:grid;place-items:center; color:var(--teal-d); font-size:1.15rem; flex:none; transition:.2s; }
.drawer-links a:active,.drawer-links a:hover{ background:#fff; box-shadow:var(--sh-sm); }
.drawer-links a:hover .di{ background:var(--grad-brand); color:#fff; }
.drawer-foot{ padding:1.2rem 1.4rem; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.7rem; }
.drawer-foot .btn{ width:100%; justify-content:center; display:flex; align-items:center; }

@media (max-width:991px){ .step-line{ display:none; } .menu-toggle{ display:flex; } .navbar .navbar-toggler{ display:none; } }
@media (max-width:767px){
  .section{ padding:3.6rem 0; } .hero{ padding:2.6rem 0 2.2rem; }
  .safety-card,.earn-card,.cta-card{ padding:2rem 1.5rem; }
  .app-bar{ display:flex; align-items:flex-end; } body{ padding-bottom:4.3rem; }
  .navbar .btn-brand{ display:none; } .hero-cta .btn{ width:100%; }
  .social-proof{ gap:.7rem; }
}

/* ============================================================
   BROWSE / SEARCH COMPANIONS PAGE
   ============================================================ */
.browse-head{ background:var(--grad-soft); padding:2.6rem 0 2rem; }
.browse-head h1{ font-size:clamp(1.7rem,3.5vw,2.4rem); font-weight:800; }
.browse-head p{ color:var(--ink-2); margin:.4rem 0 0; }

/* search + filter bar */
.filter-bar{ background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm); padding:1rem; margin-top:1.4rem; position:sticky; top:74px; z-index:20; }
.filter-bar .form-control,.filter-bar .form-select{ border:none; background:var(--bg-2); border-radius:12px; padding:.75rem .9rem; font-weight:500; font-size:.93rem; }
.filter-bar .form-control:focus,.filter-bar .form-select:focus{ box-shadow:0 0 0 3px var(--grad-soft); background:#fff; }
.filter-ico{ position:relative; }
.filter-ico i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--teal); z-index:2; font-size:1rem; }
.filter-ico .form-control,.filter-ico .form-select{ padding-left:38px; }

/* results row */
.results-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:1.8rem 0 1.2rem; }
.results-row .count{ color:var(--ink-2); font-weight:600; }
.results-row .count b{ color:var(--ink); }
.sort-sel{ border:1px solid var(--line); background:#fff; border-radius:50px; padding:.55rem 1rem; font-weight:600; font-size:.9rem; color:var(--ink-2); }

/* companion card */
.comp-card{ background:#fff; border:1px solid rgba(20,184,166,.07); border-radius:22px; overflow:hidden; height:100%; display:flex; flex-direction:column; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; position:relative; box-shadow:0 2px 14px rgba(31,41,55,.05); }
.comp-card:hover{ transform:translateY(-8px); box-shadow:0 28px 60px rgba(20,184,166,.18); border-color:rgba(20,184,166,.15); }
.comp-photo{ position:relative; aspect-ratio:4/3; max-height:240px; overflow:hidden; background:var(--bg-2); }
.comp-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(31,41,55,.35) 0%, transparent 40%); pointer-events:none; }
.comp-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.comp-card:hover .comp-photo img{ transform:scale(1.07); }
.comp-verify{ position:absolute; top:.8rem; left:.8rem; z-index:2; background:rgba(255,255,255,.96); color:var(--teal-d); font-size:.72rem; font-weight:700; padding:.34rem .72rem; border-radius:50px; display:inline-flex; align-items:center; gap:.3rem; box-shadow:0 4px 12px rgba(31,41,55,.12); backdrop-filter:blur(4px); }
.comp-verify i{ color:var(--teal); }
.comp-fav{ position:absolute; top:.8rem; right:.8rem; z-index:2; width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.96); border:none; display:grid;place-items:center; color:var(--muted); font-size:1.05rem; box-shadow:0 4px 12px rgba(31,41,55,.12); cursor:pointer; transition:.2s; backdrop-filter:blur(4px); }
.comp-fav:hover,.comp-fav.active{ color:var(--coral); transform:scale(1.12); }
.comp-rating{ position:absolute; bottom:.8rem; right:.8rem; z-index:2; background:rgba(31,41,55,.6); color:#fff; font-size:.8rem; font-weight:700; padding:.32rem .65rem; border-radius:50px; display:inline-flex; align-items:center; gap:.3rem; backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.15); }
.comp-rating i{ color:var(--sun); }
.comp-body{ padding:1.2rem 1.25rem 1.25rem; display:flex; flex-direction:column; flex:1; }
.comp-name{ font-family:'Sora'; font-weight:700; font-size:1.15rem; display:flex; align-items:center; gap:.4rem; letter-spacing:-.01em; }
.comp-name .age{ color:var(--muted); font-weight:500; font-size:.92rem; }
.comp-loc{ color:var(--muted); font-size:.85rem; display:flex; align-items:center; gap:.3rem; margin-top:.25rem; }
.comp-loc i{ color:var(--teal-l); }
.comp-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.85rem 0; flex:1; align-content:flex-start; }
.comp-tag{ background:var(--grad-soft); color:var(--teal-d); font-size:.73rem; font-weight:600; padding:.3rem .65rem; border-radius:50px; }
.comp-foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:auto; padding-top:1rem; border-top:1px solid rgba(20,184,166,.08); }
.comp-price{ font-family:'Sora'; font-weight:800; font-size:1.18rem; color:var(--ink); white-space:nowrap; }
.comp-price small{ font-size:.76rem; color:var(--muted); font-weight:600; }
.comp-card .btn{ padding:.62rem 1.15rem; font-size:.85rem; white-space:nowrap; flex:none; box-shadow:0 8px 18px rgba(20,184,166,.25); }
.comp-card .btn:hover{ box-shadow:0 12px 24px rgba(20,184,166,.35); }

/* ===== MOBILE: premium horizontal card (Airbnb/Urban-Company style) ===== */
@media (max-width:767px){
  /* one card per row, full width */
  #services-grid, .browse-grid{ }
  .comp-card{
    flex-direction:row;
    border-radius:20px;
    align-items:stretch;
  }
  .comp-photo{
    flex:none;
    width:38%;
    max-width:150px;
    aspect-ratio:auto;
    max-height:none;
    border-radius:0;
  }
  .comp-photo::after{ background:linear-gradient(to top, rgba(31,41,55,.4) 0%, transparent 45%); }
  .comp-verify{ top:.55rem; left:.55rem; font-size:.62rem; padding:.26rem .5rem; gap:.22rem; }
  .comp-fav{ display:none; }            /* hide fav on small photo, keep clean */
  .comp-rating{ bottom:.55rem; right:.55rem; left:.55rem; justify-content:center; font-size:.72rem; padding:.28rem .4rem; }
  .comp-body{ padding:.9rem 1rem; }
  .comp-name{ font-size:1.05rem; }
  .comp-loc{ font-size:.8rem; }
  .comp-tags{ margin:.55rem 0; gap:.3rem; }
  .comp-tag{ font-size:.68rem; padding:.24rem .55rem; }
  .comp-foot{ flex-direction:row; align-items:center; justify-content:space-between; gap:.5rem; padding-top:.7rem; }
  .comp-foot .comp-price{ text-align:left; font-size:1.05rem; }
  .comp-card .btn{ width:auto; padding:.5rem .9rem; font-size:.8rem; }
}
@media (max-width:380px){
  .comp-photo{ width:42%; }
  .comp-foot{ flex-direction:column; align-items:stretch; }
  .comp-foot .comp-price{ text-align:center; }
  .comp-card .btn{ width:100%; }
}

/* mobile filter toggle */
.filter-toggle{ display:none; }
@media (max-width:767px){
  .filter-bar{ position:static; padding:.9rem; }
  .filter-collapse{ display:none; margin-top:.8rem; }
  .filter-collapse.open{ display:block; }
  .filter-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; font-weight:700; color:var(--ink); font-size:1rem; }
  .filter-toggle i{ transition:transform .3s; color:var(--teal); }
  .filter-toggle.open i{ transform:rotate(180deg); }
}

/* ============================================================
   COMPANION PROFILE PAGE
   ============================================================ */
.prof-wrap{ padding:2rem 0 5rem; }
.prof-gallery{ position:relative; }
/* image kabhi CUT na ho (kisi bhi device par): contain + blurred backdrop.
   Portrait/landscape dono me poori photo dikhti hai, khali sides usi photo
   ke blur se premium tarah bharti hain. */
.prof-main-wrap{ position:relative; width:100%; aspect-ratio:4/3; min-height:280px; border-radius:var(--r);
  overflow:hidden; background:var(--bg-2); box-shadow:var(--sh-sm); }
.prof-main-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(26px) saturate(1.1); transform:scale(1.15); opacity:.55; }
.prof-main-img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; }
@media (max-width:576px){ .prof-main-wrap{ aspect-ratio:1/1; min-height:0; } }
.prof-thumbs{ display:flex; gap:.6rem; margin-top:.7rem; }
.prof-thumbs img{ width:72px;height:72px;object-fit:cover;border-radius:14px; cursor:pointer; border:2px solid transparent; transition:.2s; background:var(--bg-2); }
.prof-thumbs img:hover,.prof-thumbs img.active{ border-color:var(--teal); transform:translateY(-2px); }
.prof-verify-lg{ position:absolute; top:1rem; left:1rem; background:rgba(255,255,255,.95); color:var(--teal-d); font-size:.8rem; font-weight:700; padding:.4rem .85rem; border-radius:50px; display:inline-flex; align-items:center; gap:.35rem; box-shadow:var(--sh-sm); }
.prof-verify-lg i{ color:var(--teal); }

.prof-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.prof-name{ font-family:'Sora'; font-weight:800; font-size:clamp(1.6rem,3vw,2.2rem); }
.prof-name .age{ color:var(--muted); font-weight:500; font-size:1.3rem; }
.prof-meta{ display:flex; flex-wrap:wrap; gap:1rem; color:var(--ink-2); font-weight:600; font-size:.95rem; margin-top:.5rem; }
.prof-meta span{ display:inline-flex; align-items:center; gap:.4rem; }
.prof-meta i{ color:var(--teal); }
.prof-rate-badge{ background:var(--grad-soft); border-radius:var(--r-sm); padding:.8rem 1.1rem; text-align:center; }
.prof-rate-badge .r{ font-family:'Sora'; font-weight:800; font-size:1.5rem; color:var(--ink); display:flex; align-items:center; gap:.3rem; justify-content:center; }
.prof-rate-badge .r i{ color:var(--sun); font-size:1.1rem; }
.prof-rate-badge small{ color:var(--muted); font-weight:600; }

.prof-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.6rem; margin-bottom:1.4rem; }
.prof-card h3{ font-weight:700; font-size:1.25rem; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.prof-card h3 i{ color:var(--teal); }
.prof-bio{ color:var(--ink-2); line-height:1.7; }

.svc-rate{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.svc-rate:last-child{ border-bottom:none; }
.svc-rate .sr-left{ display:flex; align-items:center; gap:.8rem; }
.svc-rate .sr-ico{ width:44px;height:44px;border-radius:12px; background:var(--grad-soft); display:grid;place-items:center; font-size:1.3rem; flex:none; }
.svc-rate .sr-name{ font-weight:700; }
.svc-rate .sr-desc{ color:var(--muted); font-size:.85rem; }
.svc-rate .sr-price{ font-family:'Sora'; font-weight:800; color:var(--teal-d); white-space:nowrap; }
.svc-rate .sr-price small{ font-size:.75rem; color:var(--muted); font-weight:600; }

.avail-grid{ display:flex; flex-wrap:wrap; gap:.5rem; }
.avail-day{ flex:1; min-width:74px; text-align:center; border-radius:14px; padding:.75rem .3rem; border:1.5px solid transparent; position:relative; transition:.2s; }
.avail-day .d{ font-weight:700; font-size:.88rem; }
.avail-day .t{ font-size:.72rem; margin-top:.25rem; font-weight:600; display:inline-flex; align-items:center; gap:.25rem; }
/* AVAILABLE day — clear teal */
.avail-day.on{ background:var(--grad-soft); border-color:rgba(20,184,166,.3); }
.avail-day.on .d{ color:var(--ink); }
.avail-day.on .t{ color:var(--teal-d); }
.avail-day.on .t::before{ content:"\F26A"; font-family:"bootstrap-icons"; font-size:.7rem; }
/* OFF day — solid grey, NOT faded, clearly "closed" */
.avail-day.off{ background:#F1F5F9; border-color:#E5E7EB; }
.avail-day.off .d{ color:var(--muted); }
.avail-day.off .t{ color:#CBD5E1; }
.avail-day.off .t::before{ content:"\F62A"; font-family:"bootstrap-icons"; font-size:.7rem; }

.rev-summary{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; padding-bottom:1.2rem; margin-bottom:1.2rem; border-bottom:1px solid var(--line); }
.rev-big{ text-align:center; }
.rev-big .n{ font-family:'Sora'; font-weight:800; font-size:2.8rem; line-height:1; color:var(--ink); }
.rev-big .stars{ color:var(--sun); margin-top:.3rem; }
.rev-big small{ color:var(--muted); display:block; margin-top:.2rem; }
.rev-bars{ flex:1; min-width:200px; }
.rev-bar-row{ display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:var(--muted); margin-bottom:.3rem; }
.rev-bar{ flex:1; height:7px; background:var(--bg-2); border-radius:5px; overflow:hidden; }
.rev-bar span{ display:block; height:100%; background:var(--grad-brand); border-radius:5px; }
.rev-item{ padding:1.1rem 0; border-bottom:1px solid var(--line); }
.rev-item:last-child{ border-bottom:none; }
.rev-item .who{ display:flex; align-items:center; gap:.7rem; margin-bottom:.5rem; }
.rev-item .av{ width:42px;height:42px;border-radius:50%; background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-weight:700; flex:none; }
.rev-item .stars{ color:var(--sun); font-size:.8rem; }
.rev-item p{ color:var(--ink-2); line-height:1.6; margin:0; }

/* sticky book sidebar (desktop) */
.book-box{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.6rem; box-shadow:var(--sh-sm); position:sticky; top:90px; }
.book-box .price{ font-family:'Sora'; font-weight:800; font-size:2rem; color:var(--teal-d); }
.book-box .price small{ font-size:.9rem; color:var(--muted); font-weight:600; }
.book-box .line{ display:flex; align-items:center; gap:.5rem; color:var(--ink-2); font-size:.9rem; margin:.5rem 0; }
.book-box .line i{ color:var(--teal); }
.book-box .btn{ display:flex; align-items:center; justify-content:center; width:100%; }

/* mobile sticky book bar — same premium style as booking pay-bar */
.book-bar-mobile{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:1045; background:#fff; border-top:1px solid var(--line); padding:.9rem 1.1rem calc(.9rem + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(31,41,55,.1); align-items:center; justify-content:space-between; gap:1rem; }
.book-bar-mobile .price{ font-family:'Sora'; font-weight:800; font-size:1.4rem; color:var(--ink); line-height:1.1; }
.book-bar-mobile .price small{ font-size:.72rem; color:var(--muted); font-weight:600; display:block; }
.book-bar-mobile .btn{ flex:1; max-width:58%; padding:.95rem; }

@media (max-width:991px){
  .book-box{ display:none; }
  .book-bar-mobile{ display:flex; }
  .prof-wrap{ padding-bottom:6rem; }
}

/* ============================================================
   BOOKING PAGE
   ============================================================ */
.book-wrap{ padding:2rem 0 7rem; }
.book-step{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.5rem; margin-bottom:1.2rem; }
.book-step h3{ font-weight:700; font-size:1.15rem; margin:0 0 1.1rem; display:flex; align-items:center; gap:.6rem; }
.book-step h3 .num{ width:28px;height:28px;border-radius:50%; background:var(--grad-brand); color:#fff; font-size:.85rem; font-weight:700; display:grid;place-items:center; font-family:'Sora'; flex:none; }

/* companion summary */
.book-comp{ display:flex; align-items:center; gap:1rem; background:var(--grad-soft); border-radius:var(--r); padding:1rem 1.2rem; margin-bottom:1.4rem; }
.book-comp img{ width:60px;height:60px;border-radius:16px;object-fit:cover; background:var(--bg-2); flex:none; }
.book-comp .bc-name{ font-family:'Sora'; font-weight:700; font-size:1.1rem; }
.book-comp .bc-meta{ color:var(--ink-2); font-size:.85rem; display:flex; align-items:center; gap:.8rem; margin-top:.2rem; flex-wrap:wrap; }
.book-comp .bc-meta i{ color:var(--sun); }

/* service radio cards */
.svc-pick{ display:flex; flex-direction:column; gap:.6rem; }
.svc-opt{ display:flex; align-items:center; gap:.8rem; border:1.5px solid var(--line); border-radius:14px; padding:.9rem 1rem; cursor:pointer; transition:.2s; }
.svc-opt:hover{ border-color:var(--teal-l); }
.svc-opt.active{ border-color:var(--teal); background:var(--grad-soft); }
.svc-opt .so-emoji{ width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:1.3rem;flex:none; box-shadow:var(--sh-sm); }
.svc-opt .so-name{ font-weight:700; }
.svc-opt .so-desc{ color:var(--muted); font-size:.82rem; }
.svc-opt .so-price{ margin-left:auto; font-family:'Sora'; font-weight:800; color:var(--teal-d); white-space:nowrap; }
.svc-opt .so-price small{ font-size:.72rem; color:var(--muted); font-weight:600; }
.svc-opt .so-check{ width:24px;height:24px;border-radius:50%;border:2px solid var(--line); flex:none; display:flex; align-items:center; justify-content:center; }
.svc-opt .so-check i{ display:none; font-size:.72rem; line-height:1; }
.svc-opt.active .so-check{ border-color:var(--teal); background:var(--teal); color:#fff; }
.svc-opt.active .so-check i{ display:block; }

/* date chips */
.date-row,.time-row{ display:flex; gap:.55rem; overflow-x:auto; padding-bottom:.4rem; -webkit-overflow-scrolling:touch; }
.time-row{ flex-wrap:wrap; overflow-x:visible; }
.date-chip{ flex:none; text-align:center; border:1.5px solid var(--line); border-radius:14px; padding:.7rem .85rem; cursor:pointer; transition:.2s; min-width:62px; }
.date-chip:hover{ border-color:var(--teal-l); }
.date-chip.active{ border-color:var(--teal); background:var(--grad-brand); color:#fff; }
.date-chip .dow{ font-size:.72rem; font-weight:600; opacity:.8; }
.date-chip .dnum{ font-family:'Sora'; font-weight:800; font-size:1.2rem; line-height:1.1; }
.date-chip .mon{ font-size:.68rem; opacity:.8; }

/* time slots */
.time-chip{ flex:none; border:1.5px solid var(--line); border-radius:50px; padding:.6rem 1.1rem; cursor:pointer; font-weight:600; font-size:.9rem; transition:.2s; white-space:nowrap; }
.time-chip:hover{ border-color:var(--teal-l); }
.time-chip.active{ border-color:var(--teal); background:var(--grad-soft); color:var(--teal-d); }
@media (max-width:575px){
  .time-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .time-chip{ text-align:center; padding:.7rem .4rem; font-size:.85rem; border-radius:12px; }
}

/* duration stepper */
.dur-stepper{ display:flex; align-items:center; gap:1rem; }
.dur-btn{ width:46px;height:46px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-size:1.4rem;color:var(--teal-d);cursor:pointer;display:grid;place-items:center;transition:.2s; }
.dur-btn:hover{ border-color:var(--teal); background:var(--grad-soft); }
.dur-btn:active{ transform:scale(.92); }
.dur-val{ font-family:'Sora'; font-weight:800; font-size:1.5rem; min-width:90px; text-align:center; }
.dur-val small{ display:block; font-size:.72rem; color:var(--muted); font-weight:600; }

/* price summary */
.price-row{ display:flex; justify-content:space-between; align-items:center; padding:.55rem 0; color:var(--ink-2); }
.price-row.total{ border-top:1px solid var(--line); margin-top:.5rem; padding-top:.9rem; font-family:'Sora'; font-weight:800; font-size:1.3rem; color:var(--ink); }
.price-row .pr-credit{ color:var(--teal-d); }
.wallet-toggle{ display:flex; align-items:center; gap:.7rem; background:var(--grad-soft); border-radius:14px; padding:.85rem 1rem; margin:.4rem 0 .8rem; }
.wallet-toggle .form-check-input{ width:2.6em; height:1.4em; cursor:pointer; }
.wallet-toggle .form-check-input:checked{ background-color:var(--teal); border-color:var(--teal); }

/* consent note */
.consent-note{ display:flex; gap:.7rem; align-items:flex-start; background:#FBF3E2; border:1px solid #FEF08A; border-radius:14px; padding:1rem; font-size:.86rem; color:#854D0E; }
.consent-note i{ color:var(--amber-d); font-size:1.2rem; flex:none; }

/* sticky pay bar */
.pay-bar{ position:fixed; bottom:0; left:0; right:0; z-index:1040; background:#fff; border-top:1px solid var(--line); padding:.9rem 1rem calc(.9rem + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(31,41,55,.1); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.pay-bar .pb-total{ font-family:'Sora'; font-weight:800; font-size:1.3rem; color:var(--ink); }
.pay-bar .pb-total small{ font-size:.72rem; color:var(--muted); font-weight:600; display:block; }
.pay-bar .btn{ flex:1; max-width:60%; padding:.95rem; }
.book-input{ border:1.5px solid var(--line); background:var(--bg-2); border-radius:12px; padding:.8rem 1rem; width:100%; font-weight:500; }
.book-input:focus{ outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 3px var(--grad-soft); }

@media (max-width:991px){
  .book-wrap .col-lg-4 .book-step{ position:static !important; top:auto !important; }
  .book-wrap .col-lg-4 .btn,
  .book-wrap .col-lg-4 .text-center{ display:none; }   /* hide duplicate Confirm btn — sticky pay-bar handles it */
}
@media (max-width:767px){
  .svc-opt{ flex-wrap:wrap; position:relative; padding-right:2.6rem; }
  .svc-opt .so-price{ margin-left:0; }
  .svc-opt .so-check{ position:absolute; top:.9rem; right:.9rem; }
}
body.has-paybar .app-bar{ display:none !important; }

/* ============================================================
   AUTH PAGES (login / signup)
   ============================================================ */
.auth-page{ min-height:100vh; display:flex; position:relative; overflow:hidden; background:var(--bg); }
/* animated background blobs */
.auth-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.auth-blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; animation:floatBlob 18s ease-in-out infinite; }
.auth-blob.b1{ width:420px;height:420px; background:radial-gradient(circle,#5EEAD4,transparent 70%); top:-120px; left:-100px; }
.auth-blob.b2{ width:380px;height:380px; background:radial-gradient(circle,#F5A623,transparent 70%); bottom:-140px; right:-100px; animation-delay:-6s; }
.auth-blob.b3{ width:300px;height:300px; background:radial-gradient(circle,#2DD4BF,transparent 70%); top:40%; right:15%; animation-delay:-12s; }
@keyframes floatBlob{ 0%,100%{ transform:translate(0,0) scale(1);} 33%{ transform:translate(40px,-30px) scale(1.1);} 66%{ transform:translate(-30px,40px) scale(.95);} }
.auth-grid-overlay{ position:fixed; inset:0; z-index:0; background-image:linear-gradient(rgba(20,184,166,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(20,184,166,.025) 1px,transparent 1px); background-size:44px 44px; pointer-events:none; }

/* split layout */
.auth-split{ position:relative; z-index:1; display:flex; width:100%; min-height:100vh; }
.auth-brand-panel{ flex:1; background:linear-gradient(150deg,#0E9499 0%,#14B8A6 45%,#2DD4BF 100%); color:#fff; padding:3.5rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
/* soft moving glows for depth */
.ab-glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.45; pointer-events:none; }
.ab-glow.g1{ width:340px;height:340px; background:#A7F3D0; top:-90px; right:-70px; animation:floatBlob 16s ease-in-out infinite; }
.ab-glow.g2{ width:300px;height:300px; background:#F5A623; bottom:-100px; left:-60px; animation:floatBlob 20s ease-in-out infinite reverse; }
.auth-brand-panel .brand{ color:#fff; font-size:1.6rem; z-index:1; position:relative; }
.auth-brand-panel .brand .mark{ background:rgba(255,255,255,.2); }
.ab-pill{ display:inline-flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px); padding:.45rem .9rem; border-radius:50px; font-size:.8rem; font-weight:600; margin-bottom:1.3rem; }
.ab-pill i{ color:#FEF08A; }
.auth-bp-mid{ z-index:1; position:relative; }
.auth-bp-mid h2{ font-family:'Sora'; font-weight:800; font-size:2.4rem; line-height:1.18; margin-bottom:1rem; }
.ab-hl{ background:linear-gradient(90deg,#FEF08A,#FEF08A); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auth-bp-mid p{ opacity:.92; font-size:1.02rem; max-width:25rem; line-height:1.6; }
/* floating glass testimonial */
.ab-float-card{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(12px); border-radius:18px; padding:1.2rem 1.3rem; margin-top:2rem; max-width:24rem; box-shadow:0 20px 40px rgba(0,0,0,.12); animation:cardFloat 6s ease-in-out infinite; }
@keyframes cardFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.ab-fc-top{ display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; }
.ab-av{ width:42px;height:42px;border-radius:50%; background:rgba(255,255,255,.25); display:grid;place-items:center; font-weight:700; font-family:'Sora'; flex:none; }
.ab-fc-top b{ font-size:.95rem; }
.ab-stars{ color:#FEF08A; font-size:.75rem; }
.ab-float-card p{ font-size:.92rem; opacity:.95; margin:0; line-height:1.55; }
/* mini stats */
.ab-stats{ display:flex; gap:2rem; margin-top:2.2rem; }
.ab-stat b{ font-family:'Sora'; font-weight:800; font-size:1.5rem; display:block; }
.ab-stat small{ opacity:.8; font-size:.8rem; }
.ab-foot{ z-index:1; position:relative; opacity:.8; font-size:.85rem; }
.auth-bp-mid{ z-index:1; }
.auth-bp-mid h2{ font-family:'Sora'; font-weight:800; font-size:2.2rem; line-height:1.2; margin-bottom:1rem; }
.auth-bp-mid p{ opacity:.9; font-size:1.05rem; max-width:26rem; line-height:1.6; }
.auth-bp-feat{ display:flex; flex-direction:column; gap:.9rem; margin-top:2rem; z-index:1; }
.auth-bp-feat .f{ display:flex; align-items:center; gap:.8rem; font-weight:500; }
.auth-bp-feat .f i{ width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:1.1rem;flex:none; }

.auth-form-panel{ flex:1; display:flex; align-items:center; justify-content:center; padding:2.5rem 1.5rem; }
.auth-card{ width:100%; max-width:500px; background:rgba(255,255,255,.85); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.6); border-radius:28px; padding:2.8rem 3rem; box-shadow:0 30px 70px rgba(31,41,55,.12); }
.auth-card h1{ font-family:'Sora'; font-weight:800; font-size:1.8rem; }
.auth-card .sub{ color:var(--ink-2); margin:.4rem 0 1.8rem; }
.auth-mobile-logo{ display:none; text-align:center; margin-bottom:1.6rem; }

/* role toggle (signup) */
/* ---- premium role picker (WOW) ---- */
.role-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1.7rem; }
.role-pick .rp{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:.1rem; padding:1.05rem .5rem .85rem; border-radius:18px; cursor:pointer;
  background:#fff; border:1.8px solid #EAF0F5; overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s, border-color .28s, background .28s;
  box-shadow:0 1px 3px rgba(31,41,55,.04);
}
.role-pick .rp::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s;
  background:linear-gradient(160deg, rgba(20,184,166,.10), rgba(52,211,153,.07) 70%, rgba(250,204,21,.06));
}
.role-pick .rp:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(31,41,55,.1); border-color:#D6E4EF; }

/* icon badge */
.role-pick .rp-ic{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:1.15rem;
  color:#7C93A8; background:#F2F7FB; margin-bottom:.5rem; position:relative; z-index:1;
  transition:transform .3s cubic-bezier(.2,.9,.3,1), background .3s, color .3s, box-shadow .3s;
}
.role-pick .rp-tt{ position:relative; z-index:1; font-weight:800; font-size:.82rem; line-height:1.18; color:var(--ink); letter-spacing:-.01em; }
.role-pick .rp-sub{ position:relative; z-index:1; font-weight:600; font-size:.7rem; color:var(--muted); margin-top:.18rem; }

/* corner check (hidden until active) */
.role-pick .rp-check{
  position:absolute; top:.5rem; right:.5rem; z-index:2;
  width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,#14B8A6,#2DD4BF); color:#fff; font-size:.62rem;
  transform:scale(0) rotate(-45deg); transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 3px 8px rgba(20,184,166,.45);
}

/* ACTIVE state — the wow */
.role-pick .rp.active{
  border-color:transparent; transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(20,184,166,.28), 0 0 0 1.8px rgba(20,184,166,.5) inset;
}
.role-pick .rp.active::before{ opacity:1; }
.role-pick .rp.active .rp-ic{
  background:linear-gradient(135deg,#14B8A6,#2DD4BF); color:#fff;
  transform:scale(1.08) translateY(-1px); box-shadow:0 8px 18px rgba(20,184,166,.4);
}
.role-pick .rp.active .rp-tt{ color:var(--teal-d); }
.role-pick .rp.active .rp-check{ transform:scale(1) rotate(0); }
.role-pick .rp:active{ transform:translateY(-1px) scale(.98); }
@media (max-width:380px){
  .role-pick{ gap:.45rem; }
  .role-pick .rp{ padding:.9rem .3rem .75rem; }
  .role-pick .rp-tt{ font-size:.76rem; }
  .role-pick .rp-sub{ font-size:.66rem; }
}

/* form fields */
.auth-field{ margin-bottom:1.1rem; }
.auth-field label{ font-weight:600; font-size:.88rem; margin-bottom:.4rem; display:block; color:var(--ink); }
.auth-input-wrap{ position:relative; }
.auth-input-wrap i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:1.05rem; }
.auth-input{ width:100%; border:1.5px solid var(--line); background:#fff; border-radius:13px; padding:.85rem 1rem .85rem 42px; font-weight:500; transition:.2s; }
.auth-input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,184,166,.12); }
.auth-eye{ left:auto !important; right:14px; cursor:pointer; }
.auth-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; font-size:.88rem; }
.auth-row a{ color:var(--teal-d); text-decoration:none; font-weight:600; }
.auth-check{ display:flex; align-items:center; gap:.5rem; color:var(--ink-2); cursor:pointer; }
.auth-btn{ width:100%; padding:.95rem; font-size:1rem; }
.auth-divider{ display:flex; align-items:center; gap:1rem; margin:1.5rem 0; color:var(--muted); font-size:.85rem; }
.auth-divider::before,.auth-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.btn-google{ width:100%; display:flex; align-items:center; justify-content:center; gap:.7rem; border:1.5px solid var(--line); background:#fff; color:var(--ink); font-weight:600; padding:.85rem; border-radius:13px; transition:.2s; font-size:.95rem; }
.btn-google:hover{ border-color:var(--teal-l); background:var(--bg-2); box-shadow:var(--sh-sm); }
.btn-google .g-ico{ width:20px; height:20px; flex:none; }
.auth-foot{ text-align:center; margin-top:1.6rem; color:var(--ink-2); font-size:.92rem; }
.auth-foot a{ color:var(--teal-d); font-weight:700; text-decoration:none; }

@media (max-width:991px){
  .auth-brand-panel{ display:none; }
  .auth-mobile-logo{ display:block; }
  .auth-card{ background:rgba(255,255,255,.9); }
}
@media (max-width:480px){
  .auth-form-panel{ padding:1.5rem 1rem; }
  .auth-card{ padding:1.8rem 1.4rem; border-radius:22px; }
}

/* ===== AUTH — extra pages (forgot/reset/verify/check-email) ===== */
.auth-back{ display:inline-flex; align-items:center; gap:.4rem; color:var(--teal-d); text-decoration:none; font-weight:600; font-size:.88rem; margin-bottom:1rem; transition:.2s; }
.auth-back:hover{ gap:.6rem; color:var(--teal); }
.auth-success-ico{ width:78px;height:78px;border-radius:24px; background:var(--grad-soft); display:grid;place-items:center; font-size:2.4rem; color:var(--teal-d); margin:0 auto 1.4rem; }
.auth-resend{ margin-top:1.2rem; font-size:.9rem; color:var(--ink-2); }
.auth-resend a{ color:var(--teal-d); font-weight:700; text-decoration:none; }
.auth-resend span{ color:var(--muted); font-size:.85rem; }
/* password strength */
.pwd-strength{ margin-top:.6rem; }
.ps-bar{ height:6px; background:var(--bg-2); border-radius:5px; overflow:hidden; margin-bottom:.35rem; }
.ps-bar span{ display:block; height:100%; width:0; border-radius:5px; transition:width .3s, background .3s; }
.pwd-strength small{ color:var(--muted); font-size:.78rem; }
/* OTP boxes */
.otp-row{ display:flex; gap:.6rem; justify-content:center; margin-bottom:1.6rem; }
.otp-box{ width:52px; height:62px; text-align:center; font-family:'Sora'; font-weight:800; font-size:1.6rem; border:1.5px solid var(--line); border-radius:14px; background:#fff; transition:.2s; }
.otp-box:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,184,166,.12); }
@media (max-width:420px){ .otp-box{ width:44px; height:54px; font-size:1.3rem; } .otp-row{ gap:.4rem; } }



/* ============================================================
   USER HOME — consumer-app feed (CRED/Swiggy style)
   ============================================================ */
.uh{ min-height:100vh; background:var(--bg); padding-bottom:6rem; }
.uh-wrap{ max-width:560px; margin:0 auto; }

/* ----- HERO ----- */
.uh-hero{ background:linear-gradient(150deg,#0E9499 0%,#14B8A6 50%,#14B8A6 100%); border-radius:0 0 32px 32px; padding:1.4rem 1.3rem 5.5rem; color:#fff; position:relative; overflow:hidden; }
.uh-hero .glow{ position:absolute; border-radius:50%; filter:blur(50px); opacity:.4; pointer-events:none; }
.uh-hero .glow.g1{ width:240px;height:240px; background:#A7F3D0; top:-80px; right:-60px; }
.uh-hero .glow.g2{ width:180px;height:180px; background:#F5A623; bottom:20px; left:-50px; opacity:.3; }
.uh-top{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.uh-greet{ display:flex; align-items:center; gap:.8rem; }
.uh-av{ width:48px;height:48px;border-radius:50%; background:rgba(255,255,255,.22); border:2px solid rgba(255,255,255,.4); display:grid;place-items:center; font-weight:700; font-family:'Sora'; font-size:1.2rem; flex:none; }
.uh-hi{ font-size:.85rem; opacity:.9; }
.uh-name{ font-family:'Sora'; font-weight:800; font-size:1.25rem; line-height:1.1; }
.uh-bell{ width:44px;height:44px;border-radius:14px; background:rgba(255,255,255,.16); border:none; color:#fff; display:grid;place-items:center; font-size:1.2rem; position:relative; cursor:pointer; }
.uh-bell .dot{ position:absolute; top:10px; right:11px; width:8px;height:8px;border-radius:50%; background:#2DD4BF; border:2px solid #14B8A6; }

/* wallet feature card inside hero */
.uh-wallet{ position:relative; z-index:1; margin-top:1.4rem; }
.uh-wallet .wl-label{ font-size:.82rem; opacity:.85; display:flex; align-items:center; gap:.4rem; }
.uh-wallet .wl-bal{ font-family:'Sora'; font-weight:800; font-size:2.6rem; line-height:1.1; margin-top:.1rem; }
.uh-wallet .wl-sub{ font-size:.78rem; opacity:.8; margin-top:.15rem; }

/* ----- floating quick actions (overlaps hero) ----- */
.uh-quick{ position:relative; z-index:2; margin:-4rem 1rem 0; background:#fff; border-radius:22px; padding:1.1rem .8rem; box-shadow:0 16px 40px rgba(31,41,55,.14); display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.uh-qa{ display:flex; flex-direction:column; align-items:center; gap:.5rem; text-decoration:none; color:var(--ink); padding:.4rem .2rem; border-radius:14px; transition:.2s; }
.uh-qa:hover{ background:var(--bg-2); }
.uh-qa .qa-ic{ width:50px;height:50px;border-radius:16px; display:grid;place-items:center; font-size:1.4rem; }
.uh-qa .qa-ic.t{ background:var(--grad-soft); color:var(--teal-d); }
.uh-qa .qa-ic.a{ background:#FBF3E2; color:var(--amber-d); }
.uh-qa .qa-ic.v{ background:#EEE9FB; color:#7C5CD4; }
.uh-qa .qa-ic.r{ background:#FCE8E8; color:#D4615A; }
.uh-qa span{ font-size:.74rem; font-weight:600; text-align:center; line-height:1.2; }

/* ----- content area ----- */
.uh-body{ padding:1.6rem 1.2rem 0; }
.uh-sec-head{ display:flex; align-items:center; justify-content:space-between; margin:0 .2rem .9rem; }
.uh-sec-head h3{ font-family:'Sora'; font-weight:700; font-size:1.15rem; margin:0; }
.uh-sec-head a{ color:var(--teal-d); text-decoration:none; font-weight:600; font-size:.85rem; }

/* upcoming session — hero card */
.uh-upcoming{ background:linear-gradient(135deg,#14B8A6,#0E9499); border-radius:24px; padding:1.5rem; color:#fff; position:relative; overflow:hidden; margin-bottom:1.8rem; box-shadow:0 18px 40px rgba(20,184,166,.28); }
.uh-upcoming .glow{ position:absolute; width:180px;height:180px;border-radius:50%; background:rgba(255,255,255,.1); top:-50px; right:-30px; }
.uh-up-tag{ display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.2); padding:.35rem .8rem; border-radius:50px; font-size:.74rem; font-weight:700; margin-bottom:1rem; }
.uh-up-row{ display:flex; gap:1rem; align-items:center; position:relative; z-index:1; }
.uh-up-row img{ width:64px;height:64px;border-radius:18px;object-fit:cover;flex:none; border:2px solid rgba(255,255,255,.3); }
.uh-up-name{ font-family:'Sora'; font-weight:700; font-size:1.3rem; }
.uh-up-meta{ opacity:.92; font-size:.85rem; margin-top:.3rem; display:flex; align-items:center; gap:.4rem; }
.uh-up-foot{ display:flex; gap:.7rem; margin-top:1.3rem; position:relative; z-index:1; }
.uh-up-foot .b1{ flex:1; background:#fff; color:var(--teal-d); font-weight:700; border:none; padding:.8rem; border-radius:14px; text-decoration:none; text-align:center; font-size:.9rem; }
.uh-up-foot .b2{ flex:1; background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.35); font-weight:700; padding:.8rem; border-radius:14px; text-decoration:none; text-align:center; font-size:.9rem; }

/* activity list */
.uh-card{ background:#fff; border-radius:22px; padding:1.3rem; margin-bottom:1.8rem; box-shadow:0 4px 20px rgba(31,41,55,.05); }
.uh-bk{ display:flex; align-items:center; gap:.9rem; padding:.85rem 0; border-bottom:1px solid var(--line); }
.uh-bk:first-of-type{ padding-top:0; }
.uh-bk:last-child{ border-bottom:none; padding-bottom:0; }
.uh-bk img{ width:52px;height:52px;border-radius:16px;object-fit:cover;flex:none;background:var(--bg-2); }
.uh-bk .bk-nm{ font-weight:700; }
.uh-bk .bk-mt{ color:var(--muted); font-size:.82rem; margin-top:.1rem; }
.uh-bk .bk-st{ margin-left:auto; font-size:.74rem; font-weight:700; padding:.3rem .7rem; border-radius:50px; white-space:nowrap; }
.bk-st.upcoming{ background:#FBF3E2; color:var(--amber-d); }
.bk-st.done{ background:var(--grad-soft); color:var(--teal-d); }
.bk-st.cancelled{ background:#FCE8E8; color:#D4615A; }

/* refer banner */
.uh-refer{ background:linear-gradient(120deg,#F5A623,#D98E0B); border-radius:24px; padding:1.5rem; color:#fff; position:relative; overflow:hidden; margin-bottom:1.8rem; display:flex; align-items:center; gap:1rem; }
.uh-refer .glow{ position:absolute; width:160px;height:160px;border-radius:50%; background:rgba(255,255,255,.14); bottom:-50px; right:-20px; }
.uh-refer .rf-ic{ width:56px;height:56px;border-radius:18px; background:rgba(255,255,255,.22); display:grid;place-items:center; font-size:1.7rem; flex:none; position:relative; z-index:1; }
.uh-refer h3{ font-family:'Sora'; font-weight:800; font-size:1.15rem; margin:0; position:relative; z-index:1; }
.uh-refer p{ font-size:.84rem; opacity:.92; margin:.2rem 0 0; position:relative; z-index:1; }
.uh-refer .rf-go{ margin-left:auto; background:#fff; color:var(--amber-d); width:44px;height:44px;border-radius:50%; display:grid;place-items:center; font-size:1.2rem; flex:none; position:relative; z-index:1; text-decoration:none; }

/* desktop: center the feed, add subtle side framing */
@media (min-width:992px){
  .uh-wrap{ max-width:640px; }
  .uh{ padding-top:0; }
}

/* bottom nav (consumer app) */
.uh-bottom{ position:fixed; bottom:0; left:0; right:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:.5rem 0 calc(.5rem + env(safe-area-inset-bottom)); display:flex; justify-content:space-around; max-width:640px; margin:0 auto; }
.uh-bottom a{ display:flex; flex-direction:column; align-items:center; gap:.2rem; color:var(--muted); text-decoration:none; font-size:.7rem; font-weight:600; padding:.3rem .8rem; transition:.2s; }
.uh-bottom a i{ font-size:1.4rem; }
.uh-bottom a.active{ color:var(--teal-d); }
.uh-bottom a.center{ margin-top:-1.6rem; }
.uh-bottom a.center .fab{ width:54px;height:54px;border-radius:50%; background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-size:1.5rem; box-shadow:0 8px 20px rgba(20,184,166,.4); border:3px solid #fff; }

/* ============================================================
   USER SUB-PAGES (bookings/wallet/refer/settings) — consumer style
   ============================================================ */
/* compact page hero (smaller than home hero) */
.uh-phero{ background:linear-gradient(150deg,#0E9499,#14B8A6 60%,#14B8A6); border-radius:0 0 28px 28px; padding:1.3rem 1.3rem 1.6rem; color:#fff; position:relative; overflow:hidden; }
.uh-phero .glow{ position:absolute; width:200px;height:200px;border-radius:50%; background:rgba(255,255,255,.1); filter:blur(40px); top:-70px; right:-50px; }
.uh-phero-top{ display:flex; align-items:center; gap:.9rem; position:relative; z-index:1; }
.uh-back{ width:42px;height:42px;border-radius:13px; background:rgba(255,255,255,.16); border:none; color:#fff; display:grid;place-items:center; font-size:1.2rem; text-decoration:none; flex:none; }
.uh-phero-top h1{ font-family:'Sora'; font-weight:800; font-size:1.4rem; margin:0; }
.uh-phero-top .ph-sub{ opacity:.88; font-size:.83rem; margin-top:.1rem; }

/* tabs (segmented) */
.uh-tabs{ display:flex; gap:.4rem; background:#fff; border-radius:16px; padding:.4rem; margin:1.2rem 0 1.4rem; box-shadow:0 4px 16px rgba(31,41,55,.06); }
.uh-tabs button{ flex:1; border:none; background:none; padding:.65rem .5rem; border-radius:12px; font-weight:700; font-size:.85rem; color:var(--ink-2); cursor:pointer; transition:.2s; }
.uh-tabs button.active{ background:var(--grad-brand); color:#fff; box-shadow:0 6px 16px rgba(20,184,166,.3); }

/* booking card (bigger, richer than feed row) */
.bk-card{ background:#fff; border-radius:20px; padding:1.1rem; margin-bottom:1rem; box-shadow:0 4px 18px rgba(31,41,55,.05); display:flex; gap:1rem; align-items:center; }
.bk-card img{ width:58px;height:58px;border-radius:16px;object-fit:cover;flex:none;background:var(--bg-2); }
.bk-card .bc-nm{ font-family:'Sora'; font-weight:700; font-size:1.05rem; }
.bk-card .bc-mt{ color:var(--muted); font-size:.83rem; margin-top:.15rem; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.bk-card .bc-mt i{ color:var(--teal); }
.bk-card .bc-arrow{ margin-left:auto; color:var(--muted); font-size:1.3rem; flex:none; }
.bk-card .bc-foot{ margin-top:.5rem; }

/* empty state */
.uh-empty{ text-align:center; padding:3rem 1rem; }
.uh-empty .ee{ width:80px;height:80px;border-radius:24px; background:var(--grad-soft); display:grid;place-items:center; font-size:2.2rem; color:var(--teal-d); margin:0 auto 1.2rem; }
.uh-empty h3{ font-family:'Sora'; font-weight:700; font-size:1.15rem; }
.uh-empty p{ color:var(--muted); font-size:.9rem; margin:.3rem 0 1.2rem; }

/* ---- WALLET ---- */
.wl-hero-card{ position:relative; z-index:1; }
.wl-big{ font-family:'Sora'; font-weight:800; font-size:3rem; line-height:1; margin:.3rem 0; }
.wl-actions{ display:flex; gap:.7rem; margin-top:1.2rem; position:relative; z-index:1; }
.wl-actions a{ flex:1; text-align:center; padding:.75rem; border-radius:14px; font-weight:700; font-size:.88rem; text-decoration:none; }
.wl-actions .wa1{ background:#fff; color:var(--teal-d); }
.wl-actions .wa2{ background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.3); }
.txn{ display:flex; align-items:center; gap:.9rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.txn:last-child{ border-bottom:none; }
.txn .tx-ic{ width:44px;height:44px;border-radius:13px; display:grid;place-items:center; font-size:1.1rem; flex:none; }
.txn .tx-ic.in{ background:var(--grad-soft); color:var(--teal-d); }
.txn .tx-ic.out{ background:#FCE8E8; color:#D4615A; }
.txn .tx-nm{ font-weight:700; font-size:.92rem; }
.txn .tx-dt{ color:var(--muted); font-size:.78rem; }
.txn .tx-amt{ margin-left:auto; font-family:'Sora'; font-weight:800; font-size:1rem; }
.txn .tx-amt.in{ color:var(--teal-d); }
.txn .tx-amt.out{ color:#D4615A; }

/* ---- REFER ---- */
.rf-hero-ill{ font-size:3rem; margin-bottom:.5rem; }
.rf-code-box{ background:#fff; border:2px dashed var(--teal); border-radius:16px; padding:1rem 1.2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.rf-code-box .rc-label{ font-size:.75rem; color:var(--muted); font-weight:600; }
.rf-code-box .rc-code{ font-family:'Sora'; font-weight:800; font-size:1.4rem; letter-spacing:1px; color:var(--teal-d); }
.rf-code-box .rc-copy{ background:var(--grad-brand); color:#fff; border:none; padding:.6rem 1rem; border-radius:12px; font-weight:700; font-size:.85rem; cursor:pointer; white-space:nowrap; }
.rf-share{ display:flex; gap:.6rem; margin-bottom:1.8rem; }
.rf-share a{ flex:1; text-align:center; padding:.85rem; border-radius:14px; color:#fff; font-size:1.3rem; text-decoration:none; }
.rf-share .wa{ background:#22C55E; } .rf-share .tg{ background:#0088cc; } .rf-share .cp{ background:var(--ink-2); } .rf-share .sh{ background:var(--teal); }
.rf-step{ display:flex; gap:1rem; align-items:flex-start; padding:.7rem 0; }
.rf-step .rs-num{ width:32px;height:32px;border-radius:50%; background:var(--grad-soft); color:var(--teal-d); display:grid;place-items:center; font-weight:800; font-family:'Sora'; flex:none; font-size:.9rem; }
.rf-step .rs-tx b{ display:block; font-size:.92rem; } .rf-step .rs-tx span{ color:var(--muted); font-size:.83rem; }
.rf-friend{ display:flex; align-items:center; gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.rf-friend:last-child{ border-bottom:none; }
.rf-friend .ff-av{ width:42px;height:42px;border-radius:50%; background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-weight:700; flex:none; }
.rf-friend .ff-st{ margin-left:auto; font-size:.76rem; font-weight:700; padding:.25rem .6rem; border-radius:50px; }
.ff-st.earned{ background:var(--grad-soft); color:var(--teal-d); } .ff-st.pending{ background:#FBF3E2; color:var(--amber-d); }

/* ---- SETTINGS ---- */
.set-profile{ display:flex; align-items:center; gap:1rem; position:relative; z-index:1; }
.set-profile .sp-av{ width:64px;height:64px;border-radius:50%; background:rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.4); display:grid;place-items:center; font-family:'Sora'; font-weight:800; font-size:1.6rem; flex:none; }
.set-profile .sp-nm{ font-family:'Sora'; font-weight:800; font-size:1.25rem; }
.set-profile .sp-em{ opacity:.88; font-size:.85rem; }
.set-profile .sp-edit{ margin-left:auto; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); color:#fff; padding:.5rem .9rem; border-radius:50px; font-size:.82rem; font-weight:700; text-decoration:none; }
.set-group{ background:#fff; border-radius:20px; padding:.4rem 1.1rem; margin-bottom:1.2rem; box-shadow:0 4px 18px rgba(31,41,55,.05); }
.set-row{ display:flex; align-items:center; gap:1rem; padding:1rem .2rem; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.set-row:last-child{ border-bottom:none; }
.set-row .sr-ic{ width:42px;height:42px;border-radius:12px; background:var(--bg-2); display:grid;place-items:center; font-size:1.15rem; color:var(--teal-d); flex:none; }
.set-row .sr-tx{ font-weight:600; } .set-row .sr-sub{ color:var(--muted); font-size:.8rem; }
.set-row .sr-arrow{ margin-left:auto; color:var(--muted); font-size:1.2rem; }
.set-row.danger .sr-ic{ background:#FCE8E8; color:#D4615A; } .set-row.danger .sr-tx{ color:#D4615A; }
.set-label{ font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin:.2rem .4rem .6rem; }

/* ============================================================
   BOOKING DETAIL PAGE
   ============================================================ */
.bd-companion{ background:#fff; border-radius:22px; padding:1.3rem; margin-bottom:1.4rem; box-shadow:0 4px 18px rgba(31,41,55,.05); display:flex; align-items:center; gap:1rem; }
.bd-companion img{ width:68px;height:68px;border-radius:20px;object-fit:cover;flex:none;background:var(--bg-2); }
.bd-companion .bdc-nm{ font-family:'Sora'; font-weight:700; font-size:1.2rem; }
.bd-companion .bdc-mt{ color:var(--muted); font-size:.85rem; display:flex; align-items:center; gap:.35rem; margin-top:.15rem; }
.bd-companion .bdc-mt i{ color:var(--sun); }
.bd-companion .bdc-msg{ margin-left:auto; width:46px;height:46px;border-radius:14px; background:var(--grad-soft); color:var(--teal-d); display:grid;place-items:center; font-size:1.3rem; text-decoration:none; flex:none; }

.bd-status-card{ border-radius:22px; padding:1.3rem; margin-bottom:1.4rem; color:#fff; position:relative; overflow:hidden; }
.bd-status-card.upcoming{ background:linear-gradient(135deg,#14B8A6,#0E9499); }
.bd-status-card.done{ background:linear-gradient(135deg,#2DD4BF,#14B8A6); }
.bd-status-card.cancelled{ background:linear-gradient(135deg,#9CA3AF,#6B7280); }
.bd-status-card .glow{ position:absolute; width:160px;height:160px;border-radius:50%; background:rgba(255,255,255,.1); top:-50px; right:-30px; }
.bd-status-card .bs-tag{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; opacity:.95; }
.bd-status-card .bs-big{ font-family:'Sora'; font-weight:800; font-size:1.3rem; margin-top:.4rem; position:relative; z-index:1; }
.bd-status-card .bs-sub{ opacity:.9; font-size:.85rem; margin-top:.2rem; }

.bd-card{ background:#fff; border-radius:22px; padding:1.4rem; margin-bottom:1.4rem; box-shadow:0 4px 18px rgba(31,41,55,.05); }
.bd-card h3{ font-family:'Sora'; font-weight:700; font-size:1.05rem; margin:0 0 1rem; }
.bd-detail{ display:flex; align-items:flex-start; gap:.9rem; padding:.7rem 0; }
.bd-detail .bd-ic{ width:40px;height:40px;border-radius:12px; background:var(--bg-2); color:var(--teal-d); display:grid;place-items:center; font-size:1.1rem; flex:none; }
.bd-detail .bd-lbl{ color:var(--muted); font-size:.8rem; }
.bd-detail .bd-val{ font-weight:600; font-size:.95rem; margin-top:.1rem; }

/* payment breakdown */
.bd-pay-row{ display:flex; justify-content:space-between; padding:.5rem 0; color:var(--ink-2); font-size:.92rem; }
.bd-pay-row.credit{ color:var(--teal-d); }
.bd-pay-row.total{ border-top:1px solid var(--line); margin-top:.5rem; padding-top:.8rem; font-family:'Sora'; font-weight:800; font-size:1.2rem; color:var(--ink); }

/* action buttons */
.bd-actions{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.5rem; }
.bd-act{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem; border-radius:14px; font-weight:700; font-size:.92rem; text-decoration:none; border:none; cursor:pointer; width:100%; }
.bd-act.primary{ background:var(--grad-brand); color:#fff; box-shadow:0 8px 20px rgba(20,184,166,.3); }
.bd-act.outline{ background:#fff; border:1.5px solid var(--line); color:var(--ink); }
.bd-act.sos{ background:#FCE8E8; color:#D4615A; }
.bd-act.danger-outline{ background:#fff; border:1.5px solid #F0C9C6; color:#D4615A; }

/* ============================================================
   BOTTOM SHEET MODALS (SOS, Cancel) — premium
   ============================================================ */
.sheet-overlay{ position:fixed; inset:0; z-index:999; background:rgba(31,41,55,.5); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:.3s; }
.sheet-overlay.open{ opacity:1; visibility:visible; }
.sheet{ position:fixed; left:0; right:0; bottom:0; z-index:1000; background:#11201F; border-radius:28px 28px 0 0; padding:1.6rem 1.4rem calc(1.6rem + env(safe-area-inset-bottom)); max-width:560px; margin:0 auto; transform:translateY(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1); box-shadow:0 -10px 40px rgba(0,0,0,.6); color:#ECFEFB; }
.sheet.open{ transform:translateY(0); }
.sheet-handle{ width:42px;height:5px;border-radius:50px;background:var(--line);margin:0 auto 1.3rem; }
.sheet-ico{ width:72px;height:72px;border-radius:22px;display:grid;place-items:center;font-size:2rem;margin:0 auto 1.1rem; }
.sheet-ico.sos{ background:#FCE8E8;color:#D4615A; animation:sosPulse 1.4s ease-in-out infinite; }
.sheet-ico.warn{ background:#FBF3E2;color:var(--amber-d); }
@keyframes sosPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(212,97,90,.35);} 50%{ box-shadow:0 0 0 14px rgba(212,97,90,0);} }
.sheet h2{ font-family:'Sora'; font-weight:800; font-size:1.35rem; text-align:center; margin:0 0 .5rem; color:#ECFEFB; }
.sheet p{ color:var(--ink-2); text-align:center; font-size:.92rem; line-height:1.55; margin:0 auto 1.4rem; max-width:30rem; }
.sheet-list{ background:var(--bg-2); border-radius:16px; padding:1rem 1.1rem; margin-bottom:1.4rem; }
.sheet-list .sl-item{ display:flex; align-items:center; gap:.7rem; padding:.4rem 0; font-size:.9rem; font-weight:500; }
.sheet-list .sl-item i{ color:var(--teal); font-size:1.1rem; flex:none; }
.sheet-btns{ display:flex; flex-direction:column; gap:.7rem; }
.sheet-btn{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:1rem; border-radius:15px; font-weight:700; font-size:1rem; border:none; cursor:pointer; width:100%; text-decoration:none; }
.sheet-btn.sos-confirm{ background:linear-gradient(135deg,#E5736B,#D4615A); color:#fff; box-shadow:0 10px 24px rgba(212,97,90,.35); }
.sheet-btn.danger{ background:linear-gradient(135deg,#E5736B,#D4615A); color:#fff; }
.sheet-btn.ghost{ background:var(--bg-2); color:var(--ink-2); }
/* cancel reasons */
.cancel-reason{ display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:14px; margin-bottom:.6rem; cursor:pointer; transition:.2s; font-weight:600; font-size:.9rem; }
.cancel-reason:hover{ border-color:var(--teal-l); }
.cancel-reason.sel{ border-color:var(--teal); background:var(--grad-soft); }
.cancel-reason .cr-radio{ width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;margin-left:auto; }
.cancel-reason.sel .cr-radio{ border-color:var(--teal); background:var(--teal); box-shadow:inset 0 0 0 3px #fff; }

/* ===== REVIEW SHEET ===== */
.sheet-ico.review{ background:var(--grad-soft); color:var(--teal-d); }
.star-rate{ display:flex; justify-content:center; gap:.6rem; margin-bottom:1.4rem; }
.star-rate i{ font-size:2.4rem; color:var(--line); cursor:pointer; transition:.15s; }
.star-rate i.on{ color:var(--sun); transform:scale(1.08); }
.star-rate i:hover{ transform:scale(1.15); }
.review-ta{ width:100%; border:1.5px solid var(--line); background:var(--bg-2); border-radius:14px; padding:.9rem 1rem; font-weight:500; resize:none; margin-bottom:.5rem; }
.review-ta:focus{ outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 3px rgba(20,184,166,.12); }
.review-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.3rem; justify-content:center; }
.review-chip{ background:var(--bg-2); border:1.5px solid var(--line); border-radius:50px; padding:.4rem .85rem; font-size:.82rem; font-weight:600; cursor:pointer; transition:.2s; color:var(--ink-2); }
.review-chip.sel{ background:var(--grad-soft); border-color:var(--teal); color:var(--teal-d); }

/* ============================================================
   INVOICE PAGE (printable)
   ============================================================ */
.inv-page{ background:var(--bg-2); min-height:100vh; padding:1.5rem 1rem 4rem; }
.inv-actions{ max-width:760px; margin:0 auto 1.2rem; display:flex; gap:.7rem; justify-content:space-between; align-items:center; }
.inv-actions .ia-back{ color:var(--teal-d); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:.4rem; }
.inv-actions .ia-btns{ display:flex; gap:.6rem; }
.inv-sheet{ max-width:760px; margin:0 auto; background:#fff; border-radius:18px; padding:2.5rem; box-shadow:0 10px 40px rgba(31,41,55,.08); }
.inv-head{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:1rem; padding-bottom:1.6rem; border-bottom:2px solid var(--line); margin-bottom:1.6rem; }
.inv-brand{ display:flex; align-items:center; gap:.6rem; font-family:'Sora'; font-weight:800; font-size:1.5rem; color:var(--ink); }
.inv-brand .mark{ width:42px;height:42px;border-radius:12px; background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-size:1.2rem; }
.inv-brand small{ display:block; font-size:.72rem; font-weight:500; color:var(--muted); }
.inv-meta{ text-align:right; }
.inv-meta .il{ font-family:'Sora'; font-weight:800; font-size:1.3rem; color:var(--teal-d); }
.inv-meta .im{ font-size:.85rem; color:var(--muted); margin-top:.2rem; }
.inv-parties{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.inv-party .pl{ font-size:.74rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:.4rem; }
.inv-party .pn{ font-weight:700; font-size:1rem; }
.inv-party .ps{ color:var(--ink-2); font-size:.88rem; margin-top:.15rem; }
.inv-table{ width:100%; border-collapse:collapse; margin-bottom:1.6rem; }
.inv-table th{ text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:.6rem 0; border-bottom:1.5px solid var(--line); }
.inv-table th.r,.inv-table td.r{ text-align:right; }
.inv-table td{ padding:.85rem 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.inv-table td .ts{ color:var(--muted); font-size:.8rem; }
.inv-totals{ margin-left:auto; max-width:280px; }
.inv-tr{ display:flex; justify-content:space-between; padding:.4rem 0; font-size:.92rem; color:var(--ink-2); }
.inv-tr.credit{ color:var(--teal-d); }
.inv-tr.grand{ border-top:2px solid var(--line); margin-top:.5rem; padding-top:.8rem; font-family:'Sora'; font-weight:800; font-size:1.3rem; color:var(--ink); }
.inv-paid{ display:inline-flex; align-items:center; gap:.4rem; background:var(--grad-soft); color:var(--teal-d); font-weight:700; font-size:.85rem; padding:.4rem .9rem; border-radius:50px; margin-top:1rem; }
.inv-foot{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line); text-align:center; color:var(--muted); font-size:.82rem; }
@media print{
  .inv-page{ background:#fff; padding:0; }
  .inv-actions{ display:none; }
  .inv-sheet{ box-shadow:none; border-radius:0; max-width:100%; padding:1rem; }
  .uh-bottom{ display:none !important; }
}

/* ============================================================
   NOTIFICATIONS PAGE — consumer-app feed (premium)
   ============================================================ */
/* hero action (mark all read) sits in phero top-right */
.nt-mark{ margin-left:auto; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; padding:.5rem .9rem; border-radius:50px; font-size:.8rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; transition:.2s; text-decoration:none; }
.nt-mark:hover{ background:rgba(255,255,255,.26); }
.nt-mark:disabled{ opacity:.5; cursor:default; }

/* unread summary pill under hero */
.nt-count{ display:inline-flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.18); color:#fff; font-size:.8rem; font-weight:700; padding:.4rem .9rem; border-radius:50px; margin-top:.9rem; position:relative; z-index:1; }
.nt-count .nc-dot{ width:7px;height:7px;border-radius:50%; background:#FBD449; box-shadow:0 0 0 3px rgba(255,200,98,.3); }

/* date group label */
.nt-group{ font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin:1.4rem .4rem .7rem; }
.nt-group:first-child{ margin-top:.2rem; }

/* notification card list (wrapped in uh-card) */
.nt-item{ display:flex; gap:.9rem; align-items:flex-start; padding:1rem 0; border-bottom:1px solid var(--line); position:relative; text-decoration:none; color:var(--ink); transition:.2s; }
.nt-item:first-of-type{ padding-top:.2rem; }
.nt-item:last-child{ border-bottom:none; padding-bottom:.2rem; }
.nt-item:hover{ background:var(--bg-2); border-radius:14px; margin:0 -.6rem; padding-left:.6rem; padding-right:.6rem; }

/* unread state — soft tint + left accent + dot */
.nt-item.unread{ background:linear-gradient(90deg,rgba(20,184,166,.05),transparent 60%); border-radius:14px; margin:0 -.6rem; padding-left:.85rem; padding-right:.6rem; }
.nt-item.unread::before{ content:""; position:absolute; left:0; top:1rem; bottom:1rem; width:3px; border-radius:3px; background:var(--grad-brand); }
.nt-item.unread .nt-tx b{ color:var(--ink); }

/* type icon chip — reuses palette per category */
.nt-ic{ width:46px;height:46px;border-radius:14px; display:grid;place-items:center; font-size:1.25rem; flex:none; }
.nt-ic.booking{ background:var(--grad-soft); color:var(--teal-d); }
.nt-ic.wallet{ background:#FBF3E2; color:var(--amber-d); }
.nt-ic.referral{ background:#FCE8E8; color:#D4615A; }
.nt-ic.review{ background:#EEE9FB; color:#7C5CD4; }
.nt-ic.system{ background:var(--bg-2); color:var(--teal-d); }
.nt-ic.sos{ background:#FCE8E8; color:#D4615A; animation:sosPulse 1.4s ease-in-out infinite; }

.nt-tx{ flex:1; min-width:0; }
.nt-tx b{ display:block; font-weight:700; font-size:.94rem; color:var(--ink-2); line-height:1.3; }
.nt-tx p{ color:var(--muted); font-size:.84rem; margin:.2rem 0 0; line-height:1.45; }
.nt-tx .nt-time{ display:inline-flex; align-items:center; gap:.3rem; color:var(--muted); font-size:.76rem; font-weight:600; margin-top:.45rem; }
.nt-tx .nt-time i{ font-size:.85rem; }

/* unread dot on the right */
.nt-udot{ width:9px;height:9px;border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px rgba(20,184,166,.18); flex:none; margin-top:.5rem; }

/* CTA chip inside a notification (e.g. "View booking") */
.nt-cta{ display:inline-flex; align-items:center; gap:.35rem; background:var(--grad-soft); color:var(--teal-d); font-size:.78rem; font-weight:700; padding:.35rem .8rem; border-radius:50px; margin-top:.55rem; }


/* ============================================================
   SETTINGS SUB-PAGES — shared premium components
   ============================================================ */
/* form field with label */
.set-field{ margin-bottom:1.1rem; }
.set-field label{ display:block; font-size:.82rem; font-weight:700; color:var(--ink-2); margin:0 .2rem .45rem; }
.set-field .req{ color:var(--coral); }
.set-input{ width:100%; border:1.5px solid var(--line); background:#fff; border-radius:14px; padding:.85rem 1rem; font-weight:500; font-size:.95rem; color:var(--ink); transition:.2s; }
.set-input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,184,166,.12); background:#fff; }
.set-input::placeholder{ color:var(--muted); font-weight:400; }
.set-input:disabled,.set-input.locked{ background:var(--bg-2); color:var(--ink-2); }
.set-input-ico{ position:relative; }
.set-input-ico > i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--teal); font-size:1.05rem; pointer-events:none; }
.set-input-ico .set-input{ padding-left:42px; }
.set-hint{ font-size:.78rem; color:var(--muted); margin:.4rem .2rem 0; display:flex; align-items:flex-start; gap:.35rem; }
.set-hint i{ color:var(--teal); margin-top:.05rem; }
.set-err{ font-size:.78rem; color:var(--coral); margin:.4rem .2rem 0; display:none; align-items:center; gap:.3rem; }
.set-err.show{ display:flex; }
.set-input.invalid{ border-color:var(--coral); box-shadow:0 0 0 3px rgba(52,211,153,.12); }

/* avatar upload (personal details) */
.set-avatar-wrap{ display:flex; flex-direction:column; align-items:center; margin-bottom:1.6rem; }
.set-avatar{ width:96px;height:96px;border-radius:50%; background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-family:'Sora'; font-weight:800; font-size:2.4rem; position:relative; box-shadow:0 14px 30px rgba(20,184,166,.3); }
.set-avatar .cam{ position:absolute; bottom:-2px; right:-2px; width:34px;height:34px;border-radius:50%; background:#fff; color:var(--teal-d); display:grid;place-items:center; font-size:1rem; box-shadow:var(--sh-sm); border:2px solid var(--bg); cursor:pointer; }
.set-avatar-wrap .av-hint{ font-size:.8rem; color:var(--muted); margin-top:.7rem; }

/* sticky save bar */
.set-savebar{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(255,255,255,.97); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:.8rem 1.2rem calc(.8rem + env(safe-area-inset-bottom)); max-width:640px; margin:0 auto; box-shadow:0 -8px 30px rgba(31,41,55,.08); }
.set-savebar .btn{ width:100%; padding:.9rem; border-radius:15px; font-weight:700; font-size:1rem; }
.uh.has-savebar{ padding-bottom:calc(9rem + env(safe-area-inset-bottom)); }
/* On form-action pages the save/submit bar IS the bottom bar — hide the nav so they don't stack/overlap (the FAB curve was peeking through). The hero back button keeps navigation available. */
.uh.has-savebar ~ .uh-bottom{ display:none !important; }

/* toggle switch row (notification prefs) */
.tog-row{ display:flex; align-items:center; gap:1rem; padding:1rem .2rem; border-bottom:1px solid var(--line); }
.tog-row:last-child{ border-bottom:none; }
.tog-row .tg-ic{ width:44px;height:44px;border-radius:13px; background:var(--bg-2); color:var(--teal-d); display:grid;place-items:center; font-size:1.15rem; flex:none; }
.tog-row .tg-tx{ flex:1; min-width:0; }
.tog-row .tg-tx b{ display:block; font-weight:700; font-size:.95rem; }
.tog-row .tg-tx span{ color:var(--muted); font-size:.8rem; }
.switch{ position:relative; width:50px;height:29px; flex:none; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2; }
.switch .track{ position:absolute; inset:0; background:#E2E8F0; border-radius:50px; transition:.25s; }
.switch .thumb{ position:absolute; top:3px; left:3px; width:23px;height:23px; background:#fff; border-radius:50%; transition:.25s cubic-bezier(.2,.8,.2,1); box-shadow:0 2px 6px rgba(31,41,55,.25); }
.switch input:checked ~ .track{ background:var(--grad-brand); }
.switch input:checked ~ .thumb{ transform:translateX(21px); }
.switch input:disabled ~ .track{ opacity:.45; }

/* select-list (language / radio choices) */
.sel-row{ display:flex; align-items:center; gap:1rem; padding:1rem .2rem; border-bottom:1px solid var(--line); cursor:pointer; }
.sel-row:last-child{ border-bottom:none; }
.sel-row .sl-flag{ width:42px;height:42px;border-radius:12px; background:var(--grad-soft); display:grid;place-items:center; font-size:1.3rem; flex:none; font-family:'Sora'; font-weight:800; color:var(--teal-d); }
.sel-row .sl-tx b{ display:block; font-weight:700; font-size:.95rem; }
.sel-row .sl-tx span{ color:var(--muted); font-size:.8rem; }
.sel-row .sl-check{ margin-left:auto; width:24px;height:24px;border-radius:50%; border:2px solid var(--line); flex:none; display:grid;place-items:center; color:#fff; font-size:.85rem; transition:.2s; }
.sel-row.sel .sl-check{ border-color:var(--teal); background:var(--teal); }
.sel-row.sel{ }

/* info / safety feature blocks */
.sft-hero-card{ background:linear-gradient(135deg,#14B8A6,#0E9499); border-radius:22px; padding:1.4rem; color:#fff; position:relative; overflow:hidden; margin-bottom:1.4rem; box-shadow:0 16px 36px rgba(20,184,166,.26); }
.sft-hero-card .glow{ position:absolute; width:170px;height:170px;border-radius:50%; background:rgba(255,255,255,.12); top:-50px; right:-30px; }
.sft-hero-card .sh-ic{ width:54px;height:54px;border-radius:16px; background:rgba(255,255,255,.2); display:grid;place-items:center; font-size:1.7rem; margin-bottom:.9rem; position:relative; z-index:1; }
.sft-hero-card h3{ font-family:'Sora'; font-weight:800; font-size:1.2rem; margin:0; position:relative; z-index:1; }
.sft-hero-card p{ opacity:.92; font-size:.88rem; margin:.35rem 0 0; position:relative; z-index:1; line-height:1.5; }
.sft-feat{ display:flex; gap:.9rem; align-items:flex-start; padding:.95rem 0; border-bottom:1px solid var(--line); }
.sft-feat:last-child{ border-bottom:none; }
.sft-feat .sf-ic{ width:44px;height:44px;border-radius:13px; background:var(--grad-soft); color:var(--teal-d); display:grid;place-items:center; font-size:1.2rem; flex:none; }
.sft-feat .sf-tx b{ display:block; font-weight:700; font-size:.95rem; }
.sft-feat .sf-tx span{ color:var(--muted); font-size:.84rem; line-height:1.45; }

/* emergency contact row */
.emc-row{ display:flex; align-items:center; gap:.9rem; padding:.85rem 0; border-bottom:1px solid var(--line); }
.emc-row:last-child{ border-bottom:none; }
.emc-row .em-av{ width:44px;height:44px;border-radius:50%; background:var(--grad-soft); color:var(--teal-d); display:grid;place-items:center; font-weight:700; flex:none; }
.emc-row .em-tx b{ display:block; font-weight:700; font-size:.92rem; }
.emc-row .em-tx span{ color:var(--muted); font-size:.8rem; }
.emc-row .em-del{ margin-left:auto; background:none; border:none; color:var(--muted); font-size:1.2rem; cursor:pointer; padding:.3rem; }
.emc-row .em-del:hover{ color:var(--coral); }
.emc-add{ display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; padding:.85rem; border:1.5px dashed var(--teal); border-radius:14px; background:var(--grad-soft); color:var(--teal-d); font-weight:700; font-size:.9rem; cursor:pointer; margin-top:.6rem; }

/* FAQ accordion (help & support) */
.faq{ background:#fff; border-radius:16px; margin-bottom:.7rem; box-shadow:0 4px 18px rgba(31,41,55,.05); overflow:hidden; }
.faq-q{ display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.2rem; cursor:pointer; font-weight:700; font-size:.94rem; }
.faq-q .fq-ic{ margin-left:auto; color:var(--teal-d); font-size:1.2rem; transition:transform .25s; flex:none; }
.faq.open .faq-q .fq-ic{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a .faq-a-in{ padding:0 1.2rem 1.1rem; color:var(--ink-2); font-size:.88rem; line-height:1.6; }
.faq.open .faq-a{ max-height:340px; }

/* support contact tiles */
.sup-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:1.6rem; }
.sup-tile{ background:#fff; border-radius:18px; padding:1.2rem 1rem; text-align:center; text-decoration:none; color:var(--ink); box-shadow:0 4px 18px rgba(31,41,55,.05); transition:.2s; }
.sup-tile:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(20,184,166,.16); }
.sup-tile .st-ic{ width:50px;height:50px;border-radius:15px; display:grid;place-items:center; font-size:1.5rem; margin:0 auto .7rem; }
.sup-tile .st-ic.wa{ background:#DCFCE7; color:#10B981; }
.sup-tile .st-ic.cl{ background:var(--grad-soft); color:var(--teal-d); }
.sup-tile .st-ic.em{ background:#FBF3E2; color:var(--amber-d); }
.sup-tile .st-ic.ch{ background:#EEE9FB; color:#7C5CD4; }
.sup-tile b{ display:block; font-size:.9rem; }
.sup-tile span{ color:var(--muted); font-size:.76rem; }

/* legal hub list (reuse set-row) + readable doc */
.legal-doc{ background:#fff; border-radius:18px; padding:1.4rem; box-shadow:0 4px 18px rgba(31,41,55,.05); color:var(--ink-2); font-size:.9rem; line-height:1.7; }
.legal-doc h4{ font-family:'Sora'; font-weight:700; font-size:1rem; color:var(--ink); margin:1.3rem 0 .5rem; }
.legal-doc h4:first-child{ margin-top:0; }
.legal-doc p{ margin:0 0 .8rem; }

/* password strength meter */
.pw-meter{ height:6px; border-radius:50px; background:var(--bg-2); overflow:hidden; margin:.5rem .2rem .3rem; }
.pw-meter span{ display:block; height:100%; width:0; border-radius:50px; transition:width .3s, background .3s; }
.pw-meter span.weak{ width:33%; background:var(--coral); }
.pw-meter span.mid{ width:66%; background:var(--amber); }
.pw-meter span.strong{ width:100%; background:var(--teal); }
.pw-label{ font-size:.76rem; font-weight:700; margin:0 .2rem; }
.pw-label.weak{ color:var(--coral); } .pw-label.mid{ color:var(--amber-d); } .pw-label.strong{ color:var(--teal-d); }

/* toast (save confirmation) */
.toast-ok{ position:fixed; left:50%; bottom:6.5rem; transform:translateX(-50%) translateY(20px); z-index:2000; background:var(--ink); color:#fff; padding:.8rem 1.3rem; border-radius:50px; font-weight:600; font-size:.88rem; display:inline-flex; align-items:center; gap:.5rem; opacity:0; visibility:hidden; transition:.3s; box-shadow:0 12px 30px rgba(0,0,0,.25); white-space:nowrap; }
.toast-ok.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.toast-ok i{ color:var(--teal-l); font-size:1.1rem; }

@media (min-width:992px){
  .set-savebar{ max-width:640px; }
}


/* ============================================================
   CHAT — conversations list + thread
   ============================================================ */
/* conversation list row */
.cv-row{ display:flex; align-items:center; gap:.9rem; padding:.95rem 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.cv-row:last-child{ border-bottom:none; }
.cv-av{ width:54px;height:54px;border-radius:50%; flex:none; position:relative; background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-family:'Sora'; font-weight:700; font-size:1.2rem; }
.cv-av img{ width:100%;height:100%;border-radius:50%;object-fit:cover; }
.cv-av .on-dot{ position:absolute; bottom:1px; right:1px; width:13px;height:13px;border-radius:50%; background:#2DD4BF; border:2.5px solid #fff; }
.cv-tx{ flex:1; min-width:0; }
.cv-top{ display:flex; align-items:baseline; gap:.5rem; }
.cv-nm{ font-weight:700; font-size:.96rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-time{ color:var(--muted); font-size:.74rem; font-weight:600; flex:none; }
.cv-prev{ color:var(--muted); font-size:.85rem; margin-top:.15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-prev.unread{ color:var(--ink-2); font-weight:600; }
.cv-badge{ background:var(--teal); color:#fff; font-size:.7rem; font-weight:700; min-width:20px; height:20px; padding:0 .4rem; border-radius:50px; display:grid;place-items:center; flex:none; margin-top:.3rem; }

/* chat thread page layout — fixed header + composer, scrollable middle */
.chat-page{ min-height:100vh; background:var(--bg); display:flex; flex-direction:column; }
.chat-head{ position:sticky; top:0; z-index:40; background:linear-gradient(150deg,#0E9499,#14B8A6 60%,#14B8A6); color:#fff; padding:.85rem 1rem calc(.85rem + env(safe-area-inset-top)); display:flex; align-items:center; gap:.8rem; box-shadow:0 4px 18px rgba(20,184,166,.2); }
.chat-head .ch-back{ width:40px;height:40px;border-radius:12px; background:rgba(255,255,255,.16); border:none; color:#fff; display:grid;place-items:center; font-size:1.2rem; text-decoration:none; flex:none; }
.chat-head .ch-av{ width:42px;height:42px;border-radius:50%; background:rgba(255,255,255,.22); border:2px solid rgba(255,255,255,.4); display:grid;place-items:center; font-weight:700; font-family:'Sora'; flex:none; overflow:hidden; }
.chat-head .ch-av img{ width:100%;height:100%;object-fit:cover; }
.chat-head .ch-nm{ font-family:'Sora'; font-weight:700; font-size:1.02rem; line-height:1.1; }
.chat-head .ch-st{ font-size:.74rem; opacity:.9; display:flex; align-items:center; gap:.3rem; margin-top:.1rem; }
.chat-head .ch-st .live{ width:7px;height:7px;border-radius:50%; background:#A7F3D0; }
.chat-head .ch-call{ width:40px;height:40px;border-radius:12px; background:rgba(255,255,255,.16); border:none; color:#fff; display:grid;place-items:center; font-size:1.15rem; text-decoration:none; flex:none; }

.chat-body{ flex:1; overflow-y:auto; padding:1.2rem 1rem; max-width:640px; width:100%; margin:0 auto; }
.chat-day{ text-align:center; margin:.4rem 0 1.1rem; }
.chat-day span{ background:var(--bg-2); color:var(--muted); font-size:.74rem; font-weight:700; padding:.3rem .9rem; border-radius:50px; }
.msg{ max-width:78%; padding:.7rem .95rem; border-radius:18px; font-size:.92rem; line-height:1.4; margin-bottom:.5rem; position:relative; word-wrap:break-word; }
.msg .m-time{ font-size:.66rem; opacity:.7; display:block; text-align:right; margin-top:.25rem; }
.msg.them{ background:#fff; color:var(--ink); border-bottom-left-radius:6px; box-shadow:0 2px 10px rgba(31,41,55,.06); margin-right:auto; }
.msg.me{ background:var(--grad-brand); color:#fff; border-bottom-right-radius:6px; margin-left:auto; box-shadow:0 6px 16px rgba(20,184,166,.25); }
.msg.me .m-time i{ font-size:.8rem; margin-left:.1rem; }

/* safety banner inside chat */
.chat-safety{ background:#FBF3E2; border:1px solid #FEF08A; border-radius:14px; padding:.7rem .9rem; font-size:.78rem; color:#854D0E; display:flex; gap:.5rem; align-items:flex-start; margin-bottom:1.1rem; }
.chat-safety i{ color:var(--amber-d); flex:none; margin-top:.05rem; }

/* composer */
.chat-composer{ position:sticky; bottom:0; z-index:40; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom)); display:flex; align-items:flex-end; gap:.6rem; max-width:640px; width:100%; margin:0 auto; }
.chat-composer .cc-attach{ width:42px;height:42px;border-radius:50%; background:var(--bg-2); border:none; color:var(--teal-d); font-size:1.3rem; display:grid;place-items:center; flex:none; cursor:pointer; }
.chat-composer textarea{ flex:1; border:1.5px solid var(--line); background:var(--bg-2); border-radius:22px; padding:.65rem 1rem; resize:none; font-size:.92rem; max-height:110px; font-family:inherit; }
.chat-composer textarea:focus{ outline:none; border-color:var(--teal); background:#fff; }
.chat-composer .cc-send{ width:46px;height:46px;border-radius:50%; background:var(--grad-brand); border:none; color:#fff; font-size:1.25rem; display:grid;place-items:center; flex:none; cursor:pointer; box-shadow:0 8px 18px rgba(20,184,166,.35); }
.chat-composer .cc-send:disabled{ opacity:.5; box-shadow:none; }

/* ============================================================
   KYC — identity verification
   ============================================================ */
.kyc-status{ border-radius:22px; padding:1.4rem; color:#fff; position:relative; overflow:hidden; margin-bottom:1.4rem; }
.kyc-status .glow{ position:absolute; width:170px;height:170px;border-radius:50%; background:rgba(255,255,255,.12); top:-50px; right:-30px; }
.kyc-status.unverified{ background:linear-gradient(135deg,#F5A623,#D98E0B); box-shadow:0 16px 36px rgba(230,138,32,.26); }
.kyc-status.pending{ background:linear-gradient(135deg,#5C9BD4,#3A6FA8); box-shadow:0 16px 36px rgba(58,111,168,.26); }
.kyc-status.verified{ background:linear-gradient(135deg,#14B8A6,#0E9499); box-shadow:0 16px 36px rgba(20,184,166,.26); }
.kyc-status .ks-ic{ width:54px;height:54px;border-radius:16px; background:rgba(255,255,255,.2); display:grid;place-items:center; font-size:1.8rem; margin-bottom:.9rem; position:relative; z-index:1; }
.kyc-status h3{ font-family:'Sora'; font-weight:800; font-size:1.25rem; margin:0; position:relative; z-index:1; }
.kyc-status p{ opacity:.93; font-size:.88rem; margin:.35rem 0 0; position:relative; z-index:1; line-height:1.5; }
.kyc-status .ks-pill{ display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.2); padding:.35rem .85rem; border-radius:50px; font-size:.76rem; font-weight:700; margin-top:.9rem; position:relative; z-index:1; }

/* doc upload tile */
.kyc-up{ display:flex; align-items:center; gap:1rem; padding:1.1rem; border:1.5px solid var(--line); border-radius:16px; margin-bottom:.8rem; background:#fff; cursor:pointer; transition:.2s; }
.kyc-up:hover{ border-color:var(--teal-l); }
.kyc-up.done{ border-color:var(--teal); background:var(--grad-soft); }
.kyc-up .ku-ic{ width:48px;height:48px;border-radius:14px; background:var(--bg-2); color:var(--teal-d); display:grid;place-items:center; font-size:1.4rem; flex:none; }
.kyc-up.done .ku-ic{ background:var(--teal); color:#fff; }
.kyc-up .ku-tx{ flex:1; min-width:0; }
.kyc-up .ku-tx b{ display:block; font-weight:700; font-size:.94rem; }
.kyc-up .ku-tx span{ color:var(--muted); font-size:.8rem; }
.kyc-up .ku-tx .done-name{ color:var(--teal-d); font-weight:600; }
.kyc-up .ku-go{ color:var(--muted); font-size:1.3rem; flex:none; }
.kyc-up.done .ku-go{ color:var(--teal); }

/* selfie circle upload */
.kyc-selfie{ display:flex; flex-direction:column; align-items:center; margin:.4rem 0 1.2rem; }
.kyc-selfie .ks-circle{ width:120px;height:120px;border-radius:50%; border:2px dashed var(--teal); background:var(--grad-soft); display:grid;place-items:center; color:var(--teal-d); font-size:2.4rem; cursor:pointer; position:relative; overflow:hidden; }
.kyc-selfie .ks-circle.done{ border-style:solid; }
.kyc-selfie .ks-circle img{ width:100%;height:100%;object-fit:cover; }
.kyc-selfie .ks-hint{ font-size:.8rem; color:var(--muted); margin-top:.7rem; }

/* step indicator */
.kyc-steps{ display:flex; align-items:center; gap:.4rem; margin-bottom:1.4rem; }
.kyc-steps .kstep{ flex:1; height:5px; border-radius:50px; background:var(--bg-2); }
.kyc-steps .kstep.on{ background:var(--grad-brand); }


/* ============================================================
   PARTNER — onboarding, earnings calculator, pricing tiers
   ============================================================ */
/* become-partner earnings calculator */
.calc-card{ background:#fff; border-radius:22px; padding:1.5rem; box-shadow:0 14px 36px rgba(31,41,55,.08); margin-bottom:1.4rem; }
.calc-out{ background:var(--grad-brand); border-radius:18px; padding:1.3rem; color:#fff; text-align:center; margin-bottom:1.3rem; position:relative; overflow:hidden; }
.calc-out .glow{ position:absolute; width:150px;height:150px;border-radius:50%; background:rgba(255,255,255,.13); top:-40px; right:-20px; }
.calc-out .co-label{ font-size:.8rem; opacity:.9; position:relative; z-index:1; }
.calc-out .co-amt{ font-family:'Sora'; font-weight:800; font-size:2.4rem; line-height:1.1; margin:.2rem 0; position:relative; z-index:1; }
.calc-out .co-sub{ font-size:.78rem; opacity:.85; position:relative; z-index:1; }
.calc-row{ margin-bottom:1.2rem; }
.calc-row label{ display:flex; justify-content:space-between; font-size:.85rem; font-weight:700; color:var(--ink-2); margin-bottom:.6rem; }
.calc-row label b{ color:var(--teal-d); font-family:'Sora'; }
input[type=range].calc-range{ -webkit-appearance:none; width:100%; height:6px; border-radius:50px; background:var(--bg-2); outline:none; }
input[type=range].calc-range::-webkit-slider-thumb{ -webkit-appearance:none; width:24px;height:24px;border-radius:50%; background:var(--grad-brand); cursor:pointer; box-shadow:0 4px 12px rgba(20,184,166,.4); border:3px solid #fff; }
input[type=range].calc-range::-moz-range-thumb{ width:24px;height:24px;border-radius:50%; background:var(--teal); cursor:pointer; border:3px solid #fff; }

/* benefit list */
.ben-row{ display:flex; gap:.9rem; align-items:flex-start; padding:.9rem 0; border-bottom:1px solid var(--line); }
.ben-row:last-child{ border-bottom:none; }
.ben-row .bn-ic{ width:42px;height:42px;border-radius:12px; background:var(--grad-soft); color:var(--teal-d); display:grid;place-items:center; font-size:1.2rem; flex:none; }
.ben-row .bn-tx b{ display:block; font-weight:700; font-size:.94rem; }
.ben-row .bn-tx span{ color:var(--muted); font-size:.83rem; line-height:1.45; }

/* wizard step chrome */
.wz-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.wz-head .wz-count{ font-size:.78rem; font-weight:700; color:var(--teal-d); }
.wz-title{ font-family:'Sora'; font-weight:800; font-size:1.3rem; margin:.2rem 0 .3rem; color:var(--ink); }
.wz-sub{ color:var(--muted); font-size:.88rem; margin-bottom:1.4rem; }
.wz-step{ display:none; }
.wz-step.on{ display:block; animation:wzIn .35s ease; }
@keyframes wzIn{ from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:none;} }
/* photo grid uploader */
.ph-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.ph-cell{ aspect-ratio:1; border-radius:16px; border:1.5px dashed var(--teal); background:var(--grad-soft); display:grid;place-items:center; color:var(--teal-d); font-size:1.6rem; cursor:pointer; overflow:hidden; position:relative; }
.ph-cell.filled{ border-style:solid; }
.ph-cell img{ width:100%;height:100%;object-fit:cover; }
.ph-cell.filled .rm{ position:absolute; top:4px; right:4px; width:22px;height:22px;border-radius:50%; background:rgba(31,41,55,.7); color:#fff; display:grid;place-items:center; font-size:.8rem; }
/* selectable service chip (multi) */
.svc-pick{ display:flex; align-items:center; gap:.85rem; padding:.9rem 1rem; border:1.5px solid var(--line); border-radius:14px; margin-bottom:.7rem; cursor:pointer; transition:.2s; background:#fff; }
.svc-pick.sel{ border-color:var(--teal); background:var(--grad-soft); }
.svc-pick .sp-ic{ width:40px;height:40px;border-radius:11px; background:var(--bg-2); color:var(--teal-d); display:grid;place-items:center; font-size:1.15rem; flex:none; }
.svc-pick.sel .sp-ic{ background:var(--teal); color:#fff; }
.svc-pick .sp-tx{ flex:1; min-width:0; }
.svc-pick .sp-tx b{ display:block; font-weight:700; font-size:.92rem; }
.svc-pick .sp-tx span{ color:var(--muted); font-size:.78rem; }
.svc-pick .sp-chk{ width:24px;height:24px;border-radius:50%; border:2px solid var(--line); display:grid;place-items:center; color:#fff; flex:none; transition:.2s; }
.svc-pick.sel .sp-chk{ border-color:var(--teal); background:var(--teal); }
/* rate input attached to service (onboarding picker ONLY — sibling-scoped,
   warna profile page ki "Services & rates" list se class takra ke use
   display:none kar deta tha) */
.svc-pick + .svc-rate{ display:none; margin:.2rem 0 .8rem; padding-left:.4rem; border-bottom:none; }
.svc-pick.sel + .svc-rate{ display:block; }
.svc-pick + .svc-rate .rate-inp{ display:flex; align-items:center; gap:.5rem; background:var(--bg-2); border-radius:12px; padding:.55rem .9rem; }
.svc-pick + .svc-rate .rate-inp span{ color:var(--muted); font-weight:700; }
.svc-pick + .svc-rate .rate-inp input{ border:none; background:none; flex:1; font-weight:700; font-size:1rem; color:var(--ink); outline:none; }
.svc-pick + .svc-rate .rate-inp small{ color:var(--muted); }

/* availability weekly grid */
.av-day{ display:flex; align-items:center; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.av-day:last-child{ border-bottom:none; }
.av-day .ad-nm{ font-weight:700; width:46px; flex:none; }
.av-day .ad-slots{ flex:1; display:flex; flex-wrap:wrap; gap:.4rem; }
.av-slot{ font-size:.74rem; font-weight:600; padding:.3rem .7rem; border-radius:50px; background:var(--bg-2); color:var(--muted); cursor:pointer; transition:.2s; }
.av-slot.on{ background:var(--grad-brand); color:#fff; }
.uh .av-day.av-day-hourly{ display:block !important }

/* pricing tier cards (subscription) */
.tier{ background:#fff; border-radius:20px; padding:1.4rem; box-shadow:0 8px 26px rgba(31,41,55,.06); border:2px solid transparent; margin-bottom:1rem; position:relative; transition:.2s; }
.tier.pop{ border-color:var(--teal); }
.tier .tier-badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--grad-brand); color:#fff; font-size:.7rem; font-weight:700; padding:.25rem .9rem; border-radius:50px; white-space:nowrap; }
.tier .tier-nm{ font-family:'Sora'; font-weight:800; font-size:1.2rem; }
.tier .tier-price{ font-family:'Sora'; font-weight:800; font-size:2rem; margin:.3rem 0 .1rem; }
.tier .tier-price small{ font-size:.85rem; font-weight:600; color:var(--muted); }
.tier .tier-comm{ display:inline-flex; align-items:center; gap:.35rem; background:var(--grad-soft); color:var(--teal-d); font-size:.78rem; font-weight:700; padding:.3rem .8rem; border-radius:50px; margin-bottom:1rem; }
.tier .tier-feat{ display:flex; align-items:center; gap:.6rem; font-size:.86rem; color:var(--ink-2); padding:.35rem 0; }
.tier .tier-feat i{ color:var(--teal); flex:none; }
.tier.current{ background:var(--grad-soft); border-color:var(--teal); }
.tier .tier-cur-pill{ position:absolute; top:1.2rem; right:1.2rem; background:var(--teal); color:#fff; font-size:.7rem; font-weight:700; padding:.25rem .7rem; border-radius:50px; }

/* rating breakdown bars (reviews) */
.rev-summary{ display:flex; gap:1.4rem; align-items:center; margin-bottom:1.2rem; }
.rev-big{ text-align:center; flex:none; }
.rev-big .rb-num{ font-family:'Sora'; font-weight:800; font-size:2.6rem; line-height:1; color:var(--ink); }
.rev-big .rb-stars{ color:var(--sun); font-size:.85rem; margin-top:.2rem; }
.rev-big .rb-cnt{ color:var(--muted); font-size:.76rem; margin-top:.2rem; }
.rev-bars{ flex:1; }
.rev-bar{ display:flex; align-items:center; gap:.5rem; font-size:.76rem; color:var(--muted); margin-bottom:.3rem; }
.rev-bar .rb-track{ flex:1; height:7px; border-radius:50px; background:var(--bg-2); overflow:hidden; }
.rev-bar .rb-fill{ height:100%; border-radius:50px; background:var(--grad-brand); }


/* ============================================================
   PARTNER — dashboard, requests, request detail
   ============================================================ */
/* online toggle in hero */
.pd-online{ display:inline-flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); padding:.45rem .85rem; border-radius:50px; color:#fff; font-size:.82rem; font-weight:700; cursor:pointer; }
.pd-online .od{ width:9px;height:9px;border-radius:50%; background:#2DD4BF; box-shadow:0 0 0 3px rgba(55,214,122,.3); transition:.2s; }
.pd-online.off .od{ background:#CBD5E1; box-shadow:none; }

/* earnings figure in hero (reuses wl-* but with sub-stats) */
.pd-hero-stats{ display:flex; gap:.6rem; margin-top:1.3rem; position:relative; z-index:1; }
.pd-hstat{ flex:1; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:.8rem; }
.pd-hstat .ph-lbl{ font-size:.72rem; opacity:.85; display:flex; align-items:center; gap:.3rem; }
.pd-hstat .ph-val{ font-family:'Sora'; font-weight:800; font-size:1.35rem; margin-top:.2rem; }

/* subscription status strip */
.pd-sub{ display:flex; align-items:center; gap:.8rem; background:#fff; border-radius:16px; padding:.9rem 1.1rem; box-shadow:0 4px 18px rgba(31,41,55,.05); margin-bottom:1.2rem; }
.pd-sub .ps-ic{ width:42px;height:42px;border-radius:12px; background:var(--grad-soft); color:var(--teal-d); display:grid;place-items:center; font-size:1.2rem; flex:none; }
.pd-sub .ps-tx{ flex:1; min-width:0; }
.pd-sub .ps-tx b{ display:block; font-weight:700; font-size:.92rem; }
.pd-sub .ps-tx span{ color:var(--muted); font-size:.78rem; }
.pd-sub .ps-up{ background:var(--grad-brand); color:#fff; font-size:.76rem; font-weight:700; padding:.4rem .8rem; border-radius:50px; text-decoration:none; flex:none; }

/* request card */
.rq-card{ background:#fff; border-radius:20px; padding:1.2rem; margin-bottom:1rem; box-shadow:0 6px 24px rgba(31,41,55,.07); position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s; }
.rq-card:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(20,184,166,.14); }
/* new requests get a brand accent strip on the left */
.rq-card.is-new::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad-brand); }
.rq-top{ display:flex; gap:.9rem; align-items:center; }
.rq-av{ width:52px;height:52px;border-radius:15px; flex:none; background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-family:'Sora'; font-weight:700; font-size:1.2rem; overflow:hidden; box-shadow:0 6px 16px rgba(20,184,166,.32); }
.rq-av img{ width:100%;height:100%;object-fit:cover; }
.rq-hd{ flex:1; min-width:0; }
.rq-hd .rq-nm{ font-family:'Sora'; font-weight:700; font-size:1.05rem; color:var(--ink); }
.rq-hd .rq-svc{ display:inline-flex; align-items:center; gap:.3rem; color:var(--teal-d); font-size:.8rem; font-weight:600; margin-top:.15rem; }
.rq-hd .rq-svc i{ font-size:.85rem; }
.rq-amt{ text-align:right; flex:none; }
.rq-amt b{ font-family:'Sora'; font-weight:800; font-size:1.25rem; color:var(--ink); }
.rq-amt span{ display:inline-block; color:var(--teal-d); font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; background:var(--grad-soft); padding:.1rem .45rem; border-radius:50px; margin-top:.2rem; }
.rq-meta{ display:flex; flex-wrap:wrap; gap:.45rem; margin:1rem 0 .2rem; padding-top:1rem; border-top:1px solid var(--line); }
.rq-meta .rm-chip{ display:inline-flex; align-items:center; gap:.4rem; background:var(--bg-2); color:var(--ink-2); font-size:.76rem; font-weight:600; padding:.4rem .75rem; border-radius:50px; }
.rq-meta .rm-chip i{ color:var(--teal); }
.rq-acts{ display:flex; gap:.6rem; margin-top:.9rem; }
.rq-acts .btn{ flex:1; padding:.75rem; border-radius:14px; font-weight:700; font-size:.9rem; transition:.2s; }
.rq-reject{ background:var(--bg-2); color:var(--ink-2); border:none; }
.rq-reject:hover{ background:#FCE8E8; color:#D4615A; }
.rq-accept{ background:var(--grad-brand); color:#fff; border:none; box-shadow:0 6px 16px rgba(20,184,166,.3); }
.rq-accept:hover{ filter:brightness(1.05); }
/* status pill on request */
.rq-status{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700; padding:.3rem .7rem; border-radius:50px; }
.rq-status.new{ background:#FBF3E2; color:var(--amber-d); }
.rq-status.active{ background:var(--grad-soft); color:var(--teal-d); }
.rq-status.done{ background:var(--bg-2); color:var(--muted); }

/* countdown / expiry hint on new request */
.rq-expire{ font-size:.74rem; color:var(--coral); font-weight:600; display:flex; align-items:center; gap:.3rem; margin-top:.6rem; }

/* request detail — user info block */
.rd-user{ display:flex; gap:1rem; align-items:center; background:#fff; border-radius:18px; padding:1.2rem; box-shadow:0 4px 18px rgba(31,41,55,.05); margin-bottom:1.2rem; }
.rd-user .ru-av{ width:62px;height:62px;border-radius:18px; flex:none; background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-family:'Sora'; font-weight:700; font-size:1.4rem; }
.rd-user .ru-tx{ flex:1; min-width:0; }
.rd-user .ru-nm{ font-family:'Sora'; font-weight:700; font-size:1.15rem; }
.rd-user .ru-mt{ color:var(--muted); font-size:.82rem; margin-top:.15rem; }
.rd-user .ru-chat{ width:46px;height:46px;border-radius:50%; background:var(--grad-soft); color:var(--teal-d); display:grid;place-items:center; font-size:1.2rem; flex:none; text-decoration:none; }

/* detail rows */
.rd-rows{ background:#fff; border-radius:18px; padding:.4rem 1.1rem; box-shadow:0 4px 18px rgba(31,41,55,.05); margin-bottom:1.2rem; }
.rd-row{ display:flex; align-items:center; gap:.9rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.rd-row:last-child{ border-bottom:none; }
.rd-row .rr-ic{ width:38px;height:38px;border-radius:11px; background:var(--bg-2); color:var(--teal-d); display:grid;place-items:center; font-size:1.05rem; flex:none; }
.rd-row .rr-tx{ flex:1; }
.rd-row .rr-tx span{ color:var(--muted); font-size:.76rem; }
.rd-row .rr-tx b{ display:block; font-weight:600; font-size:.92rem; color:var(--ink); }

/* earnings breakdown box */
.rd-earn{ background:var(--grad-soft); border-radius:16px; padding:1.1rem; margin-bottom:1.2rem; }
.rd-earn .re-line{ display:flex; justify-content:space-between; font-size:.88rem; padding:.3rem 0; color:var(--ink-2); }
.rd-earn .re-line.total{ border-top:1px dashed var(--teal-l); margin-top:.4rem; padding-top:.7rem; font-weight:800; font-family:'Sora'; color:var(--ink); font-size:1rem; }
.rd-earn .re-line .neg{ color:var(--coral); }

/* check in/out big action */
.rd-checkbtn{ width:100%; padding:1rem; border-radius:16px; border:none; font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.rd-checkbtn.in{ background:var(--grad-brand); color:#fff; }
.rd-checkbtn.out{ background:#FBF3E2; color:var(--amber-d); }
.rd-sos-row{ display:flex; gap:.6rem; margin-top:.7rem; }
.rd-sos-row a{ flex:1; text-align:center; padding:.8rem; border-radius:13px; font-weight:700; font-size:.86rem; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }
.rd-sos-row .sos{ background:#FCE8E8; color:#D4615A; }
.rd-sos-row .dir{ background:var(--bg-2); color:var(--ink-2); }


/* ============================================================
   PARTNER MONEY — earnings, withdraw, wallet
   ============================================================ */
/* period segmented filter */
.pm-period{ display:flex; gap:.4rem; background:var(--bg-2); border-radius:14px; padding:.3rem; margin-bottom:1.3rem; }
.pm-period button{ flex:1; border:none; background:none; padding:.5rem; border-radius:11px; font-weight:700; font-size:.82rem; color:var(--muted); cursor:pointer; transition:.2s; }
.pm-period button.active{ background:#fff; color:var(--teal-d); box-shadow:0 2px 8px rgba(31,41,55,.08); }

/* mini bar chart */
.pm-chart{ display:flex; align-items:flex-end; gap:.5rem; height:130px; padding:.4rem 0 0; }
.pm-chart .bar{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.4rem; height:100%; justify-content:flex-end; }
.pm-chart .bar .col{ width:100%; max-width:26px; border-radius:7px 7px 4px 4px; background:var(--grad-brand); transition:height .5s cubic-bezier(.2,.8,.2,1); position:relative; }
.pm-chart .bar.peak .col{ background:linear-gradient(180deg,#F5A623,#D98E0B); }
.pm-chart .bar small{ font-size:.68rem; color:var(--muted); font-weight:600; }

/* earnings summary lines */
.pm-sum{ background:#fff; border-radius:18px; padding:1.1rem 1.2rem; box-shadow:0 4px 18px rgba(31,41,55,.05); margin-bottom:1.2rem; }
.pm-sumrow{ display:flex; justify-content:space-between; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.pm-sumrow:last-child{ border-bottom:none; }
.pm-sumrow .pl{ color:var(--ink-2); display:flex; align-items:center; gap:.5rem; }
.pm-sumrow .pl i{ width:30px;height:30px;border-radius:9px; background:var(--bg-2); color:var(--teal-d); display:grid;place-items:center; font-size:.9rem; }
.pm-sumrow .pv{ font-weight:700; font-family:'Sora'; }
.pm-sumrow .pv.neg{ color:var(--coral); }
.pm-sumrow.net{ background:var(--grad-soft); margin:.4rem -1.2rem -1.1rem; padding:.9rem 1.2rem; border-radius:0 0 18px 18px; }
.pm-sumrow.net .pv{ color:var(--teal-d); font-size:1.15rem; }

/* withdraw amount entry */
.wd-amt{ text-align:center; padding:1.4rem 0 .6rem; }
.wd-amt .wd-cur{ font-family:'Sora'; font-weight:800; color:var(--muted); font-size:1.6rem; vertical-align:top; }
.wd-amt input{ font-family:'Sora'; font-weight:800; font-size:3rem; border:none; background:none; text-align:center; width:auto; max-width:70%; color:var(--ink); outline:none; }
.wd-amt input::placeholder{ color:var(--line); }
.wd-avail{ text-align:center; color:var(--muted); font-size:.85rem; margin-bottom:1.2rem; }
.wd-avail b{ color:var(--teal-d); }
.wd-chips{ display:flex; gap:.5rem; justify-content:center; margin-bottom:1.4rem; flex-wrap:wrap; }
.wd-chip{ background:var(--bg-2); border:none; padding:.5rem 1rem; border-radius:50px; font-weight:700; font-size:.82rem; color:var(--ink-2); cursor:pointer; transition:.2s; }
.wd-chip:hover,.wd-chip.active{ background:var(--grad-soft); color:var(--teal-d); }

/* bank chip (selected payout account) */
.bank-chip{ display:flex; align-items:center; gap:.9rem; background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:1rem 1.1rem; margin-bottom:1.2rem; }
.bank-chip .bk-ic{ width:46px;height:46px;border-radius:13px; background:var(--grad-soft); color:var(--teal-d); display:grid;place-items:center; font-size:1.3rem; flex:none; }
.bank-chip .bk-tx{ flex:1; min-width:0; }
.bank-chip .bk-tx b{ display:block; font-weight:700; font-size:.92rem; }
.bank-chip .bk-tx span{ color:var(--muted); font-size:.8rem; }
.bank-chip .bk-verified{ color:var(--teal); font-size:.7rem; font-weight:700; display:inline-flex; align-items:center; gap:.25rem; }
.bank-chip .bk-go{ color:var(--muted); font-size:1.2rem; flex:none; }

/* payout timeline note */
.wd-note{ display:flex; gap:.6rem; align-items:flex-start; background:var(--grad-soft); border-radius:14px; padding:.85rem 1rem; font-size:.82rem; color:var(--teal-d); }
.wd-note i{ flex:none; margin-top:.05rem; }


/* ============================================================
   PARTNER SERVICES MANAGE (prefixed to avoid legacy svc-* clash)
   ============================================================ */
.pr-svc{ display:flex; align-items:center; gap:.9rem; padding:1rem; background:#fff; border-radius:16px; box-shadow:0 4px 18px rgba(31,41,55,.05); margin-bottom:.8rem; }
.pr-svc.off{ opacity:.55; }
.pr-svc .ps-ico{ width:46px;height:46px;border-radius:13px; background:var(--grad-soft); color:var(--teal-d); display:grid;place-items:center; font-size:1.3rem; flex:none; }
.pr-svc .ps-mid{ flex:1; min-width:0; }
.pr-svc .ps-mid b{ display:block; font-weight:700; font-size:.95rem; }
.pr-svc .ps-rate{ display:inline-flex; align-items:center; gap:.3rem; margin-top:.3rem; background:var(--bg-2); border-radius:9px; padding:.25rem .6rem; }
.pr-svc .ps-rate span{ color:var(--muted); font-weight:700; font-size:.85rem; }
.pr-svc .ps-rate input{ border:none; background:none; width:54px; min-width:48px; font-weight:700; font-size:.9rem; color:var(--ink); outline:none; -moz-appearance:textfield; appearance:textfield; }
.pr-svc .ps-rate input::-webkit-outer-spin-button,
.pr-svc .ps-rate input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pr-svc .ps-rate small{ color:var(--muted); font-size:.72rem; }


/* ============================================================
   PARTNER REVIEWS / PROFILE / BANK (prefixed, clash-safe)
   ============================================================ */
/* rating summary */
.pr-revsum{ display:flex; gap:1.4rem; align-items:center; }
.pr-revbig{ text-align:center; flex:none; }
.pr-revbig .n{ font-family:'Sora'; font-weight:800; font-size:2.8rem; line-height:1; color:var(--ink); }
.pr-revbig .st{ color:var(--sun); font-size:.9rem; margin-top:.25rem; }
.pr-revbig .c{ color:var(--muted); font-size:.76rem; margin-top:.25rem; }
.pr-revbars{ flex:1; min-width:0; }
.pr-revbar{ display:flex; align-items:center; gap:.55rem; font-size:.76rem; color:var(--muted); margin-bottom:.35rem; font-weight:600; }
.pr-revbar .lbl{ width:10px; text-align:right; }
.pr-revbar .trk{ flex:1; height:7px; border-radius:50px; background:var(--bg-2); overflow:hidden; }
.pr-revbar .fil{ height:100%; border-radius:50px; background:var(--grad-brand); }
/* review item */
.pr-rev{ display:flex; gap:.9rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.pr-rev:last-child{ border-bottom:none; }
.pr-rev .ra{ width:44px;height:44px;border-radius:50%; background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-weight:700; flex:none; font-family:'Sora'; }
.pr-rev .rt{ flex:1; min-width:0; }
.pr-rev .rt .rh{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.pr-rev .rt .rn{ font-weight:700; font-size:.92rem; }
.pr-rev .rt .rd{ color:var(--muted); font-size:.72rem; }
.pr-rev .rt .rstars{ color:var(--sun); font-size:.78rem; margin:.2rem 0; }
.pr-rev .rt .rtx{ color:var(--ink-2); font-size:.86rem; line-height:1.5; }
.pr-rev .rt .rsvc{ display:inline-block; background:var(--bg-2); color:var(--muted); font-size:.7rem; font-weight:600; padding:.15rem .55rem; border-radius:50px; margin-top:.5rem; }

/* profile preview header */
.pp-preview{ background:linear-gradient(135deg,#14B8A6,#0E9499); border-radius:22px; padding:1.5rem; color:#fff; text-align:center; position:relative; overflow:hidden; margin-bottom:1.4rem; box-shadow:0 16px 36px rgba(20,184,166,.26); }
.pp-preview .glow{ position:absolute; width:170px;height:170px;border-radius:50%; background:rgba(255,255,255,.12); top:-50px; right:-30px; }
.pp-av{ width:88px;height:88px;border-radius:50%; background:rgba(255,255,255,.2); border:3px solid rgba(255,255,255,.5); display:grid;place-items:center; font-family:'Sora'; font-weight:800; font-size:2.2rem; margin:0 auto .8rem; position:relative; z-index:1; }
.pp-av img{ width:100%;height:100%;object-fit:cover; border-radius:50%; }
.pp-av .cam{ position:absolute; bottom:0; right:0; width:32px;height:32px;border-radius:50%; background:var(--teal); color:#fff; display:grid;place-items:center; font-size:.9rem; border:2.5px solid #fff; box-shadow:0 2px 8px rgba(14,158,142,.35); cursor:pointer; transition:transform .15s ease; }
.pp-av .cam:hover{ transform:scale(1.08); }
.pp-nm{ font-family:'Sora'; font-weight:800; font-size:1.3rem; position:relative; z-index:1; }
.pp-meta{ font-size:.84rem; opacity:.92; margin-top:.2rem; position:relative; z-index:1; }
.pp-badges{ display:flex; gap:.5rem; justify-content:center; margin-top:.8rem; position:relative; z-index:1; flex-wrap:wrap; }


/* ============================================================
   PUBLIC PAGES — How It Works, Services, Pricing, City, About,
   Safety, Testimonials, Help/FAQ, Legal (shared components)
   ============================================================ */
/* page hero (sub-pages, smaller than home hero) */
.page-hero{ position:relative; padding:5.5rem 0 3rem; background:linear-gradient(160deg,#EAF6F4,#F4FAF9 60%); overflow:hidden; text-align:center; }
.page-hero .orb{ position:absolute; border-radius:50%; filter:blur(50px); opacity:.5; }
.page-hero .orb-a{ width:300px;height:300px; background:rgba(20,184,166,.25); top:-120px; left:-80px; }
.page-hero .orb-b{ width:260px;height:260px; background:rgba(250,204,21,.22); bottom:-120px; right:-60px; }
.page-hero .container{ position:relative; z-index:1; }
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{ font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(2rem,5vw,3rem); line-height:1.1; margin:.6rem 0; }
.page-hero h1 .text-grad{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.page-hero p{ color:var(--ink-2); font-size:1.08rem; max-width:40rem; margin:0 auto; }
.page-hero .breadcrumb-mini{ font-size:.82rem; color:var(--muted); margin-bottom:.4rem; }
.page-hero .breadcrumb-mini a{ color:var(--teal-d); text-decoration:none; }

/* generic feature/info card grid */
.pub-grid{ display:grid; gap:1.4rem; }
.pub-grid.c2{ grid-template-columns:repeat(2,1fr); }
.pub-grid.c3{ grid-template-columns:repeat(3,1fr); }
.pub-grid.c4{ grid-template-columns:repeat(4,1fr); }
.pub-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.8rem; box-shadow:var(--sh-sm); transition:.25s; }
.pub-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-hover); border-color:transparent; }
.pub-card .pc-ic{ width:56px;height:56px;border-radius:16px; background:var(--grad-soft); color:var(--teal-d); display:grid;place-items:center; font-size:1.6rem; margin-bottom:1.1rem; }
.pub-card.warm .pc-ic{ background:linear-gradient(135deg,#FBF3E2,#FEF9C3); color:var(--amber-d); }
.pub-card h3{ font-family:'Sora'; font-weight:700; font-size:1.15rem; margin:0 0 .5rem; }
.pub-card p{ color:var(--ink-2); font-size:.94rem; margin:0; line-height:1.6; }

/* numbered steps (How it works) */
.steps-col{ display:flex; flex-direction:column; gap:1.2rem; }
.step-item{ display:flex; gap:1.1rem; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.4rem; box-shadow:var(--sh-sm); }
.step-item .si-num{ width:44px;height:44px;border-radius:13px; background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-family:'Sora'; font-weight:800; font-size:1.2rem; flex:none; box-shadow:0 6px 16px rgba(20,184,166,.3); }
.step-item.warm .si-num{ background:var(--grad-warm); box-shadow:0 6px 16px rgba(250,204,21,.3); }
.step-item .si-tx h4{ font-family:'Sora'; font-weight:700; font-size:1.05rem; margin:0 0 .3rem; }
.step-item .si-tx p{ color:var(--ink-2); font-size:.92rem; margin:0; line-height:1.55; }
.journey-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.2rem; }
.journey-head .jh-ic{ width:46px;height:46px;border-radius:14px; display:grid;place-items:center; font-size:1.3rem; color:#fff; }
.journey-head.user .jh-ic{ background:var(--grad-brand); } .journey-head.partner .jh-ic{ background:var(--grad-warm); }
.journey-head h3{ font-family:'Sora'; font-weight:800; font-size:1.3rem; margin:0; }

/* pricing plans */
.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; align-items:stretch; }
.plan-card{ background:#fff; border:1.5px solid var(--line); border-radius:22px; padding:2rem 1.6rem; position:relative; display:flex; flex-direction:column; transition:.25s; }
.plan-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-hover); }
.plan-card.featured{ border-color:var(--teal); box-shadow:0 20px 50px rgba(20,184,166,.18); }
.plan-card .pl-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--grad-brand); color:#fff; font-size:.74rem; font-weight:700; padding:.3rem .9rem; border-radius:50px; white-space:nowrap; }
.plan-card .pl-name{ font-family:'Sora'; font-weight:800; font-size:1.25rem; }
.plan-card .pl-price{ font-family:'Sora'; font-weight:800; font-size:2.2rem; margin:.6rem 0 .2rem; }
.plan-card .pl-price small{ font-size:.9rem; color:var(--muted); font-weight:600; }
.plan-card .pl-sub{ color:var(--muted); font-size:.86rem; margin-bottom:1.2rem; }
.plan-card ul{ list-style:none; padding:0; margin:0 0 1.5rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.plan-card ul li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; color:var(--ink-2); }
.plan-card ul li i{ color:var(--teal); flex:none; margin-top:.15rem; }
.plan-card .commission-chip{ display:inline-block; background:var(--bg-2); color:var(--teal-d); font-weight:700; font-size:.8rem; padding:.3rem .8rem; border-radius:50px; margin-bottom:1rem; }

/* city tiles */
.city-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.city-tile{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3; background:var(--grad-brand); display:flex; align-items:flex-end; padding:1.1rem; color:#fff; text-decoration:none; transition:.25s; }
.city-tile:nth-child(3n) { background:var(--grad-warm); }
.city-tile:nth-child(4n) { background:linear-gradient(135deg,#2DD4BF,#0E9499); }
.city-tile:hover{ transform:translateY(-4px); box-shadow:var(--sh-hover); }
.city-tile .ct-nm{ font-family:'Sora'; font-weight:800; font-size:1.2rem; position:relative; z-index:1; }
.city-tile .ct-sub{ font-size:.78rem; opacity:.9; position:relative; z-index:1; }
.city-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.3),transparent); }

/* testimonials */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.testi-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.6rem; box-shadow:var(--sh-sm); }
.testi-card .tc-stars{ color:var(--sun); margin-bottom:.8rem; }
.testi-card .tc-quote{ font-size:.96rem; color:var(--ink); line-height:1.6; margin-bottom:1.2rem; }
.testi-card .tc-who{ display:flex; align-items:center; gap:.7rem; }
.testi-card .tc-av{ width:44px;height:44px;border-radius:50%; background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-weight:700; font-family:'Sora'; }
.testi-card .tc-nm{ font-weight:700; font-size:.9rem; } .testi-card .tc-meta{ color:var(--muted); font-size:.78rem; }

/* contact */
.contact-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.8rem; box-shadow:var(--sh-sm); }
.contact-form .form-control{ border:1.5px solid var(--line); border-radius:12px; padding:.8rem 1rem; font-size:.95rem; margin-bottom:1rem; width:100%; outline:none; font-family:inherit; }
.contact-form .form-control:focus{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,184,166,.1); }
.contact-info-row{ display:flex; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.contact-info-row:last-child{ border-bottom:none; }
.contact-info-row .ci-ic{ width:46px;height:46px;border-radius:13px; background:var(--grad-soft); color:var(--teal-d); display:grid;place-items:center; font-size:1.2rem; flex:none; }
.contact-info-row b{ display:block; font-size:.95rem; } .contact-info-row span{ color:var(--muted); font-size:.86rem; }

/* legal / article body */
.legal-body{ max-width:48rem; margin:0 auto; }
.legal-body h2{ font-family:'Sora'; font-weight:700; font-size:1.3rem; margin:2rem 0 .8rem; }
.legal-body p, .legal-body li{ color:var(--ink-2); line-height:1.7; font-size:.96rem; }
.legal-toc{ background:var(--bg-2); border-radius:16px; padding:1.2rem 1.4rem; margin-bottom:2rem; }
.legal-toc a{ display:block; color:var(--teal-d); text-decoration:none; padding:.3rem 0; font-size:.92rem; }

/* help center categories */
.help-search{ max-width:36rem; margin:0 auto 2.5rem; position:relative; }
.help-search input{ width:100%; border:1.5px solid var(--line); border-radius:50px; padding:1rem 1.2rem 1rem 3rem; font-size:1rem; outline:none; box-shadow:var(--sh-sm); }
.help-search input:focus{ border-color:var(--teal); }
.help-search i{ position:absolute; left:1.2rem; top:50%; transform:translateY(-50%); color:var(--muted); font-size:1.1rem; }

@media (max-width:900px){
  .pub-grid.c3,.pub-grid.c4,.plan-grid,.testi-grid{ grid-template-columns:1fr 1fr; }
  .city-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .pub-grid.c2,.pub-grid.c3,.pub-grid.c4,.plan-grid,.testi-grid,.city-grid{ grid-template-columns:1fr; }
}


/* promo code input (book/checkout) */
.promo-box{ display:flex; gap:.5rem; margin:.9rem 0; }
.promo-box input{ flex:1; border:1.5px solid var(--line); background:var(--bg-2); border-radius:11px; padding:.6rem .85rem; font-size:.88rem; text-transform:uppercase; outline:none; font-family:inherit; letter-spacing:.5px; }
.promo-box input:focus{ border-color:var(--teal); background:#fff; }
.promo-box button{ border:none; background:var(--ink); color:#fff; border-radius:11px; padding:0 1.1rem; font-weight:700; font-size:.85rem; cursor:pointer; transition:.2s; white-space:nowrap; }
.promo-box button:hover{ background:var(--teal-d); }
.promo-msg{ font-size:.8rem; font-weight:600; margin:-.3rem 0 .6rem; display:none; }
.promo-msg.ok{ color:var(--teal-d); display:block; } .promo-msg.err{ color:var(--coral); display:block; }
.price-row.pr-promo{ color:var(--teal-d); }


/* top-up amount chips */
.topup-chip{ border:1.5px solid var(--line); background:#fff; border-radius:13px; padding:.85rem .5rem; font-weight:700; font-size:.95rem; color:var(--ink); cursor:pointer; transition:.18s; font-family:inherit; }
.topup-chip:hover{ border-color:var(--teal-l); }
.topup-chip.active{ border-color:var(--teal); background:var(--grad-soft); color:var(--teal-d); box-shadow:0 4px 12px rgba(20,184,166,.15); }


/* become-partner earnings calculator */
.calc-field label{ font-size:.82rem; font-weight:700; color:var(--ink-2); display:block; }
.calc-field .calc-val{ font-family:'Sora'; font-weight:800; font-size:1.4rem; color:var(--teal-d); margin:.2rem 0 .6rem; }
.calc-field input[type=range]{ width:100%; height:6px; border-radius:50px; background:var(--bg-2); outline:none; -webkit-appearance:none; appearance:none; cursor:pointer; }
.calc-field input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:24px;height:24px;border-radius:50%; background:var(--grad-brand); cursor:pointer; box-shadow:0 4px 12px rgba(20,184,166,.4); border:3px solid #fff; }
.calc-field input[type=range]::-moz-range-thumb{ width:22px;height:22px;border-radius:50%; background:var(--teal); cursor:pointer; border:3px solid #fff; }
.calc-result{ background:var(--grad-brand); color:#fff; border-radius:18px; padding:1.4rem 1.6rem; margin-top:1.6rem; position:relative; overflow:hidden; }
.calc-result::before{ content:""; position:absolute; top:-40px; right:-30px; width:140px;height:140px;border-radius:50%; background:rgba(255,255,255,.12); }
.calc-result .cr-label{ font-size:.84rem; opacity:.9; }
.calc-result .cr-big{ font-family:'Sora'; font-weight:800; font-size:2.2rem; line-height:1.1; margin-top:.2rem; }
.calc-result .cr-note{ font-size:.78rem; opacity:.85; margin-top:.5rem; position:relative; z-index:1; }
.topup-chip small{ display:block; color:var(--muted); font-weight:600; font-size:.72rem; margin-top:.15rem; }
.topup-chip.active small{ color:var(--teal-d); }
/* =====================================================================
   PANEL SWITCH — header chip for dual-role (Both) accounts
   ===================================================================== */
.uh-actions{ display:flex; align-items:center; gap:.55rem; }
.ps-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .8rem; border-radius:50px; text-decoration:none;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.32);
  color:#fff; font-weight:700; font-size:.8rem; white-space:nowrap;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(8,29,26,.12);
  transition:transform .2s, background .2s, box-shadow .2s;
}
.ps-chip:hover{ background:rgba(255,255,255,.28); color:#fff; transform:translateY(-1px); box-shadow:0 8px 20px rgba(8,29,26,.18); }
.ps-chip:active{ transform:scale(.97); }
.ps-chip i{ font-size:.92rem; }
.ps-chip span{ line-height:1; }
@media (max-width:380px){
  .ps-chip span{ display:none; }            /* tight screens: icon-only */
  .ps-chip{ padding:.5rem; }
}

/* partner gallery — add slot + uploading state */
.ph-cell.ph-add{ cursor:pointer; }
.ph-cell.uploading{ pointer-events:none; position:relative; }
.ph-cell.uploading::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(255,255,255,.6);
  background-image:linear-gradient(90deg,transparent,rgba(20,184,166,.25),transparent); background-size:200% 100%;
  animation:phShim 1s linear infinite; }
@keyframes phShim{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* ============================================================
   USER + PARTNER PANEL — TRUE DARK (scoped to .uh only)
   Front website, login/signup stay LIGHT. Only the logged-in
   app shell (.uh) goes dark.
   ============================================================ */
.uh{
  --bg:#0A1214; --bg-2:#0F1B1C; --surface:#11201F; --surface-2:#16292A;
  --ink:#ECFEFB; --ink-2:#9FB8B4; --muted:#6B847F;
  --line:rgba(94,234,212,.12);
  --sh-sm:0 4px 18px rgba(0,0,0,.4); --sh:0 22px 60px rgba(0,0,0,.5);
  background:var(--bg); color:var(--ink);
}
/* surfaces inside the panel */
.uh .uh-card,.uh .uh-up,.uh .uh-upcoming,.uh .uh-refer,.uh .uh-bk,
.uh .card,.uh .book-step,.uh .book-box,.uh .prof-card,.uh .svc,
.uh .comp-card,.uh .filter-bar,.uh .plan,.uh .quote,.uh [style*="background:#fff"],
.uh [style*="background:var(--surface"]{
  background:var(--surface)!important; color:var(--ink); border-color:var(--line)!important;
}
.uh .uh-sec-head h3,.uh h1,.uh h2,.uh h3,.uh h4,.uh .bk-nm,.uh .uh-up-name{ color:var(--ink)!important; }
.uh .bk-mt,.uh .uh-up-meta,.uh .sub,.uh small,.uh .text-muted{ color:var(--ink-2)!important; }

/* form controls inside panel */
.uh .form-control,.uh .form-select,.uh textarea,.uh input{
  background:var(--bg-2)!important; color:var(--ink)!important; border:1px solid var(--line)!important;
}
.uh .form-control::placeholder{ color:var(--muted)!important; }
.uh .form-control:focus,.uh .form-select:focus{
  background:var(--surface)!important; border-color:var(--teal)!important;
  box-shadow:0 0 0 3px rgba(45,212,191,.18)!important;
}
.uh .btn-light{ background:var(--bg-2)!important; color:var(--ink)!important; border-color:var(--line)!important; }
.uh hr{ border-color:var(--line)!important; opacity:1; }

/* dark bottom nav (scoped) */
.uh-bottom{
  background:rgba(11,24,23,.92)!important; border-top:1px solid rgba(94,234,212,.12)!important;
  box-shadow:0 -10px 36px rgba(0,0,0,.5)!important;
}
.uh-bottom a{ color:#6B847F!important; }
.uh-bottom a.active{ color:#2DD4BF!important; }
.uh-bottom a.center .fab{ border:3px solid #0B1817!important; }

/* desktop centered app-frame (scoped) */
@media (min-width:992px){
  .uh{
    background:
      radial-gradient(900px 500px at 18% 12%, rgba(20,184,166,.10), transparent 60%),
      radial-gradient(800px 520px at 82% 78%, rgba(94,234,212,.08), transparent 60%),
      #0A1214;
    display:flex; flex-direction:column; align-items:center;
  }
  .uh-wrap{
    max-width:600px; width:100%; background:var(--bg-2);
    border:1px solid rgba(94,234,212,.12); border-radius:0 0 36px 36px;
    box-shadow:0 40px 120px -30px rgba(0,0,0,.7); overflow:hidden;
  }
  .uh-hero{ border-radius:0!important; }
  .uh-bottom{ max-width:600px; left:50%; transform:translateX(-50%); right:auto; width:100%; }
}
@media (min-width:1400px){ .uh-wrap,.uh-bottom{ max-width:640px; } }

/* ===== USER+PARTNER dark — specific card fixes (Pro plan, requests, manage, decline) ===== */
/* Pro plan / subscription card */
.uh .pd-sub{ background:var(--surface)!important; box-shadow:none!important; border:1px solid var(--line); }
.uh .pd-sub .ps-tx b{ color:var(--ink)!important; }
.uh .pd-sub .ps-tx span{ color:var(--ink-2)!important; }
.uh .pd-sub .ps-ic{ background:rgba(45,212,191,.12)!important; color:#5EEAD4!important; }

/* New request cards */
.uh .rq-card{ background:var(--surface)!important; box-shadow:none!important; border:1px solid var(--line); }
.uh .rq-card:hover{ box-shadow:0 14px 34px rgba(0,0,0,.4)!important; }
.uh .rq-hd .rq-nm{ color:var(--ink)!important; }
.uh .rq-hd .rq-svc{ color:#5EEAD4!important; }
.uh .rq-amt b{ color:var(--ink)!important; }
.uh .rq-amt span{ background:rgba(45,212,191,.14)!important; color:#5EEAD4!important; }
.uh .rq-meta .rm-chip{ background:var(--bg-2)!important; color:var(--ink-2)!important; border:1px solid var(--line); }
.uh .rq-meta .rm-chip i{ color:#2DD4BF!important; }

/* Decline = RED, Review = teal gradient */
.uh .rq-reject{ background:rgba(239,68,68,.12)!important; color:#F87171!important; border:1px solid rgba(239,68,68,.3)!important; font-weight:700; }
.uh .rq-reject:hover{ background:rgba(239,68,68,.2)!important; color:#FCA5A5!important; }
.uh .rq-accept{ background:var(--grad-brand)!important; color:#fff!important; box-shadow:0 6px 16px rgba(45,212,191,.3)!important; }

/* Manage quick-icons — dark tinted instead of light pastel */
.uh .uh-qa{ color:var(--ink)!important; }
.uh .uh-qa:hover{ background:var(--bg-2)!important; }
.uh .uh-qa .qa-ic.t{ background:rgba(45,212,191,.12)!important; color:#5EEAD4!important; }
.uh .uh-qa .qa-ic.a{ background:rgba(251,191,36,.12)!important; color:#FBBF24!important; }
.uh .uh-qa .qa-ic.v{ background:rgba(139,92,246,.14)!important; color:#A78BFA!important; }
.uh .uh-qa .qa-ic.r{ background:rgba(244,114,182,.14)!important; color:#F472B6!important; }

/* user dashboard recent-bookings card */
.uh .uh-card{ background:var(--surface)!important; box-shadow:none!important; border:1px solid var(--line); }
.uh .uh-card .bk-nm{ color:var(--ink)!important; }
.uh .uh-card .bk-mt{ color:var(--ink-2)!important; }

/* ===== USER+PARTNER dark — tabs, profile/settings menu, save bars, logout ===== */
/* Requests tab switcher (New / Active / Past) */
.uh .uh-tabs{ background:var(--surface)!important; box-shadow:none!important; border:1px solid var(--line); }
.uh .uh-tabs button{ color:var(--ink-2)!important; }
.uh .uh-tabs button.active{ background:var(--grad-brand)!important; color:#fff!important; box-shadow:0 6px 16px rgba(45,212,191,.3)!important; }

/* Profile / settings menu cards */
.uh .set-group{ background:var(--surface)!important; box-shadow:none!important; border:1px solid var(--line); }
.uh .set-row{ color:var(--ink)!important; border-bottom:1px solid var(--line)!important; }
.uh .set-row .sr-ic{ background:var(--bg-2)!important; color:#5EEAD4!important; }
.uh .set-row .sr-tx{ color:var(--ink)!important; }
.uh .set-row .sr-sub{ color:var(--ink-2)!important; }
.uh .set-row .sr-arrow{ color:var(--muted)!important; }
.uh .set-sec-label,.uh .set-section-label{ color:var(--ink-2)!important; }

/* Logout row = red */
.uh .set-row.danger .sr-ic{ background:rgba(239,68,68,.14)!important; color:#F87171!important; }
.uh .set-row.danger .sr-tx{ color:#F87171!important; }

/* Save bars (availability + profile) */
.uh .set-savebar,.set-savebar{ background:rgba(11,24,23,.97)!important; border-top:1px solid var(--line)!important; box-shadow:0 -8px 30px rgba(0,0,0,.5)!important; }

/* Availability time slots — readable dark chips */
.uh .av-slot{ background:var(--bg-2)!important; color:var(--ink-2)!important; border:1px solid var(--line); }
.uh .av-slot.on{ background:var(--grad-brand)!important; color:#fff!important; border-color:transparent; }

/* ===== USER+PARTNER dark — services & rates page ===== */
.uh .pr-svc{ background:var(--surface)!important; box-shadow:none!important; border:1px solid var(--line); }
.uh .pr-svc .ps-ico{ background:rgba(45,212,191,.12)!important; color:#5EEAD4!important; }
.uh .pr-svc .ps-mid b{ color:var(--ink)!important; }
.uh .pr-svc .ps-rate{ background:var(--bg-2)!important; border:1px solid var(--line); }
.uh .pr-svc .ps-rate span,.uh .pr-svc .ps-rate small{ color:var(--ink-2)!important; }
.uh .pr-svc .ps-rate input{ color:var(--ink)!important; background:none!important; }
/* toggle off-track a touch darker so it reads on dark cards */
.uh .switch .track{ background:#2A3F3D!important; }
.uh .switch input:checked ~ .track{ background:var(--grad-brand)!important; }
.uh .set-hint{ color:var(--ink-2)!important; }
.uh .set-hint i{ color:#2DD4BF!important; }

/* ===== USER+PARTNER dark — bank / KYC / form inputs page ===== */
/* custom .set-input fields (bank, profile-edit, etc.) */
.uh .set-input{ background:var(--bg-2)!important; color:var(--ink)!important; border:1.5px solid var(--line)!important; }
.uh .set-input::placeholder{ color:var(--muted)!important; }
.uh .set-input:focus{ border-color:var(--teal)!important; background:var(--surface)!important; box-shadow:0 0 0 3px rgba(45,212,191,.18)!important; }
.uh .set-field label{ color:var(--ink-2)!important; }
.uh .set-input-ico > i{ color:#2DD4BF!important; }
/* detail rows card (bank account info) */
.uh .rd-rows{ background:var(--surface)!important; box-shadow:none!important; border:1px solid var(--line); }
.uh .rd-row{ border-bottom:1px solid var(--line)!important; }
.uh .rd-row .rr-ic{ background:var(--bg-2)!important; color:#5EEAD4!important; }
.uh .rd-row .rr-tx b{ color:var(--ink)!important; }
.uh .rd-row .rr-tx span{ color:var(--ink-2)!important; }
/* consent note — dark amber-tinted instead of light yellow */
.uh .consent-note{ background:rgba(251,191,36,.1)!important; border:1px solid rgba(251,191,36,.25)!important; color:#E8C97A!important; }
.uh .consent-note i{ color:#FBBF24!important; }

/* ===== USER+PARTNER dark — earnings breakdown ===== */
.uh .pm-sum{ background:var(--surface)!important; box-shadow:none!important; border:1px solid var(--line); }
.uh .pm-sumrow{ border-bottom:1px solid var(--line)!important; }
.uh .pm-sumrow .pl{ color:var(--ink)!important; }
.uh .pm-sumrow .pl i{ background:var(--bg-2)!important; color:#5EEAD4!important; }
.uh .pm-sumrow .pv{ color:var(--ink)!important; }
.uh .pm-sumrow .pv.neg{ color:#F87171!important; }
/* Net available highlighted row */
.uh .pm-sumrow.net{ background:linear-gradient(135deg,rgba(45,212,191,.14),rgba(20,184,166,.06))!important; }
.uh .pm-sumrow.net .pl,.uh .pm-sumrow.net .pl i{ color:#5EEAD4!important; }
.uh .pm-sumrow.net .pl i{ background:rgba(45,212,191,.18)!important; }
.uh .pm-sumrow.net .pv{ color:#2DD4BF!important; }

/* ===== USER+PARTNER dark — withdraw page (premium amount + account) ===== */
/* hide ugly number spinners, make amount input premium */
.uh .wd-amt{ background:var(--surface)!important; border:1px solid var(--line); border-radius:20px; padding:1.6rem 1rem 1.3rem!important; margin-bottom:.4rem; display:flex; align-items:center; justify-content:center; gap:.2rem; }
.uh .wd-amt .wd-cur{ color:#5EEAD4!important; font-size:2rem!important; }
.uh .wd-amt input{ color:var(--ink)!important; -moz-appearance:textfield; }
.uh .wd-amt input::-webkit-outer-spin-button,
.uh .wd-amt input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.uh .wd-amt input::placeholder{ color:#3A5654!important; }
.uh .wd-avail{ color:var(--ink-2)!important; }
.uh .wd-avail b{ color:#5EEAD4!important; }

/* quick chips — premium pill */
.uh .wd-chip{ background:var(--bg-2)!important; color:var(--ink-2)!important; border:1px solid var(--line)!important; }
.uh .wd-chip:hover,.uh .wd-chip.active{ background:var(--grad-brand)!important; color:#fff!important; border-color:transparent!important; box-shadow:0 6px 16px rgba(45,212,191,.3)!important; }

/* bank account chip — dark, no blue link */
.uh .bank-chip{ background:var(--surface)!important; border:1px solid var(--line)!important; text-decoration:none!important; }
.uh .bank-chip .bk-ic{ background:rgba(45,212,191,.12)!important; color:#5EEAD4!important; }
.uh .bank-chip .bk-tx b{ color:var(--ink)!important; }
.uh .bank-chip .bk-tx span{ color:var(--ink-2)!important; }
.uh .bank-chip .bk-verified{ color:#2DD4BF!important; }
.uh .bank-chip .bk-go{ color:var(--muted)!important; }

/* info note — dark teal-tint */
.uh .wd-note{ background:rgba(45,212,191,.08)!important; color:var(--ink-2)!important; border:1px solid rgba(94,234,212,.12); }
.uh .wd-note b{ color:#5EEAD4!important; }
.uh .wd-note i{ color:#2DD4BF!important; }
.uh .set-label{ color:var(--ink-2)!important; }

/* ===== USER+PARTNER dark — subscription plan tiers ===== */
.uh .tier{ background:var(--surface)!important; box-shadow:none!important; border:2px solid var(--line)!important; }
.uh .tier.pop{ border-color:var(--teal)!important; box-shadow:0 0 0 1px rgba(45,212,191,.2),0 14px 40px rgba(0,0,0,.4)!important; }
.uh .tier.current{ background:linear-gradient(160deg,rgba(45,212,191,.1),rgba(20,184,166,.04))!important; border-color:var(--teal)!important; }
.uh .tier .tier-nm{ color:var(--ink)!important; }
.uh .tier .tier-price{ color:var(--ink)!important; }
.uh .tier .tier-price small{ color:var(--ink-2)!important; }
.uh .tier .tier-comm{ background:rgba(45,212,191,.12)!important; color:#5EEAD4!important; }
.uh .tier .tier-feat{ color:var(--ink-2)!important; }
.uh .tier .tier-feat i{ color:#2DD4BF!important; }
.uh .tier .tier-badge{ background:var(--grad-brand)!important; color:#fff!important; }
.uh .tier .tier-cur-pill{ background:var(--teal)!important; color:#06201E!important; }
/* "Current plan" disabled button readable on dark */
.uh .tier button[disabled]{ background:var(--bg-2)!important; color:var(--ink-2)!important; }

/* ===== USER+PARTNER dark — help & support (contact tiles + FAQ) ===== */
/* contact tiles */
.uh .sup-tile{ background:var(--surface)!important; box-shadow:none!important; border:1px solid var(--line); color:var(--ink)!important; }
.uh .sup-tile:hover{ box-shadow:0 14px 30px rgba(0,0,0,.4)!important; }
.uh .sup-tile b{ color:var(--ink)!important; }
.uh .sup-tile span{ color:var(--ink-2)!important; }
.uh .sup-tile .st-ic.wa{ background:rgba(16,185,129,.14)!important; color:#34D399!important; }
.uh .sup-tile .st-ic.cl{ background:rgba(45,212,191,.14)!important; color:#5EEAD4!important; }
.uh .sup-tile .st-ic.em{ background:rgba(251,191,36,.14)!important; color:#FBBF24!important; }
.uh .sup-tile .st-ic.ch{ background:rgba(139,92,246,.16)!important; color:#A78BFA!important; }
/* FAQ accordions */
.uh .faq{ background:var(--surface)!important; box-shadow:none!important; border:1px solid var(--line); }
.uh .faq-q{ color:var(--ink)!important; }
.uh .faq-q .fq-ic{ color:#5EEAD4!important; }
.uh .faq-a .faq-a-in{ color:var(--ink-2)!important; }

/* user dashboard quick-actions wrapper (was white) */
.uh .uh-quick{ background:var(--surface)!important; box-shadow:0 16px 40px rgba(0,0,0,.45)!important; border:1px solid var(--line); }
.uh .uh-qa span{ color:var(--ink)!important; }

/* ===== USER+PARTNER dark — bookings list cards ===== */
.uh .bk-card{ background:var(--surface)!important; box-shadow:none!important; border:1px solid var(--line); }
.uh .bk-card .bc-nm{ color:var(--ink)!important; }
.uh .bk-card .bc-svc,.uh .bk-card .bc-meta{ color:var(--ink-2)!important; }
.uh .bk-card .bc-svc i,.uh .bk-card .bc-meta i{ color:#2DD4BF!important; }
/* status badges on dark */
.uh .bk-st.upcoming{ background:rgba(251,191,36,.14)!important; color:#FBBF24!important; }
.uh .bk-st.completed,.uh .bk-st.done{ background:rgba(45,212,191,.14)!important; color:#5EEAD4!important; }
.uh .bk-st.cancelled{ background:rgba(239,68,68,.14)!important; color:#F87171!important; }
.uh .bk-st.pending{ background:rgba(251,191,36,.14)!important; color:#FBBF24!important; }

/* ===== USER+PARTNER dark — booking details page ===== */
/* companion card */
.uh .bd-companion{ background:var(--surface)!important; box-shadow:none!important; border:1px solid var(--line); }
.uh .bd-companion .bdc-nm{ color:var(--ink)!important; }
.uh .bd-companion .bdc-mt{ color:var(--ink-2)!important; }
.uh .bd-companion .bdc-msg{ background:rgba(45,212,191,.12)!important; color:#5EEAD4!important; }
/* detail + payment cards */
.uh .bd-card{ background:var(--surface)!important; box-shadow:none!important; border:1px solid var(--line); }
.uh .bd-card h3{ color:var(--ink)!important; }
.uh .bd-detail .bd-ic{ background:var(--bg-2)!important; color:#5EEAD4!important; }
.uh .bd-detail .bd-lbl{ color:var(--ink-2)!important; }
.uh .bd-detail .bd-val{ color:var(--ink)!important; }
/* payment rows */
.uh .bd-pay-row{ color:var(--ink-2)!important; }
.uh .bd-pay-row.credit{ color:#5EEAD4!important; }
.uh .bd-pay-row.total{ color:var(--ink)!important; border-top:1px solid var(--line)!important; }
/* action buttons */
.uh .bd-act.primary{ background:var(--grad-brand)!important; color:#fff!important; }
.uh .bd-act.outline{ background:var(--bg-2)!important; border:1px solid var(--line)!important; color:var(--ink)!important; }
.uh .bd-act.sos{ background:rgba(239,68,68,.12)!important; color:#F87171!important; border:1px solid rgba(239,68,68,.25)!important; }
.uh .bd-act.danger-outline{ background:rgba(239,68,68,.08)!important; border:1px solid rgba(239,68,68,.3)!important; color:#F87171!important; }

/* cancel / SOS bottom-sheet (user+partner only) */
.uh .sheet,.uh ~ .sheet{ background:#11201F!important; color:#ECFEFB!important; }
.uh .sheet h3,.uh .sheet .sheet-title,.uh ~ .sheet h3{ color:var(--ink)!important; }
.uh .sheet p,.uh ~ .sheet p{ color:var(--ink-2)!important; }
.uh .sheet-btn.ghost,.uh ~ .sheet .sheet-btn.ghost{ background:var(--bg-2)!important; color:var(--ink)!important; }

/* ============================================================
   Bottom-sheets (SOS / cancel / reschedule) — DARK
   These render OUTSIDE .uh at body level, so target directly.
   Only used on user/booking-detail + user/wallet (no front-site).
   ============================================================ */
.sheet{ background:#11201F!important; color:#ECFEFB!important; box-shadow:0 -10px 40px rgba(0,0,0,.6)!important; }
.sheet h1,.sheet h2,.sheet h3{ color:#ECFEFB!important; }
.sheet p,.sheet .sheet-sub{ color:#9FB8B4!important; }
.sheet .sheet-grip,.sheet .sheet-handle{ background:rgba(94,234,212,.2)!important; }
.sheet .set-label,.sheet .sheet-label{ color:#9FB8B4!important; }
.sheet .sheet-ic{ background:rgba(45,212,191,.12)!important; color:#5EEAD4!important; }
/* date & time chips */
.sheet .date-chip,.sheet .time-chip{ background:#0F1B1C!important; color:#ECFEFB!important; border:1.5px solid rgba(94,234,212,.14)!important; }
.sheet .date-chip .dow,.sheet .date-chip .mon{ color:#9FB8B4!important; }
.sheet .date-chip:hover,.sheet .time-chip:hover{ border-color:#2DD4BF!important; }
.sheet .date-chip.active{ background:var(--grad-brand)!important; color:#fff!important; border-color:transparent!important; }
.sheet .date-chip.active .dow,.sheet .date-chip.active .mon{ color:rgba(255,255,255,.85)!important; }
.sheet .time-chip.active{ background:rgba(45,212,191,.14)!important; color:#5EEAD4!important; border-color:#2DD4BF!important; }
/* sheet buttons */
.sheet .sheet-btn.ghost{ background:#16292A!important; color:#ECFEFB!important; }
.sheet-overlay{ background:rgba(0,0,0,.6)!important; }

/* ===== sheet — title, topup-chip time slots, icon (final) ===== */
.sheet h2,.sheet h1{ color:#ECFEFB!important; }
.sheet .sheet-ico{ background:rgba(45,212,191,.12)!important; color:#5EEAD4!important; }
/* time slots use .topup-chip (not .time-chip) */
.sheet .topup-chip{ background:#0F1B1C!important; color:#ECFEFB!important; border:1.5px solid rgba(94,234,212,.14)!important; }
.sheet .topup-chip:hover{ border-color:#2DD4BF!important; }
.sheet .topup-chip.active{ background:rgba(45,212,191,.14)!important; color:#5EEAD4!important; border-color:#2DD4BF!important; }
/* =====================================================================
   TOAST ERROR VARIANT — validation/errors turn RED
   Har page ka showToast(msg, true) 'bad' ya 'toast-bad' class toggle
   karta hai; ye variant unhe red bana deta hai (icon bhi exclamation
   me swap hota hai, chahe page JS icon change kare ya nahi).
   ===================================================================== */
.toast-ok.bad, .toast-ok.toast-bad{
  background:linear-gradient(135deg,#DC2626,#B91C1C);
  color:#fff;
  box-shadow:0 12px 30px rgba(185,28,28,.4);
}
.toast-ok.bad i, .toast-ok.toast-bad i{ color:#fff; }
.toast-ok.bad i::before, .toast-ok.toast-bad i::before{ content:"\f332"; } /* bi-exclamation-circle-fill */