/* ==========================================
   PREMIUM LOGIN POPUP
========================================== */

.premium-login-modal {
    padding-right: 0 !important;
}


/* Modal Width */

.premium-login-modal .internacia-modal {
    max-width: 480px;
    width: calc(100% - 30px);
}


/* Modal Content */

.premium-login-modal .modal-content {
    border: none;
    border-radius: 22px;
    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.22);

    animation: premiumLoginPopup 0.35s ease;
}


/* Animation */

@keyframes premiumLoginPopup {

    from {
        opacity: 0;
        transform: translateY(-15px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


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

.premium-login-modal .modal-header {

    border: none;

    padding: 28px 30px 22px;

    position: relative;

    background:
        linear-gradient(
            135deg,
            #f7f9ff 0%,
            #ffffff 70%
        );

    border-bottom: 1px solid #eef0f4;

}


.login-header-content {

    display: flex;
    align-items: center;

    gap: 14px;

}


/* User Icon */

.login-icon {

    width: 50px;
    height: 50px;

    border-radius: 15px;

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

    background:
        linear-gradient(
            135deg,
            #6d767e,
            #6d767e
        );

    box-shadow:
        0 8px 20px rgba(31, 78, 255, 0.25);

}


.login-icon img {

    width: 23px;
    height: 23px;

    filter: brightness(0) invert(1);

}


/* Title */

.premium-login-modal .modal-title {

    font-size: 22px;

    font-weight: 700;

    color: #172033;

    line-height: 1.2;

}


/* Subtitle */

.login-subtitle {

    font-size: 13px;

    color: #7a8495;

    margin-top: 5px;

}


/* Close Button */

.login-close {

    position: absolute;

    top: 16px;
    right: 18px;

    width: 34px;
    height: 34px;

    border: none;

    border-radius: 50%;

    background: #f2f4f7;

    color: #667085;

    font-size: 25px;

    line-height: 30px;

    cursor: pointer;

    transition: all 0.25s ease;

}


.login-close:hover {

    background: #e9edf3;

    color: #1f2937;

    transform: rotate(90deg);

}


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

.premium-login-modal .modal-body {

    padding: 25px 30px 18px;

}


/* Form Group */

.premium-login-modal .premium-form-group {

    margin-bottom: 22px;

}


.premium-login-modal .premium-form-group label {

    display: block;

    margin-bottom: 8px;

    color: #344054;

    font-size: 13px;

    font-weight: 600;

}


/* Password Label */

.password-label-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.password-label-row label {

    margin-bottom: 8px !important;

}


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

.premium-input {

    height: 52px;

    width: 100%;

    display: flex;

    align-items: center;

    background: #f8f9fb;

    border: 1px solid #e2e6ec;

    border-radius: 12px;

    transition: all 0.25s ease;

}


.premium-input:focus-within {

    background: #ffffff;

    border-color: #6d767e;

    box-shadow:
        0 0 0 4px rgba(31, 78, 255, 0.09);

}


/* Input Icon */

.premium-input .input-icon {

    width: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #7a8495;

}


.premium-input:focus-within .input-icon {

    color: #6d767e;

}


/* Input */

.premium-login-modal .premium-input .form-control {

    flex: 1;

    width: 100%;

    height: 50px;

    border: none !important;

    background: transparent !important;

    box-shadow: none !important;

    outline: none !important;

    padding: 0 16px 0 0;

    font-size: 14px;

    color: #1f2937;

}


.premium-login-modal .premium-input .form-control::placeholder {

    color: #a0a7b3;

    font-size: 13px;

}


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

.forgot-password-mobile {

    display: none;

    font-size: 12px;

    color: #6d767e;

    font-weight: 600;

    text-decoration: none;

}


.forgot-password-link {

    color: #687385;

    font-size: 13px;

    font-weight: 500;

    text-decoration: none;

    transition: color 0.2s ease;

}


.forgot-password-link:hover {

    color: #1f4eff;

    text-decoration: none;

}


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

.premium-login-modal .modal-footer {

    border-top: 1px solid #eef0f4;

    padding: 18px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #fcfcfd;

}


.login-buttons {

    display: flex;

    align-items: center;

    gap: 10px;

}


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

.btn-login-cancel {

    height: 44px;

    padding: 0 20px;

    border: 1px solid #dde2e8;

    background: #6d767e;

    color: #ffffff;

    border-radius: 10px;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.25s ease;

}


.btn-login-cancel:hover {

    background: #6d767e;

    border-color: #ffffff;

}


/* ==========================================
   SIGN IN BUTTON
========================================== */

.btn-login-submit {

    height: 44px;

    padding: 0 25px;

    border: none;

    border-radius: 10px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    background:
        linear-gradient(
            135deg,
            #46a74e,
            #46a74e
        );

    box-shadow:
        0 7px 18px rgba(31, 78, 255, 0.25);

    transition: all 0.25s ease;

}


.btn-login-submit:hover {

    transform: translateY(-1px);

    box-shadow:
        0 10px 24px rgba(31, 78, 255, 0.32);

}


/* ==========================================
   VALIDATION ERROR
========================================== */

.premium-login-modal .text-error {

    color: #dc3545;

    font-size: 12px;

    margin-top: 6px;

}


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

@media (max-width: 576px) {

    .premium-login-modal .internacia-modal {

        width: calc(100% - 20px);

        margin: 10px auto;

    }


    .premium-login-modal .modal-content {

        border-radius: 18px;

    }


    .premium-login-modal .modal-header {

        padding: 22px 20px 18px;

    }


    .premium-login-modal .modal-body {

        padding: 22px 20px 12px;

    }


    .premium-login-modal .modal-footer {

        padding: 16px 20px;

        flex-direction: column;

        align-items: stretch;

        gap: 14px;

    }


    .login-buttons {

        width: 100%;

    }


    .btn-login-cancel,
    .btn-login-submit {

        flex: 1;

    }


    .forgot-password-link {

        display: none;

    }


    .forgot-password-mobile {

        display: block;

    }


    .premium-login-modal .modal-title {

        font-size: 20px;

    }

}