/* Mobile-Specific Enhancements */

/* Prevent horizontal scroll on mobile */
html, body {
    overflow-x: hidden;
}

/* Improve text rendering on mobile */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Better tap highlights */
* {
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
}

/* Disable zoom on form inputs (iOS) */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
        transform: translateZ(0);
        -webkit-appearance: none;
        border-radius: 8px;
    }
}

/* Improve button interactions */
.btn,
.get-deal-btn,
.show-code-btn,
button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Better card interactions */
.offer-card,
.category-card,
.brand-card {
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.offer-card:active,
.category-card:active,
.brand-card:active {
    transform: scale(0.98);
}

/* Improve modal behavior on mobile */
@media screen and (max-width: 768px) {
    .modal {
        padding: 0;
    }
    
    .modal-content {
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        border-bottom: 1px solid #e1e5e9;
    }
}

/* Improve carousel touch interactions */
.carousel-track {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Better search dropdown on mobile */
@media screen and (max-width: 768px) {
    .search-dropdown {
        -webkit-overflow-scrolling: touch;
    }
    
    .search-dropdown .trending-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .trending-item {
        padding: 0.75rem;
        border-radius: 8px;
    }
}

/* Improve notification positioning */
@media screen and (max-width: 768px) {
    .notification-icon {
        position: relative;
    }
    
    .notification-badge {
        top: -8px;
        right: -8px;
        font-size: 0.6rem;
        width: 16px;
        height: 16px;
    }
}

/* Better footer on mobile */
@media screen and (max-width: 480px) {
    .footer-section ul {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .footer-section ul li a {
        padding: 0.5rem 0;
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .footer-section ul li:last-child a {
        border-bottom: none;
    }
}

/* Improve loading states */
.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Better error states */
.error-message {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

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

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .search-dropdown {
        background: #1a1a1a;
        color: white;
    }
    
    .nav-links {
        background: #1a1a1a;
    }
    
    .nav-link {
        color: white;
    }
    
    .modal-content {
        background: #1a1a1a;
        color: white;
    }
}

/* Improve performance on mobile */
.offer-card,
.category-card,
.brand-card,
.carousel-slide {
    will-change: transform;
    transform: translateZ(0);
}

/* Better spacing for very small screens */
@media screen and (max-width: 320px) {
    .container {
        padding: 0 8px;
    }
    
    .hero-carousel .container {
        padding: 0 8px;
    }
    
    .hero-carousel {
        height: 280px;
    }
    
    .carousel-content {
        padding: 0.75rem;
    }
    
    .carousel-title {
        font-size: 1.1rem;
    }
    
    .carousel-subtitle {
        font-size: 0.8rem;
    }
    
    .feature-card {
        padding: 0.75rem 0.25rem;
    }
    
    .offer-content {
        padding: 0.75rem;
    }
    
    .get-deal-btn {
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }
}

/* Improve touch scrolling */
.nav-links,
.search-dropdown,
.modal-content {
    -webkit-overflow-scrolling: touch;
}

/* Better focus states for accessibility */
.nav-link:focus,
.btn:focus,
.get-deal-btn:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Improve image loading */
.offer-image img,
.carousel-logo img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Better safe area handling for newer phones */
@supports (padding: max(0px)) {
    .header,
    .footer {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
    
    .modal-content {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}