/* =========================== 
   GLOBAL LAYOUT
   =========================== */
.connexion-container {
    height: 100vh;
    display: flex;
    position: relative;
    align-items: center;
    overflow: hidden; /* prevent scroll */
}

.split-container {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: var(--accent-darken-color);
    z-index: 1;
}

.left-section {
    flex: 0 0 35%;
    background-color: var(--accent-darken-color);
}

.right-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-color);
}

/* ===========================
   IMAGES / LOGOS
   =========================== */
.background-image {
    position: absolute;
    left: 7%;
    top: 20%;
    width: 35%;

    z-index: 2;
}

.login-logo,
.nv-logo {
    position: absolute;
    left: 7%;
    top: 4%;
    transform: translateX(-50%);
    width: 10%;
    z-index: 2;
}

/* ===========================
   CARDS & CONTAINERS
   =========================== */
.identity-card {
    max-width: 45%;
    width: 100%;
    margin: 0 auto;
    border: 1.5px solid var(--primary-color);
    border-radius: 8px;
    background-color: white;
    overflow: hidden;
}

.identity-card-body {
    padding: 1.5rem;
}

.identity-card-header {
    background-color: #7851A9;
    color: white;
    padding: 1rem;
}

/* Login container (alternate version of card) */
.login-container {
    width: 100%;
    max-width: 45%;
    padding: 70px;
    border: 1.5px solid var(--primary-color);
    border-radius: 8px;
    text-align: center;
    background-color: #fff;
}

.login-title {
    margin-bottom: 3rem;
    color: var(--font-color); /* Added font color */
}

/* ===========================
   FORMS
   =========================== */
.identity-form-group {
    margin-bottom: 1rem;
}

.identity-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

label::before,
label::after {
    background: transparent !important;
    box-shadow: none !important;
    max-width: 2px !important;
}

.form-floating > label {
    position: absolute;
    top: -1.25rem;
    left: 1rem;
    font-size: 1rem;
    font-weight: var(--normal-font-weight);
    font-family: var(--font-body-family);
    color: var(--font-color); /* Changed from --primary-color to --font-color */
    transition: 0.2s ease-out;
    pointer-events: none;
    height: fit-content;
}

.form-floating > .form-control {
    background-color: var(--accent-color);
    color: var(--font-color); /* Changed from --primary-color to --font-color */
    border: 1.5px solid var(--primary-color);
    height: 3.5rem; /* Fixed height for consistency */
    padding: 1rem 0.75rem; /* Consistent padding for vertical centering */
    line-height: 1.25; /* Proper line height for vertical centering */
    display: flex;
    align-items: center; /* Keep text vertically centered */
}

    .form-floating > .form-control:focus {
        border-color: #7851A9;
        box-shadow: none;
        padding: 1rem 0.75rem; /* Keep same padding when focused */
    }

    /* Ensure text stays centered when field has content but isn't focused */
    .form-floating > .form-control:not(:placeholder-shown) {
        padding: 1rem 0.75rem; /* Override Bootstrap's padding-top change */
    }

        .form-floating > .form-control:focus ~ label,
        .form-floating > .form-control:not(:placeholder-shown) ~ label {
            top: -1.5rem;
            font-size: 1rem;
            color: var(--font-color); /* Changed from --primary-color to --font-color */
            background: linear-gradient(to top, var(--accent-color) 50%, white 50%);
            padding: 0 0.2rem;
        }

.floating-label-group {
    position: relative;
    margin-top: 0.7rem;
}

#password-container {
    display: none;
}

/* ===========================
   LINKS & CHECKBOXES
   =========================== */
.link-container {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    font-size: 14px;
}

.remember-me {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    color: var(--font-color); /* Changed from --primary-color to --font-color */
}

.warning-remeber-me {
    margin-left: 1.3rem;
    font-size: var(--body-small-font-size);
    color: var(--primary-light-1);
}

.checkbox {
    text-align: left;
    margin-top: 1rem;
}

.forgot-password-link {
    color: var(--font-color); /* Changed from --primary-color to --font-color */
    font-size: 0.9rem;
    text-decoration: none;
}

    .forgot-password-link:hover {
        text-decoration: underline;
        color: var(--primary-color); /* On hover, use primary color for emphasis */
    }

/* ===========================
   SEPARATORS
   =========================== */
.divider-with-text {
    margin: 2rem 0;
    text-align: center;
    font-weight: bold;
    position: relative;
    color: var(--font-color); /* Added font color */
}

    .divider-with-text::before,
    .divider-with-text::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 40%;
        height: 1px;
        background-color: var(--primary-color);
    }

    .divider-with-text::before {
        left: 0;
    }

    .divider-with-text::after {
        right: 0;
    }

/* ===========================
   BUTTONS
   =========================== */
