/* 
 * CSS Grid Browser Fallbacks
 * Comprehensive fallback system for older browsers
 * Works with grid-support.js for feature detection
 */

/* Base Flexbox Fallbacks */
.no-grid-support .contact-wrapper {
    display: flex !important;
    flex-direction: column;
    gap: 40px;
}

.no-grid-support .contact-wrapper.desktop-layout {
    flex-direction: row;
}

.no-grid-support .chat-window {
    flex: 2;
    min-width: 0;
}

.no-grid-support .contact-info-sidebar {
    flex: 1;
    min-width: 250px;
}

/* Form Row Fallbacks */
.no-grid-support .form-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px;
}

.no-grid-support .form-row .form-group {
    flex: 1;
    min-width: calc(50% - 10px);
}

/* Trust Features Fallbacks */
.no-grid-support .trust-features {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
}

.no-grid-support .trust-features .feature-item {
    flex: 1;
    min-width: calc(50% - 5px);
}

/* Grid Utility Fallbacks */
.no-grid-support .grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2rem;
}

.no-grid-support .grid > * {
    flex: 1;
    min-width: 300px;
}

.no-grid-support .grid-2 > * {
    min-width: calc(50% - 1rem);
}

.no-grid-support .grid-3 > * {
    min-width: calc(33.333% - 1.33rem);
}

.no-grid-support .grid-4 > * {
    min-width: calc(25% - 1.5rem);
}

/* Footer Content Fallbacks */
.no-grid-support .footer-content {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2rem;
}

.no-grid-support .footer-content > * {
    flex: 1;
    min-width: 250px;
}

/* Mobile Responsive Fallbacks for Non-Grid Browsers */
@media (max-width: 768px) {
    .no-grid-support .contact-wrapper {
        flex-direction: column !important;
    }
    
    .no-grid-support .form-row {
        flex-direction: column;
    }
    
    .no-grid-support .form-row .form-group {
        min-width: 100%;
    }
    
    .no-grid-support .trust-features {
        flex-direction: column;
    }
    
    .no-grid-support .trust-features .feature-item {
        min-width: 100%;
    }
    
    .no-grid-support .grid > * {
        min-width: 100%;
    }
}

/* Enhanced support for browsers with grid but no gap */
.no-gap-support .contact-wrapper {
    margin: -20px;
}

.no-gap-support .contact-wrapper > * {
    margin: 20px;
}

.no-gap-support .form-row {
    margin: -10px;
}

.no-gap-support .form-row .form-group {
    margin: 10px;
}

.no-gap-support .trust-features {
    margin: -5px;
}

.no-gap-support .trust-features .feature-item {
    margin: 5px;
}

.no-gap-support .grid {
    margin: -1rem;
}

.no-gap-support .grid > * {
    margin: 1rem;
}

/* IE11 Specific Fallbacks */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .contact-wrapper {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    
    .contact-wrapper.desktop-layout {
        -ms-flex-direction: row;
        flex-direction: row;
    }
    
    .chat-window {
        -ms-flex: 2;
        flex: 2;
    }
    
    .contact-info-sidebar {
        -ms-flex: 1;
        flex: 1;
    }
    
    .form-row {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .form-row .form-group {
        -ms-flex: 1;
        flex: 1;
        min-width: calc(50% - 10px);
    }
}

/* Print Styles - Force Flexbox Layout */
@media print {
    .contact-wrapper,
    .form-row,
    .trust-features,
    .grid,
    .footer-content {
        display: flex !important;
        flex-wrap: wrap;
    }
    
    .contact-wrapper {
        flex-direction: column;
    }
}