/*
Theme Name: Klixy
Theme URI: https://example.com
Author: Anand
Description: Material You single-page theme for Klixy — digital services & PDF hub, powered by the Klixy App plugin (Services, Settings, Razorpay).
Version: 1.1
Requires Plugins: studentpro-app
Text Domain: studentpro
*/



/* ============================================================
   STUDENTPRO — MATERIAL YOU (ANDROID 16) DESIGN TOKEN SYSTEM
   ============================================================ */
:root{
  /* ---- Seed-derived tonal palette (light) ---- */
  --primary:#4C5FD5;
  --primary-tone-10:#0B0F3D;
  --primary-tone-90:#E4E6FF;
  --primary-tone-95:#F1F1FF;
  --on-primary:#FFFFFF;
  --primary-container:#DEE0FF;
  --on-primary-container:#0B0F5E;

  --secondary:#FF6B4A;
  --secondary-container:#FFE0D6;
  --on-secondary:#FFFFFF;
  --on-secondary-container:#5C1C08;

  --tertiary:#14B8A6;
  --tertiary-container:#CBF5EF;
  --on-tertiary:#FFFFFF;
  --on-tertiary-container:#003F38;

  --surface:#FAFAFC;
  --surface-dim:#EDEDF4;
  --surface-bright:#FFFFFF;
  --surface-container-lowest:#FFFFFF;
  --surface-container-low:#F4F4F9;
  --surface-container:#EEEEF5;
  --surface-container-high:#E8E8F0;
  --surface-container-highest:#E2E2EA;

  --on-surface:#1B1B23;
  --on-surface-variant:#46464F;
  --outline:#777780;
  --outline-variant:#C7C6D0;

  --error:#BA1A1A;
  --success:#1E8E3E;

  --font-display:'Poppins', sans-serif;
  --font-body:'Inter', sans-serif;

  --radius-xs:8px;
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --radius-full:999px;

  --elev-1:0 1px 2px rgba(20,20,40,.06), 0 1px 3px 1px rgba(20,20,40,.08);
  --elev-2:0 1px 2px rgba(20,20,40,.08), 0 2px 6px 2px rgba(20,20,40,.10);
  --elev-3:0 4px 8px rgba(20,20,40,.10), 0 1px 3px rgba(20,20,40,.12);

  --appbar-h:64px;
  --navbar-h:72px;
  /* Klixy Signup & UI Fix — Phase 3: named aliases matching the fixed
     header/bottom-nav spec (--header-h / --bottom-nav-h). Kept as aliases
     rather than renaming --appbar-h/--navbar-h outright so every existing
     rule that already reads those two variables keeps working unchanged. */
  --header-h:var(--appbar-h);
  --bottom-nav-h:var(--navbar-h);
  --transition-standard:cubic-bezier(0.2,0,0,1);
}

[data-theme="dark"]{
  --primary:#B7C0FF;
  --on-primary:#1A2178;
  --primary-container:#333A9A;
  --on-primary-container:#DEE0FF;

  --secondary:#FFB59E;
  --secondary-container:#7A3018;
  --on-secondary:#5C1C08;
  --on-secondary-container:#FFE0D6;

  --tertiary:#7BDBCE;
  --tertiary-container:#00504A;
  --on-tertiary:#00382F;
  --on-tertiary-container:#CBF5EF;

  --surface:#121218;
  --surface-dim:#121218;
  --surface-bright:#38383F;
  --surface-container-lowest:#0D0D12;
  --surface-container-low:#1B1B22;
  --surface-container:#1F1F27;
  --surface-container-high:#292931;
  --surface-container-highest:#34343C;

  --on-surface:#E4E2E9;
  --on-surface-variant:#C7C6D0;
  --outline:#8F8F99;
  --outline-variant:#46464F;
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
/* Klixy Signup & UI Fix — Phase 3 diagnosis: app.js's bottom-nav / hero
   CTA taps call target.scrollIntoView({block:'start'}) to jump to a
   page section. With #appbar pinned on top (see below) but no
   scroll-margin reserved on those targets, scrollIntoView aligns the
   section's top edge flush with the viewport top — i.e. DIRECTLY UNDER
   the fixed header — hiding the first ~64px of every section behind the
   bar and forcing the user to scroll a little further by hand to see
   what they just tapped for. That extra manual correction is the
   reported "excessive/duplicate scrolling" symptom. scroll-margin-top
   here (respected by scrollIntoView) plus scroll-padding-top on html
   (respected by native #anchor jumps/keyboard nav) both compensate for
   the header height, so a jump lands with the target fully clear of the
   bar in one motion — no second manual scroll needed.
   Phase 4 also lives here: touch-action is the CSS-level fallback for
   browsers (notably iOS Safari) that don't fully honour the viewport
   meta's user-scalable=no (see header.php). */
html{
  -webkit-tap-highlight-color:transparent; scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top) + 14px);
  touch-action:pan-x pan-y;
}
main[id^="page-"], section.section[id]{
  scroll-margin-top:calc(var(--header-h) + env(safe-area-inset-top) + 14px);
}

/* ---- Inline SVG icon system (no external font dependency) ---- */
.icon{
  width:1em; height:1em; display:inline-block; vertical-align:-0.14em;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  flex-shrink:0;
}

/* The HTML `hidden` attribute must always win — without this, any element
   whose class sets its own display (e.g. .btn-primary's inline-flex,
   .payment-actions' flex) would silently ignore hidden, because author
   display rules override the browser's built-in [hidden]{display:none}. */
[hidden]{ display:none !important; }
.icon-star, .popular-badge .icon{ fill:currentColor; stroke:none; }
.icon-whatsapp, #heroHireBtn .icon, .profile-hire-btn .icon, .btn-primary .icon{ stroke:none; }
.icon-rupee{ font-weight:800; font-family:var(--font-display); }
body{
  font-family:var(--font-body);
  background:var(--surface);
  color:var(--on-surface);
  overflow-x:hidden;
  transition:background .35s var(--transition-standard), color .35s var(--transition-standard);
  /* Klixy Signup & UI Fix — Phase 3: #appbar is now `position:fixed`
     (removed from normal flow) instead of `sticky`, so — unlike sticky,
     which still reserves its own space in the flow — body now needs an
     explicit top offset or the page's first section would render
     directly underneath it. This, plus the single scroll container
     confirmed below, is the fix for "content renders underneath the top
     bar / bottom nav." */
  padding-top:calc(var(--header-h) + env(safe-area-inset-top));
  padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}
/* Klixy Signup & UI Fix — Phase 3 verification: body is the ONE and ONLY
   scrolling container on every template in this theme — no wrapper here
   sets its own height:100vh/100dvh + overflow-y (audited across
   front-page.php, template-marketplace.php, single-sp_book.php, both
   dashboards, etc.). The sheets/overlays (#cartOverlay, #chatThreadOverlay,
   #sellerProfileOverlay, and so on) are the only elements that scroll
   internally, and only while open — they're not nested inside body's own
   scroll path, they sit on top of it as fixed, full-viewport layers. */
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; border:none; background:none; cursor:pointer; color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.15; font-weight:700;}
::selection{background:var(--primary-container); color:var(--on-primary-container);}

:focus-visible{
  outline:2.5px solid var(--primary);
  outline-offset:2px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

.container{max-width:520px; margin:0 auto; padding:0 clamp(16px, 4vw, 20px);}
@media (min-width:900px){ .container{max-width:1100px;} }

/* ============================================================
   SPLASH SCREEN
   ============================================================ */
#splash{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--primary) 0%, #6C4FD5 55%, #8A4FD5 100%);
  transition:opacity .6s var(--transition-standard), visibility .6s var(--transition-standard);
}
#splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }

.splash-blob-wrap{
  position:relative; width:140px; height:140px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
}
.splash-blob{
  position:absolute; inset:0;
  background:rgba(255,255,255,.16);
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;
  animation:blobMorph 3.2s ease-in-out infinite;
}
.splash-blob.b2{
  background:rgba(255,255,255,.10);
  animation-delay:-1.6s;
  animation-duration:4s;
}
@keyframes blobMorph{
  0%,100%{ border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; transform:rotate(0deg) scale(1); }
  50%{ border-radius:63% 37% 42% 58% / 56% 59% 41% 44%; transform:rotate(180deg) scale(1.08); }
}
.splash-logo{
  position:relative; z-index:2;
  font-family:var(--font-display); font-weight:800; font-size:2.4rem; color:#fff;
  animation:logoPop .7s var(--transition-standard) .15s both;
}
@keyframes logoPop{
  0%{ opacity:0; transform:scale(.6) translateY(10px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
.splash-tagline{
  color:rgba(255,255,255,.88); font-size:.92rem; letter-spacing:.02em;
  animation:logoPop .7s var(--transition-standard) .3s both;
}
.splash-loader{
  margin-top:34px; width:120px; height:4px; border-radius:99px;
  background:rgba(255,255,255,.25); overflow:hidden;
  animation:logoPop .7s var(--transition-standard) .4s both;
}
.splash-loader-bar{
  width:40%; height:100%; border-radius:99px; background:#fff;
  animation:loaderSlide 1.1s ease-in-out infinite;
}
@keyframes loaderSlide{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(350%); }
}

/* ============================================================
   TOP APP BAR
   ============================================================ */
#appbar{
  /* Klixy Signup & UI Fix — Phase 3: was `position:sticky`, which still
     participates in normal flow (so this never actually caused an
     initial overlap) but only "catches" once its own top edge would
     otherwise scroll past — combined with no scroll-margin compensation
     on jump targets (see the html/main rules above), that's what let
     scrollIntoView() land content half-hidden behind it. `fixed` makes
     the header unconditionally pinned in every scroll state, and pairs
     with the explicit body padding-top above (fixed elements are removed
     from flow, so that space has to be reserved by hand) plus the
     scroll-margin-top fix so anchor jumps always clear it. */
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px 0 18px;
  padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid var(--outline-variant);
  transition:background .35s var(--transition-standard), border-color .35s var(--transition-standard), box-shadow .25s;
}
#appbar.scrolled{ box-shadow:var(--elev-1); }

.appbar-brand{ display:flex; align-items:center; gap:10px; }
.appbar-logo{
  width:36px; height:36px; border-radius:var(--radius-sm);
  background:linear-gradient(135deg, var(--primary), var(--tertiary));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:800; font-size:1rem;
  box-shadow:var(--elev-1);
}
.appbar-title{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.appbar-title span{ color:var(--primary); }

.appbar-actions{ display:flex; align-items:center; gap:4px; }
/* 6 icons now that Account has joined the app-bar — hide the least
   essential one (Blog) on narrow phones so nothing clips, same spirit
   as the bottom-nav compact fix above. */
@media (max-width:400px){
  .appbar-actions{ gap:1px; }
  .appbar-actions .icon-btn{ width:38px; height:38px; }
  .appbar-blog-link{ display:none; }
}
.icon-btn{
  width:42px; height:42px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; color:var(--on-surface-variant);
  position:relative; overflow:hidden;
  transition:background .2s;
}
.icon-btn:hover{ background:var(--surface-container-high); }
.icon-btn:active{ transform:scale(.92); }

/* ripple */
.ripple{
  position:absolute; border-radius:50%;
  background:currentColor; opacity:.25;
  transform:scale(0); animation:rippleAnim .55s var(--transition-standard);
  pointer-events:none;
}
@keyframes rippleAnim{ to{ transform:scale(2.6); opacity:0; } }

/* ============================================================
   BOTTOM NAVIGATION (Android app-like)
   ============================================================ */
#bottomnav{
  position:fixed; bottom:0; left:0; right:0; z-index:500;
  height:calc(var(--navbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex; align-items:stretch; justify-content:space-around;
  background:color-mix(in srgb, var(--surface-container-low) 92%, transparent);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-top:1px solid var(--outline-variant);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:0 -6px 20px rgba(20,20,40,.08);
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; font-size:.68rem; font-weight:600; color:var(--on-surface-variant);
  position:relative; padding-top:8px;
}
.nav-item .nav-icon-pill{
  width:52px; height:30px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  font-size:1.08rem; transition:background .35s var(--transition-standard), color .3s, transform .3s var(--transition-standard), box-shadow .3s;
}
.nav-item.active{ color:var(--on-surface); }
.nav-item.active .nav-icon-pill{
  background:var(--primary-container); color:var(--on-primary-container);
  transform:scale(1.06) translateY(-1px);
  box-shadow:0 3px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}
.nav-item.active span:last-child{ color:var(--primary); font-weight:700; }
.nav-item:active .nav-icon-pill{ transform:scale(.9); }
.nav-item span{ margin-top:2px; transition:color .3s; }

/* 7 tabs (Books joined the lineup) need slightly narrower pills so
   nothing clips on narrow phones — only kicks in below 400px. */
@media (max-width:400px){
  #bottomnav.nav-compact .nav-item{ padding-top:6px; font-size:.6rem; }
  #bottomnav.nav-compact .nav-item .nav-icon-pill{ width:40px; height:27px; font-size:.95rem; }
}
@media (max-width:360px){
  #bottomnav.nav-compact .nav-item span:last-child{ display:none; }
  #bottomnav.nav-compact .nav-item .nav-icon-pill{ width:44px; height:32px; font-size:1.05rem; }
}

/* ============================================================
   HERO
   ============================================================ */
#hero{
  position:relative; padding:28px 0 0;
  background:
    radial-gradient(circle at 85% -10%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 55%),
    radial-gradient(circle at -10% 30%, color-mix(in srgb, var(--tertiary) 16%, transparent), transparent 50%);
  overflow:hidden;
}
.hero-top-row{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.availability-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px 6px 10px; border-radius:var(--radius-full);
  background:var(--surface-container-high); border:1px solid var(--outline-variant);
  font-size:.74rem; font-weight:600; color:var(--on-surface-variant);
}
.pulse-dot{
  width:8px; height:8px; border-radius:50%; background:var(--success); position:relative; flex-shrink:0;
}
.pulse-dot::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--success);
  animation:pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing{
  0%{ transform:scale(1); opacity:.6; }
  100%{ transform:scale(2.6); opacity:0; }
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:var(--radius-full);
  background:var(--tertiary-container); color:var(--on-tertiary-container);
  font-size:.75rem; font-weight:600; margin-bottom:0;
}
.hero-eyebrow i{ font-size:.7rem; }
.hero h1{
  font-size:clamp(1.85rem, 5.6vw, 3.1rem);
  letter-spacing:-.02em; margin-bottom:12px; text-wrap:balance;
}
.hero h1 em{
  font-style:normal; color:var(--primary);
  background:linear-gradient(90deg, var(--primary), var(--tertiary));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero p.lead{
  color:var(--on-surface-variant); font-size:clamp(.92rem, 2vw, 1.05rem); max-width:46ch; margin-bottom:22px;
}

.hero-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:8px; }
.btn-primary, .btn-outline{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:var(--radius-full);
  font-size:.9rem; font-weight:700; font-family:var(--font-body);
  position:relative; overflow:hidden; transition:transform .2s, box-shadow .3s var(--transition-standard);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg, var(--secondary), #FF8A65);
  color:var(--on-secondary); box-shadow:var(--elev-2);
}
.btn-primary:hover{ box-shadow:0 6px 18px rgba(255,107,74,.38); transform:translateY(-2px); }
.btn-primary:active{ transform:translateY(0) scale(.97); }
.btn-primary i{ font-size:1.05rem; }

.btn-outline{
  background:var(--surface-container-lowest); color:var(--on-surface);
  border:1.5px solid var(--outline-variant);
}
.btn-outline:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-2px); }
.btn-outline:active{ transform:translateY(0) scale(.97); }

.btn-sm{ padding:9px 16px; font-size:.8rem; }
.btn-block{ width:100%; justify-content:center; }

/* ---- Trust / stats strip ---- */
.trust-strip{
  margin-top:28px;
  background:var(--surface-container-lowest);
  border-top:1px solid var(--outline-variant);
  border-bottom:1px solid var(--outline-variant);
}
.trust-strip-inner{
  display:grid; grid-template-columns:repeat(4, 1fr);
  align-items:center; padding:18px 20px; gap:6px;
}
.trust-stat{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.trust-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.15rem, 3.2vw, 1.6rem); color:var(--on-surface); }
.trust-suffix{ font-family:var(--font-display); font-weight:800; font-size:clamp(.9rem, 2.4vw, 1.1rem); color:var(--primary); }
.trust-label{ display:block; font-size:.68rem; color:var(--on-surface-variant); margin-top:2px; font-weight:500; }
.trust-div{ width:1px; height:32px; background:var(--outline-variant); justify-self:center; }
@media (max-width:420px){
  .trust-label{ font-size:.6rem; }
  .trust-strip-inner{ padding:14px 10px; gap:2px; }
}

