/* EVO Medical Spa — AI weight-loss visualizer (homepage section).
   Self-contained block: no Elementor structure, driven by /assets/js/evo-visualizer.js.
   Palette tokens come from modern.css (--evo-navy, --evo-gold, …). */

.evo-viz{
  position:relative;padding:84px 24px;
  background:linear-gradient(180deg,#F3F2F0 0%,#F7F5F2 40%,#EFF1F3 100%);
  font-family:var(--evo-sans);color:var(--evo-body-text);
}
.evo-viz-inner{max-width:1180px;margin:0 auto;}
.evo-viz [hidden]{display:none!important;}

/* Teaser card: white card with a softly pulsing gold glow. Text inside
   reveals on scroll — eyebrow/heading/button rise via keyframes, the
   paragraph word-by-word via evo-reveal.js (host is .evo-text-reveal). */
.evo-viz-head{
  position:relative;text-align:center;max-width:820px;margin:0 auto;
  background:#fff;border:1px solid var(--evo-gold);
  border-radius:var(--evo-block-radius,22px);padding:62px 54px 56px;
  animation:evo-viz-glow 3.4s ease-in-out infinite;
}
@keyframes evo-viz-glow{
  0%,100%{box-shadow:0 0 14px rgba(210,175,118,.28),0 0 42px rgba(210,175,118,.14);}
  50%{box-shadow:0 0 26px rgba(210,175,118,.55),0 0 72px rgba(210,175,118,.30);}
}
@keyframes evo-viz-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.evo-viz-head.evo-revealed > :not(p){animation:evo-viz-rise .7s cubic-bezier(.2,.7,.3,1) both;}
.evo-viz-head.evo-revealed .evo-viz-eyebrow{animation-delay:.05s;}
.evo-viz-head.evo-revealed .evo-viz-open{animation-delay:.55s;}
@keyframes evo-viz-sheen{0%,52%{background-position:120% 0;}88%,100%{background-position:-60% 0;}}
.evo-viz-head.evo-revealed h2{
  animation:evo-viz-rise .7s cubic-bezier(.2,.7,.3,1) .14s both,
            evo-viz-sheen 7s ease-in-out 1.3s infinite;
}
.evo-viz-head .evo-reveal-word{display:inline-block;opacity:0;transform:translateY(.55em);transition:opacity .45s ease,transform .45s ease;}
.evo-viz-head.evo-revealed .evo-reveal-word{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .evo-viz-head{animation:none;box-shadow:0 0 20px rgba(210,175,118,.4);}
  .evo-viz-head.evo-revealed > :not(p){animation:none;}
  .evo-viz-head h2,.evo-viz-head.evo-revealed h2{
    animation:none;background:none;-webkit-background-clip:initial;
    background-clip:initial;color:var(--evo-navy);
  }
  .evo-viz-head .evo-reveal-word{opacity:1;transform:none;transition:none;}
}
.evo-viz-eyebrow{
  display:block;font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--evo-slate);margin-bottom:10px;
}
.evo-viz-head h2{
  font-family:var(--evo-serif);font-size:clamp(34px,4.4vw,52px);font-weight:700;
  line-height:1.12;margin:0 0 14px;
  /* gradient-clipped text: solid navy until the gold band sweeps through
     (evo-viz-sheen, added to the .evo-revealed animation above). Safe to
     clip because evo-reveal.js only word-splits the <p>, never the h2. */
  background:linear-gradient(100deg,var(--evo-navy) 42%,#B9905A 50%,var(--evo-navy) 58%);
  background-size:280% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.evo-viz-head h2 i{font-weight:500;}
.evo-viz-head p{font-size:17px;line-height:1.65;margin:0 auto;max-width:56ch;}

/* Launcher button + modal shell. The tool itself lives in the <dialog>. */
.evo-viz button.evo-viz-open{
  margin-top:26px;border:0;border-radius:10px;padding:16px 34px;cursor:pointer;
  font:600 17px/1.2 var(--evo-sans);color:var(--evo-navy);background:var(--evo-gold);
  transition:background-color .2s,color .2s,transform .15s;
}
.evo-viz button.evo-viz-open:hover,.evo-viz button.evo-viz-open:focus{
  background:var(--evo-gold-deep);color:#fff;transform:translateY(-1px);
}
.evo-viz-modal{
  border:0;border-radius:var(--evo-block-radius,22px);padding:0;background:#F7F5F2;
  width:min(1180px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 48px);
  box-shadow:0 24px 70px rgba(16,24,40,.35);
}
.evo-viz-modal::backdrop{background:rgba(17,24,39,.55);}
.evo-viz-modal-body{position:relative;padding:34px 30px 30px;}
.evo-viz button.evo-viz-close,.evo-viz button.evo-viz-close:hover,.evo-viz button.evo-viz-close:focus{
  position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;
  display:grid;place-items:center;padding:0;cursor:pointer;background:#fff;color:var(--evo-navy);
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.evo-viz-close svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}
.evo-viz button.evo-viz-close:hover{background:var(--evo-navy);color:#fff;}

.evo-viz-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start;
}
.evo-viz-card{
  background:#fff;border:1px solid var(--evo-line);border-radius:var(--evo-block-radius,22px);
  box-shadow:var(--evo-shadow);padding:30px;
}

/* Step labels */
.evo-viz-step{
  display:flex;align-items:center;gap:12px;font-weight:600;color:var(--evo-navy);
  font-size:16px;margin:0 0 12px;
}
.evo-viz-step + .evo-viz-step{margin-top:26px;}
.evo-viz-step-num{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--evo-gold);color:var(--evo-navy);font-size:13px;font-weight:700;
}

/* Dropzone */
.evo-viz-drop{
  position:relative;display:block;border:2px dashed #CFD5DC;border-radius:18px;
  background:#FAFAF8;min-height:260px;overflow:hidden;cursor:pointer;
  transition:border-color .2s,background-color .2s;
}
.evo-viz-drop:hover,.evo-viz-drop.is-over{border-color:var(--evo-gold-deep);background:#FFFDF8;}
.evo-viz-drop.has-photo{border-style:solid;border-color:var(--evo-line);background:#111;}
.evo-viz-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.evo-viz-drop-prompt{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:24px;pointer-events:none;gap:6px;
}
.evo-viz-drop-prompt svg{width:40px;height:40px;fill:none;stroke:var(--evo-slate);stroke-width:1.6;margin-bottom:6px;}
.evo-viz-drop-prompt strong{color:var(--evo-navy);font-size:16px;}
.evo-viz-drop-prompt span{font-size:14px;color:var(--evo-slate);}
.evo-viz-drop-preview{display:block;width:100%;max-height:420px;object-fit:contain;pointer-events:none;}
.evo-viz button.evo-viz-change,.evo-viz button.evo-viz-change:hover,.evo-viz button.evo-viz-change:focus{
  position:absolute;right:12px;bottom:12px;z-index:2;border:0;border-radius:999px;
  padding:8px 14px;font:600 13px/1 var(--evo-sans);color:var(--evo-navy);background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.18);cursor:pointer;
}
.evo-viz-tips{margin:10px 0 0;padding:0;list-style:none;font-size:13px;color:var(--evo-slate);display:flex;flex-wrap:wrap;gap:6px 16px;}
.evo-viz-tips li::before{content:"✓";color:var(--evo-gold-deep);margin-right:6px;font-weight:700;}

/* Amount slider */
.evo-viz-amount{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.evo-viz-lbs-value{font-family:var(--evo-serif);font-size:38px;font-weight:700;color:var(--evo-navy);line-height:1;}
.evo-viz input[type=range]{
  --fill:50%;width:100%;height:6px;margin:16px 0 6px;appearance:none;-webkit-appearance:none;
  border-radius:999px;outline:none;
  background:linear-gradient(90deg,var(--evo-gold) var(--fill),#E4E7EB var(--fill));
}
.evo-viz input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;
  border:3px solid var(--evo-gold-deep);box-shadow:0 2px 8px rgba(16,24,40,.2);cursor:pointer;
}
.evo-viz input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--evo-gold-deep);cursor:pointer;
}
.evo-viz input[type=range]:focus-visible{box-shadow:0 0 0 4px rgba(210,175,118,.35);}
.evo-viz-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--evo-slate);}

