/**
 * Yıldız Optik - Frontend Mobile Responsive Styles
 * Comprehensive mobile adaptation for all frontend pages
 * Version: 2.0 - Professional Mobile Experience
 */

/* ============================================
   BASE MOBILE BREAKPOINTS
   ============================================ */

/* Small Mobile (up to 640px) */
@media (max-width: 640px) {
    html {
        font-size: 14px;
    }
    
    /* Container adjustments */
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Header compact */
    #header {
        height: 56px !important;
    }
    
    #headerInner {
        height: 56px !important;
    }
    
    /* Hero section mobile */
    .hero-swiper {
        height: 70vh !important;
        min-height: 500px !important;
    }
    
    .hero-swiper .swiper-slide {
        height: 70vh !important;
    }
    
    /* Catalog models smaller on mobile */
    .catalog-model .model-img {
        max-width: 65vw !important;
        height: auto !important;
        max-height: 50vh !important;
    }
    
    /* Hide floating frames on very small screens */
    .floating-frame {
        display: none !important;
    }
    
    /* Category cards mobile */
    .category-card-3d {
        height: 140px !important;
    }
    
    /* Product cards mobile */
    .product-card {
        margin-bottom: 1rem;
    }
    
    /* WhatsApp button mobile position */
    .whatsapp-float {
        bottom: 20px !important;
        left: 15px !important;
        right: auto !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
    }
}

/* Tablet (641px - 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
    html {
        font-size: 15px;
    }
}

/* ============================================
   HEADER & NAVIGATION MOBILE
   ============================================ */
@media (max-width: 1024px) {
    /* Mobile menu improvements */
    #mobile-menu .mobile-content {
        max-height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Mobile nav items larger touch targets */
    .mobile-nav-item {
        min-height: 80px;
        padding: 1rem !important;
    }
    
    .mobile-category-item {
        min-height: 60px;
        padding: 0.875rem !important;
    }
    
    /* Command palette mobile */
    #commandPalette .command-container {
        top: 70px !important;
        padding: 0 0.5rem !important;
    }
    
    #commandPalette .command-modal {
        max-height: 70vh !important;
    }
    
    /* Hamburger animation */
    .hamburger-icon {
        width: 24px;
        height: 20px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .hamburger-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    
    #mobile-menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 7px);
    }
    
    #mobile-menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
        opacity: 0;
    }
    
    #mobile-menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -7px);
    }
}

/* ============================================
   HERO MOBILE HEIGHT REDUCTION
   ============================================ */