.search-bar{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-container-high);
  border:1px solid var(--outline-variant);
  border-radius:var(--radius-full);
  padding:6px 8px 6px 18px;
  box-shadow:var(--elev-1);
  transition:box-shadow .25s, border-color .25s;
}
.search-bar:focus-within{ box-shadow:var(--elev-2); border-color:var(--primary); }
.search-bar .icon{ color:var(--on-surface-variant); font-size:.95rem; }
.search-bar input{
  flex:1; border:none; background:transparent; outline:none;
  font-family:var(--font-body); font-size:.92rem; color:var(--on-surface);
  padding:8px 0;
}
.search-bar input::placeholder{ color:var(--on-surface-variant); opacity:.75; }
.search-bar button{
  width:38px; height:38px; border-radius:var(--radius-full);
  background:var(--primary); color:var(--on-primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .2s;
}
.search-bar button:active{ transform:scale(.9); }

.hero-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.hero-chip{
  padding:7px 14px; border-radius:var(--radius-full);
  background:var(--surface-container); border:1px solid var(--outline-variant);
  font-size:.78rem; font-weight:500; color:var(--on-surface-variant);
  display:flex; align-items:center; gap:6px;
  transition:background .2s, border-color .2s, color .2s;
}
.hero-chip i{ font-size:.72rem; color:var(--primary); }
.hero-chip:active{ background:var(--primary-container); color:var(--on-primary-container); }

/* Theme toggle switch inside appbar */
.theme-toggle{
  width:42px; height:42px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  color:var(--on-surface-variant); font-size:1.05rem; position:relative; overflow:hidden;
}
.theme-toggle:active{ transform:scale(.92); }

/* Utility */
.section{ padding:clamp(32px, 6vw, 44px) 0; }
.section-head{ margin-bottom:22px; }
.section-eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tertiary); margin-bottom:6px; display:block;
}
.section-head h2{ font-size:clamp(1.3rem, 4vw, 1.7rem); }
.section-head p{ color:var(--on-surface-variant); font-size:.9rem; margin-top:6px; }

/* Skeleton loading (foundation, used later sections) */
.skeleton{
  background:linear-gradient(100deg, var(--surface-container) 30%, var(--surface-container-high) 50%, var(--surface-container) 70%);
  background-size:200% 100%;
  animation:skeletonShine 1.4s ease-in-out infinite;
  border-radius:var(--radius-sm);
}
@keyframes skeletonShine{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* Reveal-on-scroll foundation */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--transition-standard), transform .6s var(--transition-standard); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1fr; gap:18px; }

.profile-card{
  background:var(--surface-container-low);
  border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg);
  padding:28px 22px;
  box-shadow:var(--elev-1);
  text-align:center;
}
.profile-avatar-wrap{ position:relative; width:76px; margin:0 auto 14px; }
.profile-avatar{
  width:76px; height:76px; margin:0;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--primary), var(--tertiary));
  color:#fff; font-family:var(--font-display); font-weight:800; font-size:1.9rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--elev-2);
}
.avatar-status{
  position:absolute; bottom:-2px; right:-2px; width:20px; height:20px; border-radius:50%;
  background:var(--success); border:3px solid var(--surface-container-low);
}
.profile-name{ font-size:1.25rem; margin-bottom:2px; }
.profile-role{ color:var(--on-surface-variant); font-size:.85rem; font-weight:500; margin-bottom:14px; }
.profile-bio{ font-size:.88rem; color:var(--on-surface-variant); line-height:1.6; margin-bottom:18px; text-align:left; }

.why-hire-row{
  display:flex; flex-direction:column; gap:9px; text-align:left;
  background:var(--surface); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:18px;
}
.why-hire-item{ display:flex; align-items:center; gap:10px; font-size:.83rem; font-weight:600; color:var(--on-surface); }
.why-hire-item i{
  width:26px; height:26px; border-radius:var(--radius-sm); flex-shrink:0;
  background:var(--primary-container); color:var(--on-primary-container);
  display:flex; align-items:center; justify-content:center; font-size:.72rem;
}
.profile-skills{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:20px; }
.profile-hire-btn{ width:100%; justify-content:center; }
.skill-chip{
  padding:6px 12px; border-radius:var(--radius-full);
  background:var(--primary-container); color:var(--on-primary-container);
  font-size:.74rem; font-weight:600;
}

.about-detail-col{ display:flex; flex-direction:column; gap:14px; }
.detail-card{
  background:var(--surface-container-low);
  border:1px solid var(--outline-variant);
  border-radius:var(--radius-md);
  padding:18px 20px;
  box-shadow:var(--elev-1);
}
.detail-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.detail-icon{
  width:38px; height:38px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0;
}
.detail-card-head h4{ font-size:1rem; }
.detail-list{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.detail-list li{ font-size:.87rem; display:flex; flex-direction:column; gap:2px; padding-left:14px; position:relative; }
.detail-list li::before{
  content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%;
  background:var(--primary);
}
.detail-list .detail-meta{ color:var(--on-surface-variant); font-size:.78rem; }
.cert-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.cert-chip{
  display:flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:var(--radius-full);
  background:var(--tertiary-container); color:var(--on-tertiary-container);
  font-size:.76rem; font-weight:600;
}
.cert-chip i{ font-size:.7rem; }

/* ============================================================
   SERVICES SECTION
   ============================================================ */
.services-grid{ display:grid; grid-template-columns:1fr; gap:16px; }

.service-card{
  background:var(--surface-container-lowest);
  border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg);
  padding:22px 20px;
  box-shadow:var(--elev-1);
  transition:transform .3s var(--transition-standard), box-shadow .3s var(--transition-standard), opacity .3s, filter .3s;
  display:flex; flex-direction:column;
  position:relative;
}
.service-card:hover{ transform:translateY(-3px); box-shadow:var(--elev-3); }
.service-card.filtered-out{ display:none; }
.service-card.popular{ border-color:var(--secondary); }
.popular-badge{
  position:absolute; top:0; right:20px; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:var(--radius-full);
  background:linear-gradient(135deg, var(--secondary), #FF8A65); color:var(--on-secondary);
  font-size:.68rem; font-weight:700; box-shadow:var(--elev-1);
}
.popular-badge i{ font-size:.6rem; }
.service-meta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.74rem; color:var(--on-surface-variant); margin-bottom:14px;
}
.service-meta i{ font-size:.7rem; color:var(--tertiary); }

.service-icon{
  width:46px; height:46px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
  margin-bottom:14px;
}
.service-card h3{ font-size:1.05rem; margin-bottom:8px; }
.service-card p{ font-size:.86rem; color:var(--on-surface-variant); line-height:1.55; flex:1; margin-bottom:16px; }

.service-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.service-price{ font-family:var(--font-display); font-weight:700; font-size:.92rem; color:var(--primary); }
.service-cta{
  display:flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:var(--radius-full);
  background:var(--primary); color:var(--on-primary);
  font-size:.8rem; font-weight:600;
  position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}
.service-cta:hover{ box-shadow:var(--elev-2); }
.service-cta:active{ transform:scale(.95); }
.service-cta i{ font-size:.72rem; transition:transform .2s; }
.service-cta:hover i{ transform:translateX(2px); }

.no-results{
  margin-top:24px; text-align:center; color:var(--on-surface-variant);
  font-size:.9rem; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.no-results i{ font-size:1.8rem; color:var(--outline); }

/* ============================================================
   RESPONSIVE REFINEMENTS
   ============================================================ */
@media (max-width:380px){
  .appbar-title{ font-size:.95rem; }
  .hero-cta-row{ flex-direction:column; }
  /* SYSTEMIC UI BUG FIX: this used to read plain ".btn-primary, .btn-outline"
     with no scoping, which forced EVERY primary/outline button on the whole
     site to 100% width on any phone ≤380px wide — including buttons that
     were never meant to be full-width and sit inline next to a sibling:
     the checkout page's coupon "Apply" button (crushing its input down to a
     sliver — the literal "coupon code field is too small" bug report),
     Seller Dashboard's "Add Slide"/"Delete Slide" and "Upload Photo"/
     "Remove" pairs, the marketplace's "Filters"/"Map" toggle and "Clear"/
     "Apply filters" pair, the AI Scan Book "Lookup" button, and more.
     Scoped to just the two hero CTA rows that actually want the
     stack-to-full-width treatment (this rule's original intent, matching
     the sibling .hero-cta-row{flex-direction:column} rule right above) —
     every other button now keeps its own natural width at any screen size. */
  .hero-cta-row .btn-primary, .hero-cta-row .btn-outline,
  .mp-hero-cta-row .btn-primary, .mp-hero-cta-row .btn-outline{ width:100%; justify-content:center; }
  .nav-item span{ font-size:.62rem; }
  .trust-strip-inner{ grid-template-columns:repeat(2, 1fr); row-gap:14px; }
  .trust-div:nth-child(4){ display:none; }
}
@media (min-width:600px){
  .services-grid{ grid-template-columns:repeat(2, 1fr); }
  .hero-cta-row{ flex-wrap:nowrap; }
}
@media (min-width:640px){
  .hero h1{ font-size:clamp(2.1rem, 4.5vw, 2.6rem); }
}
@media (min-width:768px) and (max-width:899px){
  .about-grid{ grid-template-columns:280px 1fr; }
  .trust-strip-inner{ padding:20px clamp(20px,4vw,40px); }
}
@media (min-width:860px){
  .about-grid{ grid-template-columns:340px 1fr; align-items:start; }
}
@media (min-width:900px){
  .services-grid{ grid-template-columns:repeat(3, 1fr); }
  .hero h1{ font-size:clamp(2.4rem, 3.4vw, 3.1rem); }
  .hero p.lead{ font-size:1.05rem; max-width:56ch; }
  #hero .container{ display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:48px; padding-top:8px; padding-bottom:36px; }
  .hero-search-col{ display:flex; flex-direction:column; }
  .trust-strip-inner{ max-width:1100px; }
  #bottomnav{ max-width:520px; left:50%; transform:translateX(-50%); border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:var(--elev-3); }
}
@media (min-width:1200px){
  .services-grid{ gap:20px; }
  .container{ max-width:1180px; }
}

/* ============================================================
   PAYMENT MODAL (Razorpay pre-checkout sheet)
   ============================================================ */
#paymentOverlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,10,18,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--transition-standard), visibility .3s;
  backdrop-filter:blur(2px);
}
#paymentOverlay.open{ opacity:1; visibility:visible; }
@media (min-width:640px){ #paymentOverlay{ align-items:center; } }

/* Klixy Legal & Onboarding — seller fee sheet + agreement/invoice download
   modal. Same overlay mechanics as #paymentOverlay above (fixed backdrop +
   .open toggling a slide-up .payment-sheet), just their own IDs so each can
   open independently of the others. */
#sellerFeeOverlay, #agreementDownloadOverlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,10,18,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--transition-standard), visibility .3s;
  backdrop-filter:blur(2px);
}
#sellerFeeOverlay.open, #agreementDownloadOverlay.open{ opacity:1; visibility:visible; }
#sellerFeeOverlay.open .payment-sheet, #agreementDownloadOverlay.open .payment-sheet{ transform:translateY(0); }
@media (min-width:640px){
  #sellerFeeOverlay{ align-items:center; }
  #agreementDownloadOverlay{ align-items:center; }
}

.payment-sheet{
  width:100%; max-width:440px;
  background:var(--surface-container-lowest);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:22px 22px calc(22px + env(safe-area-inset-bottom));
  box-shadow:var(--elev-3);
  transform:translateY(24px); transition:transform .35s var(--transition-standard);
  max-height:88vh; overflow-y:auto; overflow-x:hidden;
}
#paymentOverlay.open .payment-sheet{ transform:translateY(0); }
@media (min-width:640px){
  .payment-sheet{ border-radius:var(--radius-xl); }
}

.payment-sheet-handle{
  width:40px; height:4px; border-radius:99px; background:var(--outline-variant);
  margin:0 auto 18px;
}
.payment-sheet h3{ font-size:1.15rem; margin-bottom:4px; }
.payment-sheet .payment-service-name{ color:var(--primary); font-weight:700; }
.payment-sheet .payment-amount{
  font-family:var(--font-display); font-weight:800; font-size:1.9rem;
  margin:10px 0 20px;
}
.payment-sheet .payment-amount span{ font-size:1rem; color:var(--on-surface-variant); font-weight:500; }

.field-group{ margin-bottom:14px; }
.field-group label{ display:block; font-size:.78rem; font-weight:600; color:var(--on-surface-variant); margin-bottom:6px; }
.field-group input{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--outline-variant); background:var(--surface);
  font-family:var(--font-body); font-size:.92rem; color:var(--on-surface); outline:none;
  transition:border-color .2s;
}
.field-group input:focus{ border-color:var(--primary); }

.payment-actions{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.payment-actions .btn-primary{ justify-content:center; width:100%; }
.payment-error{
  background:var(--secondary-container); color:var(--on-secondary-container);
  border-radius:var(--radius-sm); padding:10px 14px; font-size:.82rem; margin-top:12px; display:none;
}
.payment-error.show{ display:block; }
.payment-secure-note{
  display:flex; align-items:center; gap:6px; justify-content:center;
  font-size:.72rem; color:var(--on-surface-variant); margin-top:16px;
}
.payment-secure-note .icon{ color:var(--success); }

.payment-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--on-surface-variant);
  background:var(--surface-container-high);
}

/* ---- Toast ---- */
#toast{
  position:fixed; left:50%; bottom:calc(var(--navbar-h) + 16px); transform:translateX(-50%) translateY(20px);
  z-index:2000; max-width:90vw;
  background:var(--on-surface); color:var(--surface);
  padding:13px 20px; border-radius:var(--radius-full); box-shadow:var(--elev-3);
  font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:10px;
  opacity:0; visibility:hidden; transition:opacity .3s, transform .3s, visibility .3s;
}
#toast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
#toast.success .icon{ color:#7BE0A0; }
#toast.error .icon{ color:#FF8A80; }

.btn-loading{ position:relative; color:transparent !important; pointer-events:none; }
.btn-loading::after{
  content:''; position:absolute; top:50%; left:50%; width:18px; height:18px;
  margin:-9px 0 0 -9px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:btnSpin .7s linear infinite;
}
@keyframes btnSpin{ to{ transform:rotate(360deg); } }

/* Quick-pay button in hero (visually distinct from primary WhatsApp CTA) */
.hero-cta-row .btn-quickpay-wrap{ display:contents; }
.hero-cta-row .btn-quickpay-wrap .btn-primary{
  background:var(--surface-container-lowest); color:var(--primary);
  border:1.5px solid var(--primary-container); box-shadow:none;
}
.hero-cta-row .btn-quickpay-wrap .btn-primary:hover{ background:var(--primary-container); box-shadow:var(--elev-1); }

/* ============================================================
   PDF TOOLS GRID
   ============================================================ */
.tools-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
}
@media (min-width:600px){ .tools-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:900px){ .tools-grid{ grid-template-columns:repeat(5, 1fr); gap:16px; } }

.tool-card{
  background:var(--surface-container-lowest);
  border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg);
  padding:18px 16px;
  box-shadow:var(--elev-1);
  text-align:left; cursor:pointer;
  transition:transform .25s var(--transition-standard), box-shadow .25s var(--transition-standard);
  display:flex; flex-direction:column; gap:4px;
  font-family:inherit;
}
.tool-card:hover{ transform:translateY(-3px); box-shadow:var(--elev-3); }
.tool-card:active{ transform:translateY(0) scale(.98); }
.tool-card .service-icon{ margin-bottom:10px; width:42px; height:42px; font-size:1.05rem; }
.tool-card h3{ font-size:.95rem; margin-bottom:3px; }
.tool-card p{ font-size:.78rem; color:var(--on-surface-variant); line-height:1.45; }

/* ============================================================
   PDF TOOL WORKSPACE MODAL
   ============================================================ */
#pdfToolOverlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,10,18,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--transition-standard), visibility .3s;
  backdrop-filter:blur(2px);
}
#pdfToolOverlay.open{ opacity:1; visibility:visible; }
@media (min-width:640px){ #pdfToolOverlay{ align-items:center; } }
.pdf-tool-sheet{ max-width:480px; position:relative; }
.pdf-tool-desc{ font-size:.85rem; color:var(--on-surface-variant); margin-bottom:16px; }

.pdf-dropzone{
  border:2px dashed var(--outline-variant); border-radius:var(--radius-md);
  padding:26px 16px; text-align:center; cursor:pointer;
  color:var(--on-surface-variant); transition:border-color .2s, background .2s;
  margin-bottom:14px;
}
.pdf-dropzone:hover, .pdf-dropzone.drag-over{ border-color:var(--primary); background:var(--primary-container); color:var(--on-primary-container); }
.pdf-dropzone .icon{ margin-bottom:8px; color:var(--primary); }
.pdf-dropzone p{ font-size:.85rem; }

.pdf-file-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.pdf-file-chip{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-container); border-radius:var(--radius-sm);
  padding:9px 12px; font-size:.82rem;
}
.pdf-file-chip .icon{ color:var(--primary); flex-shrink:0; }
.pdf-file-chip .pdf-file-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pdf-file-chip button{ color:var(--on-surface-variant); font-size:.9rem; flex-shrink:0; }
.pdf-file-chip button:hover{ color:var(--error); }

.pdf-tool-options{ display:flex; flex-direction:column; gap:12px; margin-bottom:6px; }
.pdf-tool-options .field-group{ margin-bottom:0; }
.pdf-option-row{ display:flex; gap:10px; }
.pdf-option-row .field-group{ flex:1; }
.pdf-radio-group{ display:flex; gap:8px; flex-wrap:wrap; }
.pdf-radio-chip{
  padding:8px 14px; border-radius:var(--radius-full);
  border:1.5px solid var(--outline-variant); font-size:.8rem; font-weight:600;
  cursor:pointer; color:var(--on-surface-variant); transition:all .2s;
}
.pdf-radio-chip input{ display:none; }
.pdf-radio-chip.checked{ background:var(--primary-container); color:var(--on-primary-container); border-color:var(--primary-container); }

