/* ================================================================
   OPTIMA LABS — Self-Assessment styles
   Presentation layer for assessment.html. Reuses the design tokens,
   glassmorphism and pill/button language already in optima.css /
   premium.css — adds only what the multi-step flow needs. Mobile-first.
   ================================================================ */

/* ---- Page frame ---- */
.asv-wrap{ width:min(920px, calc(100% - 40px)); margin:0 auto; }
.asv-main{ padding:clamp(96px,12vw,132px) 0 clamp(64px,8vw,110px);
  background:radial-gradient(120% 70% at 80% -8%, rgba(241,226,219,.55), var(--porcelain) 60%); min-height:100vh; }

/* ---- Progress bar (animated) ---- */
.asv-progress-wrap{ position:sticky; top:70px; z-index:5; margin-bottom:26px; }
.asv-progress-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.asv-progress-step{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--clay-deep); }
.asv-progress-pct{ font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.asv-progress{ height:8px; border-radius:999px; background:rgba(183,154,107,.2); overflow:hidden; }
.asv-progress > span{ display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--champagne), var(--clay)); transition:width .5s cubic-bezier(.22,1,.36,1); }

/* ---- Step card (glassmorphism, matches .calc-panel) ---- */
.asv-step{ position:relative;
  background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(24px) saturate(1.2); backdrop-filter:blur(24px) saturate(1.2);
  border:1px solid rgba(255,255,255,.55); border-radius:28px; box-shadow:var(--shadow-lift);
  padding:clamp(26px,4vw,44px); animation:asvIn .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes asvIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.asv-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--clay-deep); }
.asv-step h2{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.4vw,38px); color:var(--espresso); margin-top:10px; line-height:1.12; }
.asv-step > p.lead{ margin-top:14px; font-size:16px; color:var(--ink-soft); line-height:1.65; max-width:56ch; }
.asv-note{ display:flex; gap:10px; align-items:flex-start; margin-top:18px; font-size:13px; color:var(--ink-soft); line-height:1.55; }
.asv-note svg{ flex:none; color:var(--champagne); margin-top:2px; }

/* ---- Field groups ---- */
.asv-group{ margin-top:26px; }
.asv-group + .asv-group{ margin-top:24px; }
.asv-label{ display:block; font-size:13.5px; font-weight:700; color:var(--espresso); margin-bottom:12px; }
.asv-label .opt{ font-weight:500; color:var(--ink-soft); }

/* selectable option chips (reuses .pill look but block-friendly) */
.asv-opts{ display:flex; flex-wrap:wrap; gap:10px; }
.asv-opts.cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.asv-opt{ appearance:none; cursor:pointer; font:inherit; font-size:14.5px; font-weight:600; text-align:left;
  padding:13px 18px; min-height:48px; border-radius:14px; touch-action:manipulation;
  border:1px solid rgba(183,154,107,.4); background:rgba(255,255,255,.7); color:var(--espresso);
  transition:transform .18s ease, background .25s ease, color .22s ease, border-color .25s ease, box-shadow .25s ease;
  display:inline-flex; align-items:center; gap:10px; }
.asv-opt:hover{ border-color:var(--clay); transform:translateY(-1px); box-shadow:0 8px 18px -12px rgba(58,46,41,.4); }
.asv-opt:active{ transform:scale(.98); }
.asv-opt.sel{ background:var(--clay); color:#fff; border-color:var(--clay); box-shadow:0 12px 24px -12px rgba(169,106,88,.6); }
.asv-opt:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; }

