/**
 * Safari-Specific Fixes for iPhone and Desktop Safari
 * This file addresses common Safari rendering issues
 */

/* ===== 1. FIX FOR 100VH ISSUE ===== */
/* Safari doesn't calculate vh properly with browser bars */

/* Hero sections and full-height elements */
.hero-section,
section.hero-section {
    /* Use dynamic vh for Safari */
    height: 70vh;
    min-height: -webkit-fill-available;
}

@media (min-width: 768px) {
    .hero-section,
    section.hero-section {
        height: 80vh;
        min-height: -webkit-fill-available;
    }
}

/* Video section fix */
section.relative.bg-black.text-white {
    height: 70vh;
    min-height: -webkit-fill-available;
}

/* Category showcase */
section.h-\[50vh\] {
    height: 50vh;
    min-height: -webkit-fill-available;
}

/* Cart sidebar full height */
.cart-sidebar {
    height: 100vh;
    height: -webkit-fill-available;
}

/* Mobile menu full height */
#mobile-menu {
    height: 100vh;
    height: -webkit-fill-available;
}

/* Search modal */
#search-modal {
    height: 100vh;
    height: -webkit-fill-available;
}

/* Scrolling gallery */
.scrolling-gallery-container {
    height: 160vh;
    min-height: -webkit-fill-available;
}

@media (max-width: 768px) {
    .scrolling-gallery-container {
        height: auto;
        min-height: auto;
    }
}

/* Support for modern Safari with dvh */
@supports (height: 100dvh) {
    .hero-section,
    section.hero-section {
        height: 70dvh;
    }
    
    @media (min-width: 768px) {
        .hero-section,
        section.hero-section {
            height: 80dvh;
        }
    }
    
    section.relative.bg-black.text-white {
        height: 70dvh;
    }
    
    section.h-\[50vh\] {
        height: 50dvh;
    }
    
    .cart-sidebar,
    #mobile-menu,
    #search-modal {
        height: 100dvh;
    }
    
    .scrolling-gallery-container {
        height: 160dvh;
    }
}

/* ===== 2. FIX INPUT ZOOM ISSUE ===== */
/* Safari zooms on inputs with font-size < 16px */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    font-size: 16px !important;
}

/* Specific input fixes */
#filter-search,
#header-search-input,
.form-input,
.header-search-input {
    font-size: 16px !important;
}

/* Keep desktop sizes normal */
@media (min-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 14px !important;
    }
    
    #filter-search {
        font-size: 14px !important;
    }
}

/* ===== 3. BACKDROP FILTER FIX ===== */
/* Safari needs -webkit- prefix for backdrop-filter */

.mega-menu-container,
#filter-sidebar {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

@media (max-width: 767px) {
    #filter-sidebar {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
}

/* ===== 4. FLEXBOX FIXES ===== */
/* Safari has issues with flex children sizing */

/* Flex children need explicit min-width/min-height */
.flex > *,
.flex-col > *,
.grid > * {
    min-width: 0;
    min-height: 0;
}

/* Product carousel flex items */
.product-carousel > *,
.bestseller-carousel > *,
.category-carousel > * {
    min-width: 0;
    min-height: 0;
    flex-shrink: 0;
}

/* Collection items */
.collections-grid > * {
    min-width: 0;
    min-height: 0;
}

/* Cart items */
.cart-item {
    min-width: 0;
    min-height: 0;
}

/* Filter options */
.filter-option,
.size-option,
.color-option {
    min-width: 0;
    min-height: 0;
}

/* ===== 5. TRANSFORM STABILITY ===== */
/* Add GPU acceleration for smoother transforms */

