/**
 * ACI Framework - Auth Styles (Bootstrap 5 Compatible)
 * 
 * @package ACIFramework
 */

/* ========================================
   MODAL VISIBILITY FIX (Theme Compatibility)
   ======================================== */
#aciLoginModal,
#aciRegistrationModal,
#aciResetModal {
    opacity: 1 !important; /* Force visibility - fixes theme conflicts */
    z-index: 99999 !important; /* Ensure on top of all elements */
}

/* ========================================
   LOGIN TRIGGER BUTTON
   ======================================== */
.aci-login-trigger {
    cursor: pointer;
}

/* ========================================
   MODAL HEADERS
   ======================================== */
#aciLoginModal .modal-header,
#aciRegistrationModal .modal-header,
#aciResetModal .modal-header {
    background: #2271b1;
    color: #fff;
}

#aciLoginModal .btn-close,
#aciRegistrationModal .btn-close,
#aciResetModal .btn-close {
    filter: brightness(0) invert(1);
}

/* ========================================
   MODAL LOADING STATE
   ======================================== */
.modal.loading {
    pointer-events: none;
}

.modal.loading .modal-body {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

.modal.loading .modal-body::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2271b1;
    border-radius: 50%;
    animation: aci-spin 1s linear infinite;
    z-index: 9999;
}

@keyframes aci-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ========================================
   BUTTON LOADING STATE
   ======================================== */
.aci-btn-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: aci-btn-spinner 0.75s linear infinite;
}

@keyframes aci-btn-spinner {
    100% { transform: rotate(360deg); }
}

/* ========================================
   PASSWORD VISIBILITY TOGGLE
   ======================================== */
.aci-toggle-password {
    position: relative;
}

.aci-toggle-password .aci-icon-eye::before,
.aci-toggle-password .aci-icon-eye-slash::before {
    font-family: 'dashicons';
    font-size: 18px;
    line-height: 1;
    content: '\f177'; /* eye icon */
}

.aci-toggle-password .aci-icon-eye-slash::before {
    content: '\f530'; /* hidden icon */
}

.aci-toggle-password:hover {
    background-color: #f8f9fa;
}

/* ========================================
   MESSAGE ALERTS
   ======================================== */
#aciLoginMessage.alert,
#aciRegistrationMessage.alert,
#aciResetRequestMessage.alert,
#aciResetPINMessage.alert {
    display: block !important;
}

#aciLoginMessage:empty,
#aciRegistrationMessage:empty,
#aciResetRequestMessage:empty,
#aciResetPINMessage:empty {
    display: none !important;
}

/* ========================================
   FORM ENHANCEMENTS
   ======================================== */
.aci-auth-form .form-control:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 0.25rem rgba(34, 113, 177, 0.25);
}

.aci-auth-form .input-group-text {
    background-color: #f8f9fa;
}

.aci-auth-form .form-check-input:checked {
    background-color: #2271b1;
    border-color: #2271b1;
}

/* Required field indicator */
.aci-auth-form .text-danger {
    color: #dc3545 !important;
}

/* Form validation states */
.aci-auth-form .is-invalid {
    border-color: #dc3545 !important;
}

.aci-auth-form .is-valid {
    border-color: #198754 !important;
}

/* ========================================
   PHONE INPUT
   ======================================== */
.aci-phone-input::placeholder {
    color: #6c757d;
    font-style: italic;
}

/* ========================================
   RESET MODAL STEPS
   ======================================== */
.aci-reset-step {
    transition: opacity 0.3s ease-in-out;
}

.aci-reset-step.d-none {
    display: none !important;
}

/* PIN Input Styling */
#aciResetPIN {
    letter-spacing: 0.5em;
    text-align: center;
}

#aciResetPIN::placeholder {
    letter-spacing: normal;
}

/* ========================================
   MODAL FOOTER LINKS
   ======================================== */
.aci-forgot-password-link,
.aci-register-link,
.aci-login-link,
.aci-switch-to-pin-step,
.aci-switch-to-request-step,
.aci-back-to-login {
    text-decoration: none;
    color: #2271b1;
    transition: color 0.2s ease;
}

.aci-forgot-password-link:hover,
.aci-register-link:hover,
.aci-login-link:hover,
.aci-switch-to-pin-step:hover,
.aci-switch-to-request-step:hover,
.aci-back-to-login:hover {
    color: #135e96;
    text-decoration: underline;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .aci-auth-form .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .aci-auth-form .row > [class*='col-'] {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
.aci-auth-form .form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.aci-auth-form .form-text {
    font-size: 0.875rem;
    color: #6c757d;
}

.aci-auth-form .invalid-feedback {
    display: block;
    font-size: 0.875rem;
    color: #dc3545;
}

/* Focus visible for keyboard navigation */
.aci-auth-form *:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}