/* ═══════════════════════════════════════════════
   FIRST-VISIT POPUP — scratch card
   Email unlocks the card; scratching reveals the
   discount. Reuses the site's existing tokens and
   component patterns rather than inventing new ones:
   the stat-number treatment from the certs page, the
   solid-pill button from the certs tabs, the thin-
   underline button from the "Затвори"/back links.
   ═══════════════════════════════════════════════ */

.popup-overlay{
  position:fixed; inset:0; z-index:500;
  display:grid; place-items:center; padding:24px;
  background:rgba(43,28,30,.38);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; visibility:hidden;
  /* closed = invisible AND out of the tab order / screen reader; visibility
     switches at the end of the fade out and the start of the fade in */
  transition:opacity .45s var(--ease), visibility .45s;
}
.popup-overlay.is-on{opacity:1; pointer-events:auto; visibility:visible}

.popup-card{
  position:relative; width:min(400px,100%);
  padding:34px 30px 30px;
  background:linear-gradient(165deg, rgba(255,255,255,.94), rgba(226,178,170,.34)), var(--cream);
  border:1px solid rgba(136,1,42,.10);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(43,28,30,.28);
  text-align:center;
  transform:translateY(18px) scale(.97);
  transition:transform .5s var(--ease);
}
.popup-overlay.is-on .popup-card{transform:none}

.popup-close{
  position:absolute; top:9px; right:9px;
  width:40px; height:40px; display:grid; place-items:center;
  appearance:none; border:0; background:none; cursor:pointer;
  color:var(--ink-soft); font-size:18px; line-height:1;
  border-radius:50%; transition:background .25s, color .25s;
}
.popup-close:hover{background:rgba(136,1,42,.08); color:var(--wine)}

.popup-eyebrow{
  margin:0 0 8px; font:600 11px/1 var(--sans);
  letter-spacing:.26em; text-transform:uppercase; color:var(--wine);
}
.popup-title{
  margin:0 0 10px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(22px,4vw,27px); color:var(--wine); line-height:1.2;
}
.popup-sub{
  margin:0 0 22px; color:var(--ink-soft);
  font-size:13.5px; line-height:1.6;
}

/* ── step 1: email ── */
.popup-form{display:flex; flex-direction:column; gap:12px}
.popup-input{
  width:100%; padding:13px 16px; box-sizing:border-box;
  background:rgba(255,255,255,.7); color:var(--ink);
  border:1px solid rgba(136,1,42,.18); border-radius:12px;
  font:400 14px/1 var(--sans);
  transition:border-color .25s;
}
.popup-input::placeholder{color:var(--ink-soft); opacity:.7}
.popup-input:focus{border-color:var(--wine)}
.popup-input:focus-visible{outline:2px solid var(--wine); outline-offset:2px; border-color:var(--wine)}

/* the one solid/filled button on the site — same pill treatment already
   used for the active certs-tab, reused here as the primary CTA */
.popup-btn{
  appearance:none; cursor:pointer; width:100%;
  background:var(--wine); color:#fdf3f0; border:1px solid var(--wine);
  border-radius:999px; padding:13px 20px;
  font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  transition:background .25s, transform .2s;
}
.popup-btn:hover{background:var(--wine-soft); border-color:var(--wine-soft)}
.popup-btn:active{transform:scale(.98)}
/* consent — unticked by default, and it has to stay that way: a pre-ticked
   box is not consent under GDPR. The privacy link opens in a new tab so a
   half-filled form is never lost. */
.popup-consent{
  display:flex; align-items:flex-start; gap:9px;
  font:400 12px/1.45 var(--sans); color:var(--ink-soft);
  text-align:left; cursor:pointer;
}
.popup-consent input{
  flex:0 0 auto; width:20px; height:20px; margin:0;
  accent-color:var(--wine); cursor:pointer;
}
.popup-consent a{color:var(--wine); text-underline-offset:2px}
.popup-consent input:focus-visible{outline:2px solid var(--wine); outline-offset:2px}

.popup-error{
  margin:0; min-height:1.2em; font-size:12px; color:var(--wine);
  opacity:0; transition:opacity .2s;
}
.popup-error.is-on{opacity:1}