.pdf-tool-result{ margin-top:16px; }
.pdf-result-item{
  display:flex; align-items:center; gap:12px;
  background:var(--tertiary-container); color:var(--on-tertiary-container);
  border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:8px; font-size:.85rem; font-weight:600;
}
.pdf-result-item a{ margin-left:auto; text-decoration:underline; flex-shrink:0; }
.pdf-preview-gallery{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px; max-height:340px; overflow-y:auto; padding:4px;
}
.pdf-preview-gallery img{ border-radius:var(--radius-sm); border:1px solid var(--outline-variant); width:100%; }
.pdf-preview-gallery .pdf-preview-page-num{ font-size:.68rem; text-align:center; color:var(--on-surface-variant); margin-top:3px; }

/* ============================================================
   PORTFOLIO / CONTACT
   ============================================================ */
.portfolio-empty{
  text-align:center; padding:40px 20px; color:var(--on-surface-variant);
  background:var(--surface-container-lowest); border:1px dashed var(--outline-variant); border-radius:var(--radius-lg);
}
.portfolio-empty .icon{ color:var(--outline); margin-bottom:10px; }
.portfolio-empty p{ font-size:.88rem; max-width:32ch; margin:0 auto; }

.contact-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:600px){ .contact-grid{ grid-template-columns:repeat(3, 1fr); } }
.contact-card{
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg); padding:22px 20px; box-shadow:var(--elev-1);
  transition:transform .25s var(--transition-standard), box-shadow .25s var(--transition-standard);
}
.contact-card:hover{ transform:translateY(-3px); box-shadow:var(--elev-3); }
.contact-card .service-icon{ margin-bottom:12px; }
.contact-card h3{ font-size:1rem; margin-bottom:4px; }
.contact-card p{ font-size:.83rem; color:var(--on-surface-variant); word-break:break-all; }

/* ============================================================
   PORTFOLIO GRID (dynamic CPT items)
   ============================================================ */
.portfolio-carousel{ position:relative; max-width:640px; margin:0 auto; }
.portfolio-track{
  display:flex; overflow:hidden; border-radius:var(--radius-lg); box-shadow:var(--elev-2);
  background:var(--surface-container-lowest); aspect-ratio:16/10;
}
.portfolio-slide{
  min-width:100%; position:relative; cursor:pointer;
  transition:transform .6s var(--transition-standard);
}
.portfolio-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.portfolio-slide-empty{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--outline); font-size:2rem; }
.portfolio-slide-caption{
  position:absolute; left:0; right:0; bottom:0; padding:20px 22px 18px;
  background:linear-gradient(0deg, rgba(10,10,20,.78), transparent);
  color:#fff;
}
.portfolio-slide-caption h3{ font-size:1.05rem; margin-bottom:4px; }
.portfolio-slide-caption p{ font-size:.82rem; opacity:.9; margin:0; }

.portfolio-dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
.portfolio-dot{ width:8px; height:8px; border-radius:99px; background:var(--outline-variant); transition:all .25s; }
.portfolio-dot.active{ width:22px; background:var(--primary); }

.portfolio-lightbox{
  position:fixed; inset:0; z-index:2500; background:rgba(15,15,25,.9);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--transition-standard), visibility .3s;
}
.portfolio-lightbox.open{ opacity:1; visibility:visible; }
.portfolio-lightbox-inner{
  background:var(--surface-container-lowest); border-radius:var(--radius-lg); overflow:hidden;
  max-width:560px; width:100%; max-height:88vh; overflow-y:auto; position:relative;
}
.portfolio-lightbox-close{ position:absolute; top:14px; right:14px; z-index:2; background:rgba(255,255,255,.9); }
.portfolio-lightbox-img{ width:100%; aspect-ratio:16/10; background:var(--surface-container); }
.portfolio-lightbox-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.portfolio-lightbox-body{ padding:20px 22px 24px; }
.portfolio-lightbox-body h3{ font-size:1.15rem; margin-bottom:8px; }
.portfolio-lightbox-body p{ font-size:.88rem; color:var(--on-surface-variant); line-height:1.6; margin-bottom:16px; }

/* ============================================================
   CART BADGE (app bar icon)
   ============================================================ */
#cartToggle{ position:relative; }
.cart-badge{
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 3px;
  border-radius:99px; background:var(--secondary); color:var(--on-secondary);
  font-size:.62rem; font-weight:800; display:flex; align-items:center; justify-content:center;
  line-height:1; border:2px solid var(--surface);
}

/* ============================================================
   READY-MADE PROJECTS GRID
   ============================================================ */
.projects-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
@media (min-width:600px){ .projects-grid{ grid-template-columns:repeat(2, 1fr); gap:18px; } }
@media (min-width:900px){ .projects-grid{ grid-template-columns:repeat(3, 1fr); } }

.project-card{
  position:relative;
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--elev-1);
  transition:transform .25s var(--transition-standard), box-shadow .25s var(--transition-standard);
  display:flex; flex-direction:column;
}
.project-card:hover{ transform:translateY(-4px); box-shadow:var(--elev-3); }

.best-seller-badge{ top:14px; right:14px; z-index:3; }

.project-thumb{
  aspect-ratio:16/10; background:linear-gradient(135deg, var(--primary-container), var(--tertiary-container));
  display:flex; align-items:center; justify-content:center; color:var(--on-primary-container);
  overflow:hidden; position:relative;
}
.project-thumb img{ width:100%; height:100%; object-fit:cover; }
.project-thumb-overlay{
  position:absolute; inset:0; background:rgba(20,20,30,.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s var(--transition-standard); z-index:2;
}
.project-card:hover .project-thumb-overlay{ opacity:1; }
.project-preview-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--on-surface); padding:10px 20px; border-radius:var(--radius-full);
  font-size:.82rem; font-weight:700; transform:translateY(8px); transition:transform .25s var(--transition-standard);
  box-shadow:var(--elev-2);
}
.project-card:hover .project-preview-pill{ transform:translateY(0); }

.project-body{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.project-category-badge{
  display:inline-block; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--tertiary); background:var(--tertiary-container); padding:3px 10px;
  border-radius:var(--radius-full); margin-bottom:8px; width:fit-content;
}
.project-body h3{ font-size:1.02rem; margin-bottom:6px; }
.project-body > p{ font-size:.85rem; color:var(--on-surface-variant); line-height:1.5; margin-bottom:10px; }
.project-feature-list{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:5px; }
.project-feature-list li{ display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--on-surface-variant); }
.project-feature-list .icon{ color:var(--tertiary); font-size:.75rem; flex-shrink:0; }

