/* ========================================================================
   fizesan.ro — contact flow (modal quiz + thank you)
   ======================================================================== */

.cx{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(0px,3vw,40px);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.cx.is-open{ opacity:1; visibility:visible; }

.cx__veil{
  position:absolute; inset:0;
  background:rgba(2,3,6,.82);
  -webkit-backdrop-filter:blur(14px) saturate(.9);
          backdrop-filter:blur(14px) saturate(.9);
}

.cx__panel{
  position:relative;
  width:min(760px, 100%);
  max-height:min(94vh, 900px);
  display:flex; flex-direction:column;
  background:linear-gradient(168deg, #0C0E15 0%, #06070B 62%);
  border:1px solid var(--line);
  box-shadow:0 40px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(216,162,74,.06);
  transform:translateY(26px) scale(.985);
  opacity:0;
  transition:transform .6s var(--ease), opacity .5s var(--ease);
  overflow:hidden;
}
.cx.is-open .cx__panel{ transform:none; opacity:1; }

/* ---------- head ---------- */

.cx__head{
  display:flex; align-items:center; gap:16px;
  padding:clamp(16px,2.4vw,22px) clamp(18px,3vw,32px);
  border-bottom:1px solid var(--line-soft);
}
.cx__back{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line-soft); color:var(--paper-dim);
  transition:opacity .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.cx__back:hover{ border-color:var(--gold); color:var(--gold); }
.cx__back[hidden]{ display:none; }

.cx__step{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--paper-faint); white-space:nowrap;
}
.cx__step b{ color:var(--gold); font-weight:400; }

.cx__track{ flex:1; height:1px; background:var(--line); position:relative; }
.cx__bar{
  position:absolute; inset:0; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  transition:transform .6s var(--ease);
}

.cx__close{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  color:var(--paper-faint);
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.cx__close:hover{ color:var(--gold); transform:rotate(90deg); }

/* ---------- body ---------- */

.cx__body{
  padding:clamp(22px,4vw,44px) clamp(18px,3vw,32px) clamp(24px,4vw,40px);
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(216,162,74,.35) transparent;
}
.cx__body::-webkit-scrollbar{ width:6px; height:0; }
.cx__body::-webkit-scrollbar-track{ background:transparent; }
.cx__body::-webkit-scrollbar-thumb{ background:rgba(216,162,74,.3); border-radius:3px; }

.cx__eyebrow{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold); margin:0 0 14px;
}

.cx__q{
  font-family:var(--f-display); font-weight:800; font-stretch:108%;
  font-size:clamp(22px,3vw,36px); line-height:1.08; letter-spacing:-.02em;
  color:var(--paper); margin:0; text-wrap:balance;
}
.cx__hint{
  font-size:clamp(13px,1.1vw,15px); color:var(--paper-faint);
  margin:12px 0 0; max-width:52ch;
}

/* ---------- options ---------- */

.cx__opts{ display:grid; gap:10px; margin-top:clamp(20px,3vw,30px); }

.cx__opt{
  position:relative; display:flex; align-items:center; gap:16px;
  width:100%; text-align:left;
  padding:clamp(14px,1.8vw,18px) clamp(16px,2vw,22px);
  border:1px solid var(--line-soft);
  color:var(--paper);
  font-size:clamp(14px,1.15vw,16.5px);
  overflow:hidden; isolation:isolate;
  transition:border-color .35s var(--ease), color .35s var(--ease),
             transform .35s var(--ease);
}
.cx__opt::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(216,162,74,.16), rgba(216,162,74,.03));
  transform:translateX(-101%);
  transition:transform .5s var(--ease);
}
.cx__opt:hover, .cx__opt:focus-visible{
  border-color:rgba(216,162,74,.55); outline:none; transform:translateX(3px);
}
.cx__opt:hover::before, .cx__opt:focus-visible::before{ transform:none; }

.cx__opt i{
  font-family:var(--f-mono); font-style:normal;
  font-size:10px; letter-spacing:.16em; color:var(--gold);
  width:2ch; flex:none;
}
.cx__opt span{ flex:1; }
.cx__opt svg{ opacity:0; transform:translateX(-6px); transition:all .35s var(--ease); flex:none; }
.cx__opt:hover svg, .cx__opt:focus-visible svg{ opacity:1; transform:none; }

