/* Overlays: age gate, cookie preferences, log in, registration, password reset,
 * mobile menu. Numbers from the state frames (login-modal[50:7],
 * age-gate-modal[50:57], cookie-preferences-modal[50:165],
 * registration-modal[50:80], mobile-open-menu[61:18]).
 */

.overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--color-scrim);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-16);
  overflow-y: auto;
  opacity: 0;
}
.overlay.is-open { opacity: 1; }

.overlay__panel {
  width: 100%; max-width: 480px;
  display: flex; flex-direction: column; gap: var(--space-24);
  padding: var(--space-40);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  margin-block: auto;
}
.overlay__panel--gate,
.overlay__panel--cookie { max-width: 520px; }
.overlay__panel--register { max-width: 580px; }
.overlay__panel--menu { max-width: 390px; padding: 0; gap: 0; }

/* ── modal chrome ─────────────────────────────────────────────────────── */
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 36px; }
.modal-eyebrow {
  display: flex; align-items: center; gap: var(--space-8);
  font-size: var(--fs-3xs); line-height: 14px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em;   /* число из макета */
}
.modal-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: var(--color-lime); flex: none; }
.modal-close {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-size: var(--fs-small); line-height: 18px; font-weight: 600; color: var(--color-ink);
}
.modal-close:hover { background: var(--color-sand); }

.modal-body { display: flex; flex-direction: column; gap: var(--space-12); }
.modal-title {
  font-size: var(--fs-h5); line-height: 40px; font-weight: 800; text-transform: uppercase;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8);
}
.modal-title__mark {
  background: var(--color-violet); color: #fff; border-radius: var(--radius-sm); padding: 4px 10px;
}
.modal-title__badge {
  background: var(--color-lime); color: var(--color-ink); border-radius: var(--radius-sm);
  padding: 4px 10px; font-size: var(--fs-lg); line-height: 23px;
}
.modal-title__tick { width: 16px; height: 24px; border-radius: var(--radius-xs); background: var(--color-violet); }
.modal-text { font-size: var(--fs-small); line-height: 21px; }
.modal-text--muted { color: var(--color-muted); }
.modal-note { font-size: var(--fs-2xs); line-height: 18px; color: var(--color-muted); }
.modal-divider { height: 1px; background: var(--color-border); border: 0; margin: 0; }

.modal-form { display: flex; flex-direction: column; gap: var(--space-16); }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
.form-row--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }

.field__reveal { position: relative; display: flex; align-items: center; }
.field__reveal input { padding-right: 64px; }
.field__toggle {
  position: absolute; right: var(--space-14);
  font-size: var(--fs-3xs); line-height: 14px; font-weight: 800;
  text-transform: uppercase; color: var(--color-violet);
  /* 12/14 leaves a 36×14 control. The field around it is tall enough, so the
     target grows to 24 without moving the label (WCAG 2.2 AA, 2.5.8). */
  min-height: 24px; display: inline-flex; align-items: center;
}
.field__toggle:hover { color: var(--color-ink); }

.consent {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-24); border-radius: var(--radius-sm);
  background: #f5f3ff;
}
.consent a { font-weight: 700; color: var(--color-violet); }

.modal-actions { display: flex; flex-direction: column; gap: var(--space-16); }
.modal-actions--row { flex-direction: row; gap: var(--space-16); }
.modal-actions--row > * { flex: 1; }

.modal-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-sm); text-decoration: none; text-align: center;
  font-size: var(--fs-body-sm); line-height: 19px; font-weight: 800; text-transform: uppercase;
}
.modal-btn--primary { background: var(--color-lime); color: var(--color-ink); }
.modal-btn--primary:hover { background: var(--color-lime-hover); }
.modal-btn--dark { background: var(--color-ink); color: #fff; }
.modal-btn--dark:hover { background: var(--color-violet); }
.modal-btn--ghost { background: var(--color-bg); color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-ink); }
.modal-btn--ghost:hover { background: var(--color-ink); color: #fff; }
.modal-btn--plain { background: var(--color-bg); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-border); }
.modal-btn--plain:hover { box-shadow: inset 0 0 0 1px var(--color-ink); }