.project-rating{ display:flex; align-items:center; gap:2px; margin-bottom:10px; }
.project-rating .icon{ width:.85em; height:.85em; }
.project-rating .star-filled{ fill:#F5B301; stroke:none; }
.project-rating .star-empty{ fill:none; stroke:var(--outline-variant); }
.project-rating-num{ font-size:.78rem; font-weight:700; color:var(--on-surface-variant); margin-left:4px; }

.project-demo-link{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  font-size:.8rem; font-weight:700; color:var(--primary);
  border:1.5px solid var(--primary-container); border-radius:var(--radius-full);
  padding:9px 16px; margin-bottom:14px; transition:all .2s;
}
.project-demo-link:hover{ background:var(--primary-container); }

.project-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.project-actions{ display:flex; align-items:center; gap:8px; }
.project-cart-btn{ background:var(--surface-container-high); width:38px; height:38px; }
.project-cart-btn:hover{ background:var(--primary-container); color:var(--on-primary-container); }

/* ---- Compact tile mode: 2-per-row on narrow phones ---- */
@media (max-width:599px){
  .project-thumb{ aspect-ratio:4/3; }
  .project-body{ padding:12px 12px 14px; }
  .best-seller-badge{ top:8px; right:8px; font-size:.6rem; padding:4px 9px; }
  .project-category-badge{ font-size:.58rem; padding:2px 8px; margin-bottom:6px; }
  .project-body h3{ font-size:.82rem; margin-bottom:4px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .project-body > p{ display:none; }
  .project-feature-list{ display:none; }
  .project-rating{ margin-bottom:8px; gap:1px; }
  .project-rating .icon{ width:.7em; height:.7em; }
  .project-rating-num{ font-size:.68rem; }
  .project-demo-link{ font-size:.66rem; padding:6px 8px; margin-bottom:10px; gap:4px; }
  .project-demo-link .icon{ width:.8em; height:.8em; }
  .project-foot{ flex-direction:column; align-items:stretch; gap:8px; }
  .project-foot .service-price{ font-size:.9rem; text-align:center; }
  .project-actions{ width:100%; }
  .project-actions .project-cart-btn{ width:34px; height:34px; flex-shrink:0; }
  .project-actions .service-cta{ flex:1; justify-content:center; font-size:.72rem; padding:8px 6px; }
}

/* ============================================================
   GRAPHICS LIBRARY (dynamic CPT items — PNGs, vectors, templates)
   ============================================================ */
.graphics-search-wrap{ max-width:520px; margin:0 auto 28px; }

.graphics-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
@media (min-width:600px){ .graphics-grid{ grid-template-columns:repeat(2, 1fr); gap:18px; } }
@media (min-width:900px){ .graphics-grid{ grid-template-columns:repeat(4, 1fr); } }

.graphic-card{
  position:relative;
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--elev-1);
  transition:transform .25s var(--transition-standard), box-shadow .25s var(--transition-standard);
  display:flex; flex-direction:column;
}
.graphic-card:hover{ transform:translateY(-4px); box-shadow:var(--elev-3); }
.graphic-card.filtered-out{ display:none; }

.graphic-thumb{
  aspect-ratio:1/1; background:linear-gradient(135deg, var(--secondary-container), var(--primary-container));
  display:flex; align-items:center; justify-content:center; color:var(--on-secondary-container);
  overflow:hidden; position:relative;
}
.graphic-thumb img{ width:100%; height:100%; object-fit:cover; }
.graphic-price-badge{
  position:absolute; top:10px; right:10px; font-size:.68rem; font-weight:800;
  padding:4px 10px; border-radius:var(--radius-full); box-shadow:var(--elev-1);
}
.graphic-badge-free{ background:var(--tertiary-container); color:var(--on-tertiary-container); }
.graphic-badge-premium{ background:#fff; color:var(--primary); }

.graphic-body{ padding:14px 14px 16px; display:flex; flex-direction:column; flex:1; }
.graphic-body h3{ font-size:.92rem; margin-bottom:4px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.graphic-body > p{ font-size:.78rem; color:var(--on-surface-variant); line-height:1.5; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.graphic-foot{ margin-top:auto; }
.graphic-foot .service-cta{ width:100%; justify-content:center; }

/* ============================================================
   CART DRAWER
   ============================================================ */
#cartOverlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,10,18,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--transition-standard), visibility .3s;
  backdrop-filter:blur(2px);
}
#cartOverlay.open{ opacity:1; visibility:visible; }
@media (min-width:640px){ #cartOverlay{ align-items:center; } }
.cart-sheet{ max-width:440px; position:relative; }

.cart-items-list{ display:flex; flex-direction:column; gap:12px; max-height:340px; overflow-y:auto; margin:16px 0; }
.cart-item-row{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-container); border-radius:var(--radius-sm); padding:10px 12px;
}
.cart-item-info{ flex:1; display:flex; flex-direction:column; min-width:0; }
.cart-item-name{ font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-price{ font-size:.72rem; color:var(--on-surface-variant); }
.cart-item-qty{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.qty-btn{
  width:26px; height:26px; border-radius:50%; background:var(--surface-container-high);
  font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center;
}
.qty-btn:hover{ background:var(--primary-container); color:var(--on-primary-container); }
.qty-val{ font-size:.85rem; font-weight:700; min-width:14px; text-align:center; }
.cart-item-remove{ color:var(--on-surface-variant); flex-shrink:0; }
.cart-item-remove:hover{ color:var(--error); }

.cart-empty{ text-align:center; padding:30px 10px; color:var(--on-surface-variant); }
.cart-empty .icon{ color:var(--outline); margin-bottom:10px; }
.cart-empty p{ font-size:.85rem; }

.cart-total-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; border-top:1px solid var(--outline-variant);
  font-size:1rem; font-weight:700; font-family:var(--font-display);
}

/* ============================================================
   RESUME BUILDER / PPT MAKER — PROMO SECTIONS
   ============================================================ */
.builder-promo-grid{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
@media (min-width:900px){
  .builder-promo-grid{ grid-template-columns:1.1fr .9fr; }
  .builder-promo-grid.reverse{ grid-template-columns:.9fr 1.1fr; }
  .builder-promo-grid.reverse > div:first-child{ order:1; }
  .builder-promo-grid.reverse > div:last-child{ order:2; }
}
.builder-promo-grid h2{ font-size:clamp(1.6rem, 3.4vw, 2.1rem); margin-bottom:12px; }
.builder-promo-grid > div:last-child p{ color:var(--on-surface-variant); font-size:.95rem; line-height:1.6; max-width:52ch; }

.builder-trust-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.trust-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:var(--radius-full);
  background:var(--surface-container); border:1px solid var(--outline-variant);
  font-size:.78rem; font-weight:600; color:var(--on-surface-variant);
}
.trust-chip .icon{ color:var(--tertiary); font-size:.85rem; }

.builder-promo-art{ display:flex; align-items:center; justify-content:center; }

.mock-resume-card{
  width:100%; max-width:280px; background:var(--surface-container-lowest);
  border:1px solid var(--outline-variant); border-radius:var(--radius-lg);
  padding:26px 22px; box-shadow:var(--elev-2); display:flex; flex-direction:column; gap:10px;
}
.mock-line{ height:10px; border-radius:99px; background:var(--primary-container); }
.mock-line.dim{ background:var(--outline-variant); }
.mock-line.w60{ width:60%; height:16px; }
.mock-line.w40{ width:40%; }
.mock-line.w80{ width:85%; }
.mock-line.w70{ width:70%; }
.mock-line.w50{ width:50%; }
.mock-block{ height:56px; border-radius:var(--radius-sm); background:var(--tertiary-container); margin:6px 0; }

.mock-slide-stack{ position:relative; width:100%; max-width:300px; height:200px; }
.mock-slide{ position:absolute; inset:0; border-radius:var(--radius-md); background:var(--surface-container-lowest); border:1px solid var(--outline-variant); box-shadow:var(--elev-1); }
.mock-slide.s1{ transform:rotate(-6deg) translate(-14px, 10px); background:var(--secondary-container); }
.mock-slide.s2{ transform:rotate(4deg) translate(10px, 4px); background:var(--primary-container); }
.mock-slide.s3{ box-shadow:var(--elev-2); display:flex; align-items:center; justify-content:center; }
.mock-slide-icon{ width:56px; height:56px; border-radius:50%; background:var(--tertiary-container); color:var(--on-tertiary-container); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }

/* ============================================================
   FULL-SCREEN BUILDER WORKSPACE (Resume + PPT share this chrome)
   ============================================================ */
.builder-overlay{
  position:fixed; inset:0; z-index:3000; background:var(--surface);
  display:flex; flex-direction:column; opacity:0; visibility:hidden;
  transition:opacity .3s var(--transition-standard), visibility .3s;
}
.builder-overlay.open{ opacity:1; visibility:visible; }

.builder-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--outline-variant);
  background:var(--surface-container-low); flex-shrink:0; gap:12px; flex-wrap:wrap;
}
.builder-topbar-title{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:10px; }
.builder-topbar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.builder-body{ flex:1; overflow:hidden; display:flex; flex-direction:column; }
@media (min-width:960px){ .builder-body{ flex-direction:row; } }

/* Resume builder: form + preview panes */
.builder-form-pane{ flex:1; overflow-y:auto; padding:24px 22px; border-bottom:1px solid var(--outline-variant); }
@media (min-width:960px){ .builder-form-pane{ max-width:480px; border-bottom:none; border-right:1px solid var(--outline-variant); } }
.builder-preview-pane{ flex:1; overflow-y:auto; padding:28px; background:var(--surface-container-low); display:flex; justify-content:center; }

.builder-step-tabs{ display:flex; gap:8px; overflow-x:auto; margin-bottom:20px; padding-bottom:4px; }
.builder-step-tab{ flex-shrink:0; padding:9px 16px; border-radius:var(--radius-full); background:var(--surface-container); border:1px solid var(--outline-variant); font-size:.8rem; font-weight:700; color:var(--on-surface-variant); }
.builder-step-tab.active{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }

.builder-fieldset{ display:none; }
.builder-fieldset.active{ display:block; }
.builder-field-row{ display:flex; gap:12px; }
.builder-field-row .field-group{ flex:1; }

.ai-btn{
  display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700;
  color:var(--tertiary); background:var(--tertiary-container); padding:6px 12px;
  border-radius:var(--radius-full); margin-top:6px; transition:all .2s;
}
.ai-btn:hover{ background:var(--tertiary); color:var(--on-tertiary); }
.ai-btn.loading{ opacity:.6; pointer-events:none; }
.ai-btn .icon{ font-size:.75rem; }

.repeat-entry{ background:var(--surface-container-low); border:1px solid var(--outline-variant); border-radius:var(--radius-md); padding:16px; margin-bottom:14px; position:relative; }
.repeat-entry-remove{ position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%; background:var(--surface-container-high); color:var(--on-surface-variant); display:flex; align-items:center; justify-content:center; }
.repeat-entry-remove:hover{ background:var(--error); color:#fff; }
.add-entry-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--radius-full); border:1.5px dashed var(--outline-variant); color:var(--on-surface-variant); font-size:.85rem; font-weight:700; width:100%; justify-content:center; }
.add-entry-btn:hover{ border-color:var(--primary); color:var(--primary); }

.template-switch{ display:flex; gap:10px; margin-bottom:20px; }
.template-option{ flex:1; padding:12px; border-radius:var(--radius-sm); border:1.5px solid var(--outline-variant); text-align:center; font-size:.82rem; font-weight:700; color:var(--on-surface-variant); }
.template-option.active{ border-color:var(--primary); background:var(--primary-container); color:var(--on-primary-container); }

/* Resume preview document */
#resumePreviewDoc{ width:100%; max-width:680px; background:#fff; box-shadow:var(--elev-2); padding:40px 44px; color:#1a1a1a; font-family:'Inter', sans-serif; min-height:900px; }
#resumePreviewDoc.template-classic{ font-family:Georgia, serif; }
.rp-name{ font-size:1.8rem; font-weight:800; margin-bottom:2px; }
.rp-role{ font-size:1rem; color:#555; margin-bottom:10px; }
.rp-contact{ font-size:.78rem; color:#555; display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.rp-section-title{ font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; border-bottom:2px solid #ddd; padding-bottom:4px; margin:20px 0 10px; color:#333; }
.rp-summary{ font-size:.88rem; line-height:1.6; color:#333; }
.rp-entry{ margin-bottom:14px; }
.rp-entry-head{ display:flex; justify-content:space-between; font-size:.88rem; font-weight:700; }
.rp-entry-sub{ font-size:.8rem; color:#666; margin-bottom:6px; }
.rp-entry ul{ margin:0; padding-left:18px; font-size:.84rem; color:#333; line-height:1.6; }
.rp-skills{ display:flex; flex-wrap:wrap; gap:6px; }
.rp-skill-pill{ font-size:.76rem; padding:3px 10px; border-radius:99px; background:#eee; color:#333; }

/* PPT slide editor */
.ppt-outline-step{ padding:48px 20px; display:flex; justify-content:center; width:100%; flex:1; overflow-y:auto; align-items:flex-start; }
.ppt-outline-card{
  width:100%; max-width:460px; background:var(--surface-container-lowest);
  border:1px solid var(--outline-variant); border-radius:var(--radius-lg);
  padding:36px 30px; box-shadow:var(--elev-1); text-align:center;
}
.ppt-outline-icon{
  width:56px; height:56px; border-radius:var(--radius-md);
  background:linear-gradient(135deg, var(--primary), var(--tertiary));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin:0 auto 18px; box-shadow:var(--elev-1);
}
.ppt-outline-card h2{ font-size:1.3rem; margin-bottom:8px; }
.ppt-outline-card > p{ color:var(--on-surface-variant); font-size:.88rem; margin-bottom:26px; line-height:1.5; }
.ppt-outline-card .field-group{ text-align:left; }
.ppt-topic-field{ margin-bottom:14px; }
.ppt-outline-card .payment-error{ text-align:left; }
.ppt-outline-card .btn-primary{ margin-top:6px; }
.ppt-skip-link{
  display:block; width:100%; text-align:center; margin-top:16px;
  font-size:.82rem; color:var(--on-surface-variant); text-decoration:underline;
  text-underline-offset:2px;
}
.ppt-skip-link:hover{ color:var(--primary); }

/* ---- Mode selector (Gamma.ai-style) ---- */
.ppt-mode-grid{ display:grid; grid-template-columns:1fr; gap:14px; width:100%; max-width:520px; }
@media (min-width:560px){ .ppt-mode-grid{ grid-template-columns:1fr 1fr; } }
.ppt-mode-card{
  background:var(--surface-container-lowest); border:1.5px solid var(--outline-variant);
  border-radius:var(--radius-lg); padding:22px 20px; text-align:left; transition:all .2s var(--transition-standard);
}
.ppt-mode-card:hover{ border-color:var(--primary); box-shadow:var(--elev-2); transform:translateY(-2px); }
.ppt-mode-icon{
  width:44px; height:44px; border-radius:var(--radius-sm); margin-bottom:14px;
  background:linear-gradient(135deg, var(--primary), var(--tertiary)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.ppt-mode-card h3{ font-size:1rem; margin-bottom:6px; }
.ppt-mode-card p{ font-size:.8rem; color:var(--on-surface-variant); line-height:1.4; margin:0; }

.ppt-back-link{
  align-self:flex-start; font-size:.8rem; font-weight:700; color:var(--on-surface-variant);
  margin-bottom:14px; display:inline-block;
}
.ppt-back-link:hover{ color:var(--primary); }
.ppt-outline-card-wide{ max-width:640px; }

/* ---- Template grid ---- */
.ppt-template-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left; }
@media (min-width:560px){ .ppt-template-grid{ grid-template-columns:repeat(3, 1fr); } }
.ppt-template-card{
  background:var(--surface-container-low); border:1.5px solid var(--outline-variant);
  border-radius:var(--radius-md); padding:16px 14px; text-align:center; transition:all .2s;
}
.ppt-template-card:hover{ border-color:var(--primary); background:var(--primary-container); }
.ppt-template-emoji{ display:block; font-size:1.6rem; margin-bottom:8px; }
.ppt-template-name{ display:block; font-size:.82rem; font-weight:700; margin-bottom:3px; }
.ppt-template-count{ display:block; font-size:.7rem; color:var(--on-surface-variant); }
.ppt-editor-layout{ display:flex; flex:1; overflow:hidden; width:100%; }
.slide-thumb-rail{ width:180px; flex-shrink:0; overflow-y:auto; border-right:1px solid var(--outline-variant); padding:16px 10px; background:var(--surface-container-low); }
.slide-thumb{ background:#fff; border:2px solid var(--outline-variant); border-radius:var(--radius-sm); padding:10px; margin-bottom:10px; cursor:pointer; font-size:.62rem; color:#333; min-height:70px; }
.slide-thumb.active{ border-color:var(--primary); box-shadow:var(--elev-1); }
.slide-thumb-title{ font-weight:700; margin-bottom:4px; font-size:.68rem; }
.slide-thumb-num{ font-size:.6rem; color:var(--on-surface-variant); margin-bottom:4px; }
.slide-edit-pane{ flex:1; padding:26px; overflow-y:auto; }
.slide-preview-box{ background:#fff; border-radius:var(--radius-md); box-shadow:var(--elev-2); aspect-ratio:16/9; max-width:640px; padding:36px; display:flex; flex-direction:column; justify-content:center; margin-bottom:22px; }
.slide-preview-box h3{ font-size:1.4rem; color:#1a1a1a; margin-bottom:14px; font-family:var(--font-display); }
.slide-preview-box ul{ font-size:.92rem; color:#333; padding-left:20px; line-height:1.7; }
.slide-actions-row{ display:flex; gap:10px; margin-top:16px; }

@media (max-width:959px){
  .ppt-editor-layout{ flex-direction:column; }
  .slide-thumb-rail{
    width:100%; max-height:120px; flex-shrink:0;
    display:flex; align-items:flex-start; overflow-x:auto; overflow-y:hidden; gap:10px;
    border-right:none; border-bottom:1px solid var(--outline-variant);
  }
  .slide-thumb{ min-width:110px; max-width:110px; flex-shrink:0; min-height:auto; margin-bottom:0; }
  .slide-edit-pane{ flex:1; min-height:0; }
}

/* ============================================================
   RESUME BUILDER — FORMAL (Indian resume) TEMPLATE + shared bits
   ============================================================ */
.field-hint{ font-size:.8rem; color:var(--on-surface-variant); margin-bottom:14px; line-height:1.5; }

.photo-upload-group{ margin-bottom:18px; }
.photo-upload-row{ display:flex; align-items:center; gap:14px; }
.photo-preview{
  width:64px; height:64px; border-radius:var(--radius-sm); background:var(--surface-container-high);
  display:flex; align-items:center; justify-content:center; color:var(--on-surface-variant);
  overflow:hidden; flex-shrink:0; border:1px solid var(--outline-variant);
}
.photo-preview img{ width:100%; height:100%; object-fit:cover; }
#rPhotoRemoveBtn{ margin-left:8px; }

/* ---- Simple template photo (Modern/Classic) ---- */
.rp-simple-photo{ width:84px; height:84px; border-radius:50%; object-fit:cover; float:right; margin-left:16px; }

/* ---- Formal template ---- */
#resumePreviewDoc.template-formal{ font-family:Arial, Helvetica, sans-serif; padding:44px 46px; }
.rp-formal-title{ text-align:center; font-size:1.6rem; font-weight:800; letter-spacing:.08em; margin-bottom:18px; }
.rp-formal-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.rp-formal-head-text{ flex:1; }
.rp-formal-name{ font-size:1.15rem; font-weight:800; margin-bottom:2px; letter-spacing:.02em; }
.rp-formal-role{ font-size:.82rem; color:#333; margin-bottom:10px; }
.rp-formal-addr{ font-size:.82rem; color:#222; line-height:1.6; }
.rp-formal-photo{ width:96px; height:112px; object-fit:cover; border:1px solid #ccc; flex-shrink:0; }
.rp-formal-hr{ border:none; border-top:1.5px solid #333; margin:16px 0 6px; }

.rp-bar{
  background:#E4E4E4; color:#1a1a1a; font-weight:800; font-size:.82rem;
  padding:6px 10px; margin:16px 0 10px; letter-spacing:.02em;
}
.rp-formal-para{ font-size:.86rem; line-height:1.6; color:#222; margin-bottom:6px; }

.rp-table{ width:100%; border-collapse:collapse; font-size:.8rem; margin-bottom:6px; }
.rp-table th, .rp-table td{ border:1px solid #ccc; padding:7px 9px; text-align:left; vertical-align:top; }
.rp-table th{ background:#F2F2F2; font-weight:700; }

.rp-formal-list{ margin:0; padding-left:20px; font-size:.85rem; color:#222; line-height:1.7; }
.rp-sub-bullets{ margin:4px 0 6px; padding-left:18px; font-size:.82rem; color:#444; }
.rp-skills-grid{ columns:2; column-gap:24px; }

.rp-info-block{ font-size:.85rem; color:#222; }
.rp-info-row{ display:flex; gap:8px; padding:2px 0; }
.rp-info-row span:first-child{ font-weight:700; min-width:150px; }

.rp-declaration-row{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:26px; font-size:.85rem; color:#222; }

/* ============================================================
   EXIT CONFIRMATION (back button at root level)
   ============================================================ */
#spExitConfirm{
  position:fixed; inset:0; z-index:5000; background:rgba(20,20,30,.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .25s var(--transition-standard), visibility .25s;
}
#spExitConfirm.open{ opacity:1; visibility:visible; }
.exit-confirm-box{
  background:var(--surface-container-lowest); border-radius:var(--radius-lg);
  padding:26px 24px; max-width:320px; width:100%; text-align:center;
  box-shadow:var(--elev-3); transform:scale(.92); transition:transform .25s var(--transition-standard);
}
#spExitConfirm.open .exit-confirm-box{ transform:scale(1); }
.exit-confirm-box h3{ font-size:1.1rem; margin-bottom:8px; }
.exit-confirm-box p{ font-size:.88rem; color:var(--on-surface-variant); margin-bottom:20px; }
.exit-confirm-actions{ display:flex; gap:10px; }
.exit-confirm-actions button{ flex:1; justify-content:center; }

/* ============================================================
   AD SLOTS
   ============================================================ */
.ad-slot{
  margin:28px auto; text-align:center; max-width:728px;
  background:var(--surface-container-low); border:1px dashed var(--outline-variant);
  border-radius:var(--radius-md); padding:10px; overflow:hidden;
}
.ad-slot-label{
  display:block; font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--on-surface-variant); margin-bottom:8px; opacity:.7;
}

/* ============================================================
   LEGAL FOOTER + COOKIE CONSENT
   ============================================================ */
.site-legal-footer{ padding:22px 0 calc(22px + var(--navbar-h)); border-top:1px solid var(--outline-variant); margin-top:20px; }
.site-legal-links{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; font-size:.8rem; color:var(--on-surface-variant); }
.site-legal-links a:hover{ color:var(--primary); }

.cookie-consent{
  position:fixed; left:16px; right:16px; bottom:calc(var(--navbar-h) + 16px); z-index:1400;
  max-width:480px; margin:0 auto;
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg); box-shadow:var(--elev-3);
  padding:22px 40px 16px 18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  transform:translateY(140%); transition:transform .4s var(--transition-standard), opacity .3s;
  touch-action:pan-y;
}
.cookie-consent.show{ transform:translateY(0); }
.cookie-consent.dismissing{ transition:transform .25s ease-in, opacity .25s ease-in; opacity:0; }
.cookie-consent-handle{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:36px; height:4px; border-radius:99px; background:var(--outline-variant);
}
.cookie-consent-dot{ flex-shrink:0; }
.cookie-consent p{ flex:1; font-size:.8rem; color:var(--on-surface-variant); margin:0; min-width:180px; }
.cookie-consent a{ color:var(--primary); text-decoration:underline; }
.cookie-consent-close{
  position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-container-high); color:var(--on-surface-variant);
  font-size:.8rem; transition:background .2s;
}
.cookie-consent-close:hover{ background:var(--outline-variant); }
.cookie-consent-close:active{ transform:scale(.9); }

/* ============================================================
   BLOG — archive listing
   ============================================================ */
.blog-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:640px){ .blog-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:960px){ .blog-grid{ grid-template-columns:repeat(3, 1fr); } }

.blog-card{ background:var(--surface-container-lowest); border:1px solid var(--outline-variant); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--elev-1); transition:transform .25s var(--transition-standard), box-shadow .25s var(--transition-standard); }
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--elev-3); }
.blog-card-thumb{ display:block; aspect-ratio:16/10; background:var(--surface-container); overflow:hidden; }
.blog-card-thumb img{ width:100%; height:100%; object-fit:cover; }
.blog-card-thumb-empty{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--outline); font-size:1.8rem; }
.blog-card-body{ padding:18px 20px 20px; }
.blog-card-date{ font-size:.72rem; font-weight:700; color:var(--tertiary); text-transform:uppercase; letter-spacing:.04em; }
.blog-card-body h3{ font-size:1.02rem; margin:8px 0 8px; }
.blog-card-body h3 a{ color:var(--on-surface); }
.blog-card-body h3 a:hover{ color:var(--primary); }
.blog-card-body p{ font-size:.85rem; color:var(--on-surface-variant); line-height:1.55; margin-bottom:14px; }
.blog-read-more{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; color:var(--primary); }

.blog-pagination{ display:flex; justify-content:center; gap:8px; margin-top:36px; flex-wrap:wrap; }
.blog-pagination .page-numbers{ padding:9px 16px; border-radius:var(--radius-full); background:var(--surface-container); color:var(--on-surface-variant); font-size:.85rem; font-weight:600; }
.blog-pagination .page-numbers.current{ background:var(--primary); color:var(--on-primary); }
.blog-pagination .page-numbers:hover{ background:var(--primary-container); color:var(--on-primary-container); }

/* ============================================================
   BLOG — single article
   ============================================================ */
.blog-article-inner{ max-width:720px; }
.blog-back-link{ display:inline-block; font-size:.85rem; font-weight:700; color:var(--on-surface-variant); margin-bottom:20px; }
.blog-back-link:hover{ color:var(--primary); }
.blog-article-title{ font-size:clamp(1.5rem, 3.6vw, 2.2rem); font-family:var(--font-display); margin:8px 0 20px; }
.blog-article-thumb{ border-radius:var(--radius-lg); overflow:hidden; margin-bottom:28px; box-shadow:var(--elev-1); }
.blog-article-thumb img{ width:100%; display:block; }
.blog-article-content{ font-size:1rem; line-height:1.8; color:var(--on-surface); }
.blog-article-content p{ margin-bottom:20px; }
.blog-article-content h2{ font-size:1.35rem; margin:32px 0 14px; }
.blog-article-content h3{ font-size:1.1rem; margin:26px 0 12px; }
.blog-article-content ul, .blog-article-content ol{ margin:0 0 20px 22px; }
.blog-article-content li{ margin-bottom:8px; line-height:1.7; }
.blog-article-content img{ border-radius:var(--radius-md); margin:20px 0; }
.blog-article-content a{ color:var(--primary); text-decoration:underline; }
.blog-article-content blockquote{ border-left:3px solid var(--primary); padding:4px 0 4px 18px; color:var(--on-surface-variant); font-style:italic; margin:20px 0; }

.blog-cta-card{ background:var(--primary-container); color:var(--on-primary-container); border-radius:var(--radius-lg); padding:28px 26px; text-align:center; margin:36px 0; }
.blog-cta-card h3{ font-size:1.2rem; margin-bottom:8px; }
.blog-cta-card p{ font-size:.9rem; margin-bottom:18px; opacity:.85; }

/* ============================================================
   STUDENT BOOK MARKETPLACE — Phase 1
   (reuses every existing token/card/button pattern above — no new
   colors, fonts or radii introduced anywhere in this block)
   ============================================================ */

/* ---- Marketplace hero + search ---- */
.mp-hero-top{ max-width:640px; margin:0 auto 24px; text-align:center; }
.mp-hero-top h1{ font-size:clamp(1.6rem, 5vw, 2.4rem); font-family:var(--font-display); margin:14px 0 12px; line-height:1.2; }
.mp-hero-top h1 em{ font-style:normal; color:var(--primary); }
.mp-hero-top .lead{ color:var(--on-surface-variant); font-size:.95rem; }
.mp-hero-top .hero-eyebrow{ margin:0 auto 8px; }

.mp-search-form{
  display:flex; flex-wrap:wrap; gap:10px; max-width:820px; margin:0 auto 20px;
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg); padding:10px; box-shadow:var(--elev-1);
}
.mp-search-field{ flex:1 1 220px; display:flex; align-items:center; gap:8px; padding:8px 12px; }
.mp-search-field-main{ flex:2 1 280px; }
.mp-search-field .icon{ color:var(--on-surface-variant); font-size:.95rem; }
.mp-search-field input{ flex:1; border:none; outline:none; background:transparent; font-family:inherit; font-size:.9rem; color:var(--on-surface); }
.mp-search-form select{
  border:1.5px solid var(--outline-variant); border-radius:var(--radius-md); padding:10px 12px;
  font-family:inherit; font-size:.85rem; background:var(--surface-container-lowest); color:var(--on-surface);
}
.mp-search-form .btn-primary{ flex-shrink:0; }
.mp-hero-cta-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:26px; }

/* ---- Category grid ---- */
.mp-cat-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
@media (min-width:600px){ .mp-cat-grid{ grid-template-columns:repeat(4, 1fr); gap:14px; } }
@media (min-width:900px){ .mp-cat-grid{ grid-template-columns:repeat(5, 1fr); } }
.mp-cat-chip{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  background:var(--surface-container-lowest); border:1.5px solid var(--outline-variant);
  border-radius:var(--radius-md); padding:16px 10px; transition:all .2s var(--transition-standard);
}
.mp-cat-chip:hover{ border-color:var(--primary); transform:translateY(-3px); box-shadow:var(--elev-2); }
.mp-cat-chip.active{ background:var(--primary-container); border-color:var(--primary); color:var(--on-primary-container); }
.mp-cat-icon{ width:40px; height:40px; border-radius:var(--radius-full); background:var(--primary-container); color:var(--on-primary-container); display:flex; align-items:center; justify-content:center; }
.mp-cat-chip.active .mp-cat-icon{ background:var(--surface-container-lowest); }
.mp-cat-name{ font-size:.78rem; font-weight:700; line-height:1.25; }
.mp-cat-count{ font-size:.68rem; color:var(--on-surface-variant); }

/* ---- Book grid + card ----
   Mobile: 2/row. Tablet: 3/row. Desktop: 4/row, widening to 5-6/row on
   larger monitors so the catalogue keeps using the extra width instead of
   just growing empty gutters. (Previously tablet stayed at 2/row — same as
   mobile — and desktop was capped at a flat 4 regardless of how wide the
   screen was.) */
.book-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
@media (min-width:600px){ .book-grid{ grid-template-columns:repeat(3, 1fr); gap:16px; } }
@media (min-width:900px){ .book-grid{ grid-template-columns:repeat(4, 1fr); gap:18px; } }
@media (min-width:1280px){ .book-grid{ grid-template-columns:repeat(5, 1fr); } }
@media (min-width:1600px){ .book-grid{ grid-template-columns:repeat(6, 1fr); } }

.book-card{
  position:relative;
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--elev-1);
  transition:transform .25s var(--transition-standard), box-shadow .25s var(--transition-standard);
  display:flex; flex-direction:column;
}
.book-card:hover{ transform:translateY(-4px); box-shadow:var(--elev-3); }
.book-card.filtered-out{ display:none; }

.book-thumb{
  aspect-ratio:1/1; background:linear-gradient(135deg, var(--primary-container), var(--secondary-container));
  display:flex; align-items:center; justify-content:center; color:var(--on-primary-container);
  overflow:hidden; position:relative;
}
.book-thumb img{ width:100%; height:100%; object-fit:cover; }
/* Multi-photo cards auto-slide (cover + gallery), 3s per image */
.book-thumb-slides .book-slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.book-thumb-slides .book-slide.active{ opacity:1; }
.book-badge-condition{
  position:absolute; top:10px; left:10px; font-size:.64rem; font-weight:800;
  padding:4px 10px; border-radius:var(--radius-full); box-shadow:var(--elev-1);
}
.book-badge-new{ background:var(--tertiary-container); color:var(--on-tertiary-container); }
.book-badge-used{ background:#fff; color:var(--on-surface-variant); }
.book-badge-discount{
  position:absolute; top:10px; right:10px; font-size:.64rem; font-weight:800;
  background:var(--secondary); color:var(--on-secondary); padding:4px 10px; border-radius:var(--radius-full);
}
.book-wishlist-btn{
  position:absolute; bottom:10px; right:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--on-surface-variant); border:none;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--elev-1); transition:all .2s;
}
.book-wishlist-btn .icon{ width:.95em; height:.95em; }
.book-wishlist-btn:hover{ transform:scale(1.08); }
.book-wishlist-btn.active{ background:var(--secondary); color:var(--on-secondary); }
.book-wishlist-btn.active .icon{ fill:currentColor; }

.book-body{ padding:14px 14px 16px; display:flex; flex-direction:column; flex:1; }
.book-category-tag{
  display:inline-block; font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--tertiary); background:var(--tertiary-container); padding:3px 10px;
  border-radius:var(--radius-full); margin-bottom:8px; width:fit-content;
}
.book-body h3{ font-size:.92rem; margin-bottom:2px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.book-body h3 a{ color:var(--on-surface); }
.book-body h3 a:hover{ color:var(--primary); }
.book-author{ font-size:.76rem; color:var(--on-surface-variant); margin-bottom:8px; }

.book-price-row{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.book-price, .book-price-lg{ font-family:var(--font-display); font-weight:700; color:var(--on-surface); }
.book-price{ font-size:1.05rem; }
.book-price-lg{ font-size:1.7rem; }
.book-price-old{ font-size:.78rem; color:var(--on-surface-variant); text-decoration:line-through; }

.book-seller-row{ display:flex; align-items:center; gap:5px; font-size:.72rem; color:var(--on-surface-variant); margin-bottom:10px; }
.book-seller-row .icon{ width:.85em; height:.85em; flex-shrink:0; }

/* Small, unobtrusive "go to details" link — replaces the old full-width
   View Details button so the foot only has to carry one primary action
   (Buy Now) plus the cart icon, matching the Ready-made Projects pattern
   the rest of the site already uses. */
.book-view-link{
  display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700;
  color:var(--primary); margin-bottom:10px;
}
.book-view-link .icon{ width:.8em; height:.8em; transition:transform .2s; }
.book-view-link:hover .icon{ transform:translateX(2px); }

.book-foot{ display:flex; align-items:center; gap:8px; margin-top:auto; }
.book-foot .service-cta{ flex:1; justify-content:center; }
.book-cart-btn{ background:var(--surface-container-high); width:38px; height:38px; flex-shrink:0; }
.book-cart-btn:hover{ background:var(--primary-container); color:var(--on-primary-container); }
.book-cart-btn .icon{ width:.95em; height:.95em; }

/* ---- Compact mode: smaller, squarer cards on phones so more of the
   catalogue is visible per screen without a long scroll ---- */
@media (max-width:599px){
  .book-grid{ gap:9px; }
  .book-body{ padding:10px 10px 12px; }
  .book-badge-condition, .book-badge-discount{ font-size:.56rem; padding:3px 8px; top:7px; }
  .book-wishlist-btn{ width:28px; height:28px; bottom:7px; right:7px; }
  .book-category-tag{ font-size:.56rem; padding:2px 8px; margin-bottom:5px; }
  .book-body h3{ font-size:.78rem; margin-bottom:1px; }
  .book-author{ font-size:.66rem; margin-bottom:5px; }
  .book-price-row{ margin-bottom:4px; gap:6px; }
  .book-price{ font-size:.9rem; }
  .book-price-old{ font-size:.66rem; }
  .book-seller-row{ display:none; }
  .book-view-link{ font-size:.64rem; margin-bottom:8px; }
  .book-foot{ gap:6px; }
  .book-cart-btn{ width:32px; height:32px; }
  .book-foot .service-cta{ font-size:.72rem; padding:8px 6px; }
}

/* ---- Condition tabs + active filter bar (Browse All Books) ---- */
.mp-condition-tabs{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.mp-tab{
  padding:9px 20px; border-radius:var(--radius-full); border:1.5px solid var(--outline-variant);
  background:var(--surface-container-lowest); font-weight:700; font-size:.82rem; color:var(--on-surface-variant);
}
.mp-tab.active{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }

.mp-active-filter-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--primary-container); color:var(--on-primary-container);
  border-radius:var(--radius-md); padding:10px 16px; margin-bottom:16px; font-size:.85rem;
}
.mp-active-filter-bar button{ display:flex; align-items:center; gap:4px; font-weight:700; color:var(--on-primary-container); }
.mp-active-filter-bar button .icon{ width:.85em; height:.85em; }

/* ---- Popular Colleges ---- */
.mp-college-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
@media (min-width:600px){ .mp-college-grid{ grid-template-columns:repeat(4, 1fr); } }
.mp-college-chip{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-md); padding:18px 12px; transition:all .2s var(--transition-standard);
}
.mp-college-chip:hover{ transform:translateY(-3px); box-shadow:var(--elev-2); border-color:var(--primary); }
.mp-college-icon{ width:38px; height:38px; border-radius:var(--radius-full); background:var(--secondary-container); color:var(--on-secondary-container); display:flex; align-items:center; justify-content:center; }
.mp-college-name{ font-size:.82rem; font-weight:700; }
.mp-college-count{ font-size:.7rem; color:var(--on-surface-variant); }

/* ---- Featured Sellers ---- */
.mp-seller-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
@media (min-width:600px){ .mp-seller-grid{ grid-template-columns:repeat(3, 1fr); } }
.mp-seller-card{
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg); padding:20px 16px; text-align:center; box-shadow:var(--elev-1);
  transition:transform .25s var(--transition-standard), box-shadow .25s var(--transition-standard);
}
.mp-seller-card:hover{ transform:translateY(-3px); box-shadow:var(--elev-3); }
.mp-seller-avatar{
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:50%; background:var(--primary-container); color:var(--on-primary-container);
  font-family:var(--font-display); font-weight:700; font-size:1.2rem; margin-bottom:10px;
}
.mp-seller-card h4{ font-size:.95rem; margin-bottom:4px; }
.mp-seller-card p{ font-size:.78rem; color:var(--on-surface-variant); margin-bottom:10px; }
.mp-seller-badge{ display:inline-block; font-size:.68rem; font-weight:700; background:var(--tertiary-container); color:var(--on-tertiary-container); padding:4px 12px; border-radius:var(--radius-full); }

/* ---- Why Choose Klixy ---- */
.mp-why-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:600px){ .mp-why-grid{ grid-template-columns:repeat(2, 1fr); gap:18px; } }
@media (min-width:900px){ .mp-why-grid{ grid-template-columns:repeat(4, 1fr); } }
.mp-why-card{
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg); padding:22px 18px; box-shadow:var(--elev-1);
  transition:transform .25s var(--transition-standard), box-shadow .25s var(--transition-standard);
}
.mp-why-card:hover{ transform:translateY(-3px); box-shadow:var(--elev-3); }
.mp-why-card h3{ font-size:.98rem; margin:14px 0 6px; }
.mp-why-card p{ font-size:.84rem; color:var(--on-surface-variant); line-height:1.5; }

/* ---- Testimonials ---- */
.mp-testimonial-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:700px){ .mp-testimonial-grid{ grid-template-columns:repeat(3, 1fr); } }
.testimonial-card{
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg); padding:22px 20px; box-shadow:var(--elev-1);
}
.testimonial-stars{ display:flex; gap:2px; margin-bottom:12px; }
.testimonial-stars .icon{ width:.85em; height:.85em; }
.testimonial-stars .star-filled{ fill:#F5B301; stroke:none; }
.testimonial-stars .star-empty{ fill:none; stroke:var(--outline-variant); }
.testimonial-quote{ font-size:.88rem; color:var(--on-surface); line-height:1.6; margin-bottom:16px; font-style:italic; }
.testimonial-author{ display:flex; align-items:center; gap:12px; }
.testimonial-author .mp-seller-avatar{ width:40px; height:40px; font-size:.9rem; margin-bottom:0; }
.testimonial-author strong{ display:block; font-size:.85rem; }
.testimonial-author span{ font-size:.72rem; color:var(--on-surface-variant); }

/* ---- FAQ accordion ---- */
.mp-faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.mp-faq-item{ background:var(--surface-container-lowest); border:1px solid var(--outline-variant); border-radius:var(--radius-md); overflow:hidden; }
.mp-faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; font-family:inherit; font-size:.88rem; font-weight:700; color:var(--on-surface);
  background:transparent; border:none; text-align:left;
}
.mp-faq-chevron{ flex-shrink:0; transition:transform .25s var(--transition-standard); color:var(--on-surface-variant); }
.mp-faq-item.open .mp-faq-chevron{ transform:rotate(180deg); }
.mp-faq-answer{ max-height:0; overflow:hidden; transition:max-height .3s var(--transition-standard); }
.mp-faq-item.open .mp-faq-answer{ max-height:220px; }
.mp-faq-answer p{ padding:0 18px 16px; font-size:.84rem; color:var(--on-surface-variant); line-height:1.6; }

/* ---- Book Details page ---- */
.book-details-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:900px){ .book-details-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:40px; } }

.book-gallery{ width:100%; }
.book-gallery-main{
  position:relative; aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(135deg, var(--primary-container), var(--secondary-container));
  display:flex; align-items:center; justify-content:center; color:var(--on-primary-container); box-shadow:var(--elev-2);
}
.book-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.book-gallery-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.book-gallery-thumb{
  width:64px; height:64px; border-radius:var(--radius-sm); overflow:hidden; border:2px solid transparent;
  background:var(--surface-container); padding:0;
}
.book-gallery-thumb img{ width:100%; height:100%; object-fit:cover; }
.book-gallery-thumb.active{ border-color:var(--primary); }

.book-info-col h1{ font-size:clamp(1.3rem, 3.4vw, 1.9rem); font-family:var(--font-display); margin:10px 0 6px; }
.book-detail-price-block{ display:flex; align-items:baseline; gap:12px; margin:16px 0; flex-wrap:wrap; }

.book-detail-specs{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin:18px 0;
  background:var(--surface-container-low); border-radius:var(--radius-md); padding:16px;
}
.book-detail-specs div{ display:flex; flex-direction:column; gap:2px; }
.book-detail-specs span{ font-size:.68rem; color:var(--on-surface-variant); text-transform:uppercase; letter-spacing:.03em; }
.book-detail-specs strong{ font-size:.88rem; }

.book-detail-description{ margin:18px 0; }
.book-detail-description h3{ font-size:1rem; margin-bottom:8px; }
.book-detail-description p{ font-size:.9rem; color:var(--on-surface-variant); line-height:1.65; }

.book-detail-seller-card{
  display:flex; align-items:center; gap:14px; background:var(--surface-container-low);
  border-radius:var(--radius-md); padding:14px 16px; margin:18px 0;
}
.book-detail-seller-card strong{ display:block; font-size:.9rem; margin-bottom:2px; }
.book-detail-seller-card span{ display:flex; align-items:center; gap:5px; font-size:.78rem; color:var(--on-surface-variant); }
.book-detail-seller-card span .icon{ width:.85em; height:.85em; }

/* ---- Klixy Signup & UI Fix — Phase 5: tap-to-view Seller Profile ----
   Appearance of the card itself is UNCHANGED from above; this only adds
   a tap affordance (chevron + pointer cursor + a pressed-state ripple
   flash) so it's discoverable as tappable without altering its look. */
.book-detail-seller-card-tappable{
  cursor:pointer; position:relative; padding-right:40px;
  transition:background .2s var(--transition-standard);
}
.book-detail-seller-card-tappable:hover{ background:var(--surface-container-high); }
.book-detail-seller-card-tappable:active{ background:var(--surface-container-high); transform:scale(.99); }
.book-detail-seller-card-tappable:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.book-detail-seller-card-chevron{
  position:absolute; right:16px; top:50%;
  width:1.1em; height:1.1em; color:var(--on-surface-variant);
  transform:translateY(-50%) rotate(-90deg);
}

/* ---- Phase 7: Seller reputation ---- */
.seller-rating-badge{ display:flex; align-items:center; gap:4px; font-size:.78rem; font-weight:700; color:var(--on-surface); margin-top:2px; }
.seller-rating-badge .icon{ width:.85em; height:.85em; }
.seller-rating-badge .star-filled{ fill:#F5B301; stroke:none; }
.seller-rating-count{ font-weight:500; color:var(--on-surface-variant); }
.seller-rating-new{ font-weight:500; font-size:.72rem; color:var(--on-surface-variant); }
.seller-reputation-card{
  display:flex; align-items:center; gap:18px; background:var(--surface-container-low);
  border-radius:var(--radius-md); padding:18px 20px; margin-bottom:24px;
}
.seller-reputation-score{ display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
.seller-reputation-num{ font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:var(--primary); line-height:1; }
.seller-reputation-stars{ display:flex; gap:1px; }
.seller-reputation-stars .icon{ width:.8em; height:.8em; }
.seller-reputation-stars .star-filled{ fill:#F5B301; stroke:none; }
.seller-reputation-stars .star-empty{ fill:none; stroke:var(--outline-variant); }
.seller-reputation-card strong{ display:block; font-size:.92rem; margin-bottom:3px; }
.seller-reputation-card p{ font-size:.8rem; color:var(--on-surface-variant); line-height:1.5; margin:0; }

.book-detail-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px; }
.book-detail-actions .btn-primary, .book-detail-actions .btn-outline{ flex:1 1 160px; }
.book-detail-actions .icon-btn{ flex-shrink:0; }
/* .book-wishlist-btn is positioned absolute for its card-thumbnail context
   (see the .book-card rules above) — reused here in a plain flex row, so it
   needs to be reset back to a normal in-flow icon button, otherwise it
   floats to the corner of the nearest positioned ancestor and overlaps the
   Share button next to it. */
.book-detail-actions .book-wishlist-btn{
  position:static; width:42px; height:42px;
  background:var(--surface-container-lowest); border:1.5px solid var(--outline-variant); color:var(--on-surface-variant);
  box-shadow:none;
}
.book-detail-actions .book-wishlist-btn:hover{ transform:none; background:var(--surface-container-high); }
.book-detail-actions .book-wishlist-btn.active{ background:var(--secondary); border-color:var(--secondary); color:var(--on-secondary); }

/* ============================================================
   PHASE 2 — ACCOUNTS (register / login / forgot / reset password)
   ============================================================ */
.auth-container{ max-width:480px; }
.auth-card{
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg); padding:28px 26px; box-shadow:var(--elev-1);
}
@media (max-width:480px){ .auth-card{ padding:22px 18px; } }

.auth-role-tabs{ display:flex; gap:8px; margin-bottom:20px; }
.auth-role-tab{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:12px 10px; border-radius:var(--radius-md); border:1.5px solid var(--outline-variant);
  background:var(--surface-container-lowest); font-weight:700; font-size:.85rem; color:var(--on-surface-variant);
}
.auth-role-tab .icon{ width:.95em; height:.95em; }
.auth-role-tab.active{ background:var(--primary-container); border-color:var(--primary); color:var(--on-primary-container); }

.auth-switch-link{ text-align:center; font-size:.85rem; color:var(--on-surface-variant); margin-top:18px; }
.auth-switch-link a{ color:var(--primary); font-weight:700; }
.auth-forgot-link{ text-align:right; font-size:.8rem; margin:-6px 0 16px; }
.auth-forgot-link a{ color:var(--primary); font-weight:600; }
.auth-success-note{
  background:var(--tertiary-container); color:var(--on-tertiary-container); border-radius:var(--radius-md);
  padding:12px 14px; font-size:.85rem; margin-bottom:14px;
}

/* ============================================================
   PHASE 5 — SELLER VERIFICATION (register form + dashboard banner)
   ============================================================ */
.auth-seller-note{
  background:var(--secondary-container); color:var(--on-secondary-container); border-radius:var(--radius-md);
  padding:12px 14px; margin-bottom:16px;
}
.auth-seller-note strong{ display:block; font-size:.85rem; margin-bottom:2px; }
.auth-seller-note p{ font-size:.8rem; margin:0; }

.auth-doc-list{ list-style:none; margin:8px 0 0; padding:0; font-size:.78rem; color:var(--on-surface-variant); }
.auth-doc-list li{ padding:4px 0; }

.auth-confirm-check{
  display:flex; align-items:flex-start; gap:8px; font-size:.78rem; color:var(--on-surface-variant);
  line-height:1.5; margin:14px 0 6px; cursor:pointer;
}
.auth-confirm-check input{ margin-top:3px; flex-shrink:0; }

/* Klixy Agreement Management — plain "Read / Download Agreement (PDF)"
   link on the register form itself, straight to whatever PDF the admin
   uploaded for the selected role (see template-register.php). */
.auth-agreement-pdf-link{ margin:6px 0 4px; }
.auth-agreement-pdf-link a{
  display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600;
  color:var(--primary); background:var(--secondary-container); border-radius:var(--radius-md);
  padding:10px 14px; text-decoration:none;
}
.auth-agreement-pdf-link a:hover{ filter:brightness(0.97); }
.auth-agreement-pdf-link .icon{ width:1.1em; height:1.1em; flex-shrink:0; }

.seller-status-banner{
  border-radius:var(--radius-md); padding:14px 16px; margin-bottom:18px;
}
.seller-status-banner strong{ display:block; font-size:.9rem; margin-bottom:4px; }
.seller-status-banner p{ font-size:.82rem; margin:2px 0 0; }
.seller-status-banner.status-pending{ background:#FFF3CD; color:#8A6500; }
.seller-status-banner.status-rejected{ background:#FBDADA; color:#BA1A1A; }
.seller-status-banner.status-unpaid{ background:#DBE9FF; color:#1A4BA1; }
.seller-status-banner .btn-primary.btn-sm{ margin-top:8px; }

/* ============================================================
   KLIXY LEGAL & ONBOARDING — general T&C checkbox note + fee sheet
   ============================================================ */
.auth-fee-note{
  background:var(--secondary-container); color:var(--on-secondary-container); border-radius:var(--radius-md);
  padding:10px 12px; margin:10px 0 0; font-size:.78rem; line-height:1.5;
}

/* ============================================================
   PHASE 2 — DASHBOARDS (Student + Seller)
   ============================================================ */
.dashboard-header{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:22px;
}
.dashboard-header h2{ font-size:clamp(1.2rem, 3.6vw, 1.6rem); margin-top:6px; }

.dashboard-tabs{ display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; border-bottom:1px solid var(--outline-variant); }
.dashboard-tab{
  display:flex; align-items:center; gap:7px; padding:12px 18px; font-weight:700; font-size:.85rem;
  color:var(--on-surface-variant); border-bottom:2.5px solid transparent; margin-bottom:-1px;
}
.dashboard-tab .icon{ width:.95em; height:.95em; }
.dashboard-tab.active{ color:var(--primary); border-bottom-color:var(--primary); }

.dashboard-panel{ display:none; }
.dashboard-panel.active{ display:block; }
.dashboard-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px;
}
.dashboard-panel-head p{ font-size:.86rem; color:var(--on-surface-variant); max-width:520px; }

.dashboard-form{ max-width:480px; }

.order-list{ display:flex; flex-direction:column; gap:10px; }
.order-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-md); padding:14px 16px;
}
.order-row.filtered-out{ display:none; }
.order-row-main{ display:flex; flex-direction:column; gap:3px; }
.order-row-main strong{ font-size:.9rem; }
.order-row-date{ font-size:.72rem; color:var(--on-surface-variant); }
.order-row-meta{ display:flex; align-items:center; gap:12px; }
.order-amount{ font-family:var(--font-display); font-weight:700; font-size:.95rem; }
.order-status{
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  padding:4px 10px; border-radius:var(--radius-full);
  background:var(--surface-container-high); color:var(--on-surface-variant);
}
.order-status-paid{ background:var(--tertiary-container); color:var(--on-tertiary-container); }
.order-status-created{ background:var(--secondary-container); color:var(--on-secondary-container); }
.order-status-failed{ background:#FDEBEC; color:var(--error); }
.order-status-rejected{ background:#FDEBEC; color:var(--error); }
.order-status-cancel_requested{ background:var(--secondary-container); color:var(--on-secondary-container); }
.order-status-cancelled{ background:var(--surface-container-high); color:var(--on-surface-variant); }
.order-status-refunded{ background:var(--primary-container); color:var(--on-primary-container); }
.order-status-partner{ background:var(--primary-container); color:var(--on-primary-container); }
.order-number{ font-size:.72rem; font-weight:600; color:var(--on-surface-variant); }

/* ---- Customer details on seller order cards ---- */
.order-customer-card{
  flex-basis:100%; display:flex; flex-direction:column; gap:6px;
  background:var(--surface-container-low); border-radius:var(--radius-sm);
  padding:10px 12px; font-size:.8rem;
}
.order-customer-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--on-surface-variant); }
.order-customer-line .icon{ width:.9em; height:.9em; flex-shrink:0; }
.order-customer-line strong{ color:var(--on-surface); }
.order-customer-line a{ color:var(--primary); font-weight:600; }
.order-customer-wa{
  font-size:.7rem; font-weight:700; background:var(--tertiary-container); color:var(--on-tertiary-container) !important;
  padding:2px 10px; border-radius:var(--radius-full);
}
.order-reject-reason{
  flex-basis:100%; font-size:.78rem; color:var(--error); line-height:1.5;
  background:#FDEBEC; border-radius:var(--radius-sm); padding:8px 12px;
}

/* ---- Seller/product details on the buyer's order card ---- */
.order-seller-card-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.order-product-thumb{ width:44px; height:44px; border-radius:var(--radius-sm); object-fit:cover; flex-shrink:0; }
.order-seller-photo{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.order-seller-card-head strong{ display:block; font-size:.85rem; color:var(--on-surface); }
.order-seller-loc{ display:flex; align-items:center; gap:5px; font-size:.74rem; color:var(--on-surface-variant); margin-top:2px; }
.order-seller-loc .icon{ width:.85em; height:.85em; }

/* ---- Third-party tracking (seller paste box + live links) ---- */
.order-tracking-box{
  flex-basis:100%; display:flex; flex-direction:column; gap:8px;
  background:var(--surface-container-low); border-radius:var(--radius-sm);
  padding:10px 12px;
}
.order-tracking-box label{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--on-surface-variant); }
.order-tracking-input-row{ display:flex; gap:8px; }
.order-tracking-input{
  flex:1; min-width:0; padding:9px 12px; border-radius:var(--radius-sm);
  border:1.5px solid var(--outline-variant); background:var(--surface);
  font-family:var(--font-body); font-size:.82rem; color:var(--on-surface); outline:none;
}
.order-tracking-input:focus{ border-color:var(--primary); }
.order-tracking-live-link{ font-size:.78rem; font-weight:600; color:var(--primary); word-break:break-all; }
.order-tracking-wa-btn{ justify-content:center; background:linear-gradient(135deg, #25D366, #128C7E) !important; }
.order-live-tracking-link{ text-decoration:none; }
.track-order-live-btn{ display:inline-flex; justify-content:center; margin:6px 0; text-decoration:none; }

/* ---- Profile photo / shop image upload ---- */
.profile-photo-row{
  display:flex; align-items:center; gap:16px; max-width:480px;
  background:var(--surface-container-low); border-radius:var(--radius-md);
  padding:14px 16px; margin-bottom:18px;
}
.profile-photo-preview{
  width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--surface-container-high); display:flex; align-items:center; justify-content:center;
}
.profile-photo-preview img{ width:100%; height:100%; object-fit:cover; }
.profile-photo-preview .mp-seller-avatar{ width:100%; height:100%; margin:0; border-radius:0; }
.profile-shop-preview{ border-radius:var(--radius-md); }
.profile-photo-row strong{ display:block; font-size:.9rem; margin-bottom:2px; }
.profile-photo-row .field-hint{ margin-bottom:8px; }

/* ---- Profile form extras (education/address sections, landmark GPS) ---- */
.profile-section-title{ font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--on-surface-variant); margin:20px 0 10px; }
.landmark-row{ display:flex; gap:8px; }
.landmark-row input{ flex:1; min-width:0; }
.landmark-row .btn-outline{ flex-shrink:0; white-space:nowrap; }

/* ---- Phase 7: Order history filters ---- */
.order-filter-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:16px;
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-md); padding:10px 12px;
}
.order-filter-select{
  border:1.5px solid var(--outline-variant); border-radius:var(--radius-sm); padding:8px 10px;
  font-family:inherit; font-size:.82rem; background:var(--surface); color:var(--on-surface);
}
.order-filter-dates{ display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--on-surface-variant); }
.order-filter-dates input[type="date"]{
  border:1.5px solid var(--outline-variant); border-radius:var(--radius-sm); padding:7px 8px;
  font-family:inherit; font-size:.8rem; background:var(--surface); color:var(--on-surface);
}
.order-filter-bar .btn-outline{ margin-left:auto; }
@media (max-width:600px){ .order-filter-bar .btn-outline{ margin-left:0; } }

/* ---- Reject Order sheet (same overlay mechanics as every other
        bottom sheet — backdrop CSS is REQUIRED, see #notifOverlay) ---- */
#rejectOrderOverlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,10,18,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--transition-standard), visibility .3s;
  backdrop-filter:blur(2px);
}
#rejectOrderOverlay.open{ opacity:1; visibility:visible; }
@media (min-width:640px){ #rejectOrderOverlay{ align-items:center; } }
#rejectOrderOverlay.open .payment-sheet{ transform:translateY(0); }
.reject-order-sheet{ max-width:480px; }
.reject-reason-select{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--outline-variant); background:var(--surface);
  font-family:var(--font-body); font-size:.88rem; color:var(--on-surface);
}
.reject-reason-full{
  font-size:.8rem; color:var(--on-surface-variant); line-height:1.6;
  background:var(--surface-container-low); border-radius:var(--radius-sm);
  padding:10px 12px; margin-top:10px; min-height:0;
}
.reject-reason-full:empty{ display:none; }
.reject-order-done{ display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.reject-order-done-msg{ font-size:.86rem; color:var(--on-surface); line-height:1.5; }
.reject-order-wa-btn{ justify-content:center; background:linear-gradient(135deg, #25D366, #128C7E) !important; }

/* ---- Assign Delivery Partner sheet ---- */
#deliveryPartnerOverlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,10,18,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--transition-standard), visibility .3s;
  backdrop-filter:blur(2px);
}
#deliveryPartnerOverlay.open{ opacity:1; visibility:visible; }
@media (min-width:640px){ #deliveryPartnerOverlay{ align-items:center; } }
#deliveryPartnerOverlay.open .payment-sheet{ transform:translateY(0); }
.delivery-partner-sheet{ max-width:520px; }
.delivery-info-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; margin-left:8px; vertical-align:middle;
  background:var(--primary-container); color:var(--on-primary-container);
  font-size:.72rem; font-weight:800; font-style:italic; font-family:Georgia, serif;
  border:none; cursor:pointer;
}
.delivery-info-box{
  font-size:.8rem; color:var(--on-surface-variant); line-height:1.6;
  background:var(--surface-container-low); border-radius:var(--radius-sm);
  padding:12px 14px; margin:10px 0 4px;
}
.delivery-partner-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:14px; }
@media (min-width:480px){ .delivery-partner-grid{ grid-template-columns:repeat(4, 1fr); } }
.delivery-partner-btn{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  background:var(--surface-container-lowest); border:1.5px solid var(--outline-variant);
  border-radius:var(--radius-md); padding:14px 8px; cursor:pointer;
  font-family:inherit; transition:all .2s var(--transition-standard);
}
.delivery-partner-btn:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--elev-2); }
.delivery-partner-btn img{ width:36px; height:36px; border-radius:var(--radius-sm); object-fit:contain; background:#fff; }
.delivery-partner-fallback{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:var(--radius-sm); background:var(--primary-container); color:var(--on-primary-container);
  font-size:.8rem; font-weight:800;
}
.delivery-partner-btn span{ font-size:.72rem; font-weight:700; color:var(--on-surface); }
.delivery-partner-btn em{ font-size:.6rem; font-style:normal; color:var(--on-surface-variant); }

/* ---- Phase 7: Seller Earnings/Analytics ---- */
.seller-earnings-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-bottom:20px; }
@media (min-width:600px){ .seller-earnings-grid{ grid-template-columns:repeat(4, 1fr); } }
.seller-earnings-card{
  background:var(--surface-container-low); border-radius:var(--radius-md);
  padding:16px 18px; display:flex; flex-direction:column; gap:6px;
}
.seller-earnings-label{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--on-surface-variant); }
.seller-earnings-value{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--primary); }

