/* Safari-specific fixes and compatibility improvements */

/* Fix viewport height issues on Safari mobile */
@supports (-webkit-appearance: none) {
    html {
        height: -webkit-fill-available;
    }
    
    body {
        min-height: -webkit-fill-available;
    }
}

/* Fix scroll behavior on Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    html {
        scroll-behavior: auto !important;
    }
    
    /* Smooth scrolling alternative for Safari */
    * {
        -webkit-overflow-scrolling: touch;
    }
}

/* Fix flexbox issues on Safari */
@supports (-webkit-appearance: none) {
    .page {
        min-height: -webkit-fill-available;
    }
    
    .main-content {
        flex: 1 0 auto;
    }
}

/* Fix CSS Grid issues on Safari */
@supports (-webkit-appearance: none) {
    .products-grid,
    .categories-grid,
    .stats-grid {
        display: -webkit-grid;
        display: grid;
    }
}

/* Fix transform and animation issues on Safari */
@supports (-webkit-appearance: none) {
    .product-card,
    .category-card,
    .hero-visual {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* Fix position sticky issues on Safari */
@supports (-webkit-appearance: none) {
    .sticky-element {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* Fix backdrop-filter issues on Safari */
@supports (-webkit-backdrop-filter: blur(10px)) {
    .blur-background {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

/* Fix gap property issues on older Safari versions */
@supports not (gap: 1rem) {
    .products-grid > * + * {
        margin-left: 2rem;
    }
    
    .categories-grid > * + * {
        margin-left: 1.5rem;
    }
}

/* Fix aspect-ratio issues on Safari */
@supports not (aspect-ratio: 1) {
    .product-image::before {
        content: '';
        display: block;
        padding-top: 100%;
    }
    
    .product-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* Fix large spacing issues on Safari home page */
@supports (-webkit-appearance: none) {
    .modern-home-page {
        display: flex;
        flex-direction: column;
        min-height: -webkit-fill-available;
    }
    
    .modern-home-page > section:last-child {
        margin-bottom: 0;
        padding-bottom: 2rem;
    }
    
    /* Ensure footer sticks to bottom without large gaps */
    .footer {
        margin-top: auto;
        flex-shrink: 0;
    }
}

/* Fix scroll restoration issues on Safari */
@supports (-webkit-appearance: none) {
    html {
        scroll-behavior: auto;
    }
    
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* Fix input and form issues on Safari */
@supports (-webkit-appearance: none) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 0;
    }
    
    input[type="search"] {
        -webkit-appearance: textfield;
    }
    
    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }
}

/* Fix button styling on Safari */
@supports (-webkit-appearance: none) {
    button {
        -webkit-appearance: none;
        appearance: none;
    }
}

/* Fix image rendering on Safari */
@supports (-webkit-appearance: none) {
    img {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
}

/* Fix text rendering on Safari */
@supports (-webkit-appearance: none) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

/* Fix modal and overlay issues on Safari */
@supports (-webkit-appearance: none) {
    .modal,
    .overlay,
    .filter-overlay,
    .filter-sidebar {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: transform;
    }

    /* Ensure filter components are above everything in Safari */
    .filter-overlay {
        z-index: 9999 !important;
        position: fixed !important;
    }

    .filter-sidebar {
        z-index: 10000 !important;
        position: fixed !important;
    }

    /* Fix backdrop-filter for Safari */
    .filter-overlay {
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
    }

    /* Safari filter positioning fix - EXACT copy of cart structure */
    .filter-sidebar {
        position: fixed !important;
        top: 0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 10000 !important;
    }

    .filter-sidebar.open {
        left: 0 !important;
        top: 80px !important;
        height: calc(100% - 80px) !important;
    }
}

/* Fix carousel and slider issues on Safari */
@supports (-webkit-appearance: none) {
    .carousel-track,
    .slider-track {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }
}