/**
 * iOS Safe Area & Device Support
 * دعم المنطقة الآمنة لأجهزة Apple
 */

/* ========================================
   iOS Safe Area Support
   ======================================== */

/* Viewport meta tag must include viewport-fit=cover */

:root {
    /* Safe Area Insets */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    
    /* Combined padding with safe areas */
    --header-height: calc(64px + var(--safe-area-top));
    --footer-height: calc(60px + var(--safe-area-bottom));
    --nav-height: calc(56px + var(--safe-area-bottom));
}

/* ========================================
   Header with Notch Support
   ======================================== */

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding-top: var(--safe-area-top);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
}

.app-header-inner {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

/* ========================================
   Bottom Navigation with Home Indicator
   ======================================== */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding-bottom: var(--safe-area-bottom);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
    background: var(--bg-glass);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
}

.bottom-nav-inner {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/* ========================================
   Main Content Area
   ======================================== */

.app-main {
    padding-top: var(--header-height);
    padding-bottom: var(--nav-height);
    min-height: 100vh;
}

/* Without bottom nav */
.app-main--no-nav {
    padding-bottom: var(--safe-area-bottom);
}

/* ========================================
   Full Screen Modals
   ======================================== */

.modal-fullscreen {
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
}

/* ========================================
   Scroll Containers
   ======================================== */

.scroll-container {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ========================================
   Touch Optimizations
   ======================================== */

/* Prevent double-tap zoom on interactive elements */
button, 
a, 
input, 
select, 
textarea,
.touchable {
    touch-action: manipulation;
}

/* Larger touch targets for mobile */
@media (max-width: 768px) {
    button,
    .btn,
    a.nav-link {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ========================================
   iOS Specific Fixes
   ======================================== */

/* Prevent iOS rubber band scrolling on body */
html, body {
    overscroll-behavior: none;
}

/* Fix iOS input zoom */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Fix iOS select styling */
select {
    -webkit-appearance: none;
    appearance: none;
}

/* ========================================
   Splash Screen Animation
   ======================================== */

.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a, #1e1b4b);
    padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);
    transition: opacity 0.5s ease;
}

.splash-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.splash-logo {
    width: 100px;
    height: 100px;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.5));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.8));
    }
}

/* ========================================
   Standalone App Styles
   ======================================== */

@media all and (display-mode: standalone) {
    /* Styles for installed PWA */
    .install-banner {
        display: none !important;
    }
    
    /* Add extra padding for notch */
    .app-header {
        background: var(--bg-glass);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}