.seller-earnings-chart-wrap{
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-md); padding:16px 18px 10px; margin-bottom:20px;
}
.seller-earnings-chart-wrap h4{ font-size:.86rem; margin-bottom:14px; }
.seller-earnings-chart{ display:flex; align-items:flex-end; gap:6px; height:110px; }
.seller-earnings-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; cursor:default; }
.seller-earnings-bar{
  width:100%; max-width:22px; background:var(--primary); border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  min-height:2px; transition:background .2s;
}
.seller-earnings-bar-col:hover .seller-earnings-bar{ background:var(--secondary); }
.seller-earnings-bar-label{ font-size:.62rem; color:var(--on-surface-variant); }

.seller-top-books{
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-md); padding:16px 18px; margin-bottom:20px;
}
.seller-top-books h4{ font-size:.86rem; margin-bottom:10px; }
.seller-top-book-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--outline-variant); font-size:.82rem;
}
.seller-top-book-row:last-child{ border-bottom:none; }
.seller-top-book-row span:first-child{ font-weight:700; }
.seller-top-book-row span:last-child{ color:var(--on-surface-variant); flex-shrink:0; }

/* Seller "Add/Edit Book" bottom-sheet — same overlay mechanics as
   #paymentOverlay/#cartOverlay/#pdfToolOverlay, just its own ID so it can
   open independently of those. */
#sellerBookOverlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,10,18,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--transition-standard), visibility .3s;
  backdrop-filter:blur(2px);
}
#sellerBookOverlay.open{ opacity:1; visibility:visible; }
@media (min-width:640px){ #sellerBookOverlay{ align-items:center; } }
#sellerBookOverlay.open .payment-sheet{ transform:translateY(0); }
.seller-book-sheet{ max-width:560px; }

.seller-listing-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
@media (min-width:700px){ .seller-listing-grid{ grid-template-columns:repeat(3, 1fr); gap:16px; } }
.seller-listing-card{
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--elev-1);
}
.seller-listing-thumb{
  aspect-ratio:1/1; background:linear-gradient(135deg, var(--primary-container), var(--secondary-container));
  display:flex; align-items:center; justify-content:center; color:var(--on-primary-container); overflow:hidden; position:relative;
}
.seller-listing-thumb img{ width:100%; height:100%; object-fit:cover; }
/* Auto-sliding listing photos (cover + gallery), 3s per image */
.seller-listing-slides .seller-slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.seller-listing-slides .seller-slide.active{ opacity:1; }
.seller-listing-status{
  position:absolute; top:8px; left:8px; font-size:.6rem; font-weight:800; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--radius-full); background:#fff; color:var(--on-surface-variant);
}
.seller-listing-status.is-publish{ background:var(--tertiary-container); color:var(--on-tertiary-container); }
.seller-listing-body{ padding:12px 14px 14px; }
.seller-listing-body h4{ font-size:.88rem; margin-bottom:4px; line-height:1.3; }
.seller-listing-price{ font-family:var(--font-display); font-weight:700; font-size:.92rem; margin-bottom:10px; }
.seller-listing-actions{ display:flex; gap:6px; }
.seller-listing-actions button{
  flex:1; padding:7px 6px; border-radius:var(--radius-sm); border:1.5px solid var(--outline-variant);
  background:transparent; font-size:.72rem; font-weight:700; color:var(--on-surface-variant);
}
.seller-listing-actions button:hover{ border-color:var(--primary); color:var(--primary); }
.seller-listing-actions button.danger:hover{ border-color:var(--error); color:var(--error); }

