#loginModal .modal-content {
    background-color: #222 !important; /* Dark modal background */
    color: #fff !important; /* Light text color */
    border-radius: 10px !important; /* Rounded corners */
    padding: 20px; /* Added padding for better spacing */
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
}


/* === Desktop/tablette (> 576px) : fixe à 600px === */
@media (min-width: 577px) {
    #loginModal .modal-content {
        background-color: #222 !important;
        color: #fff !important;
        border-radius: 10px !important;
        padding: 20px;
        width: 600px !important;
        margin: 0 auto;
    }
}

#loginModal .modal-header-login,
#loginModal .modal-footer {
    border: none !important; /* Remove borders */
    justify-content: center !important; /* Center the content */
    display: block !important;
    padding: 10px !important; /* Reduce padding */
}

#loginModal .vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}

#loginModal .vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}

#loginModal .modal-header-login .close {
    color: #fff !important; /* White close button */
    opacity: 1 !important; /* Ensure visibility of the close button */
}

#loginModal .logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    margin-bottom: 10px !important;
}

#loginModal .logo img {
    width: 150px !important; /* Reduce logo size */
    margin-bottom: 8px !important; /* Less space below the logo */
}

#loginModal .modal-title-login {
    font-size: 1.3rem !important; /* Slightly reduce title size */
    text-align: center !important; /* Center the title text */
    width: 100% !important; /* Ensure title is centered in the header */
    font-weight: bold !important;
}

#loginModal .modal-body p {
    margin-bottom: 15px !important; /* Add space below the paragraph */
    font-size: 1rem;
}

#loginModal .login-form p {
    font-weight: bold !important;
    margin-bottom: 15px !important;
    text-align: left !important;
}

#loginModal .form-control {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #666 !important;
    padding: 8px 10px 0 45px !important; /* Reduce padding inside inputs */
    height: 35px !important; /* Reduce input height */
    font-size: 0.9rem !important; /* Slightly reduce font size */
}

#loginModal .form-control::placeholder {
    color: #888 !important; /* Lighter gray placeholder text */
}

#loginModal .forgot-password a {
    color: #fff !important; /* White link */
    text-decoration: underline !important;
    display: flex;
    justify-content: start;
    margin-top: 20px !important;
    font-size: 0.8rem !important;
    margin-top: 5px !important; /* Less space between the inputs and the link */
}

#loginModal .btn-primary {
    background-color: transparent !important; /* Transparent background */
    border: solid 1px turquoise !important; /* Turquoise border */
    color: whitesmoke !important; /* White text */
    font-weight: bold !important;
    border-radius: 5%; /* Rounded corners */
    width: 37% !important; /* Set width */
    height: 40px !important; /* Reduce button height */
    margin: 15px auto !important; /* Center the button horizontally */
    text-transform: uppercase !important; /* Uppercase for button text */
    display: flex !important; /* Flexbox for centering */
    justify-content: center !important; /* Horizontally center text */
    align-items: center !important; /* Vertically center text */
    text-align: center !important; /* Ensure text is centered */
    cursor: pointer !important; /* Make cursor a pointer */
    font-size: 0.9rem !important; /* Slightly reduce button text size */
}

#loginModal .modal-footer a {
    color: #ffd700 !important; /* Gold link */
    font-weight: bold !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
}

#loginModal .input-icon {
    position: relative !important;
    margin-bottom: 15px !important; /* Add space between form inputs */
}

#loginModal .btn-primary:hover {
    background-color: turquoise !important; /* Change background color on hover */
    color: #000 !important; /* Change text color to black on hover */
    border-color: turquoise !important; /* Keep border color turquoise */
}

#loginModal .input-icon i {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #888 !important; /* Color of the icon */
    font-size: 1.2rem !important;
}

#loginModal .input-icon .toggle-password {
    position: absolute !important;
    right: 45px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    color: #888 !important; /* Color of the eye icon */
    font-size: 1.2rem !important;
}

#loginModal .form-control:focus {
    border-color: #ffd700 !important; /* Gold border on focus */
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5) !important; /* Gold glow on focus */
}

/* Error message list item */
#loginModal #login-modal-error {
    color: red !important;
    display: none !important; /* Initially hidden */
}