/* =========================================================
   AUTH MODALS — PREMIUM DESIGN
========================================================= */

/* Modal backdrop */
#loginModal,
#signupModal {

    background: rgba(15, 23, 42, 0.58);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


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

#loginModal .modal-dialog,
#signupModal .modal-dialog {

    width: calc(100% - 30px);

    margin: 1.75rem auto;
}


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

#loginModal .modal-content,
#signupModal .modal-content {

    position: relative;

    border: 1px solid rgba(255,255,255,.7) !important;

    border-radius: 22px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdfc 100%
        );

    box-shadow:
        0 25px 70px rgba(15,23,42,.22) !important;

    overflow: visible !important;
}


/* =========================================================
   LOGIN / SIGNUP FORM
========================================================= */

#loginForm,
#signupForm {

    padding: 24px !important;
}


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

#loginModal .modal-header,
#signupModal .modal-header {

    display: flex;

    align-items: center;

    padding:
        4px 0 15px !important;

    border: 0 !important;
}


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

#loginModal .modal-title,
#signupModal .modal-title {

    color: #166534;

    font-size: 20px;

    font-weight: 800;

    letter-spacing: -.2px;
}

#signupModal .modal-title {

    font-size: 21px;
}


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

#loginModal .btn-close,
#signupModal .btn-close {

    width: 34px;

    height: 34px;

    margin-left: auto;

    padding: 8px;

    border-radius: 50%;

    background-color: #f1f5f3;

    opacity: 1;

    transition:
        background .2s ease,
        transform .2s ease;
}

#loginModal .btn-close:hover,
#signupModal .btn-close:hover {

    background-color: #e5eee8;

    transform: rotate(90deg);
}


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

#loginModal .modal-body,
#signupModal .modal-body {

    padding:
        0 !important;
}


/* =========================================================
   FORM LABEL
========================================================= */

#loginModal .form-label,
#signupModal .form-label {

    color: #374151;

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   FORM CONTROLS
========================================================= */

#loginModal .form-control,
#signupModal .form-control {

    min-height: 46px;

    border:
        1px solid #dfe6e1 !important;

    border-radius: 10px !important;

    background: #ffffff;

    color: #1f2937;

    font-size: 13px;

    box-shadow: none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

#loginModal .form-control:focus,
#signupModal .form-control:focus {

    border-color:
        #2e8b57 !important;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(46,139,87,.10) !important;
}


/* =========================================================
   FLOATING LABELS
========================================================= */

#loginModal .form-floating > label {

    color: #94a3b8;

    font-size: 13px;
}

#loginModal .form-floating > .form-control:focus ~ label,
#loginModal .form-floating > .form-control:not(:placeholder-shown) ~ label {

    color: #2e8b57;
}


/* =========================================================
   CAPTCHA AREA
========================================================= */

#loginModal .input-group,
#signupModal .input-group {

    display: flex;

    align-items: center;

    gap: 8px;
}


/* CAPTCHA IMAGE */

#captchaImage,
#signupCaptchaImage {

    width: 145px;

    height: 50px;

    object-fit: cover;

    border:
        1px solid #dfe6e1 !important;

    border-radius: 9px !important;

    background: #f8faf9;
}


/* CAPTCHA REFRESH */

#loginModal .input-group .btn,
#signupModal .input-group .btn {

    min-width: 42px;

    height: 42px;

    margin-left: 0 !important;

    padding: 7px 10px;

    border:
        1px solid #d8e2dc !important;

    border-radius: 9px !important;

    background: #f8faf9;

    color: #166534;

    font-weight: 800;

    transition:
        background .2s ease,
        transform .2s ease;
}

#loginModal .input-group .btn:hover,
#signupModal .input-group .btn:hover {

    background: #edf8f1;

    transform: translateY(-1px);
}


/* CAPTCHA INPUT */

#captcha,
#signupCaptcha {

    margin-top: 8px !important;

    letter-spacing: 1px;

    font-weight: 600;
}


/* =========================================================
   REMEMBER ME
========================================================= */

#loginModal .form-check {

    display: flex;

    align-items: center;

    gap: 7px;
}

#loginModal .form-check-input {

    margin: 0;

    width: 17px;

    height: 17px;

    accent-color: #2e8b57;

    cursor: pointer;
}

#loginModal .form-check-label {

    color: #64748b;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;
}


/* =========================================================
   FORGOT PASSWORD
========================================================= */

#toggleForgot {

    color: #2e8b57 !important;

    font-size: 12px;

    font-weight: 700;
}

#toggleForgot:hover {

    color: #166534 !important;

    text-decoration: underline !important;
}


/* =========================================================
   FORGOT PASSWORD SECTION
========================================================= */

#forgotSection {

    margin-top: 10px;

    padding: 15px;

    border-radius: 13px;

    background: #f7faf8;

    border: 1px solid #e2ece5;
}


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

#sendOtpBtn {

    min-height: 42px;

    border: 0 !important;

    border-radius: 9px !important;

    background: #64748b !important;

    color: #ffffff !important;

    font-size: 12px;

    font-weight: 700;
}

#sendOtpBtn:hover {

    background: #475569 !important;
}


/* =========================================================
   RESET PASSWORD BUTTON
========================================================= */

