/* /public/agegate.css — copied as-is by Vite */
.agegate-active body > :not(#age-gate-overlay):not(#sugar-stage):not(#sugar-cursor) { display: none !important; }
.agegate-active body { overflow: hidden !important; }
.agegate-active #root { display: none !important; }

#age-gate-overlay.age-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #fff;
}

.age-card {
  position: relative;
  border: 4px solid #333;          /* thicker, darker */
  border-radius: 24px;             /* chunkier corners */
  padding: 24px;                   /* a little more air */
  width: min(680px, 92vw);         /* wider like the mock */
  background: #fff;
  box-shadow: none;                /* we do a hard offset below */
}

/* hard offset shadow block behind the card */
.age-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #333;                /* dark block */
  transform: translate(12px, 12px);/* offset down-right */
  z-index: -1;
}

#age-gate-form .row { display:flex; gap:.6rem; align-items:center; }
#age-gate-form input[type="number"] {
  border: 2px solid #333; border-radius: 10px;
  padding: 12px 14px; font-size: 1rem; width: 100%;
}
#age-gate-form .cta {
  position: relative;
  display: inline-block;
  border: 4px solid #333;
  border-radius: 22px;
  padding: 16px 26px;
  font-size: 1.125rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  background: #BB29BB;
  cursor: pointer;

  /* hard offset shadow block */
  box-shadow: 6px 6px 0 #333;

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Hover: pop slightly & tighten the offset; add subtle focus ring */
#age-gate-form .cta:hover {
  transform: translate(-2px, -2px);
  background: #C935C9;
  box-shadow: 5px 5px 0 #333, 0 0 0 4px rgba(187,41,187,.25);
}

/* Active: pressed-in */
#age-gate-form .cta:active {
  transform: translate(2px, 2px);
  background: #A322A3;
  box-shadow: 6px 6px 0 #333;
}

/* Heading: bold, uppercase, slightly italic, tighter tracking */
.age-card h2,
.age-card .title {
  margin: 0 0 18px;
  font-weight: 900;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: .02em;
  color: #333;
}
.error { color: #b00020; font-weight: 700; margin: 6px 0 0; }

/* Force standard cursor while age gate is active */
.agegate-active #age-gate-overlay,
.agegate-active #age-gate-overlay * {
  cursor: auto !important;
}

/* Hide sugar cursor while the age gate is active */
.agegate-active #sugar-stage,
.agegate-active #sugar-cursor { display: none !important; }