/**
 * Cross-Browser Compatibility Fixes
 * Ensures consistent rendering across Chrome, Firefox, Safari, Edge, and older browsers
 * Last Updated: 2025-12-16
 */

/* ==========================================================================
   1. CSS Custom Properties Fallbacks
   ========================================================================== */

/* Provide fallback values for browsers that don't support CSS variables */
:root {
    /* Primary colors with fallbacks */
    --primary-orange: #ec7c30;
    --primary-orange-rgb: 236, 124, 48;
    --secondary-orange: #ff9142;
    --dark-bg: #1a1a2e;
    --medium-bg: #16213e;
    --light-bg: #0f3460;
}

/* ==========================================================================
   2. Flexbox Gap Property Fallbacks (Safari < 14.1, older browsers)
   ========================================================================== */

/* Feature query for gap support */
@supports not (gap: 10px) {
    /* Fallback using margins for elements using gap */
    .banner-item,
    .news-ticker-label,
    .intratio-chat-bubble,
    .intratio-chat-interface-header-content,
    .intratio-chat-interface-bot-avatar,
    .features-img,
    .faq-question-q-box {
        margin-right: 10px;
    }
    
    .banner-item:last-child,
    .news-ticker-label:last-child {
        margin-right: 0;
    }
}

/* Universal gap fallback for flex containers */
.d-flex > *:not(:last-child),
[style*="display: flex"] > *:not(:last-child),
[style*="display:flex"] > *:not(:last-child) {
    /* Gap fallback - margins applied through cross-browser-fixes */
    margin-right: 0; /* Placeholder - specific gap values set per component */
}

/* ==========================================================================
   3. Backdrop Filter Fallbacks (Firefox < 103, IE, older Safari)
   ========================================================================== */

/* Feature query for backdrop-filter support */
@supports not (backdrop-filter: blur(10px)) {
    /* Provide solid background fallback when backdrop-filter isn't supported */
    .navbar-custom {
        background: rgba(255, 255, 255, 0.97) !important;
    }
    
    .nav-sticky.navbar-custom {
        background: rgba(255, 255, 255, 0.98) !important;
    }
    
    .intratio-chat-window {
        background: rgba(255, 255, 255, 0.98) !important;
    }
    
    .intratio-chat-bubble {
        background: linear-gradient(135deg, #ec7c30 0%, #ff9142 100%) !important;
    }
    
    .clients {
        background: rgba(255, 255, 255, 0.98) !important;
    }
    
    .features-box {
        background: rgba(255, 255, 255, 0.98) !important;
    }
    
    .demo-box {
        background: rgba(255, 255, 255, 0.98) !important;
    }
    
    .pricing-plan {
        background: rgba(255, 255, 255, 0.98) !important;
    }
    
    .btn-modern-cta {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2)) !important;
    }
}

