/* ====================================================================
   EuroMedPartner — Funnel shared styles
   Editorial Line System
   Used by start, quiz, optin, booking + can be imported by website
   ==================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap");

:root{
  /* Palette */
  --emp-red:#C8202F; --emp-red-deep:#7A1A1F; --emp-red-dark:#4E1115;
  --emp-cream:#ECE2DF; --emp-cream-soft:#F5EEEB; --emp-cream-deep:#D9CBC6;
  --emp-gray:#B5B0AD; --emp-ink:#0E0E0E; --emp-ink-soft:#181818;
  --fg:#0E0E0E; --fg-muted:#5a5957; --fg-subtle:#8a8580;
  --rule:rgba(14,14,14,.10);
  --rule-dark:rgba(255,255,255,.12);

  /* Type */
  --font-display:'Montserrat',sans-serif;
  --font-sans:'Work Sans',sans-serif;

  /* Motion — slow, editorial */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:200ms;
  --dur:400ms;
  --dur-slow:800ms;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--font-sans);color:var(--fg);background:#fff;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;max-width:100%}
.funnel-page{overflow-x:clip;max-width:100%}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--emp-red);outline-offset:3px;transition:outline-offset .2s var(--ease)}

/* ============ PREMIUM MOTION LAYER ============
   Applied globally to every funnel page via FunnelPage.tsx wrapper.
   Adds page-mount fade, smoother section entrances, hover micro-interactions,
   premium button shine, refined form field focus, and reduced-motion safety. */

/* Page mount — runs on every funnel route */
.funnel-page{animation:funnelPageIn .7s var(--ease-out) both}
@keyframes funnelPageIn{
  from{opacity:0}
  to{opacity:1}
}

/* Exit animation — toggled by FunnelPage before route change */
.funnel-page.is-leaving{animation:funnelPageOut .35s var(--ease) forwards}
@keyframes funnelPageOut{
  to{opacity:0}
}

/* Auto-reveal — IntersectionObserver flips .is-in */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-stagger="1"]{transition-delay:.08s}
[data-reveal][data-stagger="2"]{transition-delay:.16s}
[data-reveal][data-stagger="3"]{transition-delay:.24s}
[data-reveal][data-stagger="4"]{transition-delay:.32s}
[data-reveal][data-stagger="5"]{transition-delay:.4s}

/* Generic lift on hover — opt-in via .lift, also applied to common cards */
.lift,.choice,.opt-form__submit,.btn--primary,.btn--ink{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.lift:hover,.choice:hover{transform:translateY(-2px);box-shadow:0 14px 32px -18px rgba(14,14,14,.18)}
.lift:active,.choice:active{transform:translateY(0);transition-duration:120ms}

/* Buttons — add diagonal shine + press feedback on top of existing styles */
.btn{transform:translateZ(0);will-change:transform}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transition:left .9s var(--ease-out);pointer-events:none;z-index:0}
.btn:hover::after{left:140%}
.btn:not(:disabled):hover{transform:translateY(-1px)}
.btn:not(:disabled):active{transform:translateY(1px);transition-duration:90ms}
.btn--primary:not(:disabled):hover,.btn--ink:hover{box-shadow:0 18px 38px -20px rgba(200,32,47,.55)}

/* Choice cards — keep existing styling, add a gentle inner lift on key */
.choice .choice__key{will-change:transform}
.choice:hover .choice__key{transform:scale(1.06) rotate(-2deg)}
.choice.is-selected .choice__key{animation:keyPop .45s var(--ease-out)}
@keyframes keyPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* Animated underline removed per request */

/* Form fields — refined focus motion + caret pulse */
.opt-form input,.opt-form select,.opt-form textarea{transition:border-color .3s var(--ease),box-shadow .3s var(--ease),padding-left .3s var(--ease);caret-color:var(--emp-red)}
.opt-form input:focus,.opt-form select:focus,.opt-form textarea:focus{box-shadow:0 1px 0 0 var(--emp-red)}
.opt-form label{transition:color .25s var(--ease)}
.opt-form label:focus-within{color:var(--emp-red)}