/* ── step 2: scratch ── */
.popup-scratch{
  position:relative; margin-top:4px;
  height:150px; border-radius:14px; overflow:hidden;
  background:var(--blush);
}
.popup-scratch__reveal{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:10px;
}
.popup-scratch__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  cursor:grab; touch-action:none;
  transition:opacity .5s var(--ease);
}
.popup-scratch__canvas.is-cleared{opacity:0; pointer-events:none}

.popup-scratch__hint{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:2; pointer-events:none;
  font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:#fdf3f0; text-align:center; white-space:nowrap;
  opacity:.9;
}

/* the exact number/label pattern from the certs page's stat row —
   same tokens, same look, on purpose */
.popup-reveal__num{
  display:block; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(30px,7vw,40px); color:var(--wine); line-height:1;
}
.popup-reveal__label{
  display:block; margin-top:4px; font:600 11px/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}

.popup-reveal-fallback{display:block; margin:14px auto 0}

.popup-code-row{
  display:none; align-items:center; justify-content:center; gap:10px;
  margin-top:16px;
}
.popup-code-row.is-on{display:flex; text-align:center; max-width:34ch; margin-left:auto; margin-right:auto}
.popup-code{
  font:600 14px/1 var(--sans); letter-spacing:.08em;
  color:var(--wine); background:rgba(136,1,42,.06);
  padding:8px 12px; border-radius:8px; border:1px dashed rgba(136,1,42,.28);
}
/* the thin-underline text button already used for "Затвори" / back-to-home */
.popup-copy{
  appearance:none; cursor:pointer; background:none;
  color:var(--wine); border:0; border-bottom:1px solid rgba(136,1,42,.3);
  padding:2px 0; font:600 11px/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase;
  transition:color .3s, border-color .3s;
}
.popup-copy:hover{color:var(--wine); border-color:var(--wine)}

.popup-step{display:none}
.popup-step.is-on{display:block}

@media (max-width:480px){
  .popup-card{padding:28px 22px 24px}
  .popup-scratch{height:130px}
}

@media (prefers-reduced-motion:reduce){
  .popup-overlay,.popup-card,.popup-scratch__canvas{transition:none}
}

/* with the cookie bar up (js/popup.js clearCookieBar): scroll inside the
   overlay instead of letting the card run under the bar */
.popup-overlay.is-tight{overflow-y:auto; align-items:start}
.popup-overlay.is-tight .popup-card,.popup-overlay.is-tight .gv{margin:auto 0}

/* ═══ giveaway (js/giveaway.js) ═══
   Built from the hero, not from the scratch card: the near-black room, the
   drifting rose and amber lamps, the backlit wordmark in cream. A QR visitor
   lands in that room, so the card feels like part of it. */
