/**
 * Tranzip Form Validation Styles
 * Author: Yogesh
 * 
 * This file adds inline validation to existing forms without breaking current styles.
 * It respects the existing design patterns:
 * - Contact forms: Underline-only borders
 * - Banner forms: Full borders with rounded corners
 */

/* ===== 1. VALIDATION STATES ===== */
/* Error state for inputs - respects existing border styles */
.contacts-input.field-error {
    border-bottom-color: #DC2626 !important;
    background-color: rgba(254, 242, 242, 0.5); /* Subtle red tint */
}

.banner-form-text-field.field-error,
.banner-form-input.field-error {
    border-color: #DC2626 !important;
    background-color: rgba(254, 242, 242, 0.5);
}

.contacts-textarea.field-error {
    border-bottom-color: #DC2626 !important;
    background-color: rgba(254, 242, 242, 0.5);
}

/* Success state for inputs */
.contacts-input.field-success {
    border-bottom-color: #16A34A !important;
    background-color: rgba(240, 253, 244, 0.5); /* Subtle green tint */
}

.banner-form-text-field.field-success,
.banner-form-input.field-success {
    border-color: #16A34A !important;
    background-color: rgba(240, 253, 244, 0.5);
}

.contacts-textarea.field-success {
    border-bottom-color: #16A34A !important;
    background-color: rgba(240, 253, 244, 0.5);
}

/* ===== 2. FIELD WRAPPER FOR VALIDATION ===== */
.field-validation-wrapper {
    position: relative;
    margin-bottom: 15px; /* Matches existing input spacing */
}

.field-validation-wrapper.has-error {
    margin-bottom: 8px; /* Reduce when showing error */
}

/* ===== 3. VALIDATION MESSAGES ===== */
.validation-message {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
    animation: slideIn 0.2s ease;
}

.validation-message.show {
    display: flex;
}

.validation-message.error {
    color: #DC2626;
}

.validation-message.success {
    color: #16A34A;
}

/* Validation icons */
.validation-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ===== 4. SUCCESS CHECKMARKS - REMOVED PER USER REQUEST ===== */
/* Success checkmarks have been removed for cleaner UI */
.field-success-icon {
    display: none !important; /* Force hide any success icons */
}

/* ===== 6. MOBILE OPTIMIZATIONS ===== */
@media (max-width: 767px) {
    .validation-message {
        font-size: 13px;
        margin-top: 4px;
        margin-bottom: 6px;
    }
    
    .field-validation-wrapper.has-error {
        margin-bottom: 6px;
    }
    
    .field-success-icon {
        right: 16px;
        width: 18px;
        height: 18px;
    }
}

/* ===== 7. ANIMATIONS ===== */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 8. TRANSITIONS ===== */
/* Smooth transitions for state changes */
.contacts-input,
.banner-form-text-field,
.banner-form-input,
.contacts-textarea {
    transition: border-color 0.3s ease, border-width 0.3s ease, background-color 0.3s ease;
}

/* ===== 9. IMPROVED FOCUS STATES ===== */

/* Banner Form (Full Border) - Focus States */
.banner-form-text-field:hover {
    border-color: rgba(112, 238, 145, 0.3); /* Subtle green on hover */
}

.banner-form-text-field:focus {
    border-color: var(--primary) !important;
    /* Keep border at 1px to prevent layout shift */
}

.banner-form-text-field.field-error:hover {
    border-color: rgba(220, 38, 38, 0.3); /* Subtle red on hover */
}

.banner-form-text-field.field-error:focus {
    border-width: 2px;
    padding: 0 19px;
}

/* Contact Form (Underline Only) - Focus States */
.contacts-input:hover {
    border-bottom-color: rgba(112, 238, 145, 0.5); /* Subtle green on hover */
}

.contacts-input:focus {
    border-bottom-color: var(--primary) !important;
    /* Keep border at 1px to prevent layout shift */
    /* No padding change needed */ /* Compensate for thicker border */
}

.contacts-input.field-error:hover {
    border-bottom-color: rgba(220, 38, 38, 0.5); /* Subtle red on hover */
}

.contacts-input.field-error:focus {
    /* Keep border at 1px to prevent layout shift */
    /* No padding change needed */
}

/* Textarea Focus States */
.contacts-textarea {
    border-style: none none solid;
    border-width: 1px;
    transition: border-color 0.3s ease, border-width 0.3s ease, background-color 0.3s ease;
}

.contacts-textarea:hover {
    border-bottom-color: rgba(112, 238, 145, 0.5); /* Subtle green on hover */
}

.contacts-textarea:focus {
    border-bottom-color: var(--primary) !important;
    /* Keep border at 1px to prevent layout shift */
    /* No padding change needed */
}

.contacts-textarea.field-error:hover {
    border-bottom-color: rgba(220, 38, 38, 0.5); /* Subtle red on hover */
}

.contacts-textarea.field-error:focus {
    /* Keep border at 1px to prevent layout shift */
    /* No padding change needed */
}

/* ===== 10. PREVENT BROWSER VALIDATION UI ===== */
/* Hide browser validation tooltips */
input:invalid,
textarea:invalid,
select:invalid {
    box-shadow: none;
}

/* Remove browser default error styling */
input:-moz-ui-invalid {
    box-shadow: none;
}

/* ===== 11. ACCESSIBILITY ===== */
/* Ensure error messages are announced */
.validation-message[role="alert"] {
    position: relative;
}

/* Remove green outline boxes - using border transitions instead */
.contacts-input:focus-visible,
.banner-form-text-field:focus-visible,
.contacts-textarea:focus-visible {
    outline: none;
}

/* ===== 12. LOADING STATE ===== */
/* Respect modal loading class */
.tz-form-loading input,
.tz-form-loading textarea {
    opacity: 0.6;
    pointer-events: none;
}

.tz-form-loading .validation-message,
.tz-form-loading .field-success-icon {
    opacity: 0.6;
}

/* ===== 13. PHONE FORM SPECIFIC ADJUSTMENTS ===== */
/* Ensure validation messages appear correctly below phone form */
#tranzip-phone-form .validation-message {
    margin-top: 10px; /* Add spacing from the input field */
}

/* Phone form focus state adjustments */
/* No padding changes needed since border stays at 1px */

/* ===== 14. DISABLED SUBMIT BUTTON STATES ===== */
/* No visual changes to submit button - keep it looking normal */
/* The button will handle validation on click instead */

/* Ensure disabled state works with loading */
.tz-form-loading input[type="submit"],
.tz-form-loading button[type="submit"] {
    opacity: 0.6 !important;
    cursor: wait !important;
}

/* Validation message transitions */
.validation-message {
    transition: all 0.3s ease;
}