/*
 * Safari/iOS Compatibility Fixes
 * إصلاحات التوافق مع Safari و iOS
 */

/* =========================================
   1. Text Rendering & Font Smoothing
   ========================================= */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

a, button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* =========================================
   2. Text Gradient Fix (background-clip: text)
   ========================================= */
.bg-clip-text,
[class*="bg-clip-text"] {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

@supports not (-webkit-background-clip: text) {
    .bg-clip-text,
    [class*="bg-clip-text"] {
        -webkit-text-fill-color: inherit;
        color: inherit;
    }
}

/* =========================================
   3. Backdrop Filter Fix
   ========================================= */
.backdrop-blur,
.backdrop-blur-sm,
.backdrop-blur-md,
.backdrop-blur-lg,
[class*="backdrop-blur"] {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.backdrop-blur-sm {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.backdrop-blur-md {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.backdrop-blur-lg {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

@supports not (backdrop-filter: blur(8px)) {
    .backdrop-blur,
    .backdrop-blur-sm,
    .backdrop-blur-md,
    .backdrop-blur-lg,
    [class*="backdrop-blur"] {
        background-color: rgba(0, 0, 0, 0.3) !important;
    }
}

/* =========================================
   4. Scroll & Position Fixes
   ========================================= */
html {
    -webkit-overflow-scrolling: touch;
}

.sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
}

/* Prevent zoom on input focus in iOS */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* =========================================
   5. Safari/iOS Specific Fixes
   ========================================= */
@supports (-webkit-touch-callout: none) {
    /* Text sizing */
    body, html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Ensure flex containers work */
    .flex {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: flex !important;
    }

    .inline-flex {
        display: -webkit-inline-box !important;
        display: -webkit-inline-flex !important;
        display: inline-flex !important;
    }

    /* Ensure grid containers work */
    .grid {
        display: -webkit-grid !important;
        display: grid !important;
    }

    /* Hidden must stay hidden */
    .hidden {
        display: none !important;
    }

    /* Fix overflow scrolling */
    .overflow-hidden {
        overflow: hidden !important;
    }

    .overflow-x-hidden {
        overflow-x: hidden !important;
    }

    /* Fix transform rendering */
    .fixed {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* =========================================
   6. Gradient Compatibility
   ========================================= */
@supports (-webkit-appearance: none) {
    .bg-gradient-to-r {
        background-image: -webkit-linear-gradient(left, var(--tw-gradient-stops));
        background-image: linear-gradient(to right, var(--tw-gradient-stops));
    }

    .bg-gradient-to-l {
        background-image: -webkit-linear-gradient(right, var(--tw-gradient-stops));
        background-image: linear-gradient(to left, var(--tw-gradient-stops));
    }
}

/* =========================================
   7. Animation Fixes
   ========================================= */
@supports (-webkit-touch-callout: none) {
    @keyframes fadeInUp {
        from {
            opacity: 0;
            -webkit-transform: translate3d(0, 30px, 0);
            transform: translate3d(0, 30px, 0);
        }
        to {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    .animate-fade-in-up {
        -webkit-animation: fadeInUp 0.8s ease-out forwards;
        animation: fadeInUp 0.8s ease-out forwards;
    }
}