/**
 * Contact Form 7 Message Styling
 * 
 * Custom styles for CF7 validation and response messages
 */

/* Response Output Container - Base Styles */
.wpcf7-response-output {
    display: block !important;
    margin: 1rem 0 !important;
    padding: 1rem 1.25rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-left-width: 4px !important;
    transition: all 0.3s ease !important;
    animation: slideInDown 0.3s ease-out !important;
    position: relative !important;
    z-index: 10 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Success Message */
.wpcf7-response-output.wpcf7-mail-sent-ok {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    border-left-color: #22c55e !important;
    color: #166534 !important;
}

/* Error Message */
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-mail-sent-ng {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    border-left-color: #dc2626 !important;
    color: #991b1b !important;
}

/* Spam Message */
.wpcf7-response-output.wpcf7-spam {
    background-color: #fffbeb !important;
    border-color: #fef3c7 !important;
    border-left-color: #f59e0b !important;
    color: #92400e !important;
}

/* Individual Field Validation Errors */
.wpcf7-not-valid-tip {
    display: block !important;
    color: #dc2626 !important;
    font-size: 0.875rem !important;
    margin-top: 0.5rem !important;
    font-weight: 500 !important;
    animation: fadeIn 0.2s ease-in !important;
}

/* Invalid Field Input Styling - Only for text inputs, textareas, and selects */
.wpcf7-not-valid:not(.wpcf7-radio):not(.wpcf7-checkbox) {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 1px #dc2626 !important;
    background-color: #fef2f2 !important;
}

.wpcf7-not-valid:not(.wpcf7-radio):not(.wpcf7-checkbox):focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Remove validation styling from radio buttons and checkboxes */
.wpcf7-radio.wpcf7-not-valid,
.wpcf7-checkbox.wpcf7-not-valid,
span.wpcf7-radio.wpcf7-not-valid,
span.wpcf7-checkbox.wpcf7-not-valid {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    outline: none !important;
    background: transparent !important;
}

/* Remove validation styling from radio/checkbox inputs inside the wrapper */
.wpcf7-radio.wpcf7-not-valid input[type="radio"],
.wpcf7-checkbox.wpcf7-not-valid input[type="checkbox"],
span.wpcf7-radio.wpcf7-not-valid input[type="radio"],
span.wpcf7-checkbox.wpcf7-not-valid input[type="checkbox"] {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    outline: none !important;
    accent-color: inherit !important;
}

/* Remove any red circle/border from radio buttons */
.wpcf7-radio.wpcf7-not-valid input[type="radio"]:before,
.wpcf7-radio.wpcf7-not-valid input[type="radio"]:after,
span.wpcf7-radio.wpcf7-not-valid input[type="radio"]:before,
span.wpcf7-radio.wpcf7-not-valid input[type="radio"]:after {
    border-color: inherit !important;
    box-shadow: none !important;
}

/* Keep validation tip visible for radio buttons and checkboxes */
.wpcf7-radio.wpcf7-not-valid ~ .wpcf7-not-valid-tip,
.wpcf7-checkbox.wpcf7-not-valid ~ .wpcf7-not-valid-tip,
.wpcf7-form-control-wrap .wpcf7-radio.wpcf7-not-valid ~ .wpcf7-not-valid-tip,
.wpcf7-form-control-wrap .wpcf7-checkbox.wpcf7-not-valid ~ .wpcf7-not-valid-tip {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Form Loading State */
.wpcf7-form.submitting .wpcf7-response-output {
    opacity: 0.7;
    pointer-events: none;
}

.wpcf7-form.submitting button[type="submit"] {
    opacity: 0.6;
    cursor: wait !important;
    pointer-events: none;
}

/* Submit Button Loading State */
.wpcf7-form.submitting button[type="submit"]::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
}

/* Animations */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* Accessibility: Ensure messages are visible when aria-hidden is false */
.wpcf7-response-output:not([aria-hidden="true"]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide messages when aria-hidden is true AND empty (CF7 uses aria-hidden initially) */
.wpcf7-response-output[aria-hidden="true"]:empty {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* But show messages with content even if aria-hidden is true */
.wpcf7-response-output[aria-hidden="true"]:not(:empty),
.wpcf7-response-output[aria-hidden="true"].wpcf7-mail-sent-ok,
.wpcf7-response-output[aria-hidden="true"].wpcf7-validation-errors,
.wpcf7-response-output[aria-hidden="true"].wpcf7-mail-sent-ng,
.wpcf7-response-output[aria-hidden="true"].wpcf7-spam {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure messages are visible after form submission */
.wpcf7-form .wpcf7-response-output {
    display: block !important;
}

/* Make sure messages are visible even if CF7 tries to hide them */
div.wpcf7-response-output,
form .wpcf7-response-output,
.wpcf7-form .wpcf7-response-output {
    display: block !important;
    visibility: visible !important;
}

/* Override any inline styles that might hide the message */
.wpcf7-response-output[style*="display: none"],
.wpcf7-response-output[style*="display:none"] {
    display: block !important;
}

/* Ensure messages with content are always visible */
.wpcf7-response-output:not(:empty) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: auto !important;
    height: auto !important;
}

/* Force visibility for messages that have been shown */
.wpcf7-response-output.wpcf7-mail-sent-ok,
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7-response-output.wpcf7-spam {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wpcf7-response-output {
        padding: 0.875rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    .wpcf7-not-valid-tip {
        font-size: 0.8125rem !important;
    }
}

/* Print styles - hide messages when printing */
@media print {
    .wpcf7-response-output,
    .wpcf7-not-valid-tip {
        display: none !important;
    }
}