/* ==========================================================
   PREMIUM EMAIL MODAL
========================================================== */

.premium-email-modal{

    width:min(460px, calc(100vw - 32px));

    margin:auto;

    padding:34px;

    border-radius:26px;

    background:
        linear-gradient(
            180deg,
            #171c2f 0%,
            #111728 100%
        );

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

    box-shadow:
        0 30px 80px rgba(0,0,0,.55);

    position:relative;

    overflow:hidden;

}

.premium-email-modal::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top left,
            rgba(139,92,246,.18),
            transparent 45%
        );

    pointer-events:none;

}

.pem-icon{

    width:62px;

    height:62px;

    margin:0 auto 18px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #5b7cff
        );

    box-shadow:
        0 10px 35px rgba(124,58,237,.35);

}

.pem-title{

    color:#fff;

    font-size:28px;

    line-height:1.2;

    text-align:center;

    font-weight:800;

    margin:0 0 16px;

}

.pem-subtitle{

    color:#9ca3af;

    font-size:17px;

    line-height:1.7;

    text-align:center;

    margin-bottom:28px;

}



/* =========================
   INPUT
========================= */

.pem-input{

    margin:26px 0 20px;

}

.pem-input input{

    width:100%;

    height:60px;

    padding:0 20px;

    border-radius:16px;

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

    background:#171c2d;

    color:#fff;

    font-size:16px;

    outline:none;

    transition:.25s;

}

.pem-input input::placeholder{

    color:#81889a;

}

.pem-input input:focus{

    border-color:#7c5cff;

    box-shadow:

        0 0 0 4px rgba(124,92,255,.18);

}


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

.pem-consent{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:12px 0 12px;

    color:#c6cad7;

    font-size:14px;

    line-height:1.7;

}


.pem-consent a {
    color: #aeb4c5;
    text-decoration: none;
}

.pem-consent a:hover {
    color: #9ca4b8;
    text-decoration: none;
}


.pem-consent input{

    width:12px;

    height:12px;

    accent-color:#7c5cff;

    margin-top:2px;

}


/* =========================
   SHOPIER BOX
========================= */

.pem-security{

    display:flex;

    gap:16px;

    align-items:flex-start;

    padding:18px;

    margin-bottom:16px;

    border-radius:18px;

    background:

        rgba(255,255,255,.04);

    border:

        1px solid rgba(255,255,255,.05);

}

.pem-security-icon{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        rgba(124,92,255,.18);

    font-size:20px;

}

.pem-security strong{

    color:#fff;

    display:block;

    margin-bottom:6px;

}

.pem-security p{

    color:#9ca3af;

    margin:0;

    font-size:14px;

    line-height:1.6;

}


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

.pem-btn{

    width:100%;

    height:62px;

    border:none;

    border-radius:18px;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    color:white;

    background:

        linear-gradient(
            90deg,
            #8b5cf6,
            #3b82f6
        );

    transition:.25s;

    box-shadow:

        0 18px 40px rgba(92,70,255,.30);

}

.pem-btn:hover{

    transform:translateY(-2px);

    box-shadow:

        0 24px 50px rgba(92,70,255,.45);

}


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

.pem-footer{

    margin-top:18px;

    text-align:center;

    color:#8e96aa;

    font-size:13px;

}



.pem-close{

    position:absolute;

    top:18px;
    right:18px;

    width:38px;
    height:38px;

    border-radius:50%;

    border:none;

    background:rgba(255,255,255,.05);

    color:#9ca3af;

    cursor:pointer;

    transition:.25s;

}

.pem-close:hover{

    background:rgba(255,255,255,.10);

    color:#fff;

}


.pem-input{

    position:relative;

}

.pem-mail{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#8b5cf6;

    font-size:18px;

}

.pem-input input{

    padding-left:52px;

    box-sizing:border-box;

}


.pem-consent{

    font-size:15px;

}

.pem-consent input{

    width:20px;
    height:20px;
}


.pem-btn:disabled{

    opacity:.6;

    cursor:not-allowed;

}


.premium-email-modal{

box-shadow:

0 25px 80px rgba(0,0,0,.55),

0 0 80px rgba(124,92,255,.12);

}


.pem-error{

    min-height:22px;

    margin:6px 0 10px;

    color:#ff8a8a;

    font-size:14px;

}


.pem-security-icon{

    flex:0 0 48px;

    align-items:center;

}



@media (max-width:768px){

    .pem-title{

        font-size:24px;

        line-height:1.15;

    }


    .pem-subtitle{

        font-size:17px;

        line-height:1.15;

    }


    .pem-icon{

        width:18px;

        height:18px;
        
    }


}