/* Safari-specific fixes and compatibility improvements */

/* Fix viewport height issues on Safari mobile */
@supports (-webkit-appearance: none) {
    html {
        /* Use standard viewport height instead of -webkit-fill-available to prevent double scroll */
        height: 100%;
        overflow-x: hidden;
    }

    body {
        /* Use standard viewport height instead of -webkit-fill-available to prevent double scroll */
        min-height: 100vh;
        overflow-x: hidden;
    }
}

/* 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 {
        /* Use standard viewport height instead of -webkit-fill-available to prevent double scroll */
        min-height: 100vh;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
    }

    .main-content {
        flex: 1 0 auto;
        overflow-x: hidden;
    }
}

/* 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;
        /* Remove min-height that causes double scroll */
        min-height: auto;
        height: auto;
        overflow: visible;
    }

    .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;
        overflow-x: hidden;
        /* Prevent horizontal scroll */
    }

    body {
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden !important;
        /* Prevent horizontal scroll */
        /* Fix double scroll issue in Safari - override app.css */
        height: 100% !important;
        min-height: 100vh !important;
        /* Ensure only main scroll works */
        overflow-y: visible !important;
        position: relative !important;
    }
}

/* 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;
    }
}

/* Safari-specific fix for double scroll issue on Home page */
@supports (-webkit-appearance: none) {

    /* Ensure only one scroll bar appears in Safari */
    html {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    body {
        overflow-y: visible !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    .page {
        overflow: visible !important;
        position: relative !important;
    }

    .main-content {
        overflow: visible !important;
        position: relative !important;
    }

    .modern-home-page {
        overflow: visible !important;
        position: relative !important;
        /* Prevent any internal scrolling */
        max-height: none !important;
        height: auto !important;
    }
}