/* goal cards (multi-select, richer) */
.asv-goals{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:12px; }
.asv-goal{ position:relative; cursor:pointer; text-align:left; padding:16px 18px; min-height:72px; border-radius:16px;
  border:1px solid rgba(183,154,107,.4); background:rgba(255,255,255,.7); touch-action:manipulation;
  transition:transform .2s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.asv-goal:hover{ transform:translateY(-2px); border-color:var(--clay); box-shadow:0 14px 30px -18px rgba(58,46,41,.4); }
.asv-goal:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
.asv-goal.sel{ border-color:var(--clay); background:linear-gradient(180deg,#fff,#FBEFE9); box-shadow:0 0 0 1px var(--clay), 0 16px 34px -18px rgba(169,106,88,.5); }
.asv-goal .g-title{ font-weight:700; font-size:15px; color:var(--espresso); padding-right:26px; }
.asv-goal .g-hint{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
.asv-goal .g-check{ position:absolute; top:14px; right:14px; width:22px; height:22px; border-radius:50%; border:2px solid rgba(169,106,88,.45);
  display:flex; align-items:center; justify-content:center; transition:.2s ease; }
.asv-goal.sel .g-check{ background:var(--clay); border-color:var(--clay); }
.asv-goal .g-check svg{ width:12px; height:12px; color:#fff; opacity:0; transition:opacity .2s ease; }
.asv-goal.sel .g-check svg{ opacity:1; }

/* text inputs (reuses .co-field vocab, scoped) */
.asv-inrow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.asv-field label{ display:block; font-size:13px; font-weight:700; color:var(--espresso); margin-bottom:6px; }
.asv-field input{ width:100%; min-height:52px; padding:13px 15px; border-radius:12px; border:1px solid rgba(183,154,107,.42);
  background:#fff; font:inherit; font-size:16px; color:var(--espresso); transition:border-color .2s ease, box-shadow .2s ease; }
.asv-field input:focus{ outline:none; border-color:var(--clay); box-shadow:0 0 0 3px rgba(169,106,88,.15); }
.asv-field textarea{ width:100%; min-height:88px; padding:12px 15px; border-radius:12px; border:1px solid rgba(183,154,107,.42);
  background:#fff; font:inherit; font-size:16px; line-height:1.5; color:var(--espresso); resize:vertical;
  transition:border-color .2s ease, box-shadow .2s ease; }
.asv-field textarea:focus{ outline:none; border-color:var(--clay); box-shadow:0 0 0 3px rgba(169,106,88,.15); }
.asv-field .opt{ font-weight:500; color:var(--ink-soft); }

/* medical-step information notice (premium callout) */
.asv-notice{ display:flex; gap:12px; align-items:flex-start; margin:18px 0 4px; padding:16px 18px; border-radius:16px;
  background:linear-gradient(135deg, rgba(241,226,219,.55), rgba(255,255,255,.5)); border:1px solid rgba(183,154,107,.38);
  font-size:13.5px; color:var(--espresso); line-height:1.6; }
.asv-notice svg{ flex:none; color:var(--clay); margin-top:2px; }

/* optional lab-results upload + freshness message */
.asv-lab{ margin-top:6px; }
.asv-labmsg{ display:none; gap:10px; align-items:flex-start; margin-top:10px; padding:12px 14px; border-radius:12px;
  background:rgba(194,86,77,.08); border:1px solid rgba(194,86,77,.32); font-size:13px; color:#b8503f; line-height:1.5; }
.asv-labmsg.show{ display:flex; }
.asv-labmsg svg{ flex:none; margin-top:2px; }

/* safety checklist */
.asv-safety{ display:grid; gap:10px; margin-top:22px; }
.asv-check{ display:flex; align-items:flex-start; gap:13px; padding:15px 17px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(183,154,107,.35); background:rgba(255,255,255,.7); transition:border-color .2s ease, background .2s ease; }
.asv-check:hover{ border-color:rgba(169,106,88,.6); }
.asv-check.on{ border-color:var(--clay); background:rgba(192,141,128,.08); }
.asv-check input{ position:absolute; opacity:0; width:0; height:0; }
.asv-check .box{ flex:none; width:24px; height:24px; border-radius:7px; border:2px solid rgba(169,106,88,.5); margin-top:1px;
  display:flex; align-items:center; justify-content:center; transition:.2s ease; }
.asv-check.on .box{ background:var(--clay); border-color:var(--clay); }
.asv-check .box svg{ width:14px; height:14px; color:#fff; opacity:0; transition:opacity .2s ease; }
.asv-check.on .box svg{ opacity:1; }
.asv-check span.lbl{ font-size:14.5px; color:var(--espresso); line-height:1.5; padding-top:2px; }

/* ---- Step nav ---- */
.asv-actions{ display:flex; gap:12px; margin-top:30px; align-items:center; }
.asv-actions .btn{ min-height:54px; }
.asv-actions .grow{ flex:1; }
.asv-back{ background:none; border:none; color:var(--ink-soft); font:inherit; font-weight:600; font-size:14.5px; cursor:pointer; padding:12px 8px; }
.asv-back:hover{ color:var(--clay-deep); }
.asv-saved{ margin-left:auto; font-size:12px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; opacity:0; transition:opacity .3s ease; }
.asv-saved.show{ opacity:1; }
.asv-saved i{ width:7px; height:7px; border-radius:50%; background:#5AA277; display:inline-block; }
.asv-err{ margin-top:14px; font-size:13px; color:#b8503f; font-weight:600; display:none; }
.asv-err.show{ display:block; }

/* ================= SAFETY-STOP branch ================= */
.asv-stop{ text-align:center; }
.asv-stop .stop-ico{ width:72px; height:72px; margin:0 auto 6px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(192,141,128,.16); color:var(--clay); }
.asv-stop h2{ margin-top:8px; }
.asv-stop p{ margin:14px auto 0; max-width:52ch; color:var(--ink-soft); line-height:1.65; }

/* ================= RESULTS ================= */
.asv-results-head{ text-align:center; max-width:640px; margin:0 auto clamp(24px,4vw,40px); }
.asv-results-head .asv-eyebrow{ display:block; }
.asv-results-head h1{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,4vw,46px); color:var(--espresso); margin-top:12px; }
.asv-results-head p{ margin-top:14px; color:var(--ink-soft); font-size:16px; line-height:1.65; }

/* results + consult side-by-side */
.asv-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:26px; align-items:start; }
.asv-col-main{ min-width:0; }
.asv-col-aside{ position:sticky; top:90px; }

.asv-sec-title{ font-family:var(--serif); font-size:22px; color:var(--espresso); margin:6px 0 16px; }
.asv-sec-title.mt{ margin-top:34px; }

/* product result card */
.asv-rgrid{ display:grid; gap:16px; }
.asv-rcard{ display:flex; gap:16px; padding:16px; border-radius:20px; background:var(--surface);
  border:1px solid rgba(183,154,107,.24); box-shadow:var(--shadow-soft); }
.asv-rart{ flex:none; width:96px; height:120px; border-radius:14px; overflow:hidden; display:flex; align-items:flex-end; justify-content:center;
  background:radial-gradient(120% 130% at 50% 0%, rgba(241,226,219,.6), rgba(250,246,243,.9)); }
.asv-rart img,.asv-rart svg{ width:100%; height:100%; object-fit:cover; }
.asv-rbody{ flex:1; min-width:0; display:flex; flex-direction:column; }
.asv-rcat{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--champagne); }
.asv-rname{ font-family:var(--serif); font-size:21px; color:var(--espresso); margin-top:3px; }
.asv-rwhy{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-top:8px; }
.asv-rmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:11px; }
.asv-rstrength{ font-size:11.5px; font-weight:700; color:var(--clay-deep); background:rgba(192,141,128,.12); border-radius:999px; padding:4px 11px; }
.asv-rstock{ font-size:11.5px; font-weight:700; }
.asv-rstock.in{ color:#2f7a4f; } .asv-rstock.low{ color:#9a5a1a; } .asv-rstock.out{ color:#b8503f; }
.asv-rfoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:13px; }
.asv-rprice{ font-family:var(--serif); font-size:20px; color:var(--espresso); }
.asv-rprice .from{ font-family:var(--sans); font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-right:4px; }
.asv-rbtns{ display:flex; gap:8px; }
.asv-match{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--clay-deep);
  background:rgba(183,154,107,.16); border:1px solid rgba(183,154,107,.4); border-radius:999px; padding:3px 10px; }

/* accessories row */
.asv-acc{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr)); gap:12px; }
.asv-acard{ padding:15px 16px; border-radius:16px; background:var(--surface); border:1px solid rgba(183,154,107,.24); box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; gap:8px; }
.asv-aname{ font-weight:700; font-size:14.5px; color:var(--espresso); }
.asv-adesc{ font-size:12.5px; color:var(--ink-soft); line-height:1.45; flex:1; }
.asv-afoot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.asv-aprice{ font-family:var(--serif); font-size:16px; color:var(--espresso); }

/* bundle */
.asv-bundle{ margin-top:20px; padding:20px 22px; border-radius:20px; color:#F3E9E1;
  background:linear-gradient(120deg,#241c17,#3a2e29); box-shadow:var(--shadow-lift); }
.asv-bundle h3{ font-family:var(--serif); font-weight:400; font-size:22px; color:#fff; }
.asv-bundle p{ font-size:13.5px; color:rgba(243,233,225,.8); margin-top:6px; }

/* add-everything bar */
.asv-addall{ margin-top:24px; padding:18px 20px; border-radius:20px; background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(183,154,107,.3);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; box-shadow:var(--shadow-soft); }
.asv-addall .aa-copy b{ font-family:var(--serif); font-size:18px; color:var(--espresso); font-weight:400; }
.asv-addall .aa-copy div{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; }

/* ================= CONSULT PANEL (parallel choice) ================= */
.asv-consult{ border-radius:22px; padding:24px 22px; color:#F5EDE7;
  background:linear-gradient(160deg,#3a2e29,#241c17); box-shadow:var(--shadow-lift); border:1px solid rgba(183,154,107,.28); }
.asv-consult .c-badge{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--champagne); border:1px solid rgba(183,154,107,.5); border-radius:999px; padding:5px 12px; }
.asv-consult h3{ font-family:var(--serif); font-weight:400; font-size:24px; color:#fff; margin-top:14px; }
.asv-consult .c-copy{ font-size:14px; color:rgba(245,237,231,.82); line-height:1.6; margin-top:10px; }
.asv-consult .c-fee{ display:flex; align-items:baseline; gap:8px; margin-top:16px; }
.asv-consult .c-fee b{ font-family:var(--serif); font-size:30px; color:#fff; }
.asv-consult .c-fee span{ font-size:12.5px; color:rgba(245,237,231,.7); }
.asv-consult .c-or{ text-align:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,237,231,.5); margin:20px 0 6px; }
.asv-consult .btn{ width:100%; }
.asv-consult .btn-book{ background:var(--champagne); color:#2b211c; margin-top:6px; }
.asv-consult .btn-book:hover{ filter:brightness(1.05); }

/* booking form (inline expand) */
.asv-booking{ margin-top:18px; border-top:1px solid rgba(183,154,107,.28); padding-top:18px; display:none; }
.asv-booking.open{ display:block; animation:asvIn .35s ease both; }
.asv-booking .bk-field{ margin-bottom:12px; }
.asv-booking label{ display:block; font-size:12.5px; font-weight:700; color:rgba(245,237,231,.9); margin-bottom:5px; }
.asv-booking input,.asv-booking select,.asv-booking textarea{ width:100%; min-height:46px; padding:11px 13px; border-radius:11px;
  border:1px solid rgba(183,154,107,.35); background:rgba(255,255,255,.94); font:inherit; font-size:16px; color:var(--espresso); }
.asv-booking textarea{ min-height:70px; resize:vertical; }
.asv-booking .bk-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.asv-booking .bk-hint{ display:block; margin-top:5px; font-size:11px; font-weight:600; letter-spacing:.01em; color:rgba(245,237,231,.6); }
.asv-booking .bk-methods{ display:flex; gap:8px; flex-wrap:wrap; }
.asv-booking .bk-m{ flex:1; min-width:90px; text-align:center; padding:11px 8px; border-radius:11px; cursor:pointer; font-size:13px; font-weight:700;
  border:1px solid rgba(183,154,107,.4); background:rgba(255,255,255,.1); color:#F5EDE7; transition:.2s ease; }
.asv-booking .bk-m.sel{ background:var(--champagne); color:#2b211c; border-color:transparent; }
.asv-booking .bk-check{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:rgba(245,237,231,.85); line-height:1.5; margin-top:6px; cursor:pointer; }
.asv-booking .bk-check input{ width:auto; min-height:0; margin-top:3px; flex:none; }
.asv-payhint{ font-size:12.5px; color:rgba(245,237,231,.75); line-height:1.55; margin:4px 0 12px; }

/* payment area reuses .co-qr / .co-drop / .co-progress / .co-preview from optima.css */
.asv-booking .co-qr{ margin:10px 0 4px; }
.asv-booking .co-drop{ background:rgba(255,255,255,.06); border-color:rgba(183,154,107,.45); color:#F5EDE7; }
.asv-booking .co-drop .t1{ color:#F5EDE7; } .asv-booking .co-drop .t3{ color:rgba(245,237,231,.6); }

/* booking confirmation */
.asv-bkdone{ text-align:center; padding:6px 4px; }
.asv-bkdone .ok-ic{ width:60px; height:60px; margin:0 auto 10px; border-radius:50%; background:rgba(90,162,119,.2); color:#8fd6ab;
  display:flex; align-items:center; justify-content:center; }
.asv-bkdone h3{ color:#fff; }
.asv-bkdone .bk-ref{ font-family:var(--serif); font-size:26px; color:var(--champagne); margin:8px 0; letter-spacing:.02em; }
.asv-bkdone .bk-kv{ font-size:13px; color:rgba(245,237,231,.82); line-height:1.9; }
.asv-bkdone .bk-status{ display:inline-block; margin-top:10px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#E1BC6A; background:rgba(199,154,58,.18); border-radius:999px; padding:5px 13px; }
/* WhatsApp fast-confirmation CTA on the Booking Received screen */
.asv-wa-cta{ margin-top:20px; padding:18px 18px 20px; border-radius:16px; text-align:center;
  border:1px solid rgba(37,211,102,.35); background:rgba(37,211,102,.08); }
.asv-wa-cta h4{ font-family:var(--serif); font-weight:400; font-size:17px; color:#fff; }
.asv-wa-cta p{ font-size:12.5px; color:rgba(245,237,231,.78); line-height:1.55; margin-top:6px; }
.asv-wa-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:14px;
  padding:13px 20px; border-radius:999px; font-family:var(--sans); font-size:14.5px; font-weight:700; text-decoration:none;
  background:#25D366; color:#0a3d20; transition:filter .25s ease, transform .18s ease; }
.asv-wa-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.asv-wa-btn:active{ transform:translateY(0) scale(.99); }
.asv-wa-btn svg{ flex:none; }
.asv-bkdone .bk-track{ margin-top:14px; font-size:12px; color:rgba(245,237,231,.7); }
.asv-bkdone .bk-track a{ color:var(--champagne); font-weight:700; }
@media (prefers-reduced-motion:reduce){ .asv-wa-btn:hover,.asv-wa-btn:active{ transform:none; } }

.asv-disc{ margin-top:26px; font-size:11.5px; color:var(--ink-soft); font-style:italic; line-height:1.6; max-width:70ch; }

/* ---- Responsive ---- */
@media (max-width:860px){
  .asv-layout{ grid-template-columns:1fr; }
  .asv-col-aside{ position:static; }
  .asv-progress-wrap{ top:64px; }
}
@media (max-width:520px){
  .asv-inrow{ grid-template-columns:1fr; }
  .asv-rcard{ flex-direction:column; }
  .asv-rart{ width:100%; height:150px; }
  .asv-booking .bk-row{ grid-template-columns:1fr; }
  .asv-actions{ flex-wrap:wrap; }
  .asv-actions .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .asv-step,.asv-booking.open,.asv-bkdone{ animation:none; }
  .asv-progress > span{ transition:none; }
  .asv-opt:hover,.asv-goal:hover,.asv-rcard:hover{ transform:none; }
}