.age-verification-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    background-color: var(--wp--preset--color--dark-teal);
    padding: 16px;

    &:before {
        content: '';
        background-image: url("data:image/svg+xml,%3Csvg width='840' height='618' viewBox='0 0 840 618' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M419.824 658.82C682.615 658.82 895.648 502.12 895.648 308.82C895.648 115.52 682.615 -41.1799 419.824 -41.1799C157.034 -41.1799 -56 115.52 -56 308.82C-56 502.12 157.034 658.82 419.824 658.82Z' fill='url(%23paint0_radial_2280_3225)' /%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_2280_3225' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(420.161 308.68) rotate(90) scale(312.515 414.51)'%3E%3Cstop stop-color='%2300A8BE' stop-opacity='0.9' /%3E%3Cstop offset='0.166667' stop-color='%2300A8BE' stop-opacity='0.77' /%3E%3Cstop offset='0.333333' stop-color='%2300A8BE' stop-opacity='0.53' /%3E%3Cstop offset='0.5' stop-color='%2300A8BE' stop-opacity='0.34' /%3E%3Cstop offset='0.666667' stop-color='%2300A8BE' stop-opacity='0.19' /%3E%3Cstop offset='0.802083' stop-color='%2300A8BE' stop-opacity='0.09' /%3E%3Cstop offset='0.916667' stop-color='%2300A8BE' stop-opacity='0.02' /%3E%3Cstop offset='1' stop-color='%2300A8BE' stop-opacity='0' /%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
        background-size: auto;
        background-repeat: no-repeat;
        background-position: center;
        max-width: 840px;
        max-height: 618px;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.age-verification-modal {
    max-width: 542px;
    width: 100%;
    padding: 74px 24px 147px;
    text-align: center;
    background: #001c20;
    border: 1px solid #e3a355;
    border-left: none;
    border-right: none;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 9;

    @media (min-width: 768px) {
        padding: 62px 24px 76px;
    }

    &:after {
        content: '';
        background-image: url("data:image/svg+xml,%3Csvg width='76' height='76' viewBox='0 0 76 76' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2280_3232)'%3E%3Cpath d='M37.625 75.25L75.25 37.625L37.625 0L0 37.625L37.625 75.25Z' fill='%23001C20' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M74.0126 37.625L37.625 74.0126L1.23743 37.625L37.625 1.23743L74.0126 37.625ZM37.625 75.25L0 37.625L37.625 0L75.25 37.625L37.625 75.25Z' fill='%23E3A355' /%3E%3Cpath d='M46.1374 38.9762V37.4328H56.1579V38.9762H46.1374ZM50.3514 32.9492H51.9439V43.4353H50.3514V32.9492Z' fill='%23E3A355' /%3E%3Cpath d='M37.8123 46.6205C36.718 46.6205 35.7461 46.4081 34.8968 45.9835C34.0638 45.5589 33.4105 44.979 32.9368 44.244C32.4631 43.4926 32.2263 42.6434 32.2263 41.696C32.2263 40.9446 32.3733 40.2586 32.6673 39.638C32.9776 39.001 33.4105 38.462 33.9658 38.021C34.5211 37.5636 35.1663 37.2534 35.9013 37.09L36.0973 37.6045C35.444 37.4249 34.8886 37.139 34.4313 36.747C33.974 36.355 33.6228 35.8895 33.3778 35.3505C33.1328 34.7951 33.0103 34.2154 33.0103 33.611C33.0103 32.7454 33.2145 31.994 33.6228 31.357C34.0475 30.7036 34.6191 30.1891 35.3378 29.8135C36.0728 29.4379 36.8976 29.25 37.8123 29.25C38.7433 29.25 39.5681 29.4379 40.2868 29.8135C41.0218 30.1891 41.5935 30.7036 42.0018 31.357C42.4101 31.994 42.6143 32.7454 42.6143 33.611C42.6143 34.2154 42.4918 34.7951 42.2468 35.3505C42.0181 35.8895 41.6751 36.355 41.2178 36.747C40.7605 37.139 40.197 37.4249 39.5273 37.6045L39.7233 37.09C40.4746 37.2534 41.1198 37.5636 41.6588 38.021C42.2141 38.462 42.6388 39.001 42.9328 39.638C43.2431 40.2586 43.3983 40.9446 43.3983 41.696C43.3983 42.6434 43.1615 43.4926 42.6878 44.244C42.2305 44.979 41.5771 45.5589 40.7278 45.9835C39.8948 46.4081 38.923 46.6205 37.8123 46.6205ZM37.8123 45.0035C38.5636 45.0035 39.2251 44.8565 39.7968 44.5625C40.3848 44.2685 40.8421 43.8601 41.1688 43.3375C41.4955 42.7985 41.6588 42.1941 41.6588 41.5245C41.6588 40.8385 41.4955 40.2424 41.1688 39.736C40.8421 39.2134 40.3848 38.805 39.7968 38.511C39.2251 38.2006 38.5636 38.0455 37.8123 38.0455C37.0773 38.0455 36.4158 38.2006 35.8278 38.511C35.2561 38.805 34.7988 39.2134 34.4558 39.736C34.1291 40.2424 33.9658 40.8385 33.9658 41.5245C33.9658 42.1941 34.1291 42.7985 34.4558 43.3375C34.7988 43.8601 35.2561 44.2685 35.8278 44.5625C36.3995 44.8565 37.061 45.0035 37.8123 45.0035ZM37.8123 36.649C38.727 36.649 39.4701 36.3795 40.0418 35.8405C40.6298 35.2851 40.9238 34.5746 40.9238 33.709C40.9238 32.8434 40.6298 32.141 40.0418 31.602C39.4701 31.063 38.727 30.7935 37.8123 30.7935C36.914 30.7935 36.1708 31.063 35.5828 31.602C34.9948 32.141 34.7008 32.8434 34.7008 33.709C34.7008 34.5746 34.9948 35.2851 35.5828 35.8405C36.1708 36.3795 36.914 36.649 37.8123 36.649Z' fill='%23E3A355' /%3E%3Cpath d='M27.2066 46.3753V29.5193H28.9706V46.3753H27.2066ZM23.6541 31.1118V29.5193H28.7256V31.1118H23.6541Z' fill='%23E3A355' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2280_3232'%3E%3Crect width='75.25' height='75.25' fill='white' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
        background-size: auto;
        background-repeat: no-repeat;
        background-position: center;
        width: 76px;
        height: 76px;
        display: block;
        position: absolute;
        top: -38px;
    }

    .age-verification-title {
        margin-bottom: 16px;
    }

    .age-verification-text {
        @apply text-18px;
        color: #fffaee;
        line-height: 150%;
        font-weight: 200;
        max-width: 350px;
    }

    .age-verification-actions {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        position: absolute;
        bottom: -24px;
        padding: 0 24px;
        width: 100%;

        @media (min-width: 768px) {
            gap: 32px;
            flex-flow: nowrap;
        }

        .button {
            padding-left: 30px;
            padding-right: 30px;
            font-size: 14px;
            width: 100%;

            @media (min-width: 768px) {
                width: auto;
            }
        }

        #age-verification-no {
            background-color: #001c20;

            &:hover {
                background-color: #e3a355;
            }
        }
    }
}