@media (max-width: 768px) {
    /* Hero swiper - reduce height on mobile */
    .hero-swiper,
    .hero-slider,
    [class*="hero-swiper"] {
        height: auto !important;
        min-height: auto !important;
        max-height: 55vh !important;
    }
    
    .hero-swiper .swiper-slide,
    .hero-slider .swiper-slide {
        height: auto !important;
        min-height: auto !important;
        max-height: 55vh !important;
    }
    
    /* Remove gap after hero section */
    section:has(.hero-swiper) + section,
    .hero-swiper + section,
    .hero-slider + section {
        margin-top: 0 !important;
        padding-top: 1rem !important;
    }
    
    /* Reduce optical grid/background space */
    .optical-grid,
    .star-constellation,
    [class*="optical-grid"],
    [class*="star-bg"] {
        display: none !important;
    }
    
    /* Compress hero slide content */
    .hero-slide,
    .swiper-slide {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Remove floating elements in hero */
    .floating-frame,
    .light-ray-sweep,
    .glass-refraction,
    .diamond-sparkle {
        display: none !important;
    }
    
    /* Remove empty space between hero and content */
    .hero-swiper,
    .hero-slider,
    .swiper-container,
    [class*="hero-slider"] {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Remove padding from slide content area */
    .hero-slide .hero-content,
    .swiper-slide .slide-content,
    [class*="slide-content"] {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Compress the optical effects area */
    .iris-texture,
    .eye-cursor,
    .optical-flare,
    .prism-light,
    .chromatic-aberration,
    .focus-transition,
    .retina-scanner,
    .eye-blink-container,
    .tracking-ray,
    .tear-drop,
    .pupil-dilation,
    .depth-of-field,
    .floating-depth,
    .holographic-overlay,
    .advanced-lens-flare,
    .lens-flare-main,
    .lens-flare-ghost,
    .prism-overlay,
    .star-constellation,
    .constellation-lines,
    .optical-grid,
    .optical-flare,
    .lens-canvas,
    .glass-refraction,
    .diamond-sparkle,
    .frame-morph-container,
    .morphing-frame,
    .floating-frame {
        display: none !important;
    }
    
    /* Aggressively remove space between sections */
    section {
        margin-top: 0 !important;
        padding-top: 0.5rem !important;
    }
    
    /* Target hero section specifically */
    section:has(.hero-swiper),
    section:has(.hero-slider) {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Remove margin from first section after hero */
    section:first-of-type + section,
    main > section:first-child + section {
        margin-top: 0 !important;
        padding-top: 0.5rem !important;
    }
    
    /* Compress any dark background sections */
    section[class*="dark"],
    section[style*="background"],
    [class*="bg-dark"] {
        margin-top: 0 !important;
        padding-top: 0.5rem !important;
    }
}

/* ============================================
   HERO MODELS MOBILE - POSITION BELOW EYE EFFECT
   ============================================ */
@media (max-width: 768px) {
    /* Catalog models positioned higher up */
    .catalog-models {
        position: absolute !important;
        top: 15% !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        padding: 0 1.5rem !important;
        pointer-events: none !important;
        z-index: 8 !important;
    }
    
    /* Individual model - smaller */
    .catalog-model {
        position: relative !important;
        width: 40% !important;
        height: auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
    }
    
    .catalog-model.left {
        justify-content: flex-start !important;
    }
    
    .catalog-model.right {
        justify-content: flex-end !important;
    }
    
    /* Model images - much smaller */
    .catalog-model .model-img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        max-height: 12vh !important;
        object-fit: contain !important;
    }
    
    /* Hero content - reduced top padding to close the gap */
    .hero-content,
    .hero-slide .hero-content {
        position: relative !important;
        z-index: 15 !important;
        padding-top: 2vh !important;
        margin-top: 0 !important;
    }
    
    /* Hide scroll down indicator on mobile */
    .floating-animation,
    div[class*="absolute"][class*="bottom-8"],
    div[class*="floating-animation"],
    .scroll-down,
    [class*="scroll-down"],
    .scroll-indicator,
    [class*="scroll-indicator"],
    [class*="scroll-prompt"],
    .hero-scroll,
    [class*="hero-scroll"],
    .absolute:has(a[href="#categories"]),
    .absolute:has(.animate-bounce) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Target by href attribute */
    a[href="#categories"] {
        display: none !important;
    }
    
    a[href="#categories"] + i,
    a[href="#categories"] > * {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .catalog-models {
        top: 32% !important;
        padding: 0 1rem !important;
    }
    
    .catalog-model {
        width: 42% !important;
    }
    
    .catalog-model .model-img {
        max-height: 15vh !important;
    }
}

/* ============================================
   PRODUCT CARDS MOBILE
   ============================================ */
@media (max-width: 640px) {
    /* Product grid single column on mobile */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    /* Very small screens - single column */
    @media (max-width: 380px) {
        .products-grid {
            grid-template-columns: 1fr !important;
        }
    }
    
    /* Product card compact */
    .product-card {
        border-radius: 12px !important;
    }
    
    .product-card .product-image {
        aspect-ratio: 1 / 1 !important;
    }
    
    .product-card .product-info {
        padding: 0.75rem !important;
    }
    
    .product-card .product-title {
        font-size: 0.875rem !important;
        line-height: 1.3 !important;
    }
    
    .product-card .product-price {
        font-size: 1rem !important;
    }
    
    /* Quick action buttons */
    .product-card .quick-actions {
        opacity: 1 !important;
        transform: none !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 0.5rem !important;
        background: var(--bg-secondary) !important;
        border-top: 1px solid var(--border-color) !important;
        display: flex !important;
        justify-content: space-around !important;
    }
    
    .product-card .quick-actions button {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ============================================
   CATEGORY SECTIONS MOBILE
   ============================================ */
@media (max-width: 768px) {
    /* Category grid */
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    .category-card-3d {
        height: 160px !important;
    }
    
    .category-card-3d .card-content {
        padding: 12px !important;
    }
    
    .category-card-3d .card-title {
        font-size: 0.9rem !important;
    }
    
    .category-card-3d .card-icon {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ============================================
   CART PAGE MOBILE
   ============================================ */
@media (max-width: 640px) {
    /* Cart items stack */
    .cart-item {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }
    
    .cart-item > div:first-child {
        /* Product image */
        width: 60px !important;
        height: 60px !important;
    }
    
    .cart-item > div:nth-child(2) {
        /* Product info */
        flex: 1 1 calc(100% - 80px) !important;
        min-width: 0 !important;
    }
    
    .cart-item > div:nth-child(3) {
        /* Quantity controls */
        width: 100% !important;
        justify-content: center !important;
        margin-top: 0.5rem !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid var(--border-color) !important;
    }
    
    .cart-item > button:last-child {
        /* Remove button */
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Cart footer buttons */
    .cart-footer .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
    }
    
    .cart-footer .flex.items-center.gap-4 {
        width: 100% !important;
        justify-content: space-between !important;
    }
    
    .cart-footer a[href*="checkout"] {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 0.75rem !important;
    }
}

/* ============================================
   CHECKOUT PAGE MOBILE
   ============================================ */
@media (max-width: 768px) {
    /* Checkout form stack */
    .checkout-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Order summary mobile */
    .order-summary {
        position: relative !important;
        top: auto !important;
        order: -1 !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Form inputs larger on mobile */
    .checkout-form input,
    .checkout-form select,
    .checkout-form textarea {
        min-height: 48px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    /* Payment methods */
    .payment-methods {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    @media (max-width: 380px) {
        .payment-methods {
            grid-template-columns: 1fr !important;
        }
    }
}

/* ============================================
   PRODUCT DETAIL PAGE MOBILE
   ============================================ */
@media (max-width: 768px) {
    /* Product detail grid */
    .product-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Product image gallery mobile */
    .product-gallery {
        order: -1 !important;
    }
    
    .product-gallery .main-image {
        aspect-ratio: 1 / 1 !important;
    }
    
    /* Thumbnails horizontal scroll */
    .gallery-thumbnails {
        display: flex !important;
        gap: 0.5rem !important;
        overflow-x: auto !important;
        padding-bottom: 0.5rem !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .gallery-thumbnails::-webkit-scrollbar {
        height: 4px !important;
    }
    
    .gallery-thumbnails button {
        flex-shrink: 0 !important;
        width: 70px !important;
        height: 70px !important;
    }
    
    /* Product info mobile */
    .product-info h1 {
        font-size: 1.5rem !important;
    }
    
    /* Action buttons */
    .product-actions {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--bg-primary) !important;
        border-top: 1px solid var(--border-color) !important;
        padding: 0.75rem 1rem !important;
        z-index: 100 !important;
        display: flex !important;
        gap: 0.75rem !important;
    }
    
    .product-actions button,
    .product-actions a {
        flex: 1 !important;
        justify-content: center !important;
        min-height: 48px !important;
    }
    
    /* Add padding to body for fixed button */
    body:has(.product-actions) {
        padding-bottom: 80px !important;
    }
    
    /* Specs table mobile */
    .specs-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
    
    .specs-table td,
    .specs-table th {
        white-space: normal !important;
    }
}

/* ============================================
   ACCOUNT PAGES MOBILE
   ============================================ */
@media (max-width: 768px) {
    /* Account layout */
    .account-layout {
        grid-template-columns: 1fr !important;
    }
    
    /* Account sidebar */
    .account-sidebar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--bg-primary) !important;
        border-top: 1px solid var(--border-color) !important;
        padding: 0.5rem !important;
        z-index: 100 !important;
        display: flex !important;
        justify-content: space-around !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .account-sidebar a {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.25rem !important;
        padding: 0.5rem !important;
        min-width: 60px !important;
        font-size: 0.75rem !important;
    }
    
    .account-sidebar a i {
        font-size: 1.25rem !important;
    }
    
    .account-sidebar a span {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
    }
    
    /* Add padding for bottom nav */
    body:has(.account-sidebar) main {
        padding-bottom: 80px !important;
    }
    
    /* Orders table mobile */
    .orders-table {
        display: block !important;
    }
    
    .orders-table thead {
        display: none !important;
    }
    
    .orders-table tbody,
    .orders-table tr {
        display: block !important;
        width: 100% !important;
    }
    
    .orders-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.75rem !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    
    .orders-table td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
    }
    
    .orders-table tr {
        margin-bottom: 1rem !important;
        background: var(--bg-secondary) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
}

/* ============================================
   AUTH PAGES (LOGIN/REGISTER) MOBILE
   ============================================ */
@media (max-width: 640px) {
    /* Auth layout */
    .auth-layout {
        min-height: 100vh !important;
        padding: 0 !important;
    }
    
    .auth-card {
        border-radius: 0 !important;
        min-height: 100vh !important;
        padding: 1.5rem !important;
    }
    
    /* Social login buttons */
    .social-login {
        grid-template-columns: 1fr !important;
    }
    
    .social-login button {
        width: 100% !important;
    }
    
    /* Form inputs */
    .auth-form input {
        min-height: 48px !important;
        font-size: 16px !important;
    }
}

/* ============================================
   CONTACT PAGE MOBILE
   ============================================ */
@media (max-width: 768px) {
    /* Contact grid */
    .contact-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Contact info cards stack */
    .contact-info-cards {
        grid-template-columns: 1fr !important;
    }
    
    /* Map height */
    .contact-map {
        height: 250px !important;
    }
    
    /* Form inputs */
    .contact-form input,
    .contact-form textarea {
        min-height: 48px !important;
        font-size: 16px !important;
    }
}

/* ============================================
   FOOTER MOBILE
   ============================================ */
@media (max-width: 768px) {
    /* Footer grid */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
    }
    
    /* Footer links centered */
    .footer-links {
        justify-content: center !important;
    }
    
    /* Newsletter input */
    .newsletter-form {
        flex-direction: column !important;
    }
    
    .newsletter-form input,
    .newsletter-form button {
        width: 100% !important;
    }
    
    /* Social icons centered */
    .social-links {
        justify-content: center !important;
    }
    
    /* Payment methods centered */
    .payment-methods-footer {
        justify-content: center !important;
    }
}

/* ============================================
   MODALS & DIALOGS MOBILE
   ============================================ */
@media (max-width: 640px) {
    /* Modal full screen on mobile */
    .modal-overlay .modal-content {
        position: fixed !important;
        inset: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
    }
    
    /* Compare drawer mobile */
    #compareDrawer .absolute.bottom-0 {
        max-height: 85vh !important;
    }
    
    #compareDrawer .rounded-2xl {
        border-radius: 1rem 1rem 0 0 !important;
    }
    
    /* Toast notifications mobile */
    .toast-container {
        left: 1rem !important;
        right: 1rem !important;
        top: 1rem !important;
    }
    
    .toast {
        min-width: auto !important;
        max-width: none !important;
    }
}

/* ============================================
   COMPARE DRAWER MOBILE - Full Screen Modal
   ============================================ */
@media (max-width: 1024px) {
    /* Compare Drawer - Full Screen on Mobile */
    #compareDrawer {
        z-index: 99999 !important;
    }
    
    #compareDrawer > div:nth-child(2) {
        /* Drawer content wrapper */
        position: fixed !important;
        inset: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }
    
    #compareDrawer .container {
        /* Full width container */
        max-width: 100% !important;
        padding: 0 !important;
        height: 100dvh !important;
    }
    
    #compareDrawer .rounded-2xl {
        /* Remove rounded corners for full screen */
        border-radius: 0 !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Header - Compact */
    #compareDrawer .border-b {
        padding: 0.75rem 1rem !important;
        flex-shrink: 0 !important;
    }
    
    #compareDrawer .border-b .flex.items-center.gap-3 > div:first-child {
        /* Icon */
        width: 36px !important;
        height: 36px !important;
    }
    
    #compareDrawer .border-b .font-semibold {
        font-size: 1rem !important;
    }
    
    #compareDrawer .text-sm.text-\[var\(--text-secondary\)\] {
        font-size: 0.75rem !important;
    }
    
    /* Header buttons - Touch friendly */
    #compareDrawer .border-b button {
        min-height: 40px !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    #compareDrawer .border-b button i {
        font-size: 0.875rem !important;
    }
    
    /* Hide print button on mobile */
    #compareDrawer button[onclick="printCompare()"] {
        display: none !important;
    }
    
    /* Comparison Content Area */
    #compareDrawer .p-6.overflow-x-auto {
        padding: 0.5rem !important;
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Compare Container - Stack vertically on mobile */
    #compareContainer {
        min-width: auto !important;
        width: 100% !important;
    }
    
    /* Compare Table - Card Style for Mobile */
    .compare-table {
        display: block !important;
        width: 100% !important;
    }
    
    .compare-table thead {
        display: none !important; /* Hide table header on mobile */
    }
    
    .compare-table tbody,
    .compare-table tr {
        display: block !important;
        width: 100% !important;
    }
    
    /* Each row becomes a card */
    .compare-table tr {
        margin-bottom: 0.75rem !important;
        background: var(--bg-secondary) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        border: 1px solid var(--border-color) !important;
    }
    
    /* First row (Product Headers) - Horizontal Scroll */
    .compare-table tr:first-child {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
        background: var(--bg-primary) !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .compare-table tr:first-child th,
    .compare-table tr:first-child td {
        flex: 0 0 auto !important;
        min-width: 140px !important;
        max-width: 160px !important;
        padding: 0.5rem !important;
        background: transparent !important;
        border: none !important;
    }
    
    /* Product Header Cards */
    .compare-product-header {
        padding: 0.5rem !important;
        border-radius: 8px !important;
    }
    
    .compare-product-image {
        aspect-ratio: 1 / 1 !important;
        margin-bottom: 0.5rem !important;
        border-radius: 8px !important;
    }
    
    .compare-product-header h4 {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }
    
    .compare-product-header p {
        font-size: 0.65rem !important;
    }
    
    .compare-remove-btn {
        width: 24px !important;
        height: 24px !important;
        top: 4px !important;
        right: 4px !important;
    }
    
    /* Feature Rows */
    .compare-table tr:not(:first-child) td {
        display: grid !important;
        grid-template-columns: 80px 1fr 1fr !important;
        gap: 0.5rem !important;
        padding: 0.75rem !important;
        align-items: center !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    
    .compare-table tr:not(:first-child) td:last-child {
        border-bottom: none !important;
    }
    
    /* Feature Label */
    .compare-table tr:not(:first-child) td:first-child {
        font-weight: 600 !important;
        font-size: 0.75rem !important;
        color: var(--text-secondary) !important;
    }
    
    /* Product Values */
    .compare-table tr:not(:first-child) td:nth-child(2),
    .compare-table tr:not(:first-child) td:nth-child(3) {
        font-size: 0.875rem !important;
        text-align: center !important;
    }
    
    /* Price styling */
    .compare-price {
        font-size: 1rem !important;
    }
    
    .compare-price-old {
        font-size: 0.75rem !important;
    }
    
    /* Badge styling */
    .compare-badge {
        padding: 2px 6px !important;
        font-size: 0.625rem !important;
    }
    
    /* Footer Actions */
    #compareDrawer .border-t {
        padding: 0.75rem !important;
        flex-shrink: 0 !important;
    }
    
    #compareDrawer .border-t .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    #compareDrawer .border-t a {
        width: 100% !important;
        padding: 0.875rem !important;
        font-size: 0.875rem !important;
        justify-content: center !important;
    }
    
    /* Empty State */
    .compare-empty-state {
        padding: 2rem 1rem !important;
    }
    
    .compare-empty-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    /* Smaller screens - Single column product view */
    .compare-table tr:first-child {
        flex-direction: column !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-height: 200px !important;
    }
    
    .compare-table tr:first-child th,
    .compare-table tr:first-child td {
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    .compare-table tr:not(:first-child) td {
        grid-template-columns: 100px 1fr !important;
    }
    
    /* Hide third product column on very small screens */
    .compare-table tr:not(:first-child) td:nth-child(3) {
        display: none !important;
    }
    
    /* Header adjustments */
    #compareDrawer .border-b .flex.items-center.justify-between {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    #compareDrawer .border-b .flex.items-center.gap-2 {
        width: 100% !important;
        justify-content: flex-end !important;
    }
}

