/* Native iOS/Android Styling */

/* System Fonts - Native look */
:root {
    /* iOS System Font */
    --font-ios: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;
    /* Android System Font */
    --font-android: "Roboto", "Helvetica Neue", sans-serif;
    /* Universal system font stack */
    --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: var(--font-system);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* iOS-specific styles */
@supports (-webkit-touch-callout: none) {
    body {
        font-family: var(--font-ios);
    }
    
    /* iOS native button style */
    button, .btn-primary, .btn-secondary {
        -webkit-appearance: none;
        border-radius: 12px;
        font-weight: 600;
        letter-spacing: -0.3px;
    }
    
    /* iOS card style with subtle shadow */
    .car-card, .booking-card, .feature-card {
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
    
    /* iOS list style */
    .nav-menu a {
        font-size: 17px;
        font-weight: 400;
        letter-spacing: -0.4px;
    }
}

/* Android-specific styles */
@media (min-width: 1px) {
    @supports not (-webkit-touch-callout: none) {
        body {
            font-family: var(--font-android);
        }
        
        /* Material Design elevation */
        .car-card, .booking-card, .feature-card {
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);
        }
        
        /* Material Design buttons */
        button, .btn-primary, .btn-secondary {
            border-radius: 8px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 14px;
        }
        
        /* Material ripple effect simulation */
        button:active, .btn-primary:active, .btn-secondary:active {
            transform: scale(0.98);
            transition: transform 0.1s ease;
        }
    }
}

/* Improved touch targets for mobile */
@media (max-width: 768px) {
    /* Larger touch targets */
    button, a, input, select {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Native mobile input styling */
    input, select, textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px 16px;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.95);
    }
    
    /* iOS-style input focus */
    @supports (-webkit-touch-callout: none) {
        input:focus, select:focus, textarea:focus {
            border-color: #007AFF;
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
        }
    }
    
    /* Material Design input focus */
    @supports not (-webkit-touch-callout: none) {
        input:focus, select:focus, textarea:focus {
            border-color: #1976D2;
            box-shadow: 0 2px 4px rgba(25, 118, 210, 0.2);
        }
    }
    
    /* Native card spacing */
    .car-card, .feature-card {
        margin: 12px;
        padding: 16px;
    }
    
    /* Smooth scrolling - iOS momentum */
    .nav-menu, .rental-period-options {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    
    /* Native bottom sheet style for modals */
    .modal-content {
        border-radius: 16px 16px 0 0;
    }
    
    /* iOS safe area support */
    @supports (padding-top: env(safe-area-inset-top)) {
        body {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* Native scrollbar - iOS style */
@supports (-webkit-touch-callout: none) {
    ::-webkit-scrollbar {
        width: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    
    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
    }
}

/* Better mobile typography */
@media (max-width: 768px) {
    h1 {
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.5px;
    }
    
    h2 {
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.3px;
    }
    
    h3 {
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -0.2px;
    }
    
    p, span {
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: -0.1px;
    }
    
    /* iOS dynamic type support */
    @supports (-webkit-touch-callout: none) {
        body {
            font: -apple-system-body;
        }
        
        h1 { font: -apple-system-title1; }
        h2 { font: -apple-system-title2; }
        h3 { font: -apple-system-title3; }
    }
}

/* Native loading states */
.loading-skeleton {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.06) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Native haptic feedback simulation */
@media (max-width: 768px) {
    button:active, .btn-primary:active, .btn-secondary:active {
        transform: scale(0.96);
        transition: transform 0.05s ease;
    }
}