/* ===================================
   COMPONENT-SPECIFIC STYLES
   =================================== */

/* Utility Classes */
.nml-20 {
    margin-left: -20px !important;
}

.nml-13 {
    margin-left: -13px !important;
}

.ntop-25 {
    top: -25px !important;
}

/* Validation Styling */
.phone-input.valid {
    border-color: #10b981 !important;
}

.phone-input.invalid {
    border-color: #ef4444 !important;
}

/* Email Change Modal Styling */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* OTP Input Styling */
#otp_code {
    letter-spacing: 0.5em;
    font-family: 'Courier New', monospace;
}

/* Loading Button States */
.btn-loading {
    position: relative;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Checkbox Styling */
input[type="checkbox"] {
    accent-color: #3b82f6;
}

/* Password Strength Indicator */
.password-strength {
    height: 4px;
    border-radius: 2px;
    margin-top: 4px;
    transition: all 0.3s ease;
}

.password-strength.weak {
    background: linear-gradient(to right, #ef4444 0%, #ef4444 33%, #e5e7eb 33%, #e5e7eb 100%);
}

.password-strength.medium {
    background: linear-gradient(to right, #f59e0b 0%, #f59e0b 66%, #e5e7eb 66%, #e5e7eb 100%);
}

.password-strength.strong {
    background: linear-gradient(to right, #10b981 0%, #10b981 100%);
}

/* Warning Icon Animation */
.warning-icon {
    animation: pulse 2s infinite;
}

/* Success Modal Animation */
.success-icon {
    animation: bounceIn 0.6s ease-out;
}

/* ===================================
   ANIMATIONS
   =================================== */

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}