.age-gate[hidden] {
display: none;
}

.age-gate {
position: fixed;
inset: 0;
z-index: 1080;
display: grid;
place-items: center;
padding: 1rem;
}

.age-gate__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.78);
backdrop-filter: blur(3px);
}

.age-gate__dialog {
position: relative;
width: min(100%, 500px);
padding: 2rem;
border: 1px solid rgba(255, 207, 64, 0.55);
border-radius: 0.75rem;
background: #2a2929;
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.55);
font-family: "Inter", sans-serif;
}

.age-gate__eyebrow {
color: #ffcf40;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}

.age-gate__title {
color: #fff;
font-weight: 700;
}

.age-gate__description {
color: #bcbcbc;
}

.age-gate__input {
border-color: #646464;
background: #1b1b1b;
color: #fff;
}

.age-gate__input:focus {
border-color: #ffcf40;
background: #1b1b1b;
color: #fff;
box-shadow: 0 0 0 0.25rem rgba(255, 207, 64, 0.2);
}

.age-gate__submit {
border-color: #ffcf40;
background: #ffcf40;
color: #171717;
font-weight: 600;
}

.age-gate__submit:hover,
.age-gate__submit:focus {
border-color: #e4b72f;
background: #e4b72f;
color: #171717;
}

.age-gate__close {
position: absolute;
top: 0.7rem;
right: 0.9rem;
border: 0;
background: transparent;
color: #bcbcbc;
font-size: 1.8rem;
line-height: 1;
}

.age-gate__close:hover,
.age-gate__close:focus {
color: #ffcf40;
}

.age-gate__error {
min-height: 1.5rem;
color: #ffcf40;
font-weight: 500;
}

body.age-gate-open {
overflow: hidden;
}

@media (max-width: 575.98px) {
.age-gate__dialog {
    padding: 1.5rem;
}
}