/* ============================================
   TABLES MOBILE
   ============================================ */
@media (max-width: 768px) {
    /* Responsive tables */
    .table-responsive {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Card-style tables */
    .table-card-mode {
        display: block !important;
    }
    
    .table-card-mode thead {
        display: none !important;
    }
    
    .table-card-mode tbody {
        display: block !important;
    }
    
    .table-card-mode tr {
        display: block !important;
        margin-bottom: 1rem !important;
        background: var(--bg-secondary) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .table-card-mode td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    
    .table-card-mode td:last-child {
        border-bottom: none !important;
    }
    
    .table-card-mode td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
        margin-right: 1rem !important;
    }
}

/* ============================================
   FORMS MOBILE
   ============================================ */
@media (max-width: 640px) {
    /* Form inputs larger for touch */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        min-height: 48px !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 0.75rem 1rem !important;
    }
    
    /* Checkbox and radio larger */
    input[type="checkbox"],
    input[type="radio"] {
        width: 22px !important;
        height: 22px !important;
    }
    
    /* Form groups spacing */
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    /* Buttons full width on mobile */
    .btn-full-mobile {
        width: 100% !important;
    }
}

/* ============================================
   LANDSCAPE MODE SPECIFIC
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    /* Mobile menu in landscape */
    #mobile-menu .mobile-content {
        max-height: 100vh !important;
    }
    
    /* Compact header */
    #header {
        height: 50px !important;
    }
    
    #headerInner {
        height: 50px !important;
    }
}