/* Webkit prefix for Safari support */
.navbar-custom,
.nav-sticky.navbar-custom,
.intratio-chat-window,
.intratio-chat-bubble,
.clients,
.features-box,
.demo-box,
.pricing-plan,
.btn-modern-cta,
.features-img,
.faq-question-q-box {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

/* ==========================================================================
   4. Text Gradient Fallbacks (background-clip: text)
   ========================================================================== */

/* Ensure vendor prefixes for gradient text */
.title h3,
[style*="background-clip: text"] {
    -webkit-background-clip: text !important;
    -moz-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Fallback for browsers that don't support gradient text */
@supports not (-webkit-background-clip: text) {
    .title h3 {
        background: none !important;
        color: #e65100 !important;
        -webkit-text-fill-color: #e65100 !important;
    }
}

/* ==========================================================================
   5. Transform and Position Fixed Safari Fixes
   ========================================================================== */

/* Fix for position fixed inside transformed elements in Safari */
.intratio-chatbot-widget-container {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.intratio-chat-bubble {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Fix Safari rendering issues with fixed positioning */
.financial-banner,
.news-ticker-banner,
.navbar-custom {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* ==========================================================================
   6. Scrollbar Styling Cross-Browser
   ========================================================================== */

/* Standard scrollbar (Firefox) */
* {
    scrollbar-width: thin;
    scrollbar-color: #ec7c30 rgba(255, 255, 255, 0.05);
}

/* Webkit scrollbar (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #ec7c30;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff9142;
}

/* ==========================================================================
   7. Animation Vendor Prefixes
   ========================================================================== */

/* Ensure all keyframes have vendor prefixes */
@-webkit-keyframes scroll-left {
    0% { -webkit-transform: translateX(100%); transform: translateX(100%); }
    100% { -webkit-transform: translateX(-180%); transform: translateX(-180%); }
}

@keyframes scroll-left {
    0% { -webkit-transform: translateX(100%); transform: translateX(100%); }
    100% { -webkit-transform: translateX(-180%); transform: translateX(-180%); }
}

@-webkit-keyframes scroll-news {
    0% { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes scroll-news {
    0% { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@-webkit-keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@-webkit-keyframes float {
    0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
}

@keyframes float {
    0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
}

/* ==========================================================================
   8. Flexbox Display Vendor Prefixes
   ========================================================================== */

/* Ensure flexbox works across browsers */
.d-flex,
.banner-content,
.banner-item,
.news-ticker-container,
.news-ticker-label,
.news-ticker-link,
.intratio-chat-bubble,
.intratio-chat-window,
.intratio-chat-interface-header-content,
.features-img,
.faq-question-q-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

/* Flex direction column */
.intratio-chat-window,
.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* Align items center */
.banner-content,
.banner-item,
.news-ticker-container,
.news-ticker-label,
.news-ticker-link,
.intratio-chat-bubble,
.intratio-chat-interface-header-content,
.features-img,
.faq-question-q-box,
.align-items-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Justify content center */
.intratio-chat-bubble,
.news-ticker-link,
.features-img,
.faq-question-q-box,
.justify-content-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Flex: 1 */
.flex-1,
.intratio-chat-interface-messages {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/* Flex shrink 0 */
.news-ticker-label,
.news-ticker-link,
.flex-shrink-0 {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/* ==========================================================================
   9. Box Shadow Vendor Prefixes
   ========================================================================== */

.intratio-chat-window,
.intratio-chat-bubble,
.navbar-custom,
.clients,
.features-box,
.demo-box,
.pricing-plan,
.btn-modern-cta {
    -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   10. Border Radius Vendor Prefixes (for older browsers)
   ========================================================================== */

.intratio-chat-window,
.intratio-chat-bubble,
.features-box,
.demo-box,
.pricing-plan,
.btn-modern-cta {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

/* ==========================================================================
   11. Transition Vendor Prefixes
   ========================================================================== */

.navbar-custom,
.btn-modern-cta,
.features-box,
.demo-box,
.pricing-plan,
.intratio-chat-bubble,
.nav-link {
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   12. Gradient Vendor Prefixes
   ========================================================================== */

.bg-gradient,
section.bg-home.bg-gradient {
    background: #e65100; /* Fallback solid color */
    background: -webkit-linear-gradient(315deg, #e65100 0%, #ff6f00 50%, #ff8f00 100%);
    background: -moz-linear-gradient(315deg, #e65100 0%, #ff6f00 50%, #ff8f00 100%);
    background: -o-linear-gradient(315deg, #e65100 0%, #ff6f00 50%, #ff8f00 100%);
    background: linear-gradient(135deg, #e65100 0%, #ff6f00 50%, #ff8f00 100%);
}

.financial-banner,
.news-ticker-banner {
    background: #1a1a2e; /* Fallback solid color */
    background: -webkit-linear-gradient(315deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    background: -moz-linear-gradient(315deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    background: -o-linear-gradient(315deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* ==========================================================================
   13. User Select Vendor Prefixes
   ========================================================================== */

.no-select,
.banner-item,
.news-ticker-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ==========================================================================
   14. Appearance Reset (for form elements)
   ========================================================================== */

input,
select,
textarea,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ==========================================================================
   15. Safari-Specific Fixes
   ========================================================================== */

/* Fix for Safari's rendering of fixed elements during scroll */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific */
    .financial-banner,
    .news-ticker-banner {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    /* Prevent rubber-band scrolling issues */
    html, body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix for position: fixed in iOS */
    .navbar-custom {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* ==========================================================================
   16. Firefox-Specific Fixes
   ========================================================================== */

@-moz-document url-prefix() {
    /* Firefox-specific styles */
    .intratio-chat-window {
        background: rgba(255, 255, 255, 0.95);
    }
    
    /* Fix for Firefox flexbox gap */
    .banner-content > .banner-item {
        margin-right: 40px;
    }
}

/* ==========================================================================
   17. Edge Legacy Fixes (EdgeHTML)
   ========================================================================== */

@supports (-ms-accelerator: true) {
    /* Edge Legacy specific */
    .backdrop-filter-element {
        background: rgba(255, 255, 255, 0.95) !important;
    }
}

/* ==========================================================================
   18. IE11 Fixes (if needed for legacy support)
   ========================================================================== */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE11 specific */
    .d-flex {
        display: -ms-flexbox !important;
    }
    
    .flex-column {
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }
    
    .align-items-center {
        -ms-flex-align: center !important;
    }
    
    .justify-content-center {
        -ms-flex-pack: center !important;
    }
    
    /* IE11 doesn't support CSS variables */
    .financial-banner {
        background: #1a1a2e;
    }
    
    .news-ticker-banner {
        background: #0f1624;
    }
}

/* ==========================================================================
   19. Print Styles (hide dynamic elements)
   ========================================================================== */

@media print {
    .financial-banner,
    .news-ticker-banner,
    .intratio-chatbot-widget-container,
    .back-to-top {
        display: none !important;
    }
}

/* ==========================================================================
   20. High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    .btn-modern-cta,
    .intratio-chat-bubble {
        border: 2px solid currentColor !important;
    }
    
    .navbar-custom {
        border-bottom: 2px solid currentColor !important;
    }
}

/* ==========================================================================
   21. Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .banner-content,
    .news-ticker-item {
        animation: none !important;
    }
    
    .floating {
        animation: none !important;
    }
}

/* ==========================================================================
   22. Touch Device Optimizations
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
    /* Touch-friendly tap targets */
    .nav-link,
    .btn,
    .intratio-chat-bubble {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Disable hover effects on touch */
    .features-box:hover,
    .demo-box:hover,
    .pricing-plan:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   23. Safe Area Insets (for notched devices)
   ========================================================================== */

@supports (padding: env(safe-area-inset-top)) {
    .financial-banner {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    .intratio-chatbot-widget-container {
        bottom: calc(20px + env(safe-area-inset-bottom));
        right: calc(20px + env(safe-area-inset-right));
    }
}

/* ==========================================================================
   24. Contain Property for Performance
   ========================================================================== */

.financial-banner,
.news-ticker-banner,
.intratio-chat-window {
    contain: layout style;
}

/* ==========================================================================
   25. Will-Change for Animated Elements
   ========================================================================== */

.banner-content,
.news-ticker-item {
    will-change: transform;
}

.btn-modern-cta,
.features-box,
.demo-box,
.pricing-plan {
    will-change: transform, box-shadow;
}

/* ==========================================================================
   26. Font Rendering Consistency
   ========================================================================== */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ==========================================================================
   27. Image Rendering
   ========================================================================== */

img {
    -ms-interpolation-mode: bicubic;
    image-rendering: -webkit-optimize-contrast;
}

/* ==========================================================================
   28. Fix for 100vh on Mobile Safari
   ========================================================================== */

@supports (-webkit-touch-callout: none) {
    .full-height {
        min-height: -webkit-fill-available;
    }
}

/* ==========================================================================
   29. Overflow Scrolling Performance
   ========================================================================== */

.intratio-chat-interface-messages,
.overflow-auto,
.overflow-scroll {
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   30. Z-Index Normalization for Consistent Stacking
   ========================================================================== */

/* Ensure consistent z-index stacking across browsers */
.financial-banner { z-index: 9999 !important; }
.news-ticker-banner { z-index: 9998 !important; }
.navbar-custom { z-index: 9997 !important; }
.intratio-chatbot-widget-container:not(.collapsed) { z-index: 10100 !important; }
.intratio-chat-bubble { z-index: 10050 !important; }
.modal-backdrop { z-index: 10200 !important; }
.modal { z-index: 10210 !important; }