/* =Age Gate */

.vin-age-gate {
--age-gate-background: var(--wp--preset--color--green);
--age-gate-panel-background: #fff;
--age-gate-text-color: #111;
--age-gate-text-color-hover: var(--wp--preset--color--green-darkest);
--age-gate-button-background: var(--wp--preset--color--green);
--age-gate-button-text: #111;
--age-gate-button-text-hover: var(--wp--preset--color--green-darkest);

position: fixed;
inset: 0;
box-sizing: border-box;

width: min(100% - 40px, 620px);
max-width: 620px;
max-height: calc(100dvh - 40px);

margin: auto;
padding: 0;

border: 0;
border-radius: 0;

background: var(--age-gate-panel-background);
color: var(--age-gate-text-color);

overflow-y: auto;
overscroll-behavior: contain;
}

.vin-age-gate::backdrop {
background: #C1B85D;
opacity: 1;
}

.vin-age-gate__inner {
box-sizing: border-box;
padding: clamp(32px, 5vw, 64px);
text-align: center;
}

/* =Content */

.vin-age-gate__title {
margin: 0 0 0.75em;

font-size: 32px;
font-weight: 400;
line-height: 1.3;
}

.vin-age-gate__description {
font-size: 15px;
line-height: 1.7;
}

.vin-age-gate__description p {
margin: 0 0 1em;
text-wrap: balance;
}

.vin-age-gate__description p:last-child {
margin-bottom: 0;
}

.vin-age-gate__description a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--wp--preset--color--green-dark);
text-underline-offset: 3px;
}

/* =Actions */

.vin-age-gate__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 12px;

margin-top: 30px;
}

.vin-age-gate__button {
display: inline-flex;
justify-content: center;
align-items: center;

box-sizing: border-box;
min-height: 48px;
padding: 12px 26px;

border: 1px solid var(--age-gate-button-background);
border-radius: 0;

outline: 1px solid transparent;
outline-offset: 4px;

font: inherit;
font-size: 13px;
font-weight: bold;
line-height: 1.4;
text-decoration: none;
text-align: center;

cursor: pointer;
transition:
background-color 200ms ease,
color 200ms ease;
}

.vin-age-gate__button--primary {
background: var(--age-gate-button-background);
text-transform: uppercase;
color: var(--age-gate-button-text);
}

.vin-age-gate__button--secondary {
background: transparent;
text-transform: uppercase;
color: var(--age-gate-text-color);
}

.vin-age-gate__button--primary:hover {
/* background: transparent; */
color: var(--age-gate-text-color-hover);
}

.vin-age-gate__button--secondary:hover {
/* background: var(--age-gate-button-background); */
color: var(--age-gate-button-text-hover);
}

/* =Accessibility */

.vin-age-gate :focus-visible {
outline: 1px solid var(--age-gate-button-background);
outline-offset: 4px;
}

/* =Mobile */

@media (max-width: 600px) {
    .vin-age-gate {
    width: calc(100% - 32px);
    max-height: calc(100dvh - 32px);
    }

    .vin-age-gate__inner {
    padding: 32px 24px;
    }

    .vin-age-gate__actions {
    flex-direction: column;
    }

    .vin-age-gate__button {
    width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vin-age-gate__button {
    transition: none;
    }
}