.product-card,
.category-slide,
.collection-item,
.product-slide,
.bestseller-slide {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Hover transforms */
.product-card:hover,
.category-slide:hover,
.collection-item:hover {
    -webkit-transform: translateY(-4px) translateZ(0);
    transform: translateY(-4px) translateZ(0);
}

/* Animated elements */
.animate-scroll,
.glitch-text,
.header-glitch-logo {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* Announcement bar specific fixes */
.animate-scroll {
    display: inline-flex !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Parent container for announcement */
.bg-black.text-white.text-xs {
    position: relative;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Ensure smooth animation on mobile */
@media (max-width: 768px) {
    .animate-scroll {
        animation-duration: 20s !important;
        -webkit-animation-duration: 20s !important;
    }
}

/* Prevent animation pausing on Android */
@media (prefers-reduced-motion: no-preference) {
    .animate-scroll {
        animation-play-state: running !important;
        -webkit-animation-play-state: running !important;
    }
}

/* ===== 6. POSITION STICKY + OVERFLOW FIX ===== */
/* Safari breaks sticky when parent has overflow */

.header,
header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Ensure parent doesn't have overflow hidden */
body {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Filter sidebar sticky on desktop */
@media (min-width: 1024px) {
    #filter-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 2rem;
    }
}

/* ===== 7. IMAGE RENDERING FIX ===== */
/* Safari can blur images on transform */

img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Product images */
.product-card img,
.category-slide img,
.collection-item img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ===== 8. ANIMATION SMOOTHNESS ===== */
/* Safari needs explicit animation properties */

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

@keyframes glitch-anim {
    0% { 
        text-shadow: 2px 0 #00ffe7, -2px 0 #ff00c8;
        -webkit-transform: none;
        transform: none;
    }
    20% { 
        text-shadow: -2px 0 #00ffe7, 2px 0 #ff00c8;
        -webkit-transform: none;
        transform: none;
    }
    40% { 
        text-shadow: 2px 2px #00ffe7, -2px -2px #ff00c8;
        -webkit-transform: none;
        transform: none;
    }
    60% { 
        text-shadow: -2px 2px #00ffe7, 2px -2px #ff00c8;
        -webkit-transform: none;
        transform: none;
    }
    80% { 
        text-shadow: 2px -2px #00ffe7, -2px 2px #ff00c8;
        -webkit-transform: none;
        transform: none;
    }
    100% { 
        text-shadow: 2px 0 #00ffe7, -2px 0 #ff00c8;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes glitch-anim-fast {
    0% { 
        text-shadow: 2px 0 #00ffe7, -2px 0 #ff00c8;
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }
    20% { 
        text-shadow: -2px 0 #00ffe7, 2px 0 #ff00c8;
        -webkit-transform: translate(-2px,2px);
        transform: translate(-2px,2px);
    }
    40% { 
        text-shadow: 2px 2px #00ffe7, -2px -2px #ff00c8;
        -webkit-transform: translate(2px,-2px);
        transform: translate(2px,-2px);
    }
    60% { 
        text-shadow: -2px 2px #00ffe7, 2px -2px #ff00c8;
        -webkit-transform: translate(-2px,-2px);
        transform: translate(-2px,-2px);
    }
    80% { 
        text-shadow: 2px -2px #00ffe7, -2px 2px #ff00c8;
        -webkit-transform: translate(2px,2px);
        transform: translate(2px,2px);
    }
    100% { 
        text-shadow: 2px 0 #00ffe7, -2px 0 #ff00c8;
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }
}

/* ===== 9. SCROLLING FIXES ===== */
/* Safari has momentum scrolling issues */

.mega-menu-scroll,
.filter-accordion,
.overflow-y-auto,
#mobile-menu,
.cart-sidebar-body {
    -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal scroll bounce */
body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: none;
}

/* ===== 10. BORDER RADIUS WITH OVERFLOW ===== */
/* Safari clips content weirdly with border-radius + overflow */

.product-card,
.card,
.rounded-lg,
.rounded-xl {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    isolation: isolate;
}

/* ===== 11. GRADIENT TEXT FIX ===== */
/* Safari needs proper background-clip */

.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ===== 12. FIXED POSITIONING WITH TRANSFORM PARENT ===== */
/* Transform on parent breaks fixed children in Safari */

/* Ensure modals aren't inside transformed parents */
#search-modal,
#mobile-menu,
.cart-sidebar,
#filter-sidebar {
    position: fixed;
    -webkit-transform: none;
    transform: none;
}

/* Override transform translations */
#mobile-menu.-translate-x-full {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

#mobile-menu.translate-x-0 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

#search-modal.-translate-y-full {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

#search-modal.translate-y-0 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* ===== 13. ASPECT RATIO FIX ===== */
/* Safari has issues with aspect-ratio in older versions */

.aspect-square {
    aspect-ratio: 1 / 1;
}

@supports not (aspect-ratio: 1 / 1) {
    .aspect-square {
        position: relative;
        padding-bottom: 100%;
        height: 0;
    }
    
    .aspect-square > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ===== 14. FILTER AND MASK FIXES ===== */
/* Safari needs explicit filter properties */

.header-glitch-logo {
    -webkit-filter: drop-shadow(0 0 2px #0ff) drop-shadow(0 0 4px #f0f);
    filter: drop-shadow(0 0 2px #0ff) drop-shadow(0 0 4px #f0f);
}

/* ===== 15. TRANSITION FIXES ===== */
/* Safari needs explicit transition properties */

* {
    -webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 16. VIDEO ELEMENT FIXES ===== */
/* Safari has issues with video playback */

video {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ===== 17. MEGA MENU HEIGHT FIX ===== */
/* Safari calculates max-height differently */

@media (max-width: 1024px) {
    .mega-menu-container {
        max-height: 60vh !important;
        max-height: -webkit-fill-available !important;
    }
}

.mega-menu-container {
    max-height: 85vh;
    max-height: -webkit-fill-available;
}

/* ===== 18. SAFE AREA INSETS ===== */
/* Handle iPhone notches and home indicator */

@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .header,
    header {
        padding-top: env(safe-area-inset-top);
    }
    
    #mobile-menu,
    .cart-sidebar {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* ===== 19. PREVENT TEXT SIZE ADJUST ===== */
/* Safari auto-adjusts text size on rotation */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ===== 20. SMOOTH SCROLL FIX ===== */
/* Safari has issues with smooth scrolling */

html {
    scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
}

/* Disable smooth scroll for reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
        -webkit-scroll-behavior: auto;
    }
}

/* ===== 21. GRID GAP FIX ===== */
/* Older Safari doesn't support gap in flexbox */

@supports not (gap: 1rem) {
    .flex.gap-2 > * + * { margin-left: 0.5rem; }
    .flex.gap-3 > * + * { margin-left: 0.75rem; }
    .flex.gap-4 > * + * { margin-left: 1rem; }
    .flex.gap-6 > * + * { margin-left: 1.5rem; }
    .flex.gap-8 > * + * { margin-left: 2rem; }
    
    .flex-col.gap-2 > * + * { margin-top: 0.5rem; }
    .flex-col.gap-3 > * + * { margin-top: 0.75rem; }
    .flex-col.gap-4 > * + * { margin-top: 1rem; }
    .flex-col.gap-6 > * + * { margin-top: 1.5rem; }
    .flex-col.gap-8 > * + * { margin-top: 2rem; }
}

/* ===== 22. ACTIVE STATE FIX ===== */
/* Safari doesn't always trigger :active on touch */

button,
a,
.product-card,
.filter-option,
.size-option {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
}

/* ===== 23. FONT SMOOTHING ===== */
/* Better font rendering on Safari */

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

/* ===== 24. PERFORMANCE OPTIMIZATIONS ===== */
/* Force GPU acceleration for specific elements */

.product-carousel,
.bestseller-carousel,
.category-carousel,
.animate-scroll {
    will-change: transform;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* ===== 25. FOCUS STATES ===== */
/* Safari has different focus handling */

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

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}