/* ============================================================
   Vinigma popup: newsletter opt-in + welcome code by email.
   Loaded only where inc/popup.php renders it (vg_popup_context()). Uses the site tokens; no new
   colours, no gradients, no glow. Above the nav (8000) and the grain (9000),
   below the skip link (10000).
   ============================================================ */

.vg-popup[hidden],
.vg-popup [hidden]{display:none !important}

/* Fallback scroll lock: used on touch and in reduced-motion, where Lenis is
   either absent or does not own the gesture. popup.js also calls lenis.stop(). */
html.vg-popup-open{overflow:hidden}

.vg-popup{
  position:fixed;inset:0;z-index:9500;
  display:flex;align-items:center;justify-content:center;
  padding:var(--pad);
  color:var(--parchment);
  font-family:var(--font-ui);
}

.vg-popup__backdrop{
  position:absolute;inset:0;
  background:rgba(16,11,14,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .45s var(--ease-out-expo);
  cursor:pointer;
  /* iOS: swallow the gesture instead of scrolling the page behind the sheet.
     Pairs with the body position:fixed lock in popup.js. */
  touch-action:none;
}
.vg-popup.is-open .vg-popup__backdrop{opacity:1}

.vg-popup__dialog{
  position:relative;
  width:100%;max-width:520px;
  max-height:min(88vh,880px);overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(1.5rem,3vw,2.5rem);
  background:var(--wine-ink-2);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  opacity:0;transform:translateY(12px);
  transition:opacity .45s var(--ease-out-expo),transform .45s var(--ease-out-expo);
}
.vg-popup.is-open .vg-popup__dialog{opacity:1;transform:none}

/* ---- Close ---- */
.vg-popup__close{
  position:absolute;top:.75rem;right:.75rem;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--muted);background:transparent;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.vg-popup__close:hover{color:var(--parchment);background:rgba(242,238,231,.06)}
.vg-popup__close svg{width:18px;height:18px}

/* ---- Language switch (top-left, facing the close button) ----
   In flow, not absolute: an absolutely positioned row would sit on top of the
   eyebrow. The negative top margin pulls it into the dialog padding so the
   panels below keep their rhythm, and the padding-right keeps it clear of the
   close button. Small uppercase text, the site's own switcher idiom. */
.vg-popup__langs{
  display:flex;align-items:center;gap:.75rem;
  min-height:26px;margin:-.35rem 0 .55rem;padding-right:2.75rem;
}
.vg-popup__lang{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
  transition:color .3s var(--ease);
}
.vg-popup__lang:hover{color:var(--fg)}
.vg-popup__lang[aria-pressed="true"]{color:var(--fg)}

/* ---- Type ---- */
.vg-popup__eyebrow{
  margin:0 0 .9rem;
  font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--muted);
}
.vg-popup__title{
  margin:0 0 .8rem;
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.05;letter-spacing:-.02em;
  padding-right:2.5rem; /* clear of the close button */
}
.vg-popup__body{
  margin:0 0 1.5rem;
  font-size:.98rem;line-height:var(--lh-body);color:var(--muted);
}
.vg-popup__fine{
  margin:.5rem 0 0;
  font-size:.85rem;line-height:1.5;color:var(--muted);
}

/* ---- Form (field styling comes from .vg-form__* in app.css) ---- */
.vg-popup__form{display:flex;flex-direction:column;gap:1.1rem}
.vg-popup__form .vg-form__consent{font-size:.85rem}
.vg-popup__form .vg-form__consent a{color:var(--parchment);text-decoration:underline;text-underline-offset:.18em}
.vg-popup__form .vg-form__consent a:hover{color:var(--accent)}
.vg-popup__form.is-busy{opacity:.7;pointer-events:none}

.vg-popup__actions{
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  margin-top:.2rem;
}
.vg-popup__actions--inline{margin:.6rem 0 0}
.vg-popup__submit:disabled{opacity:.55;pointer-events:none}

/* Secondary action: an underlined text link, never a second button. */
.vg-popup__link{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:none;padding:0;
  text-decoration:underline;text-underline-offset:.28em;
  transition:color .3s var(--ease);cursor:pointer;
}
.vg-popup__link:hover{color:var(--parchment)}

/* ---- Turnstile (rendered explicitly by popup.js when the dialog opens) ---- */
.vg-popup__turnstile{min-height:65px}
.vg-popup__turnstile:empty{min-height:0}

/* ---- Status lines ---- */
.vg-popup__statuses{margin:0}
.vg-popup__status{margin:0;font-size:.88rem;line-height:1.45}
.vg-popup__status--ok{color:var(--accent)}
.vg-popup__status--err{color:var(--wine-soft)}

/* ---- Offer small print (under the form) ---- */
.vg-popup__small{
  margin:1.25rem 0 0;
  font-size:.74rem;line-height:1.5;color:var(--muted);
}
.vg-popup__small a{color:var(--parchment);text-decoration:underline;text-underline-offset:.18em}
.vg-popup__small a:hover{color:var(--accent)}

/* ---- No-JS confirmation (the ?nl=ok|sub|err return trip) ---- */
.vg-popup-note{
  position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%);
  z-index:9500;max-width:min(92vw,520px);
  display:flex;align-items:center;gap:1.2rem;
  padding:1rem 1.25rem;
  background:var(--wine-ink-2);color:var(--parchment);
  border:1px solid var(--hair);border-radius:var(--radius);
  font-family:var(--font-ui);font-size:.9rem;
}
.vg-popup-note p{margin:0}
.vg-popup-note--ok p{color:var(--parchment)}
.vg-popup-note--err p{color:var(--wine-soft)}
.vg-popup-note__close{
  flex:0 0 auto;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:underline;text-underline-offset:.28em;
}
.vg-popup-note__close:hover{color:var(--parchment)}

/* ---- Mobile: bottom sheet ---- */
@media (max-width:640px){
  .vg-popup{align-items:flex-end;padding:0}
  .vg-popup__dialog{
    max-width:none;max-height:92vh;
    border-radius:var(--radius) var(--radius) 0 0;
    border-left:0;border-right:0;border-bottom:0;
    padding:1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    transform:translateY(24px);
  }
  .vg-popup.is-open .vg-popup__dialog{transform:none}
  .vg-popup__actions{gap:1rem}
  .vg-popup-note{left:.75rem;right:.75rem;bottom:.75rem;transform:none;max-width:none}
}

/* ---- Reduced motion: state changes, no travel ---- */
@media (prefers-reduced-motion:reduce){
  .vg-popup__backdrop,
  .vg-popup__dialog{transition:none}
  .vg-popup__dialog{transform:none}
  .vg-popup.is-open .vg-popup__dialog{transform:none}
}