/**
 * LRTAV Form Validation Styles
 * Error styling for front-end validation
 */

/* Error state for form fields */
.lrtav-field-error {
    position: relative;
}

/* Error state for inputs */
.lrtav-input-error {
    border-color: #dc3232 !important;
    box-shadow: 0 0 0 1px #dc3232 !important;
}

.lrtav-input-error:focus {
    border-color: #dc3232 !important;
    box-shadow: 0 0 0 2px rgba(220, 50, 50, 0.3) !important;
    outline: none !important;
}

/* Error messages */
.lrtav-error-message {
    display: block;
    margin-top: 6px;
    padding: 8px 12px;
    background-color: #fef8f8;
    border-left: 3px solid #dc3232;
    color: #dc3232;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;
    animation: lrtav-error-slide 0.3s ease-out;
}

/* Error message animation */
@keyframes lrtav-error-slide {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Radio button and checkbox error styling */
fieldset .lrtav-input-error {
    box-shadow: none !important;
}

fieldset.lrtav-field-error legend {
    color: #dc3232;
}

/* Success state (optional - when field is valid after being corrected) */
.lrtav-field-success .lrtav-input-success {
    border-color: #46b450 !important;
}

/* File upload error styling */
input[type="file"].lrtav-input-error {
    border: 1px solid #dc3232;
    border-radius: 4px;
    padding: 8px;
    background-color: #fef8f8;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .lrtav-error-message {
        font-size: 13px;
        padding: 6px 10px;
    }
}

/* Ensure error messages don't break layout */
.pmpro_form_field {
    position: relative;
}

/* Style for error icon (optional enhancement) */
.lrtav-error-message::before {
    content: "⚠ ";
    font-weight: bold;
    margin-right: 4px;
}

/* Focus ring for accessibility */
.lrtav-input-error:focus-visible {
    outline: 2px solid #dc3232;
    outline-offset: 2px;
}