.identity-btn-primary {
    display: inline-block;
    width: 100%;
    margin-top: 1.2rem;
    padding: 12px;
    background-color: var(--primary-color);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .identity-btn-primary:hover {
        background-color: var(--secondary-color);
    }

.login-approve-button {
    display: none;
    margin-top: 1.2rem;
}

.login-alternate-button {
    background-color: var(--accent-color);
    border: 1.5px solid var(--primary-color);
    border-radius: 10px;
    color: var(--font-color); /* Changed from --primary-color to --font-color */
    padding: 12px;
    margin-top: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .login-alternate-button:hover {
        background-color: var(--accent-color);
        border: 1.5px solid var(--secondary-color);
        color: var(--secondary-color);
    }

/* ===========================
   ACTION LINKS
   =========================== */
.action-links-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.action-link {
    display: flex;
    align-items: center;
    color: var(--font-color); /* Changed from --primary-color to --font-color */
    font-size: 0.95rem;
    text-decoration: none;
}

    .action-link:hover {
        color: var(--secondary-color);
        text-decoration: underline;
    }

    .action-link .icon {
        margin-right: 0.5rem;
    }

/* ===========================
   SOCIAL LOGIN
   =========================== */
.social-login-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.social-login-btn {
    flex: 1;
    min-width: 140px;
    padding: 10px;
    border-radius: 6px;
}

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

@media (min-width: 1600px) {
    
    /* styles for very big screens */

    .identity-card {
        max-width: 600px;
    }
}
/* ===========================
   TABLET RESPONSIVE
   (iPad portrait & landscape, small laptops)
   =========================== */
@media (max-width: 1199.98px) {
    .connexion-container {
        height: 100vh;
        min-height: 100vh;
    }

    .split-container {
        flex-direction: row;
        height: 100%;
    }

    .left-section {
        flex: 0 0 30%; /* narrower left side */
    }

    .right-section {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .identity-card,
    .login-container {
        max-width: 55%; /* allow wider form on tablets */
        padding: 1.5rem;
    }

    .identity-card-body {
        padding: 1.5rem;
    }

    .login-title {
        margin-bottom: 2rem;
        font-size: 1.4rem;
    }

    .form-floating > .form-control {
        font-size: 1rem;
        height: 3.25rem;
        padding: 0.875rem 0.75rem; /* Consistent padding for tablets */
    }

        .form-floating > .form-control:focus,
        .form-floating > .form-control:not(:placeholder-shown) {
            padding: 0.875rem 0.75rem; /* Keep consistent padding */
        }

    .identity-btn-primary {
        padding: 12px;
        font-size: 1rem;
    }

    .action-links-container {
        gap: 0.75rem;
        justify-content: center;
    }
}

@media (max-width: 991.98px) {
    .left-section {
        padding: 1rem;
    }

    .identity-card {
        padding: 1.5rem;
        max-width: 400px;
    }
}

@media (max-width: 767.98px) {
    .connexion-container {
        height: 100vh;
        min-height: 100vh;
    }

    .split-container {
        flex-direction: column;
        height: 100%;
        min-height: 100vh;
    }

    .left-section {
        width: 100%;
        background-color: var(--accent-color);
        padding: 0;
        flex: 0 0 auto;
    }

    .right-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 1rem;
    }

    .nv-logo {
        padding: 2rem;
        position: relative;
        left: 50%;
        width: 80%;
        transform: translateX(-50%);
    }

    .background-image {
        display: none;
    }

    .identity-card {
        width: 100%;
        max-width: 400px;
        border: none;
        background-color: transparent;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top:0;
    }

    .identity-card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }

    .form-floating > .form-control {
        background-color: #fff !important;
        height: 3rem;
        padding: 0.75rem; /* Consistent padding for mobile */
    }

        .form-floating > .form-control:focus,
        .form-floating > .form-control:not(:placeholder-shown) {
            padding: 0.75rem; /* Keep consistent padding */
        }

    .signin-btn {
        margin: 1rem 0 0;
    }

    .action-links-container {
        margin-top: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
    }

    .action-link {
        background-color: #fff;
        padding: 10px 14px;
        border-radius: 6px;
        border: 1px solid var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .action-link:hover {
            background-color: var(--accent-color);
            color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
}

/* ===========================
   VERY SMALL PHONES
   =========================== */

/* iPhone SE, older small Androids (~568px height) */
@media (max-height: 600px) and (max-width: 767.98px) {
    .nv-logo {
        width: 50%;
        padding: 1rem;
    }

    .identity-card-body {
        padding: 0.5rem;
    }

    .identity-form-group {
        margin-bottom: 0.6rem;
    }

    .form-floating > .form-control {
        font-size: 0.9rem;
        height: 2.75rem;
        padding: 0.6rem 0.5rem; /* Consistent padding for small screens */
    }

        .form-floating > .form-control:focus,
        .form-floating > .form-control:not(:placeholder-shown) {
            padding: 0.6rem 0.5rem; /* Keep consistent padding */
        }

    .identity-btn-primary {
        padding: 8px;
        font-size: 0.85rem;
    }

    .action-links-container {
        gap: 0.5rem;
    }

    .action-link {
        font-size: 0.8rem;
        padding: 6px 8px;
    }
    .identity-form-actions {
        flex-direction: column;
        align-items: flex-start; /* left-align */
        gap: 0.5rem;
    }

    .modern-checkbox {
        order: 1;
    }

    .forgot-password-link {
        order: 2;
        font-size: 0.85rem;
    }
}

/* Extra tiny phones (~500px height or less) */
@media (max-height: 500px) and (max-width: 767.98px) {
    .nv-logo {
        width: 40%;
        padding: 0.5rem;
    }

    .identity-card {
        max-width: 95%;
    }

    .identity-card-body {
        padding: 0.25rem;
    }

    .form-floating > .form-control {
        font-size: 0.8rem;
        height: 2.5rem;
        padding: 0.5rem; /* Consistent padding for extra small screens */
    }

        .form-floating > .form-control:focus,
        .form-floating > .form-control:not(:placeholder-shown) {
            padding: 0.5rem; /* Keep consistent padding */
        }

    .identity-btn-primary {
        padding: 6px;
        font-size: 0.8rem;
    }

    .action-link {
        font-size: 0.75rem;
        padding: 5px 6px;
    }
}