/* Cross-Browser Compatibility Fixes */
/* Specifically targeting Safari, iOS Safari, and mobile browsers */

/* Safari-specific fixes */
@supports (-webkit-appearance: none) {
    /* Fix for Safari backdrop-filter issues */
    .header {
        background: rgba(255, 255, 255, 0.95);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    
    .nav-menu {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    
    .nav-menu.active {
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }
    
    .feature-box {
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix for iOS Safari viewport issues */
    body {
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Fix for iOS Safari input zoom */
    input, select, textarea {
        font-size: 16px !important;
        -webkit-appearance: none;
        border-radius: 0;
    }
    
    /* Fix for iOS Safari button styling */
    button {
        -webkit-appearance: none;
        border-radius: 0;
    }
    
    /* Fix for iOS Safari sticky positioning */
    .header {
        position: -webkit-sticky;
        position: sticky;
    }
    
    /* Fix for iOS Safari transform issues */
    .hero-content,
    .product-card,
    .service-card,
    .feature-card {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* Flexbox fallbacks for older browsers */
.nav-menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.navbar .container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Grid fallbacks for older browsers */
@supports not (display: grid) {
    .hero-content {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    
    .products-grid,
    .features-grid,
    .services-grid {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    
    .product-card,
    .feature-card,
    .service-card {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 300px;
        -ms-flex: 1 1 300px;
        flex: 1 1 300px;
        min-width: 280px;
    }
}

/* Safari text rendering improvements */
body, input, textarea, select, button {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Fix for Safari button focus outline */
button:focus,
.btn:focus,
input[type="submit"]:focus {
    outline: 2px solid #144982;
    outline-offset: 2px;
    -webkit-appearance: none;
}

/* Fix for Safari input styling */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
}

/* Fix for Safari select dropdown arrow */
select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Mobile Safari specific fixes */
@media screen and (max-width: 768px) {
    /* Fix for mobile Safari viewport height issues */
    .hero {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    
    /* Fix for mobile Safari touch targets */
    .btn,
    button,
    .nav-menu a,
    .cart-btn {
        min-height: 44px;
        min-width: 44px;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Fix for mobile Safari input focus */
    input:focus,
    textarea:focus,
    select:focus {
        -webkit-user-select: text;
        user-select: text;
    }
    
    /* Fix for mobile Safari scroll momentum */
    .nav-menu.active {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
}

/* Fix for Safari image rendering */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Fix for Safari animation performance */
.product-card,
.service-card,
.feature-card,
.btn {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* Fix for Safari text selection */
::selection {
    background: #F97808;
    color: #fff;
    text-shadow: none;
}

::-moz-selection {
    background: #F97808;
    color: #fff;
    text-shadow: none;
}

/* Fix for Safari form validation */
input:invalid {
    box-shadow: none;
    -webkit-box-shadow: none;
}

input:valid {
    box-shadow: none;
    -webkit-box-shadow: none;
}

/* Fix for Safari placeholder styling */
::-webkit-input-placeholder {
    color: #999;
    opacity: 1;
}

::-moz-placeholder {
    color: #999;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #999;
    opacity: 1;
}

::placeholder {
    color: #999;
    opacity: 1;
}

/* Fix for Safari scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

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

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

/* Fix for Safari video/media elements */
video,
audio {
    -webkit-playsinline: true;
    playsinline: true;
}

/* Fix for Safari print styles */
@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
}

/* Fix for Safari dark mode support */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles if needed */
}

/* Fix for Safari reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}