.evo-viz-optional{margin-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;}
.evo-viz-optional label{color:var(--evo-navy);font-weight:600;}
.evo-viz-optional input{
  width:110px;padding:10px 12px;border:1px solid #CFD5DC;border-radius:10px;font:inherit;color:var(--evo-ink);
}
.evo-viz-optional small{flex-basis:100%;color:var(--evo-slate);}

/* Consent + button */
.evo-viz-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.55;margin:24px 0 18px;color:var(--evo-body-text);}
.evo-viz-consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--evo-gold-deep);flex:0 0 auto;}
.evo-viz-consent a{color:var(--evo-navy);text-decoration:underline;}
.evo-viz button.evo-viz-submit{
  width:100%;border:0;border-radius:10px;padding:16px 24px;cursor:pointer;
  font:600 17px/1.2 var(--evo-sans);color:var(--evo-navy);background:var(--evo-gold);
  transition:background-color .2s,transform .15s,opacity .2s;
}
.evo-viz button.evo-viz-submit:hover:not(:disabled),.evo-viz button.evo-viz-submit:focus:not(:disabled){background:var(--evo-gold-deep);color:#fff;transform:translateY(-1px);}
.evo-viz button.evo-viz-submit:disabled{opacity:.5;cursor:not-allowed;}
.evo-viz-status{min-height:22px;margin:12px 0 0;font-size:14px;text-align:center;}
.evo-viz-status.is-error{color:#A83A2C;}
.evo-viz-status.is-busy{color:var(--evo-slate);}
.evo-viz-status.is-busy::before{
  content:"";display:inline-block;width:14px;height:14px;margin:0 8px -2px 0;border-radius:50%;
  border:2px solid #CFD5DC;border-top-color:var(--evo-gold-deep);animation:evo-viz-spin .8s linear infinite;
}
@keyframes evo-viz-spin{to{transform:rotate(360deg);}}

/* Result column: placeholder before a result exists */
.evo-viz-placeholder{
  min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;color:var(--evo-slate);font-size:15px;
}
.evo-viz-placeholder svg{width:56px;height:56px;fill:none;stroke:#CFD5DC;stroke-width:1.4;}
.evo-viz.has-result .evo-viz-placeholder{display:none;}

/* Before / after compare.
   Two stacked panes; in slider mode the AFTER pane is clipped at --split and
   dragging anywhere on the photo moves the split (pointer events in JS). The
   range input is kept for keyboard users only. Side-by-side mode lays the two
   panes out next to each other with no clipping. */
.evo-viz-view-toggle{
  display:inline-flex;margin:0 auto 14px;padding:3px;border-radius:999px;background:#EEF0F3;
  position:relative;left:50%;transform:translateX(-50%);
}
.evo-viz .evo-viz-view-toggle button{
  border:0;border-radius:999px;padding:8px 16px;cursor:pointer;background:transparent;
  font:600 13px/1 var(--evo-sans);color:var(--evo-slate);transition:background-color .2s,color .2s;
}
.evo-viz .evo-viz-view-toggle button:hover,.evo-viz .evo-viz-view-toggle button:focus{background:#E2E5EA;color:var(--evo-navy);}
.evo-viz .evo-viz-view-toggle button.is-active,.evo-viz .evo-viz-view-toggle button.is-active:hover{background:var(--evo-navy);color:#fff;}

.evo-viz-compare{
  --split:50%;position:relative;border-radius:16px;overflow:hidden;background:#111;
  aspect-ratio:4/5;max-height:560px;user-select:none;-webkit-user-select:none;touch-action:none;cursor:ew-resize;
}
.evo-viz-pane{position:absolute;inset:0;}
.evo-viz-pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;}
.evo-viz-pane-after{clip-path:inset(0 0 0 var(--split));}
.evo-viz-compare-handle{
  position:absolute;top:0;bottom:0;left:var(--split);width:0;pointer-events:none;
}
.evo-viz-compare-handle::before{
  content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.evo-viz-compare-handle span{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.35);
}
/* Two chevrons drawn from borders — no icon font. */
.evo-viz-compare-handle span::before,.evo-viz-compare-handle span::after{
  content:"";position:absolute;top:50%;width:8px;height:8px;border-top:2.5px solid var(--evo-navy);border-left:2.5px solid var(--evo-navy);
}
.evo-viz-compare-handle span::before{left:12px;transform:translateY(-50%) rotate(-45deg);}
.evo-viz-compare-handle span::after{right:12px;transform:translateY(-50%) rotate(135deg);}
.evo-viz-compare.is-dragging .evo-viz-compare-handle span{transform:translate(-50%,-50%) scale(1.08);}

/* Keyboard-only range: visually hidden but focusable. */
.evo-viz-compare-range{
  position:absolute;left:0;bottom:0;width:100%;height:1px;margin:0;opacity:0;pointer-events:none;
}
.evo-viz-compare-range:focus-visible ~ .evo-viz-compare-handle span{outline:3px solid var(--evo-gold);outline-offset:2px;}

.evo-viz-tag{
  position:absolute;top:12px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--evo-navy);pointer-events:none;
}
.evo-viz-tag-before{left:12px;}
.evo-viz-tag-after{right:12px;background:var(--evo-gold);}
.evo-viz-hint{margin:10px 0 0;text-align:center;font-size:13px;color:var(--evo-slate);}

/* Side-by-side mode */
.evo-viz-compare[data-view="side"]{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;aspect-ratio:auto;max-height:none;cursor:default;background:transparent;
}
.evo-viz-compare[data-view="side"] .evo-viz-pane{position:relative;inset:auto;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#111;clip-path:none;}
.evo-viz-compare[data-view="side"] .evo-viz-compare-handle,
.evo-viz-compare[data-view="side"] .evo-viz-compare-range{display:none;}
.evo-viz-compare[data-view="side"] .evo-viz-tag{left:10px;right:auto;}
.evo-viz-compare[data-view="side"] ~ .evo-viz-hint{visibility:hidden;}

.evo-viz-result-caption{margin:14px 0 0;text-align:center;font-size:14px;color:var(--evo-slate);}
.evo-viz-result-cta{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.evo-viz-result-cta .evo-viz-book{
  display:inline-block;padding:14px 26px;border-radius:10px;background:var(--evo-navy);color:#fff;
  font:600 15px/1.2 var(--evo-sans);text-decoration:none;transition:background-color .2s,transform .15s;
}
.evo-viz-result-cta .evo-viz-book:hover{background:var(--evo-slate);color:#fff;transform:translateY(-1px);}
.evo-viz button.evo-viz-reset{
  background:none;border:1px solid #CFD5DC;border-radius:10px;padding:14px 20px;cursor:pointer;
  font:600 15px/1.2 var(--evo-sans);color:var(--evo-navy);
}
.evo-viz button.evo-viz-reset:hover,.evo-viz button.evo-viz-reset:focus{background:#F3F4F6;color:var(--evo-navy);border-color:var(--evo-slate);}

/* Disclaimer */
.evo-viz-disclaimer{
  max-width:86ch;margin:34px auto 0;font-size:12.5px;line-height:1.6;color:var(--evo-slate);text-align:center;
}

.evo-viz-turnstile:empty{display:none;}
.evo-viz-turnstile{margin:0 0 14px;}

@media(max-width:900px){
  .evo-viz{padding:64px 18px;}
  .evo-viz-grid{grid-template-columns:1fr;}
  .evo-viz-card{padding:22px;}
  .evo-viz-placeholder{min-height:160px;}
  .evo-viz-modal{width:calc(100vw - 16px);max-height:calc(100vh - 16px);}
  .evo-viz-modal-body{padding:56px 16px 22px;}
  .evo-viz-head{padding:46px 26px 42px;}
}