/* Sticky bar shadow appears on scroll (toggled via .is-scrolled) */
.funnel-bar,.progress,.ss-bar{transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.funnel-bar.is-scrolled,.progress.is-scrolled,.ss-bar.is-scrolled{box-shadow:0 8px 24px -18px rgba(14,14,14,.18)}

/* Smoother summary panel ambient glow on optin */
.opt-summary::before{animation:ambientDrift 14s var(--ease) infinite alternate}
@keyframes ambientDrift{
  from{transform:translate3d(0,0,0) scale(1);opacity:.95}
  to{transform:translate3d(-6%,4%,0) scale(1.08);opacity:1}
}

/* Reduced motion overrides for the new layer */
@media (prefers-reduced-motion: reduce){
  .funnel-page,.funnel-page.is-leaving{animation:none !important}
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  .btn::after,.opt-summary::before{animation:none !important;transition:none !important}
  .lift:hover,.choice:hover,.btn:not(:disabled):hover{transform:none !important;box-shadow:none !important}
}

/* ============ FUNNEL TOP BAR ============ */
.funnel-bar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--rule)}
.funnel-bar__inner{max-width:1320px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.funnel-bar__logo img{height:34px;width:auto}
.funnel-bar__exit{font:500 11px var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);display:flex;align-items:center;gap:8px;transition:color var(--dur) var(--ease)}
.funnel-bar__exit:hover{color:var(--emp-red)}
.funnel-bar__exit svg{width:14px;height:14px}

