/* =========================================================
   EMAIL VERIFICATION OVERLAY
========================================================= */

.email-verification-overlay {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 12px;

    box-sizing: border-box;

    background:
        rgba(2, 8, 18, 0.78);

    backdrop-filter:
        blur(10px);

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

}


/* =========================================================
   MAIN MODAL
   COMPACT SIZE
========================================================= */

.email-verification-modal {

    position: relative;

    width: min(
        680px,
        calc(100vw - 24px)
    );

    box-sizing: border-box;

    padding:
        25px
        30px
        20px;

    background:
        linear-gradient(
            145deg,
            #0e1829 0%,
            #091321 100%
        );

    border:
        1px solid
        rgba(95,145,210,0.38);

    border-radius:
        22px;

    box-shadow:

        0 25px 70px
        rgba(0,0,0,0.65),

        inset 0 0 35px
        rgba(30,100,190,0.035);

    text-align:
        center;

    animation:
        emailVerificationModalShow
        .4s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


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

.email-verification-icon {

    width:
        72px;

    height:
        72px;

    margin:
        0 auto 14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(42,104,255,.22),
            rgba(18,45,90,.08)
        );

    border:
        1px solid
        rgba(59,130,246,.65);

    box-shadow:

        0 0 0 7px
        rgba(37,99,235,.035),

        0 0 35px
        rgba(37,99,235,.18);

}


.email-verification-icon i {

    font-size:
        37px;

    color:
        #f4f7ff;

}


/* =========================================================
   TITLE
========================================================= */

.email-verification-modal h2 {

    margin:
        0;

    color:
        #f8fafc;

    font-size:
        25px;

    line-height:
        1.2;

    font-weight:
        750;

    letter-spacing:
        -0.5px;

}


.email-verification-modal h2 span {

    color:
        #83e85a;

}


/* =========================================================
   DIVIDER
========================================================= */

.verification-divider {

    width:
        210px;

    height:
        18px;

    margin:
        5px auto 3px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    color:
        #4195ff;

    position:
        relative;

}


.verification-divider::before,
.verification-divider::after {

    content:
        "";

    width:
        80px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #3b82f6
        );

}


.verification-divider::after {

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            transparent
        );

}


.verification-divider i {

    font-size:
        15px;

}


/* =========================================================
   GREETING
========================================================= */

.email-verification-greeting {

    margin:
        0 0 3px;

    color:
        #f1f5f9;

    font-size:
        16px;

    line-height:
        1.35;

}


.email-verification-greeting strong {

    color:
        #4f8cff;

}


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

.email-verification-text {

    margin:
        0 0 14px;

    color:
        #aebbd0;

    font-size:
        13px;

    line-height:
        1.5;

}


/* =========================================================
   EMAIL BOX
========================================================= */

.email-verification-email-box {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        13px 16px;

    margin:
        0 0 14px;

    box-sizing:
        border-box;

    background:
        rgba(20,32,50,.72);

    border:
        1px solid
        rgba(100,135,180,.45);

    border-radius:
        17px;

    text-align:
        left;

}


/* =========================================================
   EMAIL SHIELD
========================================================= */

.email-verification-shield {

    flex:
        0 0 56px;

    width:
        56px;

    height:
        56px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(64,145,255,.22),
            rgba(22,54,92,.35)
        );

    box-shadow:
        0 0 25px
        rgba(38,110,240,.16);

}


.email-verification-shield i {

    color:
        #77f24f;

    font-size:
        27px;

}


/* =========================================================
   EMAIL CONTENT
========================================================= */

.email-verification-email-content {

    min-width:
        0;

    flex:
        1;

}


.email-verification-email-label {

    margin:
        0 0 4px;

    color:
        #c7d2e2;

    font-size:
        12px;

    line-height:
        1.35;

}


.email-verification-email {

    color:
        #83f45b;

    font-size:
        16px;

    font-weight:
        700;

    line-height:
        1.3;

    word-break:
        break-word;

}