.gv-overlay{background:rgba(10,6,7,.62)}
.gv{
  position:relative; isolation:isolate; overflow:hidden;
  width:min(420px,100%); box-sizing:border-box;
  padding:30px 28px 24px; border-radius:26px;
  background:radial-gradient(120% 80% at 50% 0%, #2a1218 0%, var(--night-2) 45%, var(--night) 100%);
  border:1px solid rgba(255,125,158,.22);
  box-shadow:0 40px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(253,238,235,.08);
  color:#fdeeeb; text-align:center;
  transform:translateY(22px) scale(.96);
  transition:transform .6s var(--ease);
}
.gv-overlay.is-on .gv{transform:none}

.gv__lamp{position:absolute; z-index:-1; border-radius:50%; filter:blur(46px); pointer-events:none}
.gv__lamp--rose{width:260px; height:220px; left:-90px; top:-70px; background:rgba(255,120,155,.40); animation:gvDrift 9s ease-in-out infinite alternate}
.gv__lamp--amber{width:240px; height:200px; right:-100px; bottom:-60px; background:rgba(224,150,92,.30); animation:gvDrift 11s ease-in-out infinite alternate-reverse}
@keyframes gvDrift{to{transform:translate(40px,30px) scale(1.12)}}

.gv__x{
  position:absolute; top:12px; right:12px; width:40px; height:40px;
  display:grid; place-items:center; appearance:none; cursor:pointer;
  border:1px solid rgba(253,238,235,.16); border-radius:50%;
  background:rgba(253,238,235,.04); color:rgba(253,238,235,.8);
  font-size:20px; line-height:1; transition:background .25s, color .25s;
}
.gv__x:hover{background:rgba(253,238,235,.12); color:#fff}

/* the wordmark, backlit like the hero's */
.gv__mark{display:inline-flex; flex-direction:column; align-items:flex-end; margin:2px 0 14px;
  text-shadow:0 0 18px rgba(255,125,158,.75), 0 0 42px rgba(255,125,158,.35)}
.gv__word{font-family:"Abril Fatface",Georgia,serif; font-size:40px; line-height:.92; letter-spacing:-.005em}
.gv__for{font-family:"Parisienne",cursive; font-size:17px; line-height:1; margin-top:-3px; padding-right:3px; color:#ffc9d6}

.gv__eyebrow{display:flex; align-items:center; gap:12px; justify-content:center; margin:0 0 10px;
  font:600 10.5px/1 var(--sans); letter-spacing:.32em; text-transform:uppercase; color:#ffb3c4}
.gv__eyebrow::before,.gv__eyebrow::after{content:''; width:28px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,179,196,.7))}
.gv__eyebrow::after{transform:scaleX(-1)}

.gv__title{margin:0 0 10px; font-family:var(--serif); font-weight:400; font-size:clamp(25px,6.4vw,31px); line-height:1.15; color:#fdeeeb}
.gv__title em{font-style:italic; color:#ff9db4; white-space:nowrap}
.gv__lead{margin:0 auto 20px; max-width:30ch; font:400 13.5px/1.55 var(--sans); color:rgba(253,238,235,.72)}

.gv__steps{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:8px; text-align:left}
.gv__step{display:flex; align-items:center; gap:14px; padding:10px 14px 10px 10px;
  border-radius:16px; background:rgba(253,238,235,.05); border:1px solid rgba(253,238,235,.09)}
.gv__ico{position:relative; flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center;
  border-radius:13px; color:#fdeeeb;
  background:linear-gradient(145deg, rgba(255,125,158,.35), rgba(136,1,42,.55));
  box-shadow:0 0 18px rgba(255,125,158,.25)}
.gv__ico svg{width:22px; height:22px}
.gv__ico b{position:absolute; top:-6px; left:-6px; width:19px; height:19px; display:grid; place-items:center;
  border-radius:50%; background:#fdeeeb; color:var(--wine); font:700 10.5px/1 var(--sans)}
.gv__txt{font:500 14px/1.4 var(--sans); color:#fdeeeb}
.gv__txt strong{font-weight:700; color:#ff9db4}

.gv__go{display:flex; flex-direction:column; gap:10px}
.gv__btn{display:flex; align-items:center; justify-content:center; gap:10px; box-sizing:border-box;
  padding:14px 20px; border-radius:999px; text-decoration:none;
  font:600 11.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:#fff; border:1px solid transparent;
  background:linear-gradient(100deg, #c4335f 0%, var(--wine) 55%, #6a0120 100%);
  box-shadow:0 10px 30px rgba(196,51,95,.38), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .2s, box-shadow .25s, filter .25s}
.gv__btn svg{width:18px; height:18px}
.gv__btn:hover{filter:brightness(1.1); box-shadow:0 12px 36px rgba(196,51,95,.5), inset 0 1px 0 rgba(255,255,255,.18)}
.gv__btn:active{transform:scale(.98)}
.gv__btn--ghost{background:rgba(253,238,235,.04); border-color:rgba(253,238,235,.28); box-shadow:none; color:#fdeeeb}
.gv__btn--ghost:hover{background:rgba(253,238,235,.1); box-shadow:none; filter:none}
.gv .gv__btn:focus-visible,.gv .gv__x:focus-visible,.gv .gv__skip:focus-visible{outline:2px solid #ff9db4; outline-offset:3px}

.gv__skip{display:block; margin:16px auto 0; appearance:none; cursor:pointer; background:none; border:0;
  border-bottom:1px solid rgba(253,238,235,.3); padding:2px 0;
  font:600 10.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:rgba(253,238,235,.7);
  transition:color .25s, border-color .25s}
.gv__skip:hover{color:#fdeeeb; border-color:#fdeeeb}

@media (max-width:380px){
  .gv{padding:26px 18px 20px}
  .gv__word{font-size:34px}
  .gv__txt{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .gv{transition:none}
  .gv__lamp{animation:none}
}