/* ===== Age gate ===== */

/* By default, the backdrop is visible immediately as a loading state */
.age-gate-backdrop {
  display: flex;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(15, 23, 42, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 2147483647;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  opacity: 1;
}

/* When JS confirms the gate isn't needed, fade out */
.age-gate-backdrop.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Modal box is hidden until JS reveals it */
.age-gate-modal {
  display: none;
  background: #ffffff;
  border-radius: 14px;
  max-width: 440px;
  width: 100%;
  padding: 28px 24px 22px;
  box-shadow: 0 25px 70px -10px rgba(0, 0, 0, 0.5);
  text-align: left;
  font-family: inherit;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
  animation: ageGateModalIn 0.25s ease;
}

.age-gate-backdrop.is-form-visible .age-gate-modal {
  display: block;
}

@keyframes ageGateModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* Loading spinner */
.age-gate-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: ageGateSpin 0.8s linear infinite;
}

.age-gate-backdrop.is-form-visible .age-gate-spinner,
.age-gate-backdrop.is-hidden .age-gate-spinner {
  display: none;
}

@keyframes ageGateSpin {
  to { transform: rotate(360deg); }
}

/* Modal internals */
.age-gate-modal h2 {
  margin: 0 0 5px;
  font-size: 22px;
  line-height: 1.25;
  color: #0f172a;
  font-weight: 700;
}
.age-gate-modal .age-gate-sub {
  margin: 0 0 12px;
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
}
.age-gate-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}
.age-gate-modal input[type="date"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.age-gate-modal input[type="date"]:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.age-gate-error {
	display:none;
  color: #b91c1c;
  font-size: 13px;
  min-height: 18px;
  margin: 10px 0 16px;
}
.age-gate-btn {
  width: 100%;
  padding:12px;
	color:#000;
  margin-top:1rem;
  font-size:18px;
}

.age-gate-blocked { text-align: center; padding: 8px 0 4px; }
.age-gate-blocked h2 { color: #b91c1c; margin-bottom: 10px; }
.age-gate-blocked p {
  color: #475569;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 10px;
}

/* Page scroll lock — only active while gate is showing */
html.age-gate-html,
body.age-gate-locked {
  overflow: hidden !important;
  height: 100% !important;
}
body.age-gate-locked {
  position: fixed !important;
  width: 100% !important;
}
body.age-gate-locked .entry-content {
  filter: grayscale(0.9) blur(3px);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 480px) {
  .age-gate-modal { padding: 22px 18px 18px; border-radius: 12px; }
  .age-gate-modal h2 { font-size: 19px; }
}