/* =========================================
   18+ AGE CONSENT - RED & GOLDEN ORANGE THEME
   ========================================= */

#age-consent-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(45, 0, 0, 0.90);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    font-family: inherit;
}


/* =========================================
   MODAL
   ========================================= */

#age-consent-modal {
    width: 100%;
    max-width: 480px;

    padding: 42px 32px;

    background: #ffffff;

    border-radius: 18px;

    text-align: center;

    border-top: 6px solid #D71920;

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);

    animation: ageConsentFadeIn 0.35s ease-out;
}


/* =========================================
   18+ ICON
   ========================================= */

#age-consent-modal .age-consent-icon {
    width: 78px;
    height: 78px;

    margin: 0 auto 20px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #D71920;

    color: #ffffff;

    font-size: 27px;
    font-weight: 800;

    box-shadow: 0 8px 20px rgba(215, 25, 32, 0.30);
}


/* =========================================
   HEADING
   ========================================= */

#age-consent-modal h2 {
    margin: 0 0 12px;

    color: #B51219;

    font-size: 28px;
    line-height: 1.25;

    font-weight: 800;
}


/* =========================================
   DESCRIPTION
   ========================================= */

#age-consent-modal p {
    margin: 0 auto 26px;

    max-width: 390px;

    color: #555555;

    font-size: 15px;
    line-height: 1.65;
}


/* =========================================
   BUTTON CONTAINER
   ========================================= */

.age-consent-buttons {
    display: flex;

    gap: 12px;

    justify-content: center;
}


/* =========================================
   GENERAL BUTTON
   ========================================= */

.age-consent-btn {
    flex: 1;

    min-height: 50px;

    padding: 12px 20px;

    border: 0;

    border-radius: 8px;

    cursor: pointer;

    font-family: inherit;

    font-size: 15px;

    font-weight: 700;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================
   YES BUTTON
   ========================================= */

#age-consent-yes {
    background: #D71920;

    color: #ffffff;
}


/* =========================================
   YES BUTTON HOVER
   WARM GOLDEN ORANGE
   ========================================= */

#age-consent-yes:hover {
    background: #FFB300;

    color: #111111;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(255, 179, 0, 0.35);
}


/* =========================================
   NO BUTTON
   ========================================= */

#age-consent-no {
    background: #EEEEEE;

    color: #333333;
}


/* =========================================
   NO BUTTON HOVER
   WARM GOLDEN ORANGE
   ========================================= */

#age-consent-no:hover {
    background: #FFB300;

    color: #111111;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(255, 179, 0, 0.25);
}


/* =========================================
   DISCLAIMER / NOTE
   ========================================= */

.age-consent-note {
    margin-top: 20px !important;

    margin-bottom: 0 !important;

    font-size: 12px !important;

    line-height: 1.5 !important;

    color: #999999 !important;
}


/* =========================================
   PREVENT PAGE SCROLLING
   ========================================= */

body.age-consent-active {
    overflow: hidden !important;
}


/* =========================================
   FADE-IN ANIMATION
   ========================================= */

@keyframes ageConsentFadeIn {

    from {
        opacity: 0;

        transform:
            translateY(20px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================
   MOBILE RESPONSIVE
   ========================================= */

@media (max-width: 480px) {

    #age-consent-modal {
        padding: 34px 22px;

        border-radius: 14px;
    }


    #age-consent-modal h2 {
        font-size: 24px;
    }


    #age-consent-modal .age-consent-icon {
        width: 68px;

        height: 68px;

        font-size: 23px;
    }


    .age-consent-buttons {
        flex-direction: column;
    }


    .age-consent-btn {
        width: 100%;
    }
}