/**
 * Upsales Form Validation Styles
 * Version: 1.0.2
 * 
 * Keeps default field styling intact, only adds validation messages and check icons
 * Uses FontAwesome circle-check icon with theme primary color
 */

/* Field wrapper - NO styling changes to fields */
.upsales-field-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Don't override any field dimensions or styling */
.upsales-field-wrapper input,
.upsales-field-wrapper textarea {
    /* Remove all width/sizing overrides */
}

/* Error state - only adds red border, doesn't change existing styling */
.upsales-field-wrapper.has-error input,
.upsales-field-wrapper.has-error textarea,
input.error,
textarea.error {
    border-color: #dc3545 !important;
}

.upsales-field-wrapper.has-error input:focus,
.upsales-field-wrapper.has-error textarea:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Success state - adds check icon but doesn't change field styling */
.upsales-field-wrapper.has-success input,
.upsales-field-wrapper.has-success textarea,
input.valid,
textarea.valid {
    /* Don't change any styling, just used as state indicator */
}

/* FontAwesome check icon for valid fields - uses theme primary color */
.upsales-check-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    /* Use theme/Elementor primary color via CSS variables or inherit */
    color: var(--e-global-color-primary, var(--primary-color, #007bff));
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
    z-index: 10;
}

/* FontAwesome icon styling */
.upsales-check-icon::before {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    content: '\f058'; /* fa-circle-check solid */
    font-weight: 900;
}

/* Adjust check icon position for textarea */
.upsales-field-wrapper textarea + .upsales-check-icon {
    top: 12px;
    transform: none;
}

/* Error message styling */
.upsales-error-message {
    display: block !important;
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 5px;
    margin-bottom: 10px;
    font-weight: 500;
}

/* Label color on error */
.upsales-field-wrapper.has-error label {
    color: #dc3545;
    font-weight: 500;
}

/* Checkbox error styling */
.upsales-checkbox-error {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 5px;
    margin-bottom: 10px;
    font-weight: 500;
    display: none;
}

div.has-error .upsales-checkbox-error {
    display: block !important;
}

div.has-error input[type="checkbox"] {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

/* Checkbox success state */
div.has-success input[type="checkbox"] {
    outline: 2px solid var(--e-global-color-primary, var(--primary-color, #007bff));
    outline-offset: 2px;
}

/* Animation for error messages */
@keyframes errorSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.upsales-error-message,
.upsales-checkbox-error {
    animation: errorSlideIn 0.3s ease-out;
}

/* Focus states - preserve default styling */
.upsales-field-wrapper input:focus,
.upsales-field-wrapper textarea:focus {
    /* Don't override focus styles */
}

.upsales-field-wrapper.has-error input:focus,
.upsales-field-wrapper.has-error textarea:focus {
    /* Don't override focus styles */
}

/* Ensure check icon doesn't interfere with input - add padding only when icon is present */
.upsales-field-wrapper.has-success input:not([type="checkbox"]),
.upsales-field-wrapper.has-success textarea {
    padding-right: 40px !important; /* Make room for check icon */
}