/* ---- Add/Edit Book form (front-end, inside #sellerBookOverlay) ---- */
.seller-image-upload{ display:flex; align-items:center; gap:14px; }
.seller-image-upload-btns{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.seller-image-upload-btns .btn-sm .icon{ width:15px; height:15px; }
.seller-image-preview{
  width:84px; height:84px; border-radius:var(--radius-sm); background:var(--surface-container-high);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
}
.seller-image-preview img{ width:100%; height:100%; object-fit:cover; }
.seller-image-preview span{ font-size:.66rem; color:var(--on-surface-variant); text-align:center; padding:4px; }

.seller-gallery-strip{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; }
.seller-gallery-thumb{ position:relative; width:60px; height:60px; border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-container-high); flex-shrink:0; }
.seller-gallery-thumb img{ width:100%; height:100%; object-fit:cover; }
.seller-gallery-remove{
  position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; border:none;
  background:rgba(0,0,0,.55); color:#fff; font-size:.72rem; display:flex; align-items:center; justify-content:center; padding:0;
}
.seller-gallery-empty{ font-size:.76rem; color:var(--on-surface-variant); font-style:italic; }

.seller-book-sheet .field-group select{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--outline-variant);
  font-family:inherit; font-size:.9rem; background:var(--surface-container-lowest); color:var(--on-surface);
}
.seller-book-sheet .mp-condition-tabs{ margin-bottom:14px; }
.seller-book-form-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* ============================================================
   PHASE 3 — WISHLIST / MESSAGES tab badge
   The header's #chatUnreadBadge sits inside an .icon-btn (already
   position:relative, see line ~236), so .cart-badge works unmodified
   there. Inside a .dashboard-tab it needs to drop the absolute
   positioning and just sit inline next to the tab label instead —
   same override pattern used for .book-wishlist-btn on the Book
   Details page above.
   ============================================================ */
.dashboard-tab{ position:relative; }
.dashboard-tab .cart-badge{
  position:static; border:none; margin-left:2px; transform:translateY(-1px);
}

/* ============================================================
   PHASE 3 — BOOK CARD RATING ROW (marketplace card + related books)
   ============================================================ */
.book-rating-row{ display:flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700; color:var(--on-surface-variant); margin-bottom:6px; }
.book-rating-row .icon{ width:.85em; height:.85em; }
.book-rating-count{ font-weight:500; color:var(--on-surface-variant); }

/* ============================================================
   PHASE 3 — REVIEWS (Book Details page)
   ============================================================ */
.project-rating-count{ font-size:.72rem; color:var(--on-surface-variant); margin-left:2px; }

.write-review-form{
  background:var(--surface-container-low); border-radius:var(--radius-md);
  padding:18px 18px 20px; margin:18px 0 26px;
}
.write-review-form h3{ font-size:.95rem; margin-bottom:12px; }
.write-review-form textarea{
  width:100%; margin-top:12px; padding:12px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--outline-variant); font-family:inherit; font-size:.88rem;
  background:var(--surface-container-lowest); color:var(--on-surface); resize:vertical;
}
.write-review-form .btn-primary{ margin-top:14px; }

