/* General Styles */
body {
    background: url(/static/core/images/background-image.webp) no-repeat center center;
    background-size: cover;
    background-attachment: fixed; /* Keeps background fixed during scroll */
}

/* Enhanced transparent mirror effect for card */
.card-body {
    background: rgba(255, 255, 255, 0.1); /* More transparent white */
    backdrop-filter: blur(5px); /* Glass effect */
    -webkit-backdrop-filter: blur(5px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
}

.main-wrapper {
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

/* Card Styles with enhanced transparency */
.card {
    border-radius: 15px; /* Slightly more rounded */
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05); /* Very transparent card background */
    backdrop-filter: blur(5px); /* Enhanced glass effect */
    -webkit-backdrop-filter: blur(5px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

/* Login Image */
.bg-login-image {
    background: url(/static/client_basic_info/images/logo/logo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 200px 100px;
}

/* Form Styles with enhanced transparency */
.user .form-group {
    margin-bottom: 10px;
}

/* Enhanced form controls for better visibility */
form.user .form-control-user {
    font-size: 0.8rem;
    border-radius: 10px;
    padding: .6rem .6rem;
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #333; /* Darker text for better readability */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

form.user .form-control-user::placeholder {
    color: rgba(51, 51, 51, 0.7); /* Semi-transparent placeholder */
}

.user input:focus {
    box-shadow: 0 0 8px var(--main-color);
    background: rgba(255, 255, 255, 0.3); /* Slightly more opaque on focus */
    border-color: rgba(255, 255, 255, 0.5);
}

/* Button with enhanced styling */
.btn-primary {
    background: var(--main-grident);
    border: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn-primary:hover {
    background: var(--main-grident);
    transform: translateY(-1px); /* Subtle lift effect */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

form.user .btn-user {
    font-size: 0.8rem;
    border-radius: 10px;
    padding: 0.6rem 1.5rem;
}

/* Enhanced text visibility */
.text-info {
    color: #333 !important; /* Darker text for better contrast */
    font-weight: 600;
}

.text-secondary {
    color: #555 !important; /* Darker secondary text */
}

/* Enhanced login section background */
.col-lg-7 .p-4 {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0 15px 15px 0; /* Match card border radius */
}

/* Responsive */
@media (max-width: 768px) {
    .bg-login-image {
        display: none;
    }
    .card {
        border-radius: 15px;
        margin: 1rem; /* Add some margin on mobile */
    }
    
    .col-lg-7 .p-4 {
        border-radius: 15px; /* Full border radius on mobile */
    }
}

form.user .custom-checkbox.small label {
    line-height: 1.5rem;
    color: #333; /* Darker label text */
}

/* Error text styling for better visibility */
.text-warning {
    color: #dc3545 !important; /* Red color for errors */
    font-weight: 500;
}


/* Full screen loader on initial page load */
#page-loader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: white;
z-index: 9998;
display: flex;
justify-content: center;
align-items: center;
}

/* Spinner that follows cursor on form submit */
#cursor-spinner {
display: none;
position: fixed;
z-index: 9999;
pointer-events: none;
transform: translate(-50%, -50%);
}