/* ============================================================================
   AGE GATE SKIN — the Age Gate plugin (v3, "standard" server-side mode).

   The plugin owns behaviour and copy (wp-admin › Age Gate, client-editable);
   this file owns appearance only, from tokens.css. `!important` appears only
   where the plugin sets the same property from its own options
   (--ag-form-background: #fff, --ag-text-color: #000 and its background
   layers).
   ============================================================================ */

.age-gate__wrapper {
  --ag-form-background: var(--surface-card);
  --ag-text-color: var(--text-hi);
  background: var(--ink-950) !important;
  font-family: var(--font-body);
  line-height: var(--lh-body);   /* unitless: Divi's Customizer writes the body's in em */
  color: var(--text-mid);
}

/* Overlay: the same vapour glow as the site, blurred behind glass. */
.age-gate__wrapper .age-gate__background-color,
.age-gate__wrapper .age-gate__background {
  background:
    radial-gradient(55% 60% at 20% 0%, var(--glow-orb-violet), transparent 70%),
    radial-gradient(45% 50% at 100% 100%, var(--glow-orb-cyan), transparent 70%),
    var(--ink-950) !important;
  opacity: 1 !important;
}
.age-gate__wrapper .age-gate__background { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* The card. */
.age-gate__wrapper .age-gate {
  width: min(100% - 2 * var(--gutter), 440px);
  max-width: none;
  padding: var(--s-10) var(--s-8);
  border-radius: var(--r-lg);
  border: var(--bw) solid var(--line-hi);
  background: var(--surface-card) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-3);
  color: var(--text-mid) !important;
  text-align: center;
  animation: spv-gate-in 300ms var(--ease-out) both;
}
@keyframes spv-gate-in { from { opacity: 0; transform: translateY(var(--s-2)) scale(0.97); } }
@media (max-width: 479px) { .age-gate__wrapper .age-gate { padding: var(--s-8) var(--s-5); } }

.age-gate__wrapper .age-gate__form { margin: 0; }

/* Brand: the plugin prints the site title as an h1; it becomes the logo,
   text kept for screen readers. */
.age-gate__wrapper .age-gate__heading { margin: 0 0 var(--s-6); }
.age-gate__wrapper .age-gate__heading-title {
  width: 220px;
  height: var(--s-10);
  margin: 0 auto;
  padding: 0;
  background: url("../img/logo-lockup.svg") center / contain no-repeat;
  color: transparent;
  font-size: 0;
}

.age-gate__wrapper .age-gate__headline {
  margin: 0 0 var(--s-3);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--text-hi) !important;
  text-wrap: balance;
}
.age-gate__wrapper .age-gate__subheadline {
  max-width: 40ch;
  margin: 0 auto var(--s-6);
  padding: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-mid);
  text-wrap: pretty;
}

.age-gate__wrapper .age-gate__challenge:empty { display: none; }

/* Buttons: Primary "Yes", Secondary "No", side by side, same height. */
.age-gate__wrapper .age-gate__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 359px) { .age-gate__wrapper .age-gate__buttons { grid-template-columns: 1fr; } }

.age-gate__wrapper .age-gate__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-lg);
  margin: 0;
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  border: var(--bw) solid transparent;
  font: var(--fw-semibold) var(--fs-base)/1.2 var(--font-body);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-position var(--dur-slow) var(--ease-out);
}
.age-gate__wrapper .age-gate__submit--yes {
  background: var(--grad-brand);
  background-size: 200% 100%;
  color: var(--text-on-accent);
  box-shadow: var(--glow-violet);
}
.age-gate__wrapper .age-gate__submit--yes:hover { background-position: 100% 50%; transform: translateY(calc(var(--bw-lg) * -1)); }
.age-gate__wrapper .age-gate__submit--no {
  background: var(--ink-700);
  border-color: var(--line-hi);
  color: var(--text-hi);
}
.age-gate__wrapper .age-gate__submit--no:hover { background: var(--ink-600); border-color: var(--line-hover); }
.age-gate__wrapper .age-gate__submit:active { transform: scale(0.98); }
.age-gate__wrapper .age-gate__submit:focus-visible { outline: var(--bw-lg) solid var(--cyan-400); outline-offset: 3px; }

/* Remember me: the site's custom checkbox. */
.age-gate__wrapper .age-gate__remember-wrapper { margin: var(--s-5) 0 0; }
.age-gate__wrapper .age-gate__remember {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  font-size: var(--fs-sm);
  color: var(--text-mid);
  text-align: left;
  cursor: pointer;
}
.age-gate__wrapper .age-gate__remember-field {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: var(--s-5);
  height: var(--s-5);
  margin: 0;
  border: var(--bw-md) solid var(--line-hover);
  border-radius: var(--s-1);
  background: var(--ink-800) no-repeat center / 70%;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.age-gate__wrapper .age-gate__remember-field:checked {
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"), var(--grad-brand);
  background-size: 70%, cover;
  background-position: center;
}
.age-gate__wrapper .age-gate__remember-field:focus-visible { outline: var(--bw-lg) solid var(--cyan-400); outline-offset: 3px; }

.age-gate__wrapper .age-gate__additional-information {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: var(--bw) solid var(--line);
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--text-low);
}
.age-gate__wrapper .age-gate__additional-information p { margin: 0; padding: 0; }

/* Plugin error/notice (e.g. after "No"). */
.age-gate__wrapper .age-gate__errors,
.age-gate__wrapper .age-gate__error {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  border: var(--bw) solid var(--tint-danger-line);
  background: var(--tint-danger-md);
  color: var(--danger-soft);
  font-size: var(--fs-sm);
}

@media (prefers-reduced-motion: reduce) {
  .age-gate__wrapper .age-gate { animation: none; }
  .age-gate__wrapper .age-gate__submit { transition-property: opacity; }
  .age-gate__wrapper .age-gate__submit--yes:hover { transform: none; }
}