.cx__opt.is-picked{
  border-color:var(--gold); color:var(--gold-hot);
}
.cx__opt.is-picked::before{ transform:none; }

/* ---------- details form ---------- */

.cx__fields{ display:grid; gap:14px; margin-top:clamp(20px,3vw,28px); }
@media (min-width:620px){
  .cx__fields{ grid-template-columns:1fr 1fr; }
  .cx__fields .cx__f--wide{ grid-column:1 / -1; }
}

.cx__f{ position:relative; display:block; }
.cx__f > span{
  display:block; margin-bottom:7px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--paper-faint);
}
.cx__f > span em{ font-style:normal; color:var(--gold-deep); }

.cx__f input, .cx__f textarea{
  width:100%; padding:13px 15px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line-soft);
  color:var(--paper); font:inherit; font-size:15px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.cx__f textarea{ min-height:104px; resize:vertical; }
.cx__f input:focus, .cx__f textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(216,162,74,.05);
}
.cx__f input::placeholder, .cx__f textarea::placeholder{ color:rgba(239,234,225,.26); }
.cx__f.is-bad input{ border-color:#B4443A; }

.cx__err{
  margin:12px 0 0; min-height:1.2em;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#D9705F;
}

.cx__send{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  margin-top:clamp(18px,2.5vw,26px);
}
.cx__note{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-faint);
}

/* ---------- step transitions ---------- */

.cx__view{ animation:cxIn .5s var(--ease) both; }
.cx__view.is-out{ animation:cxOut .28s var(--ease) both; }
@keyframes cxIn { from{ opacity:0; transform:translateX(22px); } to{ opacity:1; transform:none; } }
@keyframes cxOut{ to  { opacity:0; transform:translateX(-18px); } }

@media (prefers-reduced-motion:reduce){
  .cx__view, .cx__view.is-out{ animation:none; }
}

/* ======================================================== thank you ===== */

.cx__thanks{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(30px,5vw,52px) clamp(20px,4vw,52px) clamp(26px,4vw,44px);
  min-height:clamp(360px, 52vh, 540px);
  overflow:hidden;
  --burst: 38%;                     /* where the seal sits, vertically */
}
.cx__spark{ position:absolute; inset:0; pointer-events:none; z-index:3; }

/* the warm bloom behind everything */
.cx__glow{
  position:absolute; left:50%; top:var(--burst); width:min(130%,820px); aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.3); opacity:0;
  background:radial-gradient(circle, rgba(216,162,74,.34), rgba(216,162,74,.07) 45%, transparent 66%);
  animation:cxGlow 2.8s var(--ease) .04s forwards;
  pointer-events:none;
}
@keyframes cxGlow{
  34%{ opacity:1; transform:translate(-50%,-50%) scale(1.02); }
  100%{ opacity:.46; transform:translate(-50%,-50%) scale(1.18); }
}

