/* Validation Styles - Shared across all pages */

/* Form validation error states */
.form-group.error input:not(.iti__input),
.form-group.error .form-input:not(.iti__input) {
    border-color: #ff6b6b !important;
    background: rgba(255, 107, 107, 0.1) !important;
    animation: shake 0.5s ease-in-out;
}

.form-group.error label {
    color: #ff6b6b !important;
}

/* ITI phone input error states moved to iti-styles.css */

/* Shake animation for validation errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

/* Error state variations for different contexts - All modals use unified styles from modals.css */
.modal .form-group.error:not(.phone-input-wrapper) input,
.modal .form-group.error:not(.phone-input-wrapper) .form-input,
.modal .form-group.error select,
.modal .form-group.error textarea {
    border-color: #ff6b6b !important;
    background: rgba(255, 107, 107, 0.1) !important;
    animation: shake 0.5s ease-in-out;
}

.modal .form-group.error label {
    color: #ff6b6b !important;
}

/* Modal ITI error states moved to iti-styles.css */

/* Reserve page specific error states (already in reserve.css but kept for consistency) */
.reserve-main .form-group.error input:not(.iti__input) {
    border-color: #ff6b6b !important;
    background: rgba(255, 107, 107, 0.1) !important;
    animation: shake 0.5s ease-in-out;
}

.reserve-main .form-group.error label {
    color: #ff6b6b !important;
}

/* Reserve page ITI error states moved to iti-styles.css */

/* Enhanced disabled button states */
.btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-primary:disabled {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

.btn:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}