#resetPasswordBtn {

    min-height: 44px;

    border: 0 !important;

    border-radius: 10px !important;

    background:
        linear-gradient(
            135deg,
            #2e8b57,
            #256f47
        ) !important;

    color: #ffffff !important;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 6px 16px rgba(46,139,87,.18);
}

#resetPasswordBtn:hover {

    transform: translateY(-1px);

    box-shadow:
        0 9px 20px rgba(46,139,87,.25);
}


/* =========================================================
   PASSWORD RULES
========================================================= */

#passwordRules,
#forgotPasswordRules {

    margin-top: 7px !important;

    padding: 10px !important;

    border:
        1px solid #e5ebe7 !important;

    border-radius: 9px !important;

    background: #f8faf9 !important;

    box-shadow: none !important;
}

#passwordRules li,
#forgotPasswordRules li {

    margin: 3px 0;

    font-size: 11px;

    line-height: 1.5;
}

#passwordRules .text-success,
#forgotPasswordRules .text-success {

    color: #16803c !important;

    font-weight: 700;
}

#passwordRules .text-danger,
#forgotPasswordRules .text-danger {

    color: #dc2626 !important;
}


/* =========================================================
   PASSWORD MATCH
========================================================= */

#matchFeedback,
#forgotMatchFeedback {

    font-size: 11px !important;

    font-weight: 700;
}


/* =========================================================
   SIGNUP GRID
========================================================= */

#signupModal .row {

    --bs-gutter-x: 10px;

    --bs-gutter-y: 10px;
}


/* =========================================================
   NATIONALITY
========================================================= */

#signupModal .country-select {

    width: 100% !important;
}

#signupModal .country-select input {

    min-height: 46px !important;

    border:
        1px solid #dfe6e1 !important;

    border-radius: 10px !important;

    background: #ffffff;

    font-size: 13px;

    box-shadow: none !important;
}

#signupModal .country-select input:focus {

    border-color:
        #2e8b57 !important;

    box-shadow:
        0 0 0 3px
        rgba(46,139,87,.10) !important;
}


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

#loginModal .modal-footer,
#signupModal .modal-footer {

    padding:
        15px 0 0 !important;

    border: 0 !important;
}


/* =========================================================
   MAIN LOGIN / REGISTER BUTTON
========================================================= */

#loginModal .modal-footer .btn-primary,
#signupModal .modal-footer .btn-primary {

    min-height: 46px;

    padding: 11px 18px;

    border:
        1px solid #2e8b57 !important;

    border-radius: 10px !important;

    background:
        linear-gradient(
            135deg,
            #2e8b57,
            #256f47
        ) !important;

    color: #ffffff !important;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 7px 18px rgba(46,139,87,.20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

#loginModal .modal-footer .btn-primary:hover,
#signupModal .modal-footer .btn-primary:hover {

    transform: translateY(-1px);

    box-shadow:
        0 10px 23px rgba(46,139,87,.28);
}


/* =========================================================
   REGISTER FOOTER TEXT
========================================================= */

#signupModal .modal-footer small {

    color: #64748b;

    font-size: 11px;

    text-align: center;
}

#signupModal .modal-footer small a {

    color: #2e8b57;

    font-weight: 800;

    text-decoration: none;
}

#signupModal .modal-footer small a:hover {

    text-decoration: underline;
}


/* =========================================================
   ALERT MESSAGES
========================================================= */

#loginMessage,
#signupMessage {

    font-size: 12px;

    line-height: 1.5;
}

#loginMessage .alert,
#signupMessage .alert {

    margin-bottom: 12px;

    padding: 9px 11px;

    border-radius: 9px;

    font-size: 12px;

    font-weight: 600;
}


/* =========================================================
   MOBILE AUTH MODALS
========================================================= */

@media (max-width: 576px) {

    #loginModal .modal-dialog,
    #signupModal .modal-dialog {

        width: calc(100% - 20px);

        margin:
            10px auto;
    }

    #loginModal .modal-content,
    #signupModal .modal-content {

        border-radius: 18px !important;
    }

    #loginForm,
    #signupForm {

        padding: 19px !important;
    }

    #loginModal .modal-title,
    #signupModal .modal-title {

        font-size: 18px;
    }

    #signupModal .row {

        --bs-gutter-x: 0;

        --bs-gutter-y: 10px;
    }

    #signupModal .col-md-6 {

        width: 100%;
    }

    #captchaImage,
    #signupCaptchaImage {

        width: 135px;

        height: 48px;
    }

    #loginModal .input-group .btn,
    #signupModal .input-group .btn {

        height: 40px;

        min-width: 40px;
    }

    #loginModal .form-control,
    #signupModal .form-control {

        min-height: 44px;

        font-size: 13px;
    }

    #loginModal .modal-footer .btn-primary,
    #signupModal .modal-footer .btn-primary {

        min-height: 44px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    #loginForm,
    #signupForm {

        padding: 16px !important;
    }

    #loginModal .modal-title,
    #signupModal .modal-title {

        font-size: 17px;
    }

    #captchaImage,
    #signupCaptchaImage {

        width: 125px;

        height: 46px;
    }

    #forgotSection {

        padding: 12px;
    }
}