/* Mobile-native enhancements for Perkalate */

/* iOS Safari specific styling */
@supports (-webkit-touch-callout: none) {
    .app {
        -webkit-overflow-scrolling: touch;
    }
}

/* Enhanced touch targets */
.nav-item, .brand-card, .reward-card, .menu-item {
    min-height: 44px;
    min-width: 44px;
}

/* Improved scrolling */
.content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Better focus states for accessibility */
button:focus, .nav-item:focus, .brand-card:focus {
    outline: 2px solid var(--purple-primary);
    outline-offset: 2px;
}

/* Native app-like animations */
.brand-card, .reward-card, .achievement-card {
    transform-origin: center;
}

.brand-card:active, .reward-card:active, .achievement-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* Enhanced bottom nav for mobile */
.bottom-nav {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* Safe area handling */
@media screen and (max-width: 430px) {
    .bottom-nav {
        padding-bottom: max(env(safe-area-inset-bottom), 8px);
    }
    
    .status-bar {
        height: max(env(safe-area-inset-top), 44px);
    }
}

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

/* Dark mode enhancements */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #0a0a0f;
        --text-primary: #ffffff;
    }
}