/* Age gate (see Pages/Shared/_AgeGate.cshtml, wwwroot/js/agegate.js) */
.age-gate-backdrop, .age-gate { display: none; }

html.age-gate-pending, html.age-gate-pending body { overflow: hidden; }
html.age-gate-pending .age-gate-backdrop { display: block; position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .8); }
html.age-gate-pending .age-gate {
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 2001;
    width: 400px; max-width: calc(100% - 1rem); overflow: auto;
    background: #fff; color: #1a1a1a; font-family: var(--fontfam);
    box-shadow: 0 0 24px rgba(0, 0, 0, .5);
    animation: age-gate-in .5s ease-in-out;
}
@keyframes age-gate-in { from { transform: translateX(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { html.age-gate-pending .age-gate { animation: none; } }

.age-gate[hidden], .age-gate-backdrop[hidden], .age-gate [hidden] { display: none !important; }
.age-gate-header { padding: 3rem 1.5rem 1.5rem;text-align: center; }
.age-gate-logo { height: 68px; max-width: 200px; margin-bottom: 2rem; background: var(--logo) center / contain no-repeat; margin-left: auto; margin-right: auto; }
.age-gate-title { margin: 0 0 .75rem; font-size: 1.9rem; font-weight: 800; line-height: 1.15; color: #1a1a1a; }
.age-gate-title-sm { font-size: 1.4rem; }
.age-gate-text { margin: 0; font-size: .95rem; color: #444; }
.age-gate-link { color: #1a1a1a; font-size: .9rem; text-decoration: underline; }
.age-gate-body { flex: 1; padding: 0 1.5rem 1.5rem; }

.age-gate-dob { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.age-gate-dob[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.age-gate-dob[data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }
.age-gate-dob input {
    box-sizing: border-box; min-width: 0; width: 100%; min-height: 48px; padding: .5rem; text-align: center; font: inherit; font-size: 1.05rem;
    border: 1px solid #1a1a1a; border-radius: 4px; background: #fff; color: #1a1a1a;
}
.age-gate-dob input[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.age-gate-dob input:focus-visible, .age-gate-button:focus-visible, .age-gate-link:focus-visible {
    outline: 3px solid #1a73e8; outline-offset: 2px;
}

.age-gate-button {
    width: 100%; min-height: 48px; margin-top: 1.5rem; padding: .5rem 1rem; cursor: pointer;
    font: inherit; font-weight: 700; border: 0; border-radius: 4px;
    background: var(--buttoncol); color: var(--buttonfont);
}
.age-gate-button:disabled { opacity: .5; cursor: default; }
.age-gate-error { margin: 1.5rem 0 0; padding: .5rem; font-size: .85rem; color: #fff; background: #9b1c1c; }
.age-gate-footer { padding: 1.25rem 1.5rem; font-size: .8rem; background: #eee; }
.age-gate-footer p { margin: 0; }