/**
 * CF7 Advanced Validation - Frontend Styles
 * 
 * WHY: Enhanced error display and animations for better UX
 *
 * @package CF7AV
 */

/* ============================================================================
   Enhanced Forms
   ========================================================================== */

.wpcf7-form.cf7av-enhanced {
    /* Enhanced form container */
}

/* ============================================================================
   Error Messages
   ========================================================================== */

.cf7av-error-message,
.cf7av-inline-error {
    display: inline-block;
    color: #d63638;
    font-size: 14px;
    margin-top: 6px;
    line-height: 1.4;
}

.wpcf7-not-valid-tip.cf7av-error {
    color: #d63638;
    font-size: 14px;
    margin-top: 6px;
    display: block;
    animation: cf7av-error-appear 0.3s ease-out;
}

/* Error appear animation */
@keyframes cf7av-error-appear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   Invalid Field Styling
   ========================================================================== */

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid {
    border-color: #d63638 !important;
    box-shadow: 0 0 0 1px #d63638;
}

.wpcf7-form input.wpcf7-not-valid:focus,
.wpcf7-form textarea.wpcf7-not-valid:focus,
.wpcf7-form select.wpcf7-not-valid:focus {
    box-shadow: 0 0 0 2px rgba(214, 54, 56, 0.3);
    outline: none;
}

/* ============================================================================
   Shake Animation
   ========================================================================== */

@keyframes cf7av-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

.cf7av-shake {
    animation: cf7av-shake 0.4s ease-in-out;
}

/* ============================================================================
   Error Icon
   ========================================================================== */

.cf7av-error-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    color: #d63638;
}

/* ============================================================================
   Form Response Output
   ========================================================================== */

.wpcf7-form .wpcf7-response-output {
    border-width: 2px;
    border-radius: 4px;
    padding: 16px;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.6;
}

.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
    border-color: #d63638;
    background-color: #fef2f2;
    color: #991b1b;
}

.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    border-color: #059669;
    background-color: #f0fdf4;
    color: #065f46;
}

.wpcf7-form .wpcf7-response-output.wpcf7-spam-blocked {
    border-color: #d97706;
    background-color: #fffbeb;
    color: #92400e;
}

/* ============================================================================
   Field Type Specific Errors
   ========================================================================== */

.cf7av-error--email {
    /* Email field specific error styling */
}

.cf7av-error--tel {
    /* Phone field specific error styling */
}

.cf7av-error--url {
    /* URL field specific error styling */
}

.cf7av-error--file {
    /* File field specific error styling */
}

.cf7av-error--checkbox,
.cf7av-error--radio {
    display: block;
    margin-top: 8px;
}

/* ============================================================================
   Inline Error Positioning
   ========================================================================== */

.wpcf7-form-control-wrap {
    position: relative;
    display: block;
}

.cf7av-inline-error {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    z-index: 10;
}

/* ============================================================================
   Accessibility
   ========================================================================== */

.cf7av-error-message[role="alert"],
.cf7av-inline-error[role="alert"] {
    /* Ensure errors are announced to screen readers */
}

/* High contrast mode support */
@media (prefers-contrast: high) {

    .wpcf7-not-valid-tip.cf7av-error,
    .cf7av-error-message {
        font-weight: 600;
        text-decoration: underline;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .cf7av-error-appear,
    .cf7av-shake {
        animation: none;
    }

    .wpcf7-not-valid-tip.cf7av-error {
        animation: none;
    }
}

/* ============================================================================
   Dark Mode Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
        background-color: #3f1e1e;
        color: #fca5a5;
    }

    .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
        background-color: #1e3f2f;
        color: #86efac;
    }
}

/* ============================================================================
   Loading State
   ========================================================================== */

.wpcf7-form.submitting {
    opacity: 0.6;
    pointer-events: none;
}

.wpcf7-form.submitting .wpcf7-submit {
    position: relative;
}

.wpcf7-form.submitting .wpcf7-submit::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: cf7av-spin 0.6s linear infinite;
}

@keyframes cf7av-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {

    .wpcf7-not-valid-tip.cf7av-error,
    .cf7av-error-message {
        font-size: 13px;
    }

    .wpcf7-form .wpcf7-response-output {
        padding: 12px;
        font-size: 13px;
    }
}

/* ============================================================================
   Print Styles
   ========================================================================== */

@media print {

    .wpcf7-not-valid-tip,
    .cf7av-error-message,
    .wpcf7-response-output {
        display: none;
    }
}