/* ===================== Smileproof widget — styles =====================
   Brand tokens reused from web/styles.css. Scoped to a compact iframe shell
   (one centered card, ~480px max). Slider classes (.stage/.layer/.clip/.handle)
   match js/slider.js. Full RTL via [dir=rtl].
======================================================================= */
:root{
  --blue:#1C7FD6; --blue-d:#1567B4; --teal:#19C3B2; --teal-l:#9BE8DF;
  --ink:#102A43; --muted:#5B7383; --line:#E3ECF3; --bg:#F4F8FB;
  --grad-blue:linear-gradient(150deg,var(--blue),var(--blue-d));
  --shadow:0 14px 30px -22px rgba(16,42,67,.5);
  --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;font-family:'Inter','Tajawal',system-ui,sans-serif;color:var(--ink)}
body{background:radial-gradient(120% 120% at 50% 0%,#EAF3FA 0%,#F4F8FB 55%,#EAF1F7 100%);min-height:100dvh}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} /* honeypot — hidden from humans, tempting to bots */

#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}

/* ---------- top bar ---------- */
#topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.85);backdrop-filter:blur(12px)}
#topbar img[data-clinic-logo]{height:28px;width:auto}
.clinic-name{font-weight:700;font-size:15px;letter-spacing:-.01em}
.brand-name{font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
#langToggle{border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 12px;font-weight:700;font-size:13px;color:var(--ink)}

/* ---------- screens ---------- */
main{flex:1;display:flex;flex-direction:column}
section[data-screen]{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:24px 20px;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

h1{font-size:24px;line-height:1.2;margin:0;letter-spacing:-.02em}
h2{font-size:19px;margin:0;letter-spacing:-.01em}
p.sub{color:var(--muted);margin:0;font-size:15px;line-height:1.5}

/* ---------- buttons ---------- */
.btn{display:block;width:100%;padding:15px 18px;border-radius:13px;font-weight:700;font-size:16px;border:none;text-align:center}
.btn.primary{background:var(--grad-blue);color:#fff;box-shadow:var(--shadow)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:1}

/* ---------- face guide (landing) ---------- */
.faceguide{align-self:center;width:140px;height:170px;border:3px dashed var(--teal);border-radius:50% 50% 48% 48%;opacity:.7}

/* ---------- consent ---------- */
.consent-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;font-size:14px;line-height:1.55;color:var(--muted)}
.consent-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink)}
.consent-check input{width:20px;height:20px;margin-top:1px;accent-color:var(--blue)}
.privacy-link{font-size:13px;color:var(--blue);text-decoration:underline}

/* ---------- capture ---------- */
.capture-frame{position:relative;background:#0a121b;border-radius:var(--radius);aspect-ratio:3/4;overflow:hidden;display:flex;align-items:center;justify-content:center}
.capture-frame video,.capture-frame img{width:100%;height:100%;object-fit:cover}
.capture-frame video{transform:scaleX(-1)} /* mirror the live camera (selfie view) */
.retake-msg{background:#FDECEC;color:#B42318;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.5}
input[type=file]{display:none}

/* ---------- procedure cards ---------- */
.proc-grid{display:grid;gap:12px}
.proc-card{display:flex;align-items:center;gap:14px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:14px;font-weight:700;font-size:17px;color:var(--ink);text-align:start}
.proc-card:hover{border-color:var(--blue)}
.proc-card .dot{width:12px;height:12px;border-radius:50%;background:var(--teal)}

/* ---------- customize (options) ---------- */
.opt-label{font-weight:700;font-size:14px;margin:16px 0 8px;color:var(--ink)}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:10px 16px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-weight:600;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:8px}
.chip.sel{border-color:var(--blue);background:rgba(28,127,214,.08);color:var(--blue)}
.chip .sw{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}

/* ---------- lead tease (patient's own photo, reward-imminent cue) ---------- */
.lead-tease{display:flex;flex-direction:column;align-items:center;gap:8px;margin:-2px 0 2px}
.lead-tease img{width:92px;height:122px;object-fit:cover;border-radius:14px;border:2px solid var(--teal-l);box-shadow:var(--shadow)}
.lead-tease img:not([src]),.lead-tease img[src=""]{display:none}
.lead-tease-tag{font-size:13px;font-weight:700;color:var(--teal);background:rgba(25,195,178,.1);padding:6px 13px;border-radius:999px}

/* ---------- lead form ---------- */
#leadForm{display:grid;gap:12px}
#leadForm input{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:12px;font-size:16px;color:var(--ink);background:#fff}
#leadForm input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(28,127,214,.15)}
.leaderr{color:#B42318;font-size:14px;margin:0}
.tcpa{font-size:12px;color:var(--muted);line-height:1.45;margin:2px 0 0}
#retryBtn{margin-top:8px}
.stage:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- processing ---------- */
.processing{align-items:center;text-align:center}
.spinner{width:54px;height:54px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--blue);animation:spin 1s linear infinite;align-self:center}
.limit,.err{background:#FDECEC;color:#B42318;border-radius:12px;padding:14px;font-size:15px;line-height:1.5;text-align:center}

/* ---------- reveal slider ---------- */
.stage{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);background:#0a121b;touch-action:none;user-select:none}
.stage .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Pin the clip to the physical left (inset top/bottom 0, right auto) so the reveal
   grows leftward-anchored in BOTH LTR and RTL, matching the handle's physical left. */
.stage .clip{overflow:hidden;width:50%;inset:0 auto 0 0}
.stage .clip img{position:absolute;inset:0;height:100%;object-fit:cover;max-width:none}
.lbl{position:absolute;top:14px;padding:6px 12px;border-radius:999px;color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;backdrop-filter:blur(6px);z-index:2}
/* Physical left/right so labels stay aligned with the slider geometry, which is
   physical (before always on the left), even under RTL. */
.lbl-before{left:14px;background:rgba(10,18,27,.6)}
.lbl-after{right:14px;background:rgba(25,195,178,.85)}
.handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;z-index:2}
/* Native range overlay owns all drag/touch/keyboard input; visuals are the .handle above. */
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:ew-resize;z-index:4}
.ba-range:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ba-range::-webkit-slider-runnable-track{background:transparent;height:100%}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:48px;height:100%;background:transparent;cursor:ew-resize}
.ba-range::-moz-range-track{background:transparent;height:100%}
.ba-range::-moz-range-thumb{width:48px;height:100%;border:0;background:transparent;cursor:ew-resize}
.handle-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 0 3px rgba(155,232,223,.55);display:flex;align-items:center;justify-content:center;color:var(--blue);font-weight:700}
.disclaimer{font-size:13px;color:var(--muted);text-align:center;margin:0}

/* ---------- thanks ---------- */
.thanks{align-items:center;text-align:center}
.next-step{font-size:14px;color:var(--muted);margin:0;line-height:1.5}
#thanksBookBtn{margin-top:6px;max-width:320px}
.check-badge{width:64px;height:64px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;align-self:center}

/* ---------- RTL ---------- */
[dir=rtl] .proc-card{text-align:start}
[dir=rtl] .handle{left:auto}