/**
 * Mad Origin Contact Form Enhancement - Frontend Styles
 */

.mad-enhanced-contact-form {
    position: relative;
}

.mad-contact-header {
    text-align: center;
    margin-bottom: 20px;
}

.mad-contact-header-icon {
    display: inline-block;
    font-size: 48px;
    margin-bottom: 10px;
}

.mad-contact-header-title {
    font-size: 24px;
    font-weight: normal;
    margin: 0;
}

/* Equal height support for Mad widgets */
.mad-enhanced-contact-form.mad-equal-height-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mad-enhanced-contact-form.mad-equal-height-item .sow-contact-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Animation classes for SiteOrigin Premium animations */
.mad-contact-header-icon.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* Animation speed modifiers */
.mad-contact-header-icon[data-animate-duration="0.5"] {
    animation-duration: 0.5s;
}

.mad-contact-header-icon[data-animate-duration="2"] {
    animation-duration: 2s;
}

/* Animation delay */
.mad-contact-header-icon[data-animate-delay] {
    animation-delay: var(--animate-delay);
}

/* Hide before animation if specified */
.mad-contact-header-icon[data-animate-hide="true"] {
    opacity: 0;
}

.mad-contact-header-icon[data-animate-hide="true"].animated {
    opacity: 1;
}

/* Form styling improvements */
.mad-enhanced-contact-form .sow-contact-form {
    position: relative;
}

/* Smooth transitions for all interactive elements */
.mad-enhanced-contact-form input[type="submit"],
.mad-enhanced-contact-form .mad-contact-header-icon {
    transition: all 0.3s ease;
}

/* Focus styles for form inputs */
.mad-enhanced-contact-form input:focus,
.mad-enhanced-contact-form textarea:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .mad-contact-header-icon {
        font-size: 36px !important;
    }
    
    .mad-contact-header-title {
        font-size: 20px !important;
    }
    
    .mad-enhanced-contact-form {
        padding: 15px !important;
    }
}