/* Quiz progress strip */
.progress{position:sticky;top:0;z-index:51;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--rule)}
.progress__inner{max-width:1320px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:22px}
.progress__logo img{height:26px;width:auto}
.progress__step{font:500 11px var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.progress__step strong{color:var(--emp-ink);font-weight:600}
.progress__track{flex:1;height:2px;background:var(--rule);position:relative;border-radius:1px}
.progress__fill{position:absolute;left:0;top:0;height:100%;background:var(--emp-red);border-radius:1px;transition:width .6s var(--ease-out)}
.progress__back{font:600 11px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;margin:24px 0 0 32px;border:1px solid var(--rule);border-radius:999px;background:#fff;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);cursor:pointer;text-decoration:none}
.progress__back:hover{color:var(--emp-ink);border-color:var(--emp-ink);background:var(--emp-cream,#faf7f2);box-shadow:0 2px 10px rgba(0,0,0,.04)}
.progress__back:hover svg{transform:translateX(-2px)}
.progress__back:active{transform:translateY(1px)}
.progress__back svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font:500 12px/1 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;border-radius:0;transition:all var(--dur) var(--ease);white-space:nowrap;position:relative;overflow:hidden;isolation:isolate}
.btn--primary{background:var(--emp-ink);color:#fff}
.btn--primary::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--emp-red);transition:width var(--dur) var(--ease);z-index:-1}
.btn--primary:hover::before{width:100%}
.btn--primary:disabled{background:var(--emp-cream-deep);color:#fff;cursor:not-allowed}
.btn--primary:disabled::before{display:none}
.btn--ghost{color:var(--emp-ink);border-bottom:1px solid var(--emp-ink);padding:6px 0;text-transform:uppercase;letter-spacing:.18em;font:500 11px var(--font-sans);background:transparent}
.btn--ghost:hover{color:var(--emp-red);border-color:var(--emp-red)}
.btn--ink{background:var(--emp-ink);color:#fff}
.btn--ink:hover{background:var(--emp-red)}
.btn svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.btn:hover svg{transform:translateX(4px)}

/* ============ EDITORIAL TYPOGRAPHY ============ */
.t-display{font-family:var(--font-display);font-weight:200;letter-spacing:-.028em;line-height:.98}
.t-h1{font-family:var(--font-display);font-weight:200;letter-spacing:-.022em;line-height:1.02}
.t-h2{font-family:var(--font-display);font-weight:300;letter-spacing:-.015em;line-height:1.08}
.t-h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.005em;line-height:1.2}
.accent{color:var(--emp-red);font-weight:300}
.eyebrow{font:500 11px var(--font-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--emp-red);display:inline-flex;align-items:center;gap:14px}

/* ============ ANSWER CHOICES ============ */
.choices{display:grid;gap:10px}
.choices--2{grid-template-columns:repeat(2,1fr)}
.choices--3{grid-template-columns:repeat(3,1fr)}
.choices--4{grid-template-columns:repeat(4,1fr)}
.choices--stack{grid-template-columns:1fr}
.choice{display:flex;align-items:center;gap:16px;padding:20px 22px;background:#fff;border:1px solid var(--rule);cursor:pointer;transition:all var(--dur) var(--ease);text-align:left;width:100%;font-family:inherit;position:relative;overflow:hidden}
.choice:hover{border-color:var(--emp-ink);background:var(--emp-cream-soft);padding-left:24px}
.choice.is-selected{border-color:var(--emp-red)}
.choice__key{flex:0 0 30px;height:30px;border:1px solid var(--rule);border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 12px var(--font-sans);color:var(--fg-muted);transition:all var(--dur) var(--ease)}
.choice:hover .choice__key{border-color:var(--emp-ink);color:var(--emp-ink)}
.choice.is-selected .choice__key{background:var(--emp-red);border-color:var(--emp-red);color:#fff}
.choice__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.choice__title{font-family:var(--font-display);font-weight:400;font-size:16px;color:var(--emp-ink);line-height:1.25;letter-spacing:-.003em;display:block}
.choice__sub{font-size:12.5px;color:var(--fg-muted);line-height:1.45;display:block}
.choice__arrow{flex:0 0 18px;color:var(--fg-subtle);transition:all var(--dur) var(--ease)}
.choice__arrow svg{width:16px;height:16px}
.choice:hover .choice__arrow{color:var(--emp-red);transform:translateX(4px)}

/* ============ MARQUEES — slow, editorial ============ */
.marq{position:relative;overflow:hidden;user-select:none}
.marq--ink{background:var(--emp-ink);color:#fff;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.marq--cream{background:var(--emp-cream);color:var(--emp-ink);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.marq__track{display:flex;gap:0;padding:18px 0;animation:marqSlide 48s linear infinite;width:max-content;will-change:transform}
.marq--fast .marq__track{animation-duration:32s}
.marq__item{display:inline-flex;align-items:center;gap:14px;font:500 12px var(--font-sans);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;padding:0 36px}
.marq__item strong{font-family:var(--font-display);font-weight:300;font-size:20px;color:var(--emp-red);letter-spacing:-.005em;text-transform:none}
.marq__sep{display:inline-block;width:4px;height:4px;background:currentColor;opacity:.3;border-radius:50%}
@keyframes marqSlide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ============ EDITORIAL MOTION ============ */
/* Scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.1s}
.reveal[data-d="2"]{transition-delay:.2s}
.reveal[data-d="3"]{transition-delay:.3s}
.reveal[data-d="4"]{transition-delay:.4s}
.reveal[data-d="5"]{transition-delay:.5s}
.reveal[data-d="6"]{transition-delay:.6s}

/* SVG line-drawing animation — applied via .draw + .is-in */
.draw [data-draw]{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.6s var(--ease-out)}
.draw.is-in [data-draw]{stroke-dashoffset:0}
.draw [data-draw][data-d="1"]{transition-delay:.15s}
.draw [data-draw][data-d="2"]{transition-delay:.3s}
.draw [data-draw][data-d="3"]{transition-delay:.45s}
.draw [data-draw][data-d="4"]{transition-delay:.6s}
.draw [data-draw][data-d="5"]{transition-delay:.75s}
.draw [data-draw][data-fill]{fill-opacity:0;transition:fill-opacity 1.2s .6s var(--ease-out)}
.draw.is-in [data-draw][data-fill]{fill-opacity:1}

/* Word-mask hero animation */
.line-mask{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.12em}
.line-mask .word{display:inline-block;transform:translateY(110%);animation:wordIn 1.2s var(--ease-out) forwards}
.line-mask .word.d1{animation-delay:.05s}
.line-mask .word.d2{animation-delay:.15s}
.line-mask .word.d3{animation-delay:.25s}
.line-mask .word.d4{animation-delay:.35s}
.line-mask .word.d5{animation-delay:.45s}
@keyframes wordIn{to{transform:none}}

/* Pulse dot */
.pulse-dot{display:inline-block;width:7px;height:7px;background:var(--emp-red);border-radius:50%;margin-right:10px;position:relative}
.pulse-dot::after{content:"";position:absolute;inset:-4px;border:1px solid var(--emp-red);border-radius:50%;animation:pulseDot 2s ease-out infinite;opacity:0}
@keyframes pulseDot{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.6);opacity:0}}

/* Fade-in helpers (immediate, on load) */
.fade-in{animation:fadeIn .9s var(--ease-out) both}
.fade-in[data-d="1"]{animation-delay:.15s}
.fade-in[data-d="2"]{animation-delay:.3s}
.fade-in[data-d="3"]{animation-delay:.45s}
.fade-in[data-d="4"]{animation-delay:.6s}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Static watermark — used once per section */
.watermark{position:absolute;pointer-events:none;opacity:.05;z-index:0;color:var(--emp-red)}
.watermark--tr{right:-160px;top:-160px;width:420px;height:420px}
.watermark--bl{left:-160px;bottom:-160px;width:420px;height:420px}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal,.line-mask .word,.fade-in,.draw [data-draw],.marq__track{transition:none !important;animation:none !important;opacity:1 !important;transform:none !important;stroke-dashoffset:0 !important}
  .pulse-dot::after{animation:none}
}

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .choices--2,.choices--3,.choices--4{grid-template-columns:1fr}
  .funnel-bar__inner{padding:12px 20px}
  .progress__inner{padding:12px 20px;gap:16px}
  .progress__back{margin-left:20px}
  .progress__logo{display:none}
}

/* Global funnel footer */
.funnel-footer{margin-top:48px;padding:24px 16px;border-top:1px solid rgba(0,0,0,.08);background:transparent}
.funnel-footer__inner{max-width:1200px;margin:0 auto;text-align:center;font-size:12px;line-height:1.5;color:#6b6b6b;letter-spacing:.01em}
.funnel-footer__inner a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.funnel-footer__inner a:hover{color:#000}

/* ============ LEGAL PAGES (Privacy / Cookie Policy) ============ */
.legal-page{min-height:100vh;background:#fafaf7;color:#1a1a1a;font-family:'Inter','Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}
.legal-page__bar{position:sticky;top:0;z-index:10;background:rgba(250,250,247,.92);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(0,0,0,.06)}
.legal-page__bar-inner{max-width:880px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.legal-page__logo img{height:32px;width:auto;display:block}
.legal-page__back{font-size:13px;color:#6b6b6b;text-decoration:none;letter-spacing:.01em;transition:color .2s}
.legal-page__back:hover{color:#000}
.legal-page__main{padding:48px 24px 24px}
.legal-page__article{max-width:760px;margin:0 auto}
.legal-page__title{font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-size:clamp(28px,4vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0 0 8px;color:#0a0a0a}
.legal-page__body{font-size:15px;line-height:1.7;color:#2a2a2a;letter-spacing:.005em}
.legal-page__body h2{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:40px 0 12px;color:#0a0a0a;padding-top:8px;border-top:1px solid rgba(0,0,0,.08)}
.legal-page__body h2:first-child{border-top:none;padding-top:0;margin-top:24px}
.legal-page__body h3{font-size:17px;font-weight:600;margin:28px 0 8px;color:#0a0a0a}
.legal-page__body h4{font-size:15px;font-weight:600;margin:20px 0 6px;color:#1a1a1a}
.legal-page__body p{margin:0 0 14px}
.legal-page__body ul{margin:0 0 16px;padding-left:22px}
.legal-page__body li{margin:0 0 8px}
.legal-page__body a{color:#1a3a8a;text-decoration:underline;text-underline-offset:2px}
.legal-page__body a:hover{color:#000}
.legal-page__body strong{color:#0a0a0a;font-weight:600}
.legal-page__body hr{border:none;border-top:1px solid rgba(0,0,0,.08);margin:32px 0}
.legal-page__body .legal-meta{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:16px 20px;margin:0 0 32px;font-size:14px}
.legal-page__body .legal-meta p{margin:4px 0}
@media (max-width:640px){
  .legal-page__main{padding:32px 16px 16px}
  .legal-page__bar-inner{padding:12px 16px}
}