/* auth.css - Non-Bootstrap Authentication Styles */

/* =========================
   BACKGROUND GRADIENTS
   ========================= */
.bg-gradient-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

/* =========================
   AUTH FORM CONTAINERS
   ========================= */
.auth-form {
    transition: opacity 0.3s ease-in-out;
}

.auth-form.d-none {
    opacity: 0;
}

/* =========================
   HERO SECTION ICONS
   ========================= */
.fa-4x {
    font-size: 3rem;
}

@media (max-width: 991.98px) {
    .fa-4x {
        font-size: 2.5rem;
    }
}

/* =========================
   PASSWORD STRENGTH INDICATOR
   ========================= */
.password-strength {
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    margin-top: 0.25rem;
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 2px;
}

.password-strength-weak { background-color: #dc3545; }
.password-strength-medium { background-color: #ffc107; }
.password-strength-strong { background-color: #198754; }

/* =========================
   LOADING ANIMATION
   ========================= */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner-border {
    animation: spin 0.75s linear infinite;
}

/* =========================
   CUSTOM SCROLLBAR
   ========================= */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* =========================
   MOBILE RESPONSIVENESS
   ========================= */
@media (max-width: 767.98px) {
    .auth-form {
        padding: 1rem;
    }
    
    .input-group {
        flex-wrap: nowrap;
    }
}