.star-picker{ display:flex; align-items:center; gap:4px; }
.star-picker-star{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:var(--outline-variant); border-radius:50%;
}
.star-picker-star .icon{ width:1.05em; height:1.05em; }
.star-picker-star:hover, .star-picker-star.active{ color:#F5B301; }
.star-picker-star.active .icon, .star-picker-star:hover .icon{ fill:currentColor; }

.review-list{ display:flex; flex-direction:column; gap:14px; }
.review-card{
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--radius-md); padding:16px 18px;
}
.review-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.review-card-head > div{ flex:1; min-width:0; }
.review-card-head strong{ display:block; font-size:.88rem; }
.review-card-date{ font-size:.72rem; color:var(--on-surface-variant); white-space:nowrap; }
.review-verified-badge{
  display:inline-flex; align-items:center; gap:3px; font-size:.66rem; font-weight:700;
  color:var(--tertiary); margin-top:2px;
}
.review-verified-badge .icon{ width:.8em; height:.8em; }
.review-card-stars{ display:flex; gap:2px; margin-bottom:8px; }
.review-card-stars .icon{ width:.8em; height:.8em; }
.review-card-stars .star-filled{ fill:#F5B301; stroke:none; }
.review-card-stars .star-empty{ fill:none; stroke:var(--outline-variant); }
.review-card-text{ font-size:.86rem; color:var(--on-surface-variant); line-height:1.6; }

/* ============================================================
   PHASE 3 — CHAT (Book Details "Message on Klixy" + dashboard
   Messages tab thread list + the shared thread bottom-sheet in
   footer.php). Same overlay mechanics as #paymentOverlay/#cartOverlay.
   ============================================================ */
#chatThreadOverlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,10,18,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--transition-standard), visibility .3s;
  backdrop-filter:blur(2px);
}
#chatThreadOverlay.open{ opacity:1; visibility:visible; }
@media (min-width:640px){ #chatThreadOverlay{ align-items:center; } }
#chatThreadOverlay.open .payment-sheet{ transform:translateY(0); }
.chat-thread-sheet{ max-width:480px; display:flex; flex-direction:column; height:min(72vh, 640px); }
.chat-thread-head{ padding-right:36px; }
.chat-thread-head h3{ font-size:1.05rem; margin-bottom:2px; }
.chat-thread-head p{ font-size:.78rem; color:var(--on-surface-variant); }

.chat-thread-messages{
  flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
  margin:14px 0; padding-right:2px;
}
.chat-bubble-row{ display:flex; }
.chat-bubble-row.mine{ justify-content:flex-end; }
.chat-bubble-row.theirs{ justify-content:flex-start; }
.chat-bubble{
  max-width:78%; padding:9px 13px; border-radius:var(--radius-md); font-size:.85rem; line-height:1.45;
  background:var(--surface-container-high); color:var(--on-surface);
  overflow-wrap:break-word;
}
.chat-bubble-row.mine .chat-bubble{ background:var(--primary); color:var(--on-primary); border-bottom-right-radius:4px; }
.chat-bubble-row.theirs .chat-bubble{ border-bottom-left-radius:4px; }

.chat-thread-input-row{ display:flex; align-items:center; gap:8px; border-top:1px solid var(--outline-variant); padding-top:12px; }
.chat-thread-input-row input{
  flex:1; padding:11px 14px; border-radius:var(--radius-full); border:1.5px solid var(--outline-variant);
  font-family:inherit; font-size:.88rem; background:var(--surface-container-lowest); color:var(--on-surface);
}
.chat-thread-input-row .icon-btn{ background:var(--primary); color:var(--on-primary); flex-shrink:0; }
.chat-thread-input-row .icon-btn:hover{ background:var(--primary); opacity:.9; }

/* ---- Messages tab (dashboard Messages panel — #chatThreadsRoot list) ---- */
.chat-thread-row{
  display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius:var(--radius-md);
  cursor:pointer; transition:background .2s;
}
.chat-thread-row:hover{ background:var(--surface-container-low); }
.chat-thread-row.unread{ background:var(--surface-container-low); }
.chat-thread-row-thumb{
  width:46px; height:46px; border-radius:var(--radius-sm); flex-shrink:0; overflow:hidden;
  background:var(--surface-container-high); display:flex; align-items:center; justify-content:center;
  color:var(--on-surface-variant);
}
.chat-thread-row-thumb img{ width:100%; height:100%; object-fit:cover; }
.chat-thread-row-body{ flex:1; min-width:0; }
.chat-thread-row-top{ display:flex; align-items:center; gap:6px; }
.chat-thread-row-top strong{ font-size:.86rem; }
.chat-thread-row-book{ font-size:.72rem; color:var(--primary); font-weight:600; }
.chat-thread-row-preview{
  font-size:.78rem; color:var(--on-surface-variant); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-unread-dot{ width:8px; height:8px; border-radius:50%; background:var(--secondary); flex-shrink:0; }

/* ============================================================
   KLIXY SIGNUP & UI FIX — PHASE 5: SELLER PROFILE SHEET
   Opened by tapping the seller card on a Book Details page (see
   assets/js/seller-profile.js). Same overlay mechanics as
   #chatThreadOverlay/#paymentOverlay (fixed backdrop + .open toggling a
   slide-up .payment-sheet) — matches the existing "Account created"
   modal style per the spec, on mobile as a bottom sheet and centred as a
   modal from 640px up (see .payment-sheet's own breakpoint).
   ============================================================ */
#sellerProfileOverlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,10,18,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--transition-standard), visibility .3s;
  backdrop-filter:blur(2px);
}
#sellerProfileOverlay.open{ opacity:1; visibility:visible; }
#sellerProfileOverlay.open .payment-sheet{ transform:translateY(0); }
@media (min-width:640px){ #sellerProfileOverlay{ align-items:center; } }

.seller-profile-sheet{ max-width:480px; }
.seller-profile-head{ display:flex; align-items:center; gap:14px; padding-right:30px; margin-bottom:10px; }
.seller-profile-avatar{ width:52px; height:52px; font-size:1.3rem; flex-shrink:0; }
.seller-profile-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.seller-profile-head-info{ min-width:0; }
.seller-profile-head-info h3{ font-size:1.05rem; margin-bottom:3px; }
.seller-profile-location{ display:flex; align-items:center; gap:5px; font-size:.8rem; color:var(--on-surface-variant); }
.seller-profile-location .icon{ width:.85em; height:.85em; }
.seller-profile-member{ display:block; font-size:.74rem; color:var(--on-surface-variant); margin-top:2px; }

.seller-verified-badge{
  display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:700;
  color:var(--tertiary); background:var(--tertiary-container); padding:4px 10px;
  border-radius:var(--radius-full); margin-bottom:12px;
}
.seller-verified-badge .icon{ width:.85em; height:.85em; }

.seller-profile-rating-row{ margin-bottom:16px; }
.seller-profile-chat-btn{ margin-bottom:20px; }

.seller-profile-listings-heading{ font-size:.92rem; margin-bottom:12px; }
.seller-profile-listings .book-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
@media (min-width:480px){ .seller-profile-listings .book-grid{ grid-template-columns:repeat(3, 1fr); } }

/* ============================================================
   PHASE 4 — ORDER FULFILLMENT (dashboard order rows)
   Fulfillment pills reuse the existing .order-status base — these three
   modifiers are new, alongside the already-defined -paid/-created/-failed
   (payment status) ones. A row can show BOTH a payment pill and a
   fulfillment pill side by side.
   ============================================================ */
.order-status-pending{ background:var(--surface-container-high); color:var(--on-surface-variant); }
.order-status-shipped{ background:var(--secondary-container); color:var(--on-secondary-container); }
.order-status-delivered{ background:var(--tertiary-container); color:var(--on-tertiary-container); }

.order-row-actions{ flex-basis:100%; display:flex; justify-content:flex-end; margin-top:2px; }

/* ============================================================
   PHASE 4 — NOTIFICATIONS (bell icon bottom-sheet)
   Same overlay mechanics as #chatThreadOverlay/#paymentOverlay.
   ============================================================ */
#notifOverlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,10,18,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--transition-standard), visibility .3s;
  backdrop-filter:blur(2px);
}
#notifOverlay.open{ opacity:1; visibility:visible; }
@media (min-width:640px){ #notifOverlay{ align-items:center; } }
#notifOverlay.open .payment-sheet{ transform:translateY(0); }
.notif-sheet{ max-width:440px; max-height:min(72vh, 620px); display:flex; flex-direction:column; }
.notif-sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-right:36px; margin-bottom:10px; }
.notif-sheet-head h3{ font-size:1.05rem; }

.notif-list{ overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.notif-row{
  display:flex; gap:10px; padding:12px 14px; border-radius:var(--radius-md);
  background:var(--surface-container-lowest); border:1px solid var(--outline-variant); cursor:pointer;
}
.notif-row:hover{ background:var(--surface-container-low); }
.notif-row.unread{ border-color:var(--primary); background:var(--primary-container); }
.notif-row-body strong{ display:block; font-size:.86rem; margin-bottom:2px; }
.notif-row-body p{ font-size:.78rem; color:var(--on-surface-variant); line-height:1.5; }
.notif-row.unread .notif-row-body p{ color:var(--on-primary-container); }

/* ============================================================
   PHASE 6 — DISTANCE-BASED DELIVERY (Book Details distance/map,
   Order Confirmation popup, Track Your Order, seller Payment/
   Delivery settings, School + Best For tags, seller slab rows)
   ============================================================ */

/* ---- Book Details: distance + map (under seller card / Chat button) ---- */
.book-distance-block{ margin-top:16px; padding:14px 16px; border-radius:var(--radius-lg); background:var(--surface-container-low); }
.book-distance-text{ display:flex; align-items:center; gap:8px; font-size:.9rem; margin-bottom:10px; }
.book-distance-text .icon{ color:var(--primary); }
.book-distance-map{ position:relative; width:100%; height:180px; border-radius:var(--radius-md); overflow:hidden; }
.book-distance-empty{ margin:0; }

.book-best-for-row{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px; }
.book-best-for-tag{
  font-size:.72rem; font-weight:600; padding:5px 12px; border-radius:var(--radius-full);
  background:var(--tertiary-container); color:var(--on-tertiary-container);
}

/* ---- Best For checkboxes (Seller Dashboard add/edit book form) ---- */
.mp-checkbox-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.mp-checkbox-chip{
  display:flex; align-items:center; gap:6px; font-size:.78rem; padding:7px 12px;
  border-radius:var(--radius-full); border:1.5px solid var(--outline-variant); cursor:pointer;
}
.mp-checkbox-chip input{ margin:0; }

/* ---- Order Confirmation popup (Buy Now, Phase 6) ---- */
#orderConfirmOverlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,10,18,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--transition-standard), visibility .3s;
  backdrop-filter:blur(2px);
}
#orderConfirmOverlay.open{ opacity:1; visibility:visible; }
@media (min-width:640px){ #orderConfirmOverlay{ align-items:center; } }
#orderConfirmOverlay.open .payment-sheet{ transform:translateY(0); }
.order-confirm-sheet{ max-width:440px; }

/* Two visually distinct cards — "delivery details" (product/seller/map) and
   "order summary" (charges/coupon) — instead of everything running
   together edge-to-edge with no separation. */
.order-confirm-card{
  background:var(--surface-container-low); border:1px solid var(--outline-variant);
  border-radius:var(--radius-md); padding:14px; margin:14px 0;
}
.order-confirm-card:first-of-type{ margin-top:16px; }
.order-confirm-section-label{
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--on-surface-variant); margin-bottom:8px;
}

.order-confirm-product{ display:flex; align-items:center; gap:12px; min-width:0; }
.order-confirm-product img{ width:56px; height:56px; border-radius:var(--radius-sm); object-fit:cover; flex-shrink:0; }
.order-confirm-product div{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.order-confirm-product strong{
  font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.order-confirm-product span{ font-size:.85rem; color:var(--on-surface-variant); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.order-confirm-seller{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--on-surface-variant); margin:12px 0 0; min-width:0; }
.order-confirm-seller span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.order-confirm-distance{ font-size:.85rem; margin-top:10px; }
.order-confirm-map{ position:relative; width:100%; height:160px; border-radius:var(--radius-md); overflow:hidden; margin-top:12px; }

.order-confirm-charges{ display:flex; flex-direction:column; }
.order-confirm-charge-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:.86rem; padding:5px 0; color:var(--on-surface-variant);
}
/* The label can truncate if it ever runs long — the amount never does.
   This is the actual fix for amounts getting clipped off the edge of the
   sheet: the number now has a guaranteed, unshrinkable box of its own. */
.order-confirm-charge-row span:first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.order-confirm-charge-row span:last-child{ flex-shrink:0; white-space:nowrap; font-weight:600; color:var(--on-surface); }
.order-confirm-total-row{
  font-weight:700; font-size:1.15rem; color:var(--on-surface);
  border-top:1px dashed var(--outline-variant); margin-top:6px; padding-top:10px;
}
.order-confirm-total-row span:last-child{ color:var(--primary); font-size:1.2rem; font-weight:800; }

/* ---- Coupon (Order Confirmation popup) ---- */
.order-confirm-coupon{
  display:flex; align-items:center; gap:8px; margin:14px 0 4px;
  border-top:1px solid var(--outline-variant); padding-top:14px;
}
.order-confirm-coupon-icon{ width:1.1em; height:1.1em; color:var(--on-surface-variant); flex-shrink:0; }
.order-confirm-coupon input{
  flex:1 1 auto; min-width:0; width:100%; padding:12px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--outline-variant); background:var(--surface);
  font-family:var(--font-body); font-size:.88rem; color:var(--on-surface); outline:none;
  letter-spacing:.03em;
}
.order-confirm-coupon input:focus{ border-color:var(--primary); }
/* width:auto explicitly overrides the sitewide "@media (max-width:380px)
   .btn-primary, .btn-outline{ width:100% }" rule below — that rule is meant
   for full-width hero/CTA buttons, but with no scoping it was also
   stretching this small inline Apply button to the full row width on
   narrow phones, squeezing the coupon input down to almost nothing. This
   was the actual cause of "coupon field too small" — the input's CSS
   (flex:1) was already correct; the button next to it was the one
   ballooning. */
.order-confirm-coupon-btn{ flex-shrink:0; white-space:nowrap; padding-left:18px; padding-right:18px; width:auto !important; }
.order-confirm-coupon-msg{ font-size:.78rem; margin-bottom:6px; min-height:0; }
.order-confirm-coupon-msg:empty{ display:none; }
.order-confirm-coupon-msg.coupon-ok{ color:#0F7A6C; font-weight:600; }
.order-confirm-coupon-msg.coupon-error{ color:var(--error); }
.order-confirm-discount-row span:last-child{ color:#0F7A6C !important; font-weight:700; }

/* On screens wide enough that this sheet centers instead of docking to the
   bottom (see #orderConfirmOverlay's min-width:640px rule below), give it a
   bit more breathing room so the two-card layout doesn't feel cramped. */
@media (min-width:480px){
  .order-confirm-coupon input{ font-size:.92rem; }
}

/* ---- Direct UPI payment (QR + deep link) ---- */
.order-confirm-upi{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  background:var(--surface-container-low); border-radius:var(--radius-md);
  padding:18px 16px; margin-top:14px; text-align:center;
}
.order-confirm-upi[hidden]{ display:none; }
.order-confirm-upi-title{ font-size:.88rem; color:var(--on-surface); }
.order-confirm-upi-qr{
  background:#fff; border-radius:var(--radius-md); padding:12px;
  box-shadow:var(--elev-1); display:flex; align-items:center; justify-content:center;
  min-width:120px; min-height:120px;
}
.order-confirm-upi-qr img, .order-confirm-upi-qr canvas{ display:block; }
.order-confirm-upi-qr:empty{ display:none; }
.order-confirm-upi-id{ font-size:.8rem; color:var(--on-surface-variant); word-break:break-all; }
.order-confirm-upi .btn-primary, .order-confirm-upi .btn-outline{ width:100%; justify-content:center; }
.order-confirm-upi-note{ font-size:.72rem; color:var(--on-surface-variant); line-height:1.5; }

/* ---- Klixy UI Fix: "Open UPI App" fallback (shared by the order-checkout
   UPI screen above and the seller onboarding fee UPI screen) ---- */
.sp-upi-id-copyable{ cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; }
.sp-upi-fallback-note{ margin-top:10px; font-size:.76rem; text-align:center; }

/* ---- Track Your Order popup ---- */
#trackOrderOverlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(10,10,18,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--transition-standard), visibility .3s;
  backdrop-filter:blur(2px);
}
#trackOrderOverlay.open{ opacity:1; visibility:visible; }
@media (min-width:640px){ #trackOrderOverlay{ align-items:center; } }
#trackOrderOverlay.open .payment-sheet{ transform:translateY(0); }
.track-order-sheet{ max-width:460px; }
.track-order-map{ position:relative; width:100%; height:220px; border-radius:var(--radius-md); overflow:hidden; margin:12px 0; background:var(--surface-container-high); }
.track-order-info{ font-size:.85rem; display:flex; flex-direction:column; gap:6px; }
.track-order-status strong{ color:var(--primary); }
.track-order-live{ color:var(--on-surface-variant); }
.order-track-btn{ display:inline-flex; align-items:center; gap:6px; }

/* ---- Seller Dashboard: Delivery slab rows ---- */
.seller-slab-rows{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.seller-slab-row{ display:flex; align-items:center; gap:8px; }
.seller-slab-row input{
  flex:1; padding:9px 10px; border-radius:var(--radius-sm); border:1.5px solid var(--outline-variant);
  font-family:inherit; font-size:.85rem; background:var(--surface-container-lowest); color:var(--on-surface);
}
.seller-slab-row span{ font-size:.8rem; color:var(--on-surface-variant); white-space:nowrap; }
.seller-slab-remove{
  width:28px; height:28px; border-radius:50%; border:1.5px solid var(--outline-variant); background:transparent;
  color:var(--on-surface-variant); font-size:1rem; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:0;
}
.seller-slab-remove:hover{ border-color:var(--error); color:var(--error); }

/* ---- Map gesture lock: "tap to interact" overlay ----
   Every Leaflet map on the site starts with dragging/zoom/tap gestures
   disabled (see createLiteMap() in delivery.js) so a thumb swiping the
   page or a bottom sheet never gets hijacked by the map underneath.
   This transparent overlay sits on top until tapped once. */
.map-tap-overlay{
  position:absolute; inset:0; z-index:1000; cursor:pointer;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:10px;
  background:transparent; touch-action:pan-y;
}
.map-tap-overlay span{
  background:rgba(20,20,30,.72); color:#fff; font-size:.72rem; font-weight:600;
  padding:5px 12px; border-radius:var(--radius-full); pointer-events:none;
}

/* ============================================================
   PWA — CUSTOM INSTALL POPUP (branded install card)
   Mobile: bottom sheet sliding up. Desktop (640px+): centered
   card zooming in. Uses the same design tokens as everything
   else, so light/dark mode adapt automatically.
   ============================================================ */
#spPwaInstallOverlay{
  position:fixed; inset:0; z-index:2200;
  background:rgba(10,10,18,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--transition-standard), visibility .3s;
  backdrop-filter:blur(2px);
}
#spPwaInstallOverlay.open{ opacity:1; visibility:visible; }

.sp-pwa-card{
  width:100%; max-width:420px; text-align:center;
  background:var(--surface-container-lowest);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:18px 24px calc(26px + env(safe-area-inset-bottom));
  box-shadow:var(--elev-3);
  transform:translateY(100%);
  transition:transform .35s var(--transition-standard);
}
#spPwaInstallOverlay.open .sp-pwa-card{ transform:translateY(0); }

@media (min-width:640px){
  #spPwaInstallOverlay{ align-items:center; }
  .sp-pwa-card{
    border-radius:var(--radius-xl); padding:28px 30px;
    transform:scale(.92); opacity:0;
    transition:transform .3s var(--transition-standard), opacity .3s var(--transition-standard);
  }
  #spPwaInstallOverlay.open .sp-pwa-card{ transform:scale(1); opacity:1; }
  .sp-pwa-handle{ display:none; }
}

.sp-pwa-handle{
  width:40px; height:4px; border-radius:99px; background:var(--outline-variant);
  margin:0 auto 18px;
}
.sp-pwa-logo{
  width:76px; height:76px; border-radius:50%; margin:0 auto 14px;
  background:#fff; box-shadow:0 0 0 4px var(--surface-container-lowest), 0 0 0 5px var(--outline-variant), 0 6px 22px rgba(76,95,213,.28);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.sp-pwa-logo img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.sp-pwa-title{
  font-family:var(--font-display); font-weight:800; font-size:1.15rem;
  color:var(--on-surface); margin-bottom:8px; line-height:1.35;
}
.sp-pwa-sub{ font-size:.84rem; color:var(--on-surface-variant); line-height:1.6; margin-bottom:20px; }
.sp-pwa-actions{ display:flex; gap:10px; justify-content:center; }
.sp-pwa-install-btn{
  flex:1; max-width:200px; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--primary), var(--tertiary, #14B8A6));
  color:#fff; font-family:var(--font-body); font-weight:800; font-size:.92rem;
  padding:13px 22px; border-radius:var(--radius-full);
  box-shadow:0 6px 18px rgba(76,95,213,.35);
  transition:transform .15s var(--transition-standard), box-shadow .2s;
}
.sp-pwa-install-btn:hover{ transform:translateY(-2px); }
.sp-pwa-install-btn:active{ transform:scale(.95); }
.sp-pwa-later-btn{
  flex:0 1 auto; background:transparent; cursor:pointer;
  border:1.5px solid var(--outline-variant); color:var(--on-surface-variant);
  font-family:var(--font-body); font-weight:600; font-size:.88rem;
  padding:13px 20px; border-radius:var(--radius-full);
  transition:border-color .2s, color .2s, transform .15s;
}
.sp-pwa-later-btn:hover{ border-color:var(--on-surface-variant); }
.sp-pwa-later-btn:active{ transform:scale(.95); }

/* PWA popup — manual "how to install" steps (browsers without a native
   install event: iOS Safari, Firefox, etc.) */
.sp-pwa-steps{ display:flex; flex-direction:column; gap:16px; align-items:center; }
.sp-pwa-steps ol{
  text-align:left; margin:0; padding-left:22px;
  font-size:.86rem; color:var(--on-surface); line-height:1.7;
  display:flex; flex-direction:column; gap:8px;
}
.sp-pwa-steps ol li::marker{ font-weight:800; color:var(--primary); }
.sp-pwa-steps .sp-pwa-install-btn{ max-width:200px; width:100%; }

/* ============================================================
   AI SMART BOOK LISTING (Seller Dashboard "AI Scan Book" flow)
   ============================================================ */
.seller-ai-scan{
  border:1px solid var(--primary); border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--primary-container), var(--surface-container-low));
  padding:14px 16px; margin-bottom:18px;
}
.seller-ai-scan-head{ display:flex; align-items:flex-start; gap:10px; }
.seller-ai-scan-head .icon{ width:22px; height:22px; color:var(--primary); flex:0 0 auto; margin-top:2px; }
.seller-ai-scan-head strong{ display:block; font-family:var(--font-display); font-size:1rem; color:var(--on-primary-container); }
.seller-ai-scan-head span{ display:block; font-size:.82rem; color:var(--on-surface-variant); margin-top:2px; }
.seller-ai-scan-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
.seller-ai-scan-actions .btn-primary .icon{ width:18px; height:18px; }
.seller-ai-isbn-row{ display:flex; gap:6px; flex:1 1 220px; min-width:200px; }
.seller-ai-isbn-row input{
  flex:1; padding:9px 12px; border:1px solid var(--outline-variant);
  border-radius:var(--radius-md); background:var(--surface); color:var(--on-surface); font-size:.9rem;
}
.seller-ai-isbn-row input:focus{ outline:none; border-color:var(--primary); }
.seller-ai-scan-status{ margin-top:10px; font-size:.84rem; line-height:1.5; min-height:1.1em; color:var(--on-surface-variant); }
.seller-ai-scan-status.is-busy{ color:var(--primary); }
.seller-ai-scan-status.is-ok{ color:var(--success); }
.seller-ai-scan-status.is-warn{ color:var(--error); }

.seller-inline-ai{
  border:none; background:none; cursor:pointer; padding:0 0 0 8px;
  font-size:.78rem; font-weight:700; color:var(--primary); text-decoration:underline;
}
.seller-inline-ai:hover{ opacity:.8; }
.seller-inline-ai:disabled{ opacity:.5; cursor:default; text-decoration:none; }

.seller-price-suggest{
  margin-top:8px; padding:10px 12px; border:1px dashed var(--outline-variant);
  border-radius:var(--radius-md); background:var(--surface-container-low);
}
.seller-price-suggest-band{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.seller-price-suggest-band span{ font-size:.82rem; color:var(--on-surface-variant); }
.seller-price-suggest-band strong{ font-size:1rem; color:var(--primary); font-family:var(--font-display); }
.seller-price-suggest-basis{ margin-top:6px; font-size:.76rem; color:var(--on-surface-variant); }

/* ============================================================
   NEARBY BOOKS DISCOVERY (Marketplace "Near You" section)
   ============================================================ */
.mp-nearby-shell{ margin-top:8px; }
.mp-nearby-cta{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  max-width:520px; margin:0 auto; padding:34px 24px;
  border:1px solid var(--outline-variant); border-radius:var(--radius-xl);
  background:var(--surface-container-low);
}
.mp-nearby-cta > .icon{ width:40px; height:40px; color:var(--primary); }
.mp-nearby-cta h3{ font-family:var(--font-display); font-size:1.2rem; margin:0; color:var(--on-surface); }
.mp-nearby-cta p{ font-size:.9rem; color:var(--on-surface-variant); margin:0; }
.mp-nearby-cta .btn-primary{ display:inline-flex; align-items:center; gap:8px; }
.mp-nearby-cta .btn-primary .icon{ width:18px; height:18px; }
.mp-nearby-cta-note{ font-size:.82rem; min-height:1em; margin:0; color:var(--on-surface-variant); }
.mp-nearby-cta-note.is-error{ color:var(--error); }

.mp-nearby-sortbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.mp-nearby-count{ font-weight:700; color:var(--on-surface); font-size:.92rem; }
.mp-nearby-sort{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mp-nearby-sort label{ font-size:.84rem; color:var(--on-surface-variant); }
.mp-nearby-sort select{
  padding:8px 12px; border:1px solid var(--outline-variant); border-radius:var(--radius-md);
  background:var(--surface); color:var(--on-surface); font-size:.86rem;
}
.mp-nearby-sort .btn-sm{ display:inline-flex; align-items:center; gap:6px; }
.mp-nearby-sort .btn-sm .icon{ width:15px; height:15px; }
.mp-nearby-sort .btn-outline.active{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }

.mp-nearby-filters{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px;
  padding:16px; margin-bottom:16px; border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg); background:var(--surface-container-low);
}
.mp-nearby-filters .field-group{ margin:0; }
.mp-nearby-filters label{ font-size:.8rem; color:var(--on-surface-variant); display:block; margin-bottom:4px; }
.mp-nearby-filters select,
.mp-nearby-filters input{
  width:100%; padding:8px 10px; border:1px solid var(--outline-variant);
  border-radius:var(--radius-md); background:var(--surface); color:var(--on-surface); font-size:.86rem;
}
.mp-nearby-filters-foot{ grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; }

.mp-nearby-map{ height:340px; width:100%; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:18px; border:1px solid var(--outline-variant); z-index:0; }

.mp-nearby-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px; }
.mp-nearby-item{ display:flex; flex-direction:column; }
.mp-nearby-item .book-card{ height:100%; }
.mp-nearby-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  margin-top:8px; padding:10px 12px; border-radius:var(--radius-md);
  background:var(--secondary-container); font-size:.8rem; color:var(--on-secondary-container);
}
.mp-nearby-distance{ display:inline-flex; align-items:center; gap:5px; font-weight:800; }
.mp-nearby-distance .icon{ width:14px; height:14px; }
.mp-nearby-travel{ color:var(--on-surface-variant); }
.mp-nearby-loc{ flex-basis:100%; color:var(--on-surface-variant); }
.mp-nearby-directions{
  margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  font-weight:700; color:var(--primary); text-decoration:none;
}
.mp-nearby-directions .icon{ width:14px; height:14px; }
.mp-nearby-directions:hover{ text-decoration:underline; }

@media (max-width:600px){
  .mp-nearby-sortbar{ align-items:flex-start; }
  .mp-nearby-map{ height:260px; }
}