/* =========================================================
   INFORMATION BOX
========================================================= */

.email-verification-info-box {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    padding:
        13px 15px;

    margin:
        0 0 14px;

    box-sizing:
        border-box;

    background:
        rgba(9,20,36,.72);

    border:
        1px solid
        rgba(75,105,145,.35);

    border-radius:
        18px;

    text-align:
        left;

}


/* =========================================================
   MAIL ART
========================================================= */

.email-verification-mail-art {

    flex:
        0 0 190px;

    height:
        105px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

}


.mail-envelope {

    width:
        115px;

    height:
        82px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        linear-gradient(
            145deg,
            #2d79ff,
            #2538c5
        );

    box-shadow:
        0 15px 35px
        rgba(24,83,220,.3);

}


.mail-envelope::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        50px;

    background:
        linear-gradient(
            135deg,
            transparent 48%,
            rgba(255,255,255,.9) 49%,
            rgba(255,255,255,.9) 51%,
            transparent 52%
        );

    opacity:
        .85;

}


.mail-envelope > i {

    position:
        relative;

    z-index:
        2;

    color:
        #eaf2ff;

    font-size:
        39px;

}


.mail-check {

    position:
        absolute;

    right:
        -10px;

    bottom:
        -10px;

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #653cff;

    box-shadow:
        0 5px 18px
        rgba(86,58,255,.4);

}


.mail-check i {

    font-size:
        16px;

    color:
        #fff;

}


/* =========================================================
   INFORMATION CONTENT
========================================================= */

.email-verification-info-content {

    flex:
        1;

    min-width:
        0;

}


.email-verification-info-title {

    color:
        #f4f7fb;

    font-size:
        15px;

    font-weight:
        700;

    line-height:
        1.45;

    margin-bottom:
        6px;

}


.email-verification-info-title strong {

    color:
        #8d65ff;

}


.email-verification-info-text {

    color:
        #aebbd0;

    font-size:
        12px;

    line-height:
        1.55;

    margin-bottom:
        9px;

}


/* =========================================================
   SPAM NOTE
========================================================= */

.email-verification-spam {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        7px 10px;

    background:
        rgba(17,30,49,.8);

    border:
        1px solid
        rgba(65,95,135,.35);

    border-radius:
        10px;

    color:
        #b9c6d8;

    font-size:
        10.5px;

    line-height:
        1.35;

}


.email-verification-spam i {

    flex:
        0 0 auto;

    color:
        #b7ff54;

    font-size:
        17px;

}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.email-verification-actions {

    display:
        flex;

    flex-direction:
        row;

    gap:
        12px;

    margin:
        0;

}


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

.email-verification-btn {

    flex:
        1;

    min-width:
        0;

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    box-sizing:
        border-box;

    padding:
        10px 15px;

    border-radius:
        12px;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        all .22s ease;

}





/* =========================================================
   VERIFY LATER / Okay Button Currently
========================================================= */

.verify-later {

  background:
        linear-gradient(
            135deg,
            #3387ff,
            #613cff
        );

    color:
        #ffffff;

    border:
        1px solid
        rgba(110,170,255,.35);

    box-shadow:
        0 9px 24px
        rgba(55,93,255,.22);

}


.verify-later:hover {

  transform:
        translateY(-2px);

    filter:
        brightness(1.08);

    box-shadow:
        0 13px 30px
        rgba(55,93,255,.32);

}


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

.email-verification-btn i {

    font-size:
        16px;

}


/* =========================================================
   EXPIRY
========================================================= */

.email-verification-expiry {

    margin:
        10px 0 0;

    color:
        #6d7d93;

    font-size:
        10.5px;

    line-height:
        1.3;

}