.modal-links {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-8);
  font-size: var(--fs-xs); line-height: 16px; color: var(--color-muted); text-align: center;
}
.modal-link { font: inherit; color: var(--color-violet); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* «Forgot your password?» / «Join now →» are 16px tall on their own line. The
   pseudo-element lifts the target to 24 the way .tap-target does, and the 8px
   gap in .modal-links keeps the rows from touching. */
.modal-link { position: relative; }
.modal-link::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%;
  height: 100%; min-height: 24px; z-index: 1;
}
.modal-link--strong { text-transform: uppercase; font-weight: 800; }
.modal-link:hover { color: var(--color-ink); }

.modal-done { display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }
.modal-tick {
  width: 56px; height: 56px; border-radius: var(--radius-sm);
  background: var(--color-lime); color: var(--color-ink);
  display: grid; place-items: center; font-size: var(--fs-lead); font-weight: 800;
  margin-inline: auto;
}
.modal-done .modal-btn { width: 100%; }

/* ── cookie categories (cookie-preferences-modal[50:176]) ─────────────── */
.cookie-form { display: flex; flex-direction: column; gap: var(--space-24); }
.cookie-list { display: flex; flex-direction: column; }
.cookie-row {
  display: flex; align-items: flex-start; gap: var(--space-16);
  padding-block: var(--space-16);
}
.cookie-row + .cookie-row { border-top: 1px solid var(--color-border); }
.cookie-row__num { font-size: var(--fs-small); line-height: 18px; font-weight: 800; flex: none; }
.cookie-row__num--lime { color: var(--color-lime); }
.cookie-row__num--violet { color: var(--color-violet); }
.cookie-row__info { flex: 1; display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.cookie-row__title { font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800; text-transform: uppercase; }
.cookie-row__text { font-size: var(--fs-xs); line-height: 18px; color: var(--color-muted); }
/* required-badge[50:183]: лаймовая плашка 63×19 с обводкой 1px INSIDE и радиусом 4,
   паддинг 4/8, текст #1a1a1a. Кегль 9px макета поднят до 10 по решению F3 — плашка
   из-за этого на 2px выше (в допуске). */
.cookie-row__required {
  flex: none; align-self: flex-start;
  padding: 4px var(--space-8); border-radius: var(--radius-sm);
  background: var(--color-lime); color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-ink);
  font-size: var(--fs-micro); line-height: 13px; font-weight: 800;
  text-transform: uppercase;
}

.switch { flex: none; position: relative; display: inline-flex; cursor: pointer; }
/* The track the mockup draws is 40×22; the invisible input on top of it is the
   actual target, so it is raised to 24 high (WCAG 2.2 AA, 2.5.8). It is absolutely
   positioned, so the extra height changes nothing in the layout. */
.switch input { position: absolute; opacity: 0; width: 40px; height: 24px; top: -1px; margin: 0; cursor: pointer; }
.switch__track {
  width: 40px; height: 22px; border-radius: var(--radius-pill);
  background: var(--color-border); position: relative;
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--color-bg);
}
.switch input:checked + .switch__track { background: var(--color-violet); }
.switch input:checked + .switch__track::after { left: 21px; }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }

/* ── mobile menu (mobile-open-menu[61:18]) ────────────────────────────── */
.overlay--menu { align-items: flex-start; padding: 0; }
.overlay__panel--menu { border-radius: 0; margin-block: 0; min-height: 100%; }
.menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-16); border-bottom: 1px solid var(--color-border);
}
.menu-head__title { font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800; text-transform: uppercase; }
.menu-links { display: flex; flex-direction: column; }
.menu-link {
  display: block; padding: var(--space-16);
  font-size: var(--fs-body-sm); line-height: 19px; font-weight: 700;
  color: var(--color-ink); text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.menu-link:hover { background: var(--color-sand); }
.menu-actions { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); }
.menu-actions .modal-btn { min-height: 42px; }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .overlay { padding: var(--space-12); align-items: flex-start; }
  .overlay__panel { padding: var(--space-24); gap: var(--space-16); }
  .overlay__panel--menu { padding: 0; gap: 0; }
  .modal-title { font-size: var(--fs-h6); line-height: 32px; }
  .modal-actions--row { flex-direction: column; }
  .form-row, .form-row--3 { grid-template-columns: 1fr; gap: var(--space-12); }
  .consent { padding: var(--space-16); gap: var(--space-12); }
  .modal-btn { min-height: 46px; font-size: var(--fs-small); line-height: 18px; }
}