/* ============================================
   SAFE AREA INSETS (iPhone X+)
   ============================================ */
@supports (padding: max(0px)) {
    @media (max-width: 1024px) {
        /* Safe area padding for notched devices */
        #header {
            padding-top: env(safe-area-inset-top) !important;
        }
        
        .whatsapp-float {
            bottom: max(20px, env(safe-area-inset-bottom)) !important;
        }
        
        /* Bottom fixed elements */
        .product-actions,
        .account-sidebar {
            padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
        }
        
        main {
            padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
            padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
        }
    }
}

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

/* High contrast mode */
@media (prefers-contrast: high) and (max-width: 768px) {
    .product-card,
    .category-card-3d,
    .cart-item,
    .orders-table tr {
        border: 2px solid var(--text-primary) !important;
    }
    
    .btn-primary {
        border: 2px solid var(--text-primary) !important;
    }
}

/* ============================================
   SCROLLBAR STYLING MOBILE
   ============================================ */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important;
    }
    
    ::-webkit-scrollbar-track {
        background: transparent !important;
    }
    
    ::-webkit-scrollbar-thumb {
        background: var(--text-muted) !important;
        border-radius: 2px !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    #header,
    #mobile-menu,
    .whatsapp-float,
    .product-actions,
    .account-sidebar {
        display: none !important;
    }
    
    main {
        padding: 0 !important;
    }
}