.email-verification-expiry i {

    margin-right:
        5px;

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes emailVerificationModalShow {

    from {

        opacity:
            0;

        transform:
            translateY(15px)
            scale(.96);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 700px) {

    .email-verification-modal {

        width:
            min(
                620px,
                calc(100vw - 24px)
            );

        padding:
            21px
            22px
            17px;

    }


    .email-verification-icon {

        width:
            62px;

        height:
            62px;

        margin-bottom:
            11px;

    }


    .email-verification-icon i {

        font-size:
            32px;

    }


    .email-verification-modal h2 {

        font-size:
            22px;

    }


    .email-verification-email-box {

        padding:
            11px 13px;

    }


    .email-verification-info-box {

        gap:
            12px;

    }


    .email-verification-mail-art {

        flex-basis:
            145px;

        height:
            90px;

    }


    .mail-envelope {

        width:
            95px;

        height:
            68px;

    }


    .mail-envelope > i {

        font-size:
            32px;

    }

}


/* =========================================================
   MOBILE
   NO SCROLL
========================================================= */

@media (max-width: 520px) {

    .email-verification-overlay {

        padding:
            8px;

    }


    .email-verification-modal {

        width:
            calc(100vw - 16px);

        padding:
            16px
            13px
            12px;

        border-radius:
            18px;

    }


    .email-verification-icon {

        width:
            52px;

        height:
            52px;

        margin-bottom:
            8px;

        box-shadow:
            0 0 0 5px
            rgba(37,99,235,.035),

            0 0 25px
            rgba(37,99,235,.15);

    }


    .email-verification-icon i {

        font-size:
            27px;

    }


    .email-verification-modal h2 {

        font-size:
            18px;

        letter-spacing:
            -.25px;

    }


    .verification-divider {

        height:
            12px;

        margin:
            3px auto 2px;

    }


    .verification-divider::before,
    .verification-divider::after {

        width:
            55px;

    }


    .verification-divider i {

        font-size:
            11px;

    }


    .email-verification-greeting {

        font-size:
            13px;

        margin-bottom:
            2px;

    }


    .email-verification-text {

        font-size:
            11px;

        margin-bottom:
            8px;

    }


    .email-verification-email-box {

        gap:
            9px;

        padding:
            8px 10px;

        margin-bottom:
            8px;

        border-radius:
            12px;

    }


    .email-verification-shield {

        flex-basis:
            38px;

        width:
            38px;

        height:
            38px;

    }


    .email-verification-shield i {

        font-size:
            19px;

    }


    .email-verification-email-label {

        font-size:
            9px;

        margin-bottom:
            2px;

    }


    .email-verification-email {

        font-size:
            12px;

    }


    .email-verification-info-box {

        gap:
            8px;

        padding:
            8px;

        margin-bottom:
            8px;

        border-radius:
            12px;

    }


    .email-verification-mail-art {

        flex:
            0 0 80px;

        height:
            64px;

    }


    .mail-envelope {

        width:
            66px;

        height:
            48px;

        border-radius:
            8px;

    }


    .mail-envelope > i {

        font-size:
            23px;

    }


    .mail-check {

        width:
            22px;

        height:
            22px;

        right:
            -6px;

        bottom:
            -6px;

    }


    .mail-check i {

        font-size:
            10px;

    }


    .email-verification-info-title {

        font-size:
            10.5px;

        line-height:
            1.3;

        margin-bottom:
            3px;

    }


    .email-verification-info-text {

        font-size:
            8.5px;

        line-height:
            1.35;

        margin-bottom:
            5px;

    }


    .email-verification-spam {

        gap:
            4px;

        padding:
            4px 6px;

        border-radius:
            7px;

        font-size:
            7.5px;

    }


    .email-verification-spam i {

        font-size:
            12px;

    }


    .email-verification-actions {

        gap:
            7px;

    }


    .email-verification-btn {

        min-height:
            40px;

        padding:
            7px 8px;

        border-radius:
            9px;

        font-size:
            11px;

        gap:
            5px;

    }


    .email-verification-btn i {

        font-size:
            12px;

    }


    .email-verification-expiry {

        margin-top:
            6px;

        font-size:
            8px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
   EXTRA COMPACT
========================================================= */

@media (max-width: 380px) {

    .email-verification-modal {

        padding:
            13px
            10px
            9px;

    }


    .email-verification-icon {

        width:
            46px;

        height:
            46px;

        margin-bottom:
            6px;

    }


    .email-verification-icon i {

        font-size:
            23px;

    }


    .email-verification-modal h2 {

        font-size:
            16px;

    }


    .email-verification-greeting {

        font-size:
            12px;

    }


    .email-verification-text {

        font-size:
            10px;

    }


    .email-verification-email-box {

        padding:
            7px 8px;

    }


    .email-verification-shield {

        flex-basis:
            34px;

        width:
            34px;

        height:
            34px;

    }


    .email-verification-shield i {

        font-size:
            17px;

    }


    .email-verification-email {

        font-size:
            10.5px;

    }


    .email-verification-info-box {

        padding:
            7px;

    }


    .email-verification-mail-art {

        flex-basis:
            68px;

    }


    .mail-envelope {

        width:
            58px;

        height:
            43px;

    }


    .mail-envelope > i {

        font-size:
            20px;

    }


    .email-verification-info-title {

        font-size:
            9.5px;

    }


    .email-verification-info-text {

        font-size:
            7.7px;

    }


    .email-verification-spam {

        font-size:
            6.8px;

    }


    .email-verification-btn {

        min-height:
            37px;

        font-size:
            10px;

    }


    .email-verification-expiry {

        font-size:
            7.5px;

    }

}

/* =========================================================
   REGISTER PAGE
   ========================================================= */

.login-page {
    width: 100%;
}

.login-page .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.login-box {
    width: 100%;
    max-width: 500px;
    margin: 40px auto;
    box-sizing: border-box;
}

.login-box form {
    width: 100%;
}

.login-box .form-group {
    width: 100%;
}

.login-box input,
.login-box select,
.login-box textarea {
    width: 100%;
    box-sizing: border-box;
}

.password-note {
    display: block;
    margin-top: 7px;
    color: #777;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .login-page .container {
        max-width: none;
        padding-left: 4px;
        padding-right: 4px;
    }

    .login-box {
        width: 100%;
        max-width: none;
        margin: 35px auto;
    }
}

@media (max-width: 380px) {
    .login-page .container {
        padding-left: 2px;
        padding-right: 2px;
    }

    .login-box {
        width: 100%;
        max-width: none;
        margin: 25px auto;
    }
}

/* =========================================================
   VERIFICATION EMAIL HTML
   ========================================================= */

/*
 * These classes are provided for the verification email markup.
 * Note: most email clients do not reliably load external CSS files.
 * For maximum email-client compatibility, critical email styles are
 * normally kept inline or embedded inside the email itself.
 */
.email-body {
    margin: 0;
    padding: 0;
    background: #f4f7fb;
    font-family: Arial, Helvetica, sans-serif;
}

.email-wrapper {
    background: #f4f7fb;
    padding: 40px 15px;
}

.email-card {
    max-width: 600px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

.email-header {
    background: #111827;
    padding: 30px 25px;
    text-align: center;
}

.email-header h1 {
    margin: 0;
    color: #ffffff;
    font-size: 28px;
}

.email-header p {
    margin: 8px 0 0;
    color: #cbd5e1;
    font-size: 14px;
}

.email-content {
    padding: 35px 30px;
}

.email-content h2 {
    margin: 0 0 18px;
    color: #111827;
    font-size: 23px;
}

.email-content p {
    margin: 0 0 15px;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.7;
}

.email-address {
    background: #f3f4f6;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    margin-bottom: 25px;
    word-break: break-word;
}

.email-address strong {
    color: #111827;
    font-size: 15px;
}

.email-button-wrap {
    margin: 0 0 25px;
}

.email-button {
    display: inline-block;
    background: #2563eb;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: bold;
}

.email-note {
    margin: 0 0 10px !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.email-footer {
    background: #f9fafb;
    padding: 20px 25px;
    text-align: center;
}

.email-footer p {
    margin: 0;
    color: #9ca3af;
    font-size: 12px;
}