/* ===== JP Age Gate, premium look, no CSS variables ===== */

html, body { scroll-behavior: smooth; }

/* lock scroll when gate is open */
body.jp-agegate-lock { overflow: hidden; }

/* Overlay */
#age-gate-root .agegate-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.75)),
    url('/photos/NWDS-892.jpg') center center / cover no-repeat;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .35s ease;
}

#age-gate-root .agegate-overlay.visible {
  display: flex;
  opacity: 1;
}

/* Card */
#age-gate-root .agegate-card {
  width: 92vw;
  max-width: 440px;
  background: rgba(17,17,17,0.72);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 2px 10px rgba(0,0,0,0.25);
  color: #f5f5f7;
  text-align: center;
  padding: 26px 22px 20px;
  transform: translateY(8px) scale(.985);
  animation: jp-pop .35s ease forwards;
}

@keyframes jp-pop { to { transform: translateY(0) scale(1); } }

/* Logo */
#age-gate-root .agegate-logo {
  width: 78%;
  max-width: 280px;
  margin: 6px auto 14px;
  display: block;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.35));
}

/* Text */
#age-gate-root .agegate-card p {
  margin: 0 0 10px;
  line-height: 1.45;
  font-size: 16px;
  color: #f5f5f7;
}

#age-gate-root .agegate-disclaimer {
  color: #c7c7cc;
  font-size: 13px;
  margin-top: 14px;
}

/* Buttons */
#age-gate-root .agegate-button {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 14px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 16px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Yes, primary maroon */
#age-gate-root #agegate-yes.agegate-button {
  background: #7A0019;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(122,0,25,0.35);
}
#age-gate-root #agegate-yes.agegate-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(122,0,25,0.42);
}
#age-gate-root #agegate-yes.agegate-button:active { transform: translateY(0); }

/* No, secondary outline */
#age-gate-root #agegate-no.agegate-button {
  background: transparent;
  color: #f5f5f7;
  border-color: rgba(255,255,255,0.22);
}
#age-gate-root #agegate-no.agegate-button:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.32);
}

/* Remember row */
#age-gate-root .agegate-remember {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin: 6px 0 2px;
  color: #c7c7cc;
  font-size: 14px;
}
#age-gate-root .agegate-remember input {
  width: 18px;
  height: 18px;
}

/* Feedback message */
#age-gate-root .agegate-msg {
  color: #ff6b6b;
  background: rgba(255,107,107,0.08);
  border: 1px solid rgba(255,107,107,0.25);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 8px auto 12px;
  width: 100%;
  max-width: 320px;
  display: none;
}

/* Small screens */
@media (max-width: 480px) {
  #age-gate-root .agegate-card { padding: 22px 16px 18px; border-radius: 14px; }
  #age-gate-root .agegate-button { font-size: 15px; padding: 11px 16px; }
}

/* Better font rendering in Safari */
#age-gate-root, #age-gate-root * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Overlay, ensure the blur and dim work in Safari */
#age-gate-root .agegate-overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.78)),
    url('/photos/NWDS-892.jpg') center center / cover no-repeat;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Card edge clarity on Safari */
#age-gate-root .agegate-card {
  background: rgba(17,17,17,0.75);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
}

/* Message chip spacing so it does not crowd the title */
#age-gate-root .agegate-msg {
  margin: 12px auto 16px;
  border-radius: 12px;
}

/* Buttons spacing and consistent height */
#age-gate-root .agegate-button {
  height: 48px;
  line-height: 1;
  letter-spacing: .2px;
}

/* Secondary button, higher contrast on Safari */
#age-gate-root #agegate-no.agegate-button {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border-color: rgba(255,255,255,0.28);
}
#age-gate-root #agegate-no.agegate-button:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.38);
}

/* Primary button shape to match your screenshot */
#age-gate-root #agegate-yes.agegate-button {
  border-radius: 16px;
}

/* Checkbox, consistent look in Safari */
#age-gate-root .agegate-remember input {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 4px;
  background: transparent;
  display: inline-block;
  position: relative;
  outline: none;
}
#age-gate-root .agegate-remember input:checked {
  background: #7A0019;
  border-color: #7A0019;
}
#age-gate-root .agegate-remember input:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 0px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#age-gate-root .agegate-remember label {
  color: #cfd1d4;
}

/* Lock both html and body to stop background scroll in Safari */
html.jp-agegate-lock, body.jp-agegate-lock { overflow: hidden; }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  #age-gate-root .agegate-overlay { transition: none; }
  #age-gate-root .agegate-card { animation: none; transform: none; }
}

/* Stack everything vertically, center it, prevent side-by-side glitches */
#age-gate-root .agegate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Make every direct child respect the column width */
#age-gate-root .agegate-card > * {
  width: 100%;
}

/* Logo, always centered and on its own row */
#age-gate-root .agegate-logo {
  display: block;
  margin: 6px auto 14px;
  width: 78%;
  max-width: 280px;
}

/* Title, centered and not cramped */
#age-gate-root .agegate-title {
  margin: 4px 0 12px;
  text-align: center;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: #f5f5f7;
}

/* Keep the message chip and disclaimer full width inside the column */
#age-gate-root .agegate-msg,
#age-gate-root .agegate-disclaimer,
#age-gate-root .agegate-remember {
  align-self: center; /* center within the column */
}

/* iOS text scaling consistency */
html { -webkit-text-size-adjust: 100%; }

/* Mobile sizing */
@media (max-width: 768px) {
  #age-gate-root .agegate-card { max-width: 94vw; padding: 18px 16px; }
  #age-gate-root .agegate-title { font-size: 20px; }
  #age-gate-root .agegate-card p,
  #age-gate-root .agegate-disclaimer { font-size: 15px; }
  #age-gate-root .agegate-button { height: 52px; font-size: 17px; border-radius: 14px; }
}

@media (max-width: 380px) {
  #age-gate-root .agegate-title { font-size: 18px; }
  #age-gate-root .agegate-button { height: 50px; font-size: 16px; }
}