/* ==========================================================
   PURAVITA AGE GATE
   PART 2A
========================================================== */

body.pv-lock-scroll{
    overflow:hidden;
}

html.pv-age-verified .pv-age-gate{
    display:none;
}

/*=========================================
Overlay
=========================================*/


.pv-age-gate{
	
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
}

.pv-age-overlay{
    position:absolute;
    inset:0;
    background:rgba(10,18,15,.82);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

/*=========================================
Modal
=========================================*/

.pv-age-modal{

    position:relative;
    z-index:5;

    width:100%;
    max-width:640px;

    max-height:90vh;
    overflow-y:auto;

    background:linear-gradient(
        180deg,
        #eef5f0 0%,
        #f8fbf9 100%
    );

    border:1px solid rgba(255,255,255,.55);

    border-radius:34px;

    padding:48px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.28),
        inset 0 1px rgba(255,255,255,.55);

    animation:pvPopup .45s ease;
}

.pv-age-modal::-webkit-scrollbar{
    width:8px;
}

.pv-age-modal::-webkit-scrollbar-thumb{
    background:#b5c8bb;
    border-radius:50px;
}

.pv-age-modal::-webkit-scrollbar-track{
    background:transparent;
}

@keyframes pvPopup{

    from{

        opacity:0;
        transform:translateY(35px) scale(.96);

    }

    to{

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

    }

}

/*=========================================
Header
=========================================*/

.pv-age-header{

    text-align:center;

    margin-bottom:34px;

}

/*=========================================
Logo
=========================================*/

.pv-age-logo{

    display:flex;
    justify-content:center;

    margin-bottom:18px;

}

.pv-age-logo h2{

    margin:0;

    font-size:44px;

    font-weight:900;

    color:#17342d;

    letter-spacing:-1.5px;

    line-height:1;

}

.pv-age-logo span{

    color:#17342d;

}

/*=========================================
Badge
=========================================*/

.pv-age-badge{

   display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
 
    border-radius: 999px;
    color: #18342d;
   
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;

}

/*=========================================
Heading
=========================================*/

.pv-age-header h3{

    margin:0;

    color:#111;

    font-size:40px;

    font-weight:800;

    line-height:1.15;

    letter-spacing:-1px;

}

/*=========================================
Description
=========================================*/

.pv-description{

    max-width:470px;

    margin:18px auto 0;

    color:#64726b;

    font-size:17px;

    line-height:1.8;

}

/*=========================================
Form
=========================================*/

.pv-age-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/*=========================================
Input Group
=========================================*/

.pv-input-group{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:10px;

}

.pv-input-group label{

    color:#17342d;

    font-size:14px;

    font-weight:700;

}

.pv-input-group input{

    width:100%;

    height:58px;

    padding:0 18px;

    border-radius:16px;

    border:1px solid #cfddd4;

    background:#fff;

    font-size:16px;

    color:#17342d;

    outline:none;

    transition:.3s;

}

.pv-input-group input:focus{

    border-color:#18342d;

    box-shadow:0 0 0 4px rgba(24,52,45,.08);

}

.pv-input-group input::placeholder{

    color:#9aa8a1;

}


/*=========================================
CHECKBOX CARDS
=========================================*/

.pv-check-card{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:18px;

    padding:22px;

    background:#fff;

    border:1px solid #d6e3db;

    border-radius:20px;

    cursor:pointer;

    transition:.35s ease;

    overflow:hidden;
}

.pv-check-card:hover{
    border-color:#18342d;
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(24,52,45,.08);
}

.pv-check-card input{
    display:none;
}

/*=========================================
CHECK ICON
=========================================*/

.pv-checkmark{

    position:relative;

    width:26px;
    height:26px;

    flex-shrink:0;

    border:2px solid #cad9d0;

    border-radius:8px;

    background:#fff;

    transition:.3s ease;

    margin-top:2px;

}

.pv-checkmark::after{

    content:"✓";

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-58%) scale(0);

    color:#fff;

    font-size:15px;

    font-weight:700;

    transition:.25s ease;

}

.pv-check-card input:checked + .pv-checkmark{

    background:#18342d;

    border-color:#18342d;

}

.pv-check-card input:checked + .pv-checkmark::after{

    transform:translate(-50%,-58%) scale(1);

}

.pv-check-card input:checked ~ .pv-check-text{

    color:#18342d;

}

/*=========================================
TEXT
=========================================*/

.pv-check-text{

    color:#55635d;

    font-size:15px;

    line-height:1.8;

    transition:.3s ease;

}

.pv-check-text strong{

    color:#18342d;

    font-weight:700;

}

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

.pv-enter-btn{

    width:100%;

    height:60px;

    margin-top:8px;

    border:none;

    border-radius:16px;

    background:#d4dfd8;

    color:#7b8882;

    font-size:17px;

    font-weight:700;

    cursor:not-allowed;

    transition:.35s ease;

}

.pv-enter-btn span{

    margin-left:10px;

    transition:.35s;

}

.pv-enter-btn.enabled{

    background:#18342d;

    color:#fff;

    cursor:pointer;

}

.pv-enter-btn.enabled:hover{

    background:#22463b;

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(24,52,45,.22);

}

.pv-enter-btn.enabled:hover span{

    transform:translateX(6px);

}

/*=========================================
FOOTER
=========================================*/

.pv-age-footer{

    margin-top:28px;

    text-align:center;

}

.pv-under18{

    display:inline-block;

    margin-bottom:18px;

    color:#18342d;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.pv-under18:hover{

    color:#caa22b;

}

.pv-age-footer p{

    margin:0 auto;

    max-width:500px;

    color:#6b7772;

    font-size:14px;

    line-height:1.8;

}

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

@media(max-width:768px){

    .pv-age-gate{

        padding:16px;

    }

    .pv-age-modal{

        padding:32px 22px;

        border-radius:24px;

        max-height:94vh;

    }

    .pv-age-logo h2{

        font-size:34px;

    }

    .pv-age-header h3{

        font-size:30px;

    }

    .pv-description{

        font-size:15px;

    }

    .pv-check-card{

        padding:18px;

        gap:14px;

    }

    .pv-check-text{

        font-size:14px;

        line-height:1.7;

    }

    .pv-checkmark{

        width:22px;

        height:22px;

    }

    .pv-input-group input{

        height:54px;

    }

    .pv-enter-btn{

        height:56px;

        font-size:16px;

    }

}