/* ==== Age-gate button upgrades: larger, high-contrast, colorful ==== */

/* Base button: bigger type, more padding, clearer focus ring */
.agegate__btn {
  font-size: 1rem;                 /* up from ~0.95 */
  line-height: 1;                  /* crisper vertical rhythm */
  padding: .9rem 1.1rem;           /* larger tap target */
  border-radius: 14px;
  border-width: 2px;               /* stronger edge for contrast */
  text-shadow: 0 1px 0 rgba(0,0,0,.18);  /* improves legibility on bright fills */
}
.agegate__btn .emo { font-size: 1.05em; }

/* Focus visibility for keyboard users */
.agegate__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 0 0 6px rgba(116,224,255,.25);
}

/* 18+ (primary) — bright cyan gradient */
.agegate__btn--primary {
  background: linear-gradient(180deg, #38bdf8, #0ea5e9); /* cyan -> blue */
  border-color: #0891b2;
  color: #061018; /* very dark for contrast on bright bg */
}
.agegate__btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.agegate__btn--primary:active { transform: translateY(0); }

/* 21+ — give it a distinct purple gradient so it doesn’t look disabled */
.agegate__btn[data-agegate="quick-21"] {
  background: linear-gradient(180deg, #a78bfa, #7c3aed); /* violet -> royal */
  border-color: #6d28d9;
  color: #0e0618;
}
.agegate__btn[data-agegate="quick-21"]:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* Verify — confident green, slightly larger to imply “action” */
.agegate__btn--verify {
  background: linear-gradient(180deg, #22c55e, #16a34a); /* emerald -> green */
  border-color: #15803d;
  color: #05150b;
  padding: 1rem 1.2rem;
  font-size: 1.05rem;
}
.agegate__btn--verify:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Make the inputs/readability match the new scale a bit better */
.agegate__input {
  font-size: 1.05rem;
  padding: .75rem .5rem;
  border-width: 2px;
}
.agegate__sep { font-weight: 900; opacity: .9; }

/* Tighten layout so bigger controls don’t feel cramped */
.agegate__quick { gap: .65rem; margin: 1rem 0 .75rem; }
.agegate__form  { gap: .9rem; }