/* --- Student Login Portal Styling --- */

/* The Glass Card */
.glass-login-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

/* Glass Inputs */
.glass-input {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-radius: 12px;
    height: 58px;
    transition: all 0.3s ease;
}

/* When the input is focused */
.glass-input:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--color-orange) !important;
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.3) !important;
}

/* Fix for autocomplete background color in Chrome */
.glass-input:-webkit-autofill,
.glass-input:-webkit-autofill:hover,
.glass-input:-webkit-autofill:focus,
.glass-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1e3a8a inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Custom Checkbox */
.custom-checkbox .form-check-input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.custom-checkbox .form-check-input:checked {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

/* Custom Orange Button */
.btn-orange {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

.btn-login:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 107, 0, 0.4) !important;
    background-color: #ff7a1a;
}

/* Utility Helpers */
.hover-opacity-100:hover {
    opacity: 1 !important;
}

.hover-text-white:hover {
    color: #ffffff !important;
}

/* Adjustments for mobile view */
@media (max-width: 576px) {
    .glass-login-card {
        padding: 2rem !important;
        border-radius: 20px;
    }
}

/* Registration Outline Button */
.btn-register {
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.btn-register:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* --- Fix for Bootstrap 5 white block on floating labels --- */
.form-floating>.glass-input:focus~label::after,
.form-floating>.glass-input:not(:placeholder-shown)~label::after {
    background-color: transparent !important;
}

/* Ensure the label text stays perfectly visible when floated */
.form-floating>.glass-input:focus~label,
.form-floating>.glass-input:not(:placeholder-shown)~label {
    color: rgba(255, 255, 255, 0.9) !important;
}