/* slow spinning god-rays */
.cx__rays{
  position:absolute; left:50%; top:var(--burst);
  width:min(150%,900px); aspect-ratio:1; pointer-events:none;
  transform:translate(-50%,-50%) rotate(0deg) scale(.55); opacity:0;
  background:conic-gradient(from 0deg,
    rgba(216,162,74,.16) 0deg 3deg, transparent 3deg 30deg,
    rgba(216,162,74,.11) 30deg 32deg, transparent 32deg 60deg,
    rgba(216,162,74,.16) 60deg 64deg, transparent 64deg 90deg,
    rgba(216,162,74,.09) 90deg 92deg, transparent 92deg 120deg,
    rgba(216,162,74,.16) 120deg 124deg, transparent 124deg 150deg,
    rgba(216,162,74,.11) 150deg 152deg, transparent 152deg 180deg,
    rgba(216,162,74,.16) 180deg 183deg, transparent 183deg 210deg,
    rgba(216,162,74,.09) 210deg 213deg, transparent 213deg 240deg,
    rgba(216,162,74,.16) 240deg 244deg, transparent 244deg 270deg,
    rgba(216,162,74,.11) 270deg 272deg, transparent 272deg 300deg,
    rgba(216,162,74,.16) 300deg 304deg, transparent 304deg 330deg,
    rgba(216,162,74,.09) 330deg 332deg, transparent 332deg 360deg);
  -webkit-mask-image:radial-gradient(circle, #000 12%, rgba(0,0,0,.55) 40%, transparent 70%);
          mask-image:radial-gradient(circle, #000 12%, rgba(0,0,0,.55) 40%, transparent 70%);
  filter:blur(9px);
  animation:cxRays 26s linear .25s infinite, cxRaysIn 1.5s var(--ease-io) .25s forwards;
}
@keyframes cxRaysIn{ to{ opacity:.5; transform:translate(-50%,-50%) rotate(14deg) scale(1); } }
@keyframes cxRays{ to{ filter:hue-rotate(0deg); } }

/* three shockwave rings, punched out from the seal */
.cx__waves{ position:absolute; inset:0; pointer-events:none; }
.cx__waves i{
  position:absolute; left:50%; top:var(--burst);
  width:96px; height:96px; margin:-48px 0 0 -48px;
  border:1.5px solid rgba(216,162,74,.55); border-radius:50%;
  opacity:0; transform:scale(.35);
  animation:cxWave 1.9s cubic-bezier(.16,.84,.32,1) both;
}
.cx__waves i:nth-child(1){ animation-delay:.62s; }
.cx__waves i:nth-child(2){ animation-delay:.80s; }
.cx__waves i:nth-child(3){ animation-delay:.98s; border-width:1px; }
@keyframes cxWave{
  0%  { opacity:0;  transform:scale(.35); }
  12% { opacity:.9; }
  100%{ opacity:0;  transform:scale(9); }
}

/* one specular sweep across the whole panel */
.cx__shine{
  position:absolute; inset:-40% -60%; pointer-events:none; z-index:4;
  background:linear-gradient(74deg, transparent 34%,
    rgba(255,231,176,.05) 46%, rgba(255,246,225,.11) 50%,
    rgba(255,231,176,.05) 54%, transparent 66%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  filter:blur(6px);
  mix-blend-mode:screen;
  transform:translateX(-120%);
  animation:cxShine 1.6s cubic-bezier(.3,.7,.2,1) .52s both;
}
@keyframes cxShine{ to{ transform:translateX(120%); } }

/* -------- the seal -------- */

.cx__seal{
  position:relative; z-index:5;
  width:96px; height:96px; margin-bottom:clamp(18px,3vw,28px);
  animation:cxSealPop 1.05s cubic-bezier(.2,1.5,.35,1) .58s both;
}
@keyframes cxSealPop{
  0%  { transform:scale(1); }
  22% { transform:scale(1.22); }
  55% { transform:scale(.96); }
  100%{ transform:scale(1); }
}
.cx__seal svg{ width:100%; height:100%; overflow:visible; }
.cx__flare{
  position:absolute; left:50%; top:50%; width:230px; height:230px;
  margin:-115px 0 0 -115px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,240,205,.95), rgba(216,162,74,.5) 26%, transparent 62%);
  opacity:0; transform:scale(.2);
  animation:cxFlare .9s var(--ease) .6s both;
}
@keyframes cxFlare{
  0%  { opacity:0;   transform:scale(.2); }
  16% { opacity:.95; transform:scale(1);  }
  100%{ opacity:0;   transform:scale(1.6); }
}
.cx__seal .ring{
  fill:none; stroke:var(--gold); stroke-width:1.4;
  stroke-dasharray:302; stroke-dashoffset:302;
  animation:cxDraw .95s var(--ease-io) .08s forwards;
}
.cx__seal .ring2{
  fill:none; stroke:rgba(216,162,74,.3); stroke-width:1;
  transform-origin:50% 50%;
  animation:cxPulse 2.4s var(--ease-io) 1.1s infinite;
}
.cx__seal .tick{
  fill:none; stroke:var(--paper); stroke-width:3.4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:48; stroke-dashoffset:48;
  animation:cxDraw .42s var(--ease-io) .62s forwards;
}
@keyframes cxDraw{ to{ stroke-dashoffset:0; } }
@keyframes cxPulse{
  0%{ transform:scale(1); opacity:.55; }
  70%{ transform:scale(1.5); opacity:0; }
  100%{ transform:scale(1.5); opacity:0; }
}

/* -------- the word -------- */

.cx__thanks h3{
  position:relative; z-index:5;
  font-family:var(--f-display); font-weight:800; font-stretch:112%;
  text-transform:uppercase; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(30px,5.4vw,62px);
  margin:0; color:var(--paper);
  perspective:600px;
}
.cx__thanks h3 b{
  color:var(--gold); font-weight:inherit;
  opacity:0; display:inline-block;
  animation:cxUp .85s var(--ease) 1.06s both;
}
.cx__thanks h3 span{
  display:inline-block; opacity:0;
  transform:translateY(.5em) rotateX(-82deg) scale(.86);
  filter:blur(7px);
  transform-origin:50% 100%;
  animation:cxLetter .82s cubic-bezier(.18,1.1,.3,1) both;
}
@keyframes cxLetter{
  60% { filter:blur(0); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
/* a light sweep that runs across the finished word */
.cx__thanks h3::after{
  content:''; position:absolute; inset:-6% -8%;
  pointer-events:none;
  background:linear-gradient(76deg, transparent 38%,
    rgba(255,240,205,.10) 46%, rgba(255,248,228,.30) 50%,
    rgba(255,240,205,.10) 54%, transparent 62%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  filter:blur(4px);
  transform:translateX(-130%);
  animation:cxWordSweep 1.25s cubic-bezier(.34,.72,.2,1) 1.22s both;
  mix-blend-mode:screen;
}
@keyframes cxWordSweep{ to{ transform:translateX(130%); } }

.cx__thanks p{
  position:relative; z-index:5;
  margin:clamp(14px,2vw,20px) 0 0; max-width:46ch;
  color:var(--paper-dim); font-size:clamp(14px,1.2vw,17px); line-height:1.6;
  opacity:0; animation:cxUp .85s var(--ease) 1.38s both;
}
.cx__thanks .cx__actions{
  position:relative; z-index:5;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:clamp(24px,4vw,38px);
}
.cx__thanks .cx__actions > *{
  opacity:0; animation:cxSpring .9s cubic-bezier(.2,1.35,.35,1) both;
}
.cx__thanks .cx__actions > *:nth-child(1){ animation-delay:1.58s; }
.cx__thanks .cx__actions > *:nth-child(2){ animation-delay:1.70s; }
@keyframes cxSpring{
  from{ opacity:0; transform:translateY(20px) scale(.94); }
  to  { opacity:1; transform:none; }
}
.cx__thanks .cx__small{
  position:relative; z-index:5;
  margin-top:clamp(18px,3vw,26px);
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper-faint);
  opacity:0; animation:cxUp .85s var(--ease) 1.9s both;
}
@keyframes cxUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.btn--wa{ border-color:#25D366; color:#5BE58C; }
.btn--wa::before{ background:#25D366; }
.btn--wa:hover{ color:#04220F; border-color:#25D366; }

@media (prefers-reduced-motion:reduce){
  .cx__glow, .cx__seal, .cx__seal .ring, .cx__seal .ring2, .cx__seal .tick,
  .cx__thanks h3 span, .cx__thanks h3 b, .cx__thanks p,
  .cx__thanks .cx__actions > *, .cx__thanks .cx__small{
    animation:none; opacity:1; transform:none; stroke-dashoffset:0; filter:none;
  }
  .cx__rays, .cx__waves, .cx__shine, .cx__flare, .cx__thanks h3::after{ display:none; }
}

/* ---------- small screens ---------- */

@media (max-width:620px){
  .cx{ padding:0; }
  .cx__panel{ width:100%; max-height:100dvh; height:100dvh; border:0; }
  .cx__q{ font-size:clamp(21px,6.4vw,28px); }
  .cx__opt{ font-size:14.5px; min-height:56px; }
  /* iOS zooms the whole page when a focused field is under 16px */
  .cx__f input, .cx__f textarea{ font-size:16px; }
  .cx__close, .cx__back{ width:44px; height:44px; }

  /* the celebration should own the whole screen, not float in the top half */
  .cx__body{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
  .cx__body > .cx__view{ flex:1 1 auto; }
  .cx__thanks{
    margin:calc(-1 * clamp(22px,4vw,44px)) calc(-1 * clamp(18px,3vw,32px))
           calc(-1 * clamp(24px,4vw,40px));
    min-height:0;
  }
}

body.cx-locked{ overflow:hidden; }