/* ==========================================================
   TINDA — Native Mobile Fluidity v6.0
   Complete Mobile Optimization Layer
   
   120Hz-optimized · Battery-safe · iOS/Android PWA Parity
   Covers: iPhone 12–16 Pro Max, Dynamic Island, Safe Areas,
           Android 360px–1440px, RTL (Arabic), Landscape
   
   Loaded AFTER platform.css — all overrides are intentional.
   ========================================================== */

/* ─────────────────────────────────────────────────────────
   0. DESIGN TOKENS — Fluid Apple-Grade Easing Curves
   ───────────────────────────────────────────────────────── */
:root {
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-micro:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-ios-push: cubic-bezier(0.28, 0.11, 0.32, 1);

    /* Safe area fallbacks */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);

    /* Mobile touch target (Apple HIG / Material 3) */
    --touch-min: 44px;
}

/* ─────────────────────────────────────────────────────────
   1. GLOBAL — Remove web artifacts (all viewports)
   ───────────────────────────────────────────────────────── */

/* 1a. Kill web-like tap highlight */
*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
}

/* 1b. Fast taps — kill 300ms delay on all interactive elements */
button,
input,
select,
textarea,
a,
label,
[role="button"],
[role="tab"],
[role="link"],
[role="menuitem"],
[tabindex],
[onclick],
.btn-primary,
.btn-outline,
.icon-btn,
.service-card,
.service-card-coming-soon,
.ai-feature,
.auction-card,
.review-card,
.search-tab,
.search-camera,
.search-voice,
.search-submit,
.nav-link,
.mobile-menu-btn,
.ai-fab,
.wa-fab,
.wa-smart-fab,
.voice-fab,
.tour-start-btn,
.bottom-nav-item,
.smart-filter-chip,
.filter-select,
.filter-tag,
.mp-tag,
.ai-quick-card,
.ai-send-btn,
.ai-action-btn,
.ai-header-actions button,
.safe-step,
.safe-faq-item,
.safe-faq-q,
.notification-bell,
.cart-icon-btn,
.theme-toggle-btn,
.lang-toggle-btn,
.mobile-cta-btn,
.onboarding-btn,
.onboarding-close,
.mp-search-btn,
.mp-clear-btn,
.mp-add-cart-btn,
.mp-wishlist-btn,
.mp-qty-control button,
.tinda-modal-close,
.category-item,
.condition-option,
.installation-option,
.share-exp-trigger,
.btn-submit-review,
.diag-footer-actions .btn-primary,
.diag-footer-actions .btn-outline,
.bnav-tab,
.side-menu-item,
.side-menu-close,
.header-user-btn,
#loginBtn {
    touch-action: manipulation;
}

/* 1c. App-like text selection: NONE on UI chrome */
button,
nav,
header,
footer,
label,
.btn-primary,
.btn-outline,
.icon-btn,
.service-card,
.service-card-coming-soon,
.ai-feature,
.auction-card,
.review-card,
.search-tab,
.stat-item,
.hero-stats,
.hero-badge,
.trust-banner,
.trust-item,
.section-header,
.nav-wrapper,
.nav-link,
.mobile-menu-btn,
.ai-fab,
.wa-fab,
.wa-smart-fab,
.voice-fab,
.tour-start-btn,
.bottom-nav-item,
.mobile-bottom-nav,
.ai-chat-header,
.ai-quick-card,
.ai-quick-grid,
.smart-filter-chip,
.filter-select,
.notification-panel,
.modal,
.onboarding-card,
.onboarding-overlay,
.mp-tag,
.mp-header,
.safe-step,
.safe-faq-q,
.category-item,
.condition-option,
.installation-option,
.tinda-modal-header,
.mobile-order-cta,
.theme-toggle-btn,
.lang-toggle-btn,
.tinda-bottom-nav,
.tinda-side-menu,
.tinda-side-overlay,
.bnav-tab,
.header-user-btn {
    -webkit-user-select: none;
    user-select: none;
}

/* 1d. ALLOW text selection on reading content */
p,
article,
blockquote,
.ai-message .message-content,
.product-description,
.diag-body,
.safe-faq-a,
.safe-step-content p,
.mp-ai-response-body,
.hero-desc,
.section-header p,
.product-info h4 {
    -webkit-user-select: text;
    user-select: text;
}

input,
textarea,
select,
[contenteditable="true"] {
    -webkit-user-select: auto;
    user-select: auto;
}

/* ─────────────────────────────────────────────────────────
   2. GPU ACCELERATION — Targeted (battery-safe)
   Only promote layers for animated elements
   ───────────────────────────────────────────────────────── */
.ai-fab,
.wa-fab,
.wa-smart-fab,
.voice-fab,
.tour-start-btn,
.ai-chat-panel,
.onboarding-card,
.onboarding-spotlight,
.mobile-bottom-nav,
.mobile-order-cta,
.tinda-modal-container,
#smartCartDrawer,
.notification-panel,
.toast,
.tinda-bottom-nav,
.tinda-side-overlay {
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Side menu: GPU promote WITHOUT overriding translateX */
.tinda-side-menu {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ─────────────────────────────────────────────────────────
   3. BATTERY-SAFE ANIMATIONS — transform + opacity only
   Avoids layout/paint for 120Hz smoothness
   ───────────────────────────────────────────────────────── */

/* 3a. FABs */
.ai-fab,
.wa-fab,
.wa-smart-fab,
.voice-fab,
.tour-start-btn {
    transition: transform 0.3s var(--ease-spring),
                opacity 0.3s var(--ease-smooth),
                box-shadow 0.3s var(--ease-micro);
}

/* 3b. Bottom nav */
.mobile-bottom-nav {
    transition: transform 0.35s var(--ease-smooth);
}

.mobile-bottom-nav.nav-hidden {
    transform: translateY(100%) translateZ(0) !important;
}

/* 3b2. Tinda Bottom Nav */
.tinda-bottom-nav {
    transition: transform 0.35s var(--ease-smooth);
}

.tinda-bottom-nav.nav-hidden {
    transform: translateY(100%) translateZ(0) !important;
}

/* 3b3. Side menu & overlay */
.tinda-side-menu {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.tinda-side-overlay {
    transition: opacity 0.3s var(--ease-smooth);
}

/* 3c. AI Chat Panel */
.ai-chat-panel {
    transition: transform 0.4s var(--ease-ios-push),
                opacity 0.3s var(--ease-smooth);
}

/* 3d. Notification panel — spring scale */
.notification-panel {
    transition: transform 0.25s var(--ease-spring),
                opacity 0.2s var(--ease-smooth);
    transform-origin: top center;
}

.notification-panel:not(.active) {
    transform: scale(0.95) translateY(-8px);
    opacity: 0;
    pointer-events: none;
}

.notification-panel.active {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* 3e. Modals */
.modal-overlay {
    transition: opacity 0.3s var(--ease-smooth);
}

.modal {
    transition: transform 0.35s var(--ease-spring),
                opacity 0.25s var(--ease-smooth);
}

/* 3f. Onboarding */
.onboarding-card {
    transition: transform 0.4s var(--ease-ios-push),
                opacity 0.3s var(--ease-smooth);
}

/* 3g. Toast */
.toast {
    transition: transform 0.35s var(--ease-spring),
                opacity 0.25s var(--ease-smooth);
}

/* 3h. Cards — transform-only feedback */
.service-card,
.ai-feature,
.auction-card,
.review-card,
.ai-quick-card,
.smart-filter-chip,
.mp-tag,
.trust-item,
.stat-item {
    transition: transform 0.2s var(--ease-micro),
                box-shadow 0.2s var(--ease-micro),
                opacity 0.2s var(--ease-micro);
}

/* 3i. Buttons */
.btn-primary,
.btn-outline,
.icon-btn {
    transition: transform 0.2s var(--ease-micro),
                opacity 0.2s var(--ease-micro),
                box-shadow 0.25s var(--ease-micro);
}

/* 3j. Cart drawer */
#smartCartDrawer {
    transition: transform 0.4s var(--ease-ios-push);
}

/* ─────────────────────────────────────────────────────────
   4. PRESS STATES — Apple-grade spring feedback (touch only)
   ───────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {

    /* 4a. Kill ALL hover transforms on touch — prevent sticky hover bug */
    .service-card:hover,
    .service-card-coming-soon:hover,
    .ai-feature:hover,
    .auction-card:hover,
    .review-card:hover,
    .btn-primary:hover,
    .btn-outline:hover,
    .icon-btn:hover,
    .ai-fab:hover,
    .wa-fab:hover,
    .wa-smart-fab:hover,
    .voice-fab:hover,
    .tour-start-btn:hover,
    .stat-item:hover,
    .trust-item:hover,
    .ai-quick-card:hover,
    .smart-filter-chip:hover,
    .mp-tag:hover,
    .bottom-nav-item:hover,
    .theme-toggle-btn:hover,
    .lang-toggle-btn:hover,
    .category-item:hover,
    .condition-option:hover,
    .search-camera:hover,
    .search-voice:hover,
    .search-submit:hover,
    .share-exp-trigger:hover,
    .safe-step:hover,
    .nav-store-link:hover,
    .btn-store-header:hover,
    .hero-store-btn:hover,
    .view-all:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }

    /* 4b. Spring press — cards */
    .service-card:active,
    .ai-feature:active,
    .review-card:active,
    .ai-quick-card:active,
    .smart-filter-chip:active,
    .mp-tag:active,
    .category-item:active,
    .condition-option:active,
    .trust-item:active,
    .safe-step:active {
        transform: scale(0.97) !important;
        transition: transform 0.1s var(--ease-micro) !important;
    }

    /* 4c. Spring press — buttons */
    .btn-primary:active,
    .btn-outline:active,
    .icon-btn:active,
    .mobile-cta-btn:active,
    .mp-search-btn:active,
    .mp-add-cart-btn:active,
    .onboarding-btn:active,
    .btn-store-header:active,
    .hero-store-btn:active,
    .btn-submit-review:active,
    .share-exp-trigger:active,
    .search-tab:active {
        transform: scale(0.95) !important;
        opacity: 0.88 !important;
        transition: transform 0.1s var(--ease-micro),
                    opacity 0.1s var(--ease-micro) !important;
    }

    /* 4d. Spring press — FABs */
    .ai-fab:active,
    .wa-fab:active,
    .wa-smart-fab:active,
    .voice-fab:active,
    .tour-start-btn:active {
        transform: scale(0.90) translateZ(0) !important;
        transition: transform 0.1s var(--ease-micro) !important;
    }

    /* 4e. Spring press — bottom nav */
    .bottom-nav-item:active {
        transform: scale(0.88) !important;
        transition: transform 0.1s var(--ease-micro) !important;
    }

    /* 4f. Auction card — subtle */
    .auction-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.12s var(--ease-micro) !important;
    }

    /* 4g. Stat item */
    .stat-item:active {
        transform: scale(0.96) !important;
        transition: transform 0.12s var(--ease-micro) !important;
    }

    /* 4h. Theme toggle — rotational press */
    .theme-toggle-btn:active {
        transform: scale(0.88) rotate(15deg) !important;
        transition: transform 0.15s var(--ease-spring) !important;
    }

    /* 4i. Touch targets enforcement (Apple HIG 44px min) */
    .icon-btn                          { min-width: var(--touch-min); min-height: var(--touch-min); }
    .search-tab                        { min-height: 40px; }
    .ai-send-btn                       { min-width: var(--touch-min); min-height: var(--touch-min); }
    .ai-quick-card                     { min-height: var(--touch-min); }
    .ai-action-btn                     { min-width: 36px; min-height: 36px; }
    .search-camera,
    .search-voice,
    .search-submit                     { min-width: var(--touch-min); min-height: var(--touch-min); }
    #loginBtn                          { min-height: var(--touch-min); min-width: var(--touch-min); }
    .mobile-menu-btn,
    .notification-bell,
    .cart-icon-btn                     { min-width: var(--touch-min); min-height: var(--touch-min); }
    .bottom-nav-item                   { min-height: 48px; min-width: 48px; }
    .filter-select                     { min-height: 40px; }
    .mp-qty-control button             { min-width: var(--touch-min); min-height: var(--touch-min); }
    .safe-faq-q                        { min-height: var(--touch-min); }
    .lang-toggle-btn                   { min-height: 36px; }
    .theme-toggle-btn                  { min-width: var(--touch-min); min-height: var(--touch-min); }
    .ai-header-btn                     { min-width: 36px; min-height: 36px; }
    .onboarding-btn                    { min-height: 40px; }
    .onboarding-close                  { min-width: 32px; min-height: 32px; }
    .share-exp-trigger                 { min-height: var(--touch-min); }
    .star-rating-input .star-btn       { min-width: 36px; min-height: 36px; }
    .nav-link                          { min-height: var(--touch-min); }
}

/* ─────────────────────────────────────────────────────────
   5. SAFE AREA FOUNDATION — All viewports
   Supports Dynamic Island, Notch, Home Indicator, 
   Rounded Corners (iPhone 12–16 Pro Max)
   ───────────────────────────────────────────────────────── */
@supports (padding: max(0px)) {

    /* Body safe area padding for landscape/rotated views */
    body {
        padding-inline-start: var(--safe-left);
        padding-inline-end:   var(--safe-right);
    }

    /* Header respects safe area */
    #mainHeader .nav-wrapper {
        padding-inline-start: max(16px, var(--safe-left));
        padding-inline-end:   max(16px, var(--safe-right));
    }
}

/* ─────────────────────────────────────────────────────────
   6. TABLETS (≤1024px)
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    /* Fluid container */
    .container {
        max-width: 100%;
        padding-inline: 20px;
    }
}

/* ─────────────────────────────────────────────────────────
   7. MOBILE (≤768px) — Full Native Overhaul
   Covers: iPads Mini, Android tablets, large phones
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── 7a. Prevent horizontal scroll ── */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        overscroll-behavior-x: none;
    }

    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-inline: 16px !important;
    }

    img, video, iframe, canvas, svg {
        max-width: 100% !important;
        height: auto;
    }

    /* ── 7b. Hide scrollbars for app-like feel ── */
    ::-webkit-scrollbar {
        display: none !important;
    }

    * {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Re-show in AI chat (usability) */
    .ai-chat-messages::-webkit-scrollbar {
        display: block !important;
        width: 3px;
    }

    .ai-chat-messages::-webkit-scrollbar-thumb {
        background: rgba(220, 20, 60, 0.25);
        border-radius: 3px;
    }

    .ai-chat-messages::-webkit-scrollbar-track {
        background: transparent;
    }

    .ai-chat-messages {
        scrollbar-width: thin;
        scrollbar-color: rgba(220, 20, 60, 0.25) transparent;
    }

    /* ── 7c. Native momentum scrolling ── */
    .ai-chat-messages,
    .notif-list,
    .tinda-modal-body,
    .products-grid,
    .search-tabs,
    main,
    .scroll-container {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* ── 7d. Header: Dynamic Island / Notch safety ── */
    #mainHeader {
        padding-top: var(--safe-top);
    }

    #mainHeader .nav-wrapper {
        padding-top: var(--safe-top);
        padding-inline-start: max(16px, var(--safe-left));
        padding-inline-end:   max(16px, var(--safe-right));
    }

    .hero {
        padding-top: calc(90px + var(--safe-top));
    }

    /* ── Inner pages: account for safe-area header ── */
    .page-container {
        padding-top: calc(110px + var(--safe-top)) !important;
    }

    /* ── 7e. FAB STACK — Vertical, clean, safe-area-aware ── */
    /* Always left side regardless of RTL/LTR */
    .ai-fab,
    .wa-fab,
    .wa-smart-fab,
    .voice-fab,
    .tour-start-btn {
        position: fixed !important;
        left: 14px !important;
        right: auto !important;
        z-index: 1000 !important;
        transform: translateZ(0) !important;
    }

    /* AI FAB — hidden on mobile (bottom nav replaces it) */
    .ai-fab {
        bottom: max(16px, calc(var(--safe-bottom) + 14px)) !important;
        width: 52px !important;
        height: 52px !important;
        font-size: 1.3rem !important;
        box-shadow: 0 4px 20px rgba(220, 20, 60, 0.4),
                    0 0 0 3px rgba(220, 20, 60, 0.08) !important;
    }

    /* WhatsApp Diagnosis FAB — just above bottom nav */
    .wa-fab {
        bottom: max(78px, calc(var(--safe-bottom) + 76px)) !important;
        width: 46px !important;
        height: 46px !important;
        font-size: 1.2rem !important;
        box-shadow: 0 4px 16px rgba(220, 20, 60, 0.35) !important;
    }

    .wa-fab-emoji {
        font-size: 1.3rem !important;
    }

    .wa-fab-glow {
        inset: 4px !important;
    }

    /* Popup on mobile — positioned to the right of the FAB */
    .wa-fab-popup {
        left: calc(100% + 10px) !important;
        font-size: 0.72rem !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
    }

    /* TINDA Smart WhatsApp Assistant FAB — above diagnosis FAB */
    .wa-smart-fab {
        bottom: max(138px, calc(var(--safe-bottom) + 136px)) !important;
        width: 42px !important;
        height: 42px !important;
        box-shadow: 0 3px 12px rgba(220, 20, 60, 0.30) !important;
    }

    .wa-smart-fab-icon {
        font-size: 1.15rem !important;
    }

    /* Smart assistant popup on mobile */
    .wa-smart-fab-popup {
        left: calc(100% + 8px) !important;
        font-size: 0.7rem !important;
        padding: 5px 10px !important;
        border-radius: 7px !important;
    }

    /* Voice FAB — hidden on mobile (use search-box button) */
    .voice-fab {
        display: none !important;
    }

    /* Tour FAB — above Smart WA (generous gap) */
    .tour-start-btn {
        bottom: max(198px, calc(var(--safe-bottom) + 196px)) !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 0.8rem !important;
        box-shadow: 0 4px 16px rgba(220, 20, 60, 0.35) !important;
    }

    .tour-fab-emoji {
        font-size: 1.15rem !important;
    }

    .tour-fab-glow {
        inset: 3px !important;
    }

    /* Tour popup on mobile — positioned to the right of the FAB */
    .tour-fab-popup {
        left: calc(100% + 10px) !important;
        font-size: 0.72rem !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
    }

    /* Hide old WA label on mobile (popup replaces it) */
    .wa-fab-label {
        display: none !important;
    }

    /* Slow pulse for battery savings */
    .ai-pulse,
    .wa-pulse,
    .wa-smart-pulse,
    .voice-fab-pulse {
        animation-duration: 5s;
    }

    /* ── 7f. STATS — 2×2 Native Dashboard Widgets ── */
    .hero-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 16px !important;
        max-width: 100% !important;
        width: 100% !important;
        flex-wrap: unset !important;
        justify-content: unset !important;
        align-items: unset !important;
    }

    .stat-item {
        flex: unset !important;
        max-width: unset !important;
        min-width: unset !important;
        width: 100% !important;
        padding: 14px 12px !important;
        background: rgba(15, 15, 15, 0.5) !important;
        border: 1px solid rgba(220, 20, 60, 0.12) !important;
        border-radius: 16px !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        text-align: center !important;
    }

    /* Light theme stat item */
    [data-theme="light"] .stat-item {
        background: rgba(255, 255, 255, 0.85) !important;
        border-color: rgba(196, 18, 48, 0.12) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    }

    [data-theme="light"] .stat-number {
        color: #1A1A2E !important;
        filter: none !important;
    }

    [data-theme="light"] .stat-label {
        color: #666 !important;
    }

    /* Hide vertical separator lines */
    .stat-item::before,
    .stat-item:not(:last-child)::before {
        display: none !important;
    }

    .stat-number {
        font-size: 1.35rem !important;
        min-width: unset !important;
        width: auto !important;
        filter: drop-shadow(0 0 12px rgba(220, 20, 60, 0.2));
    }

    .stat-label {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
        margin-top: 2px !important;
    }

    .stat-icon {
        font-size: 1.2rem !important;
        margin-bottom: 4px !important;
    }

    /* ── 7g. SEARCH BAR — 44px Touch Targets ── */
    .search-box {
        padding: 8px !important;
        gap: 6px !important;
        border-radius: 16px !important;
        min-height: 52px !important;
        align-items: center !important;
    }

    .search-input-wrapper {
        flex: 1 !important;
        min-height: var(--touch-min) !important;
        display: flex !important;
        align-items: center !important;
    }

    .search-input-wrapper input {
        font-size: 16px !important; /* iOS zoom prevention — MUST stay 16px */
        padding: 10px 8px !important;
        min-height: var(--touch-min) !important;
        width: 100% !important;
    }

    .search-camera,
    .search-voice,
    .search-submit {
        min-width: var(--touch-min) !important;
        min-height: var(--touch-min) !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        font-size: 1rem !important;
    }

    /* Search tabs: horizontal scroll with snap */
    .search-tabs {
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
        scroll-snap-type: x proximity;
    }

    .search-tab {
        min-height: 40px !important;
        padding: 8px 16px !important;
        white-space: nowrap !important;
        font-size: 0.78rem !important;
        border-radius: 20px !important;
        scroll-snap-align: start;
        flex-shrink: 0 !important;
    }

    /* ── 7h. AI Chat Panel — Safe area aware ── */
    .ai-chat-panel {
        z-index: 1100 !important;
    }

    .ai-chat-input {
        padding-bottom: max(12px, calc(var(--safe-bottom) + 8px)) !important;
    }

    /* ── 7i. Bottom Nav & Nav Elements ── */
    .mobile-bottom-nav {
        padding-bottom: var(--safe-bottom) !important;
    }

    .bottom-nav-item {
        min-height: 48px !important;
        min-width: 48px !important;
    }

    .mobile-menu-btn,
    .notification-bell,
    .cart-icon-btn,
    #loginBtn {
        min-width: var(--touch-min) !important;
        min-height: var(--touch-min) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ── 7j. Toast: respect safe area ── */
    .toast-container {
        top: calc(70px + var(--safe-top)) !important;
        inset-inline-end: 10px !important;
        inset-inline-start: 10px !important;
    }

    .toast {
        min-width: auto !important;
    }

    /* ── 7k. Modal: iOS-style backdrop blur ── */
    .modal-overlay.active {
        -webkit-backdrop-filter: blur(12px) saturate(120%);
        backdrop-filter: blur(12px) saturate(120%);
    }

    .modal {
        width: calc(100% - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100dvh - 120px) !important;
        overflow-y: auto !important;
    }

    /* ── 7l. Smart filters: horizontal scroll with snap ── */
    .filter-row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        padding-bottom: 4px;
    }

    .filter-group {
        scroll-snap-align: start;
        flex-shrink: 0 !important;
        min-width: 120px !important;
    }

    /* ── 7m. Reviews carousel: CSS infinite marquee (no scroll snap needed) ── */

    /* ── 7n. Notification panel: full-width on mobile ── */
    .notification-panel {
        z-index: 1060 !important;
        top: calc(66px + var(--safe-top)) !important;
        width: calc(100% - 20px) !important;
        inset-inline-start: 10px !important;
        inset-inline-end: auto !important;
        transform: none !important;
    }

    /* ── 7o. Z-index hierarchy (no overlaps) ── */
    /* 1000 → FABs / Bottom Nav
       1060 → Notification Panel
       1100 → AI Chat Panel
       1150 → Modal Overlays
       1200 → Cart Overlay
       1300 → Cart Drawer
       1400 → Checkout Modal
       1500 → Onboarding Overlay */
    .ai-fab          { z-index: 1000 !important; }
    .wa-fab          { z-index: 1000 !important; }
    .wa-smart-fab    { z-index: 1000 !important; }
    .voice-fab       { z-index: 1000 !important; }
    .tour-start-btn  { z-index: 1000 !important; }
    .ai-chat-panel   { z-index: 1100 !important; }
    .modal-overlay   { z-index: 1150 !important; }
    #smartCartOverlay { z-index: 1200 !important; }
    #smartCartDrawer  { z-index: 1300 !important; }
    #smartCheckoutModal { z-index: 1400 !important; }

    /* ── 7p. Cart & Checkout — mobile bottom sheets ── */
    #smartCartDrawer {
        padding-bottom: var(--safe-bottom) !important;
    }

    #smartCheckoutModal > div {
        padding-bottom: var(--safe-bottom) !important;
    }

    /* ── 7q. CTA — safe area ── */
    .mobile-order-cta {
        padding-bottom: max(10px, var(--safe-bottom)) !important;
    }

    /* ── 7r. Theme toggle mobile position ── */
    .theme-toggle-mobile {
        top: calc(64px + var(--safe-top)) !important;
        inset-inline-start: 14px !important;
        inset-inline-end: auto !important;
    }

    /* ── 7s. Services grid: prevent overflow ── */
    .services-grid {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* ── 7t. Marketplace page actions: stack vertically ── */
    .mp-actions {
        flex-direction: column !important;
    }

    .mp-qty-control {
        width: 100% !important;
        justify-content: center !important;
    }

    .mp-add-cart-btn {
        width: 100% !important;
    }

    .mp-wishlist-btn {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* ── 7u. Footer grid uniform ── */
    .footer-grid {
        gap: 20px 14px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
}

/* ─────────────────────────────────────────────────────────
   8. PHABLETS (≤480px) — iPhone Plus / Android Large
   iPhone 14 Plus: 428px, iPhone 15/16 Pro Max: 430px
   ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    .container {
        padding-inline: 14px !important;
    }

    /* ── FAB Stack — tighter spacing ── */
    .ai-fab {
        bottom: max(14px, calc(var(--safe-bottom) + 10px)) !important;
        left: 12px !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 1.2rem !important;
    }

    .wa-fab {
        bottom: max(70px, calc(var(--safe-bottom) + 66px)) !important;
        left: 12px !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
    }

    .wa-smart-fab {
        bottom: max(122px, calc(var(--safe-bottom) + 118px)) !important;
        left: 12px !important;
        width: 38px !important;
        height: 38px !important;
    }

    .tour-start-btn {
        bottom: max(174px, calc(var(--safe-bottom) + 170px)) !important;
        left: 12px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 0.75rem !important;
    }

    /* ── AI Chat — near full screen ── */
    .ai-chat-panel {
        width: 100% !important;
        inset-inline-start: 0 !important;
        inset-inline-end: 0 !important;
        bottom: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        height: 75vh !important;
        max-height: 75dvh !important;
    }

    .ai-chat-input {
        padding-bottom: max(12px, calc(var(--safe-bottom) + 8px)) !important;
    }

    /* ── Stats: tighter grid ── */
    .hero-stats {
        gap: 8px !important;
        padding: 0 12px !important;
    }

    .stat-item {
        padding: 12px 8px !important;
        border-radius: 14px !important;
    }

    .stat-number {
        font-size: 1.2rem !important;
    }

    .stat-label {
        font-size: 0.68rem !important;
    }

    /* ── Search: tighter ── */
    .search-box {
        padding: 6px !important;
        gap: 4px !important;
        border-radius: 14px !important;
    }

    .search-camera,
    .search-voice,
    .search-submit {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 0.9rem !important;
    }

    .search-input-wrapper input {
        font-size: 16px !important; /* iOS zoom prevention */
        padding: 8px 6px !important;
        min-height: 40px !important;
    }

    .search-tab {
        min-height: 36px !important;
        padding: 6px 12px !important;
        font-size: 0.72rem !important;
    }

    /* ── Hero ── */
    .hero {
        padding-top: calc(80px + var(--safe-top)) !important;
        padding-bottom: 24px !important;
    }

    /* ── Cart drawer: full width ── */
    #smartCartDrawer {
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* ── Checkout modal: bottom sheet ── */
    #smartCheckoutModal > div {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 95dvh !important;
        margin-top: auto;
    }

    /* ── Toast ── */
    .toast-container {
        top: calc(65px + var(--safe-top)) !important;
        inset-inline-start: 10px !important;
        inset-inline-end: 10px !important;
    }

    .toast {
        min-width: auto !important;
        font-size: 0.85rem !important;
        padding: 10px 14px !important;
    }

    /* ── Theme toggle: smaller ── */
    .theme-toggle-mobile {
        top: calc(58px + var(--safe-top)) !important;
        inset-inline-start: 10px !important;
    }

    .theme-toggle-mobile .theme-toggle-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.85rem !important;
    }

    /* ── Products grid: single column ── */
    .products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─────────────────────────────────────────────────────────
   9. iPHONE PRO MAX (≤430px)
   iPhone 14 Pro Max: 430px, iPhone 15/16 Pro Max: 430px
   ───────────────────────────────────────────────────────── */
@media (max-width: 430px) {

    /* ── Hero branding ── */
    .hero h1 {
        font-size: 1.28rem !important;
        line-height: 1.45 !important;
    }

    .hero-brand {
        font-size: 1.9rem !important;
        letter-spacing: -0.5px !important;
    }

    .hero-subtitle {
        font-size: 0.82rem !important;
    }

    .hero-desc {
        font-size: 0.82rem !important;
    }

    .hero-badge {
        font-size: 0.7rem !important;
        padding: 5px 12px !important;
    }

    /* ── Services grid: 3 col compact ── */
    .services-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .service-card {
        padding: 14px 8px !important;
    }

    .service-icon {
        font-size: 1.5rem !important;
        margin-bottom: 6px !important;
    }

    .service-card h3 {
        font-size: 0.76rem !important;
    }

    .service-card p {
        font-size: 0.65rem !important;
        line-height: 1.3 !important;
    }

    .service-badge {
        font-size: 0.55rem !important;
        padding: 2px 7px !important;
    }

    .coming-soon-badge {
        font-size: 0.6rem !important;
        padding: 5px 12px !important;
    }

    /* ── Trust grid ── */
    .trust-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .trust-item {
        padding: 10px 8px !important;
    }

    .trust-item i {
        font-size: 1.3rem !important;
    }

    .trust-item strong {
        font-size: 0.72rem !important;
    }

    .trust-item span {
        font-size: 0.62rem !important;
    }

    /* ── AI Features ── */
    .ai-features {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .ai-feature {
        padding: 14px 10px !important;
    }

    .ai-feature h4 {
        font-size: 0.78rem !important;
    }

    .ai-feature p {
        font-size: 0.66rem !important;
    }

    /* ── Auctions ── */
    .auctions-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .auction-card {
        padding: 12px 8px !important;
    }

    .auction-image {
        font-size: 1.6rem !important;
        margin: 4px 0 !important;
    }

    .auction-card h4 {
        font-size: 0.72rem !important;
    }

    .current-bid {
        font-size: 0.78rem !important;
    }

    .auction-timer {
        font-size: 0.6rem !important;
        padding: 2px 6px !important;
    }

    /* ── Reviews ── */
    .reviews-carousel {
        -webkit-mask-image: linear-gradient(to left, transparent, black 1%, black 99%, transparent) !important;
        mask-image: linear-gradient(to left, transparent, black 1%, black 99%, transparent) !important;
    }

    .reviews-track {
        gap: 10px !important;
    }

    .review-card {
        min-width: 250px !important;
        max-width: 270px !important;
        padding: 14px !important;
    }

    /* ── Section sizing ── */
    .section {
        padding: 24px 0 !important;
    }

    .section-header h2 {
        font-size: 1.08rem !important;
    }

    .section-header p {
        font-size: 0.78rem !important;
    }

    /* ── Header actions: compact ── */
    .header-actions {
        gap: 3px !important;
    }

    .icon-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
    }

    #loginBtn {
        padding: 5px 10px !important;
        font-size: 0.72rem !important;
    }

    /* Header user button — compact on small screens */
    .header-user-btn {
        padding: 3px 8px 3px 3px !important;
        gap: 5px !important;
    }
    html[dir="ltr"] .header-user-btn {
        padding: 3px 3px 3px 8px !important;
    }
    .header-user-name {
        font-size: 0.72rem !important;
        max-width: 65px !important;
    }
    .header-user-avatar {
        width: 26px !important;
        height: 26px !important;
    }

    .btn-store-header {
        padding: 5px 8px !important;
        font-size: 0.72rem !important;
    }

    .btn-store-header span {
        display: none !important;
    }

    /* ── Review form: compact ── */
    .share-experience-wrapper {
        margin-top: 18px !important;
    }

    .share-exp-trigger {
        padding: 10px 12px !important;
        gap: 8px !important;
        border-radius: 10px !important;
    }

    .share-exp-trigger-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
    }

    .share-exp-trigger-title {
        font-size: 0.82rem !important;
    }

    .share-exp-trigger-sub {
        font-size: 0.68rem !important;
    }

    .review-form-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .review-form-group input,
    .review-form-group textarea {
        padding: 7px 10px !important;
        font-size: 0.8rem !important;
    }

    .star-rating-input .star-btn {
        font-size: 1.3rem !important;
    }

    .btn-submit-review {
        font-size: 0.82rem !important;
        padding: 9px 16px !important;
    }

    /* ── CTA ── */
    .cta-content h2 {
        font-size: 1.2rem !important;
    }

    .cta-buttons {
        gap: 8px !important;
    }

    .cta-buttons .btn-primary,
    .cta-buttons .btn-outline {
        font-size: 0.82rem !important;
        padding: 10px 20px !important;
    }

    /* ── Diagnosis responsive ── */
    .diag-footer-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .diag-footer-actions .btn-primary,
    .diag-footer-actions .btn-outline {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ─────────────────────────────────────────────────────────
   10. iPHONE PRO (≤393px)
   iPhone 14 Pro/15 Pro/16 Pro: 393px, iPhone 12/13/14: 390px
   ───────────────────────────────────────────────────────── */
@media (max-width: 393px) {

    .hero h1 {
        font-size: 1.22rem !important;
    }

    .hero-brand {
        font-size: 1.8rem !important;
    }

    .service-card h3 {
        font-size: 0.72rem !important;
    }

    .service-card p {
        font-size: 0.62rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* AI Chat: slightly shorter */
    .ai-chat-panel {
        height: 70vh !important;
        max-height: 70dvh !important;
    }
}

/* ─────────────────────────────────────────────────────────
   11. iPHONE MINI / SE / SMALL ANDROID (≤375px)
   iPhone SE 3: 375px, iPhone 12/13 mini: 375px
   ───────────────────────────────────────────────────────── */
@media (max-width: 375px) {

    .container {
        padding-inline: 12px !important;
    }

    .hero h1 {
        font-size: 1.18rem !important;
    }

    .hero-brand {
        font-size: 1.65rem !important;
    }

    .hero-desc {
        font-size: 0.78rem !important;
    }

    .hero-badge {
        font-size: 0.65rem !important;
        padding: 4px 10px !important;
    }

    .service-icon {
        font-size: 1.4rem !important;
        margin-bottom: 4px !important;
    }

    .service-card h3 {
        font-size: 0.7rem !important;
    }

    .service-card p {
        font-size: 0.6rem !important;
    }

    /* Nav */
    .nav-wrapper {
        height: 52px !important;
    }

    .icon-btn {
        width: 34px !important;
        height: 34px !important;
    }

    /* Stats */
    .stat-number {
        font-size: 1.1rem !important;
    }

    .stat-label {
        font-size: 0.65rem !important;
    }

    /* AI Chat: tighter */
    .ai-chat-panel {
        height: 65vh !important;
        max-height: 65dvh !important;
    }

    .ai-quick-grid {
        gap: 5px !important;
        padding: 2px 10px 10px !important;
    }

    .ai-quick-card {
        padding: 8px 6px !important;
        border-radius: 10px !important;
    }

    .ai-quick-icon {
        font-size: 1rem !important;
    }

    .ai-quick-label {
        font-size: 0.72rem !important;
    }

    .ai-quick-desc {
        display: none !important;
    }

    .ai-message .message-content {
        font-size: 0.82rem !important;
        padding: 9px 11px !important;
    }

    .ai-send-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.85rem !important;
    }
}

/* ─────────────────────────────────────────────────────────
   12. VERY SMALL PHONES (≤360px)
   Galaxy S-series (360px), budget Android
   ───────────────────────────────────────────────────────── */
@media (max-width: 360px) {

    .container {
        padding-inline: 10px !important;
    }

    .hero h1 {
        font-size: 1.1rem !important;
    }

    .hero-brand {
        font-size: 1.5rem !important;
    }

    .hero-subtitle {
        font-size: 0.72rem !important;
    }

    .hero-desc {
        font-size: 0.75rem !important;
    }

    /* FABs: smallest */
    .ai-fab {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
        left: 10px !important;
        bottom: max(12px, calc(var(--safe-bottom) + 8px)) !important;
    }

    .wa-fab {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
        left: 10px !important;
        bottom: max(64px, calc(var(--safe-bottom) + 60px)) !important;
    }

    .wa-smart-fab {
        width: 34px !important;
        height: 34px !important;
        left: 10px !important;
        bottom: max(110px, calc(var(--safe-bottom) + 106px)) !important;
    }

    .tour-start-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.7rem !important;
        left: 10px !important;
        bottom: max(156px, calc(var(--safe-bottom) + 152px)) !important;
    }

    /* Header user button – ultra-small */
    .header-user-btn {
        padding: 2px 6px 2px 2px !important;
        gap: 4px !important;
        border-radius: 18px !important;
    }

    html[dir="ltr"] .header-user-btn {
        padding: 2px 2px 2px 6px !important;
    }

    .header-user-name {
        font-size: 0.65rem !important;
        max-width: 45px !important;
    }

    .header-user-avatar {
        width: 22px !important;
        height: 22px !important;
    }

    .header-user-avatar img {
        width: 22px !important;
        height: 22px !important;
    }

    /* Stats */
    .hero-stats {
        gap: 6px !important;
        padding: 0 10px !important;
    }

    .stat-item {
        padding: 10px 6px !important;
        border-radius: 12px !important;
    }

    .stat-number {
        font-size: 1.05rem !important;
    }

    .stat-label {
        font-size: 0.62rem !important;
    }

    /* Services */
    .services-grid {
        gap: 4px !important;
    }

    .service-card {
        padding: 10px 6px !important;
    }

    .service-icon {
        font-size: 1.3rem !important;
    }

    .service-card h3 {
        font-size: 0.65rem !important;
    }

    .service-card p {
        font-size: 0.56rem !important;
    }

    .service-badge {
        font-size: 0.5rem !important;
        padding: 2px 5px !important;
    }

    .coming-soon-badge {
        font-size: 0.55rem !important;
        padding: 4px 10px !important;
    }

    /* Search tab */
    .search-tab {
        padding: 5px 8px !important;
        font-size: 0.68rem !important;
    }

    /* Auctions */
    .auctions-grid {
        gap: 4px !important;
    }

    .auction-card {
        padding: 10px 6px !important;
    }

    .auction-image {
        font-size: 1.5rem !important;
    }

    .auction-card h4 {
        font-size: 0.65rem !important;
    }

    .current-bid {
        font-size: 0.7rem !important;
    }

    .auction-timer {
        font-size: 0.55rem !important;
        padding: 2px 5px !important;
    }

    /* CTA */
    .cta-content h2 {
        font-size: 1.05rem !important;
    }

    .cta-buttons {
        flex-direction: column !important;
    }

    .cta-buttons .btn-primary,
    .cta-buttons .btn-outline {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Login text: hide */
    #loginText {
        display: none !important;
    }

    /* AI Chat: smallest */
    .ai-chat-panel {
        height: 60vh !important;
        max-height: 60dvh !important;
    }

    /* Theme toggle */
    .theme-toggle-mobile {
        top: calc(56px + var(--safe-top)) !important;
        inset-inline-start: 8px !important;
    }

    .theme-toggle-mobile .theme-toggle-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
    }

    /* Onboarding */
    .onboarding-content {
        padding: 10px 12px 6px !important;
    }

    .onboarding-icon {
        font-size: 26px !important;
    }

    .onboarding-title {
        font-size: 13px !important;
    }

    .onboarding-description {
        font-size: 10.5px !important;
    }

    .onboarding-btn {
        padding: 8px 10px !important;
        font-size: 11px !important;
        min-height: 34px !important;
    }

    .onboarding-card.mobile-float {
        border-radius: 10px !important;
    }
}

/* ─────────────────────────────────────────────────────────
   13. ULTRA-SMALL (≤320px) — iPhone SE 1st gen edge case
   ───────────────────────────────────────────────────────── */
@media (max-width: 320px) {

    .hero-brand {
        font-size: 1.35rem !important;
    }

    .hero-subtitle {
        font-size: 0.65rem !important;
    }

    .search-camera {
        display: none !important; /* Hide camera to save space */
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .auctions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ai-features {
        grid-template-columns: 1fr !important;
    }

    .trust-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─────────────────────────────────────────────────────────
   14. LANDSCAPE MOBILE
   Handles rotated phones with Dynamic Island / Home Indicator
   ───────────────────────────────────────────────────────── */
@media (max-width: 926px) and (orientation: landscape) {

    /* Safe areas for landscape notch/Dynamic Island */
    body {
        padding-inline-start: var(--safe-left);
        padding-inline-end:   var(--safe-right);
    }

    .hero {
        padding-top: calc(70px + var(--safe-top)) !important;
        min-height: auto !important;
        padding-bottom: 24px !important;
    }

    /* Stats: 4-column in landscape */
    .hero-stats {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }

    .stat-item {
        padding: 10px 8px !important;
    }

    .stat-number {
        font-size: 1.1rem !important;
    }

    /* FABs: respect landscape safe areas */
    .ai-fab {
        bottom: max(12px, calc(var(--safe-bottom) + 8px)) !important;
        left: max(14px, var(--safe-left)) !important;
    }

    .wa-fab {
        bottom: max(68px, calc(var(--safe-bottom) + 64px)) !important;
        left: max(14px, var(--safe-left)) !important;
    }

    .tour-start-btn {
        bottom: max(118px, calc(var(--safe-bottom) + 114px)) !important;
        left: max(14px, var(--safe-left)) !important;
    }

    /* AI Chat: wider in landscape */
    .ai-chat-panel {
        width: min(400px, 60vw) !important;
        height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 18px !important;
    }

    /* Full-width sections need safe padding */
    .container {
        padding-inline-start: max(16px, var(--safe-left)) !important;
        padding-inline-end:   max(16px, var(--safe-right)) !important;
    }

    /* Modal: narrower in landscape */
    .modal {
        max-width: min(500px, 70vw) !important;
        max-height: calc(100dvh - 40px) !important;
    }
}

/* ─────────────────────────────────────────────────────────
   15. PWA STANDALONE
   When installed as PWA, full native behavior
   ───────────────────────────────────────────────────────── */
@media all and (display-mode: standalone) {

    body {
        padding-top: var(--safe-top);
        overscroll-behavior-y: none;
    }

    #mainHeader {
        padding-top: var(--safe-top);
    }

    /* Lock scroll when overlays are open */
    body.modal-open,
    body.chat-open,
    body.cart-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
}

/* ─────────────────────────────────────────────────────────
   16. HIGH-DPI DISPLAYS — Retina/Super Retina
   Sharper borders and icons on 2x/3x displays
   ───────────────────────────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {

    /* Hairline borders */
    .search-box,
    .service-card,
    .ai-feature,
    .auction-card,
    .review-card,
    .product-card,
    .diag-result-card,
    .mp-search-card,
    .safe-guide,
    .safe-faq-item {
        border-width: 0.5px;
    }
}

/* ─────────────────────────────────────────────────────────
   17. REDUCED MOTION — Accessibility
   Respects user preference for less animation
   ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ai-pulse,
    .wa-pulse,
    .voice-fab-pulse {
        animation: none !important;
    }

    /* Keep reviews visible when animation is disabled */
    .reviews-track {
        animation: none !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .reviews-carousel {
        overflow-x: auto !important;
    }
}

/* ─────────────────────────────────────────────────────────
   18. RTL (ARABIC) MOBILE ENHANCEMENTS
   Logical property overrides for perfect mirroring
   ───────────────────────────────────────────────────────── */

/* FABs use physical left — always on the left side. */

html[dir="rtl"] .search-input-wrapper input {
    text-align: right;
}

html[dir="rtl"] .diag-item {
    border-right: none;
    border-inline-start: 3px solid var(--border-light);
}

html[dir="rtl"] .diag-item:hover {
    border-inline-start-color: var(--primary);
}

html[dir="rtl"] .safe-guide-steps::before {
    right: auto;
    inset-inline-end: 23px;
}

html[dir="rtl"] .safe-step-tip {
    border-right: none;
    border-inline-start: 3px solid var(--primary);
}

/* Ensure chat message corners mirror properly */
html[dir="rtl"] .ai-message.bot .message-content {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 6px;
}

html[dir="rtl"] .ai-message.user .message-content {
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 6px;
}

/* Review form */
html[dir="rtl"] .review-form-group label i {
    margin-left: 0;
    margin-inline-start: 5px;
}

/* View all button arrow */
html[dir="rtl"] .view-all:hover {
    transform: translateX(4px);
}

html[dir="rtl"] .view-all:hover i {
    transform: translateX(4px);
}

/* Footer links hover */
html[dir="rtl"] .footer-links a:hover {
    padding-right: 0;
    padding-inline-start: 8px;
}

/* ─────────────────────────────────────────────────────────
   19. LTR (ENGLISH) MOBILE ADDITIONS
   Extends platform.css LTR overrides for mobile-specific
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* FABs: always left — no LTR flip needed */

    /* LTR AI Chat: right side */
    html[dir="ltr"] .ai-chat-panel {
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
    }

    /* LTR Notification panel */
    html[dir="ltr"] .notification-panel {
        inset-inline-start: auto !important;
        inset-inline-end: 10px !important;
    }
}

@media (max-width: 480px) {

    html[dir="ltr"] .ai-chat-panel {
        inset-inline-start: 0 !important;
        inset-inline-end: 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────
   20. OVERLAY TOUCH SAFETY (RTL + LTR)
   Ensures hidden overlays don't block touch events
   ───────────────────────────────────────────────────────── */
#onboardingOverlay {
    pointer-events: none;
}
#onboardingOverlay[style*="block"],
#onboardingOverlay.active,
#onboardingOverlay.show {
    pointer-events: auto;
}

#smartCartOverlay {
    pointer-events: none;
}
#smartCartOverlay.open {
    pointer-events: auto;
}

#smartCheckoutModal {
    pointer-events: none;
}
#smartCheckoutModal[style*="flex"] {
    pointer-events: auto;
}

.tinda-intelligent-modal {
    pointer-events: none;
}
.tinda-intelligent-modal.active {
    pointer-events: auto;
}

#voiceCallOverlay {
    pointer-events: none;
}
#voiceCallOverlay.active {
    pointer-events: auto !important;
    visibility: visible !important;
    display: flex !important;
    z-index: 1500 !important;
}

/* ─────────────────────────────────────────────────────────
   21. DARK MODE DYNAMIC VIEWPORT FIXES
   Fix iOS Safari bottom toolbar overlap
   ───────────────────────────────────────────────────────── */
@supports (height: 100dvh) {
    @media (max-width: 768px) {

        .ai-chat-panel {
            max-height: 80dvh !important;
        }

        .modal {
            max-height: calc(100dvh - 120px) !important;
        }

        #smartCheckoutModal > div {
            max-height: 95dvh !important;
        }
    }
}

/* ─────────────────────────────────────────────────────────
   22. iOS KEYBOARD HANDLING
   When virtual keyboard opens, ensure inputs stay visible
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Ensure AI chat input stays above keyboard on iOS */
    .ai-chat-panel.keyboard-open {
        height: 50vh !important;
        max-height: 50dvh !important;
    }

    .ai-chat-panel.keyboard-open .ai-chat-messages {
        flex: 1 !important;
        min-height: 0 !important;
    }

    /* All inputs must be 16px to prevent iOS auto-zoom */
    input,
    textarea,
    select {
        font-size: max(16px, 1em) !important;
    }

    /* Marketplace textarea */
    .mp-textarea {
        font-size: 16px !important;
    }

    /* Review form */
    .review-form-group input,
    .review-form-group textarea {
        font-size: 16px !important;
    }

    /* Filter selects */
    .filter-select {
        font-size: 16px !important;
    }
}

/* ─────────────────────────────────────────────────────────
   23. TINDA NAVIGATION — Mobile Polish
   Bottom nav, side menu, and header avatar touch enhancements
   ───────────────────────────────────────────────────────── */

/* ── Bottom nav press states ── */
.bnav-tab:active {
    transform: scale(0.92);
    transition-duration: 0.1s;
}

.bnav-center:active .bnav-center-ring {
    transform: scale(0.88) !important;
    transition-duration: 0.1s;
}

/* ── Side menu touch targets ── */
.side-menu-item {
    min-height: 48px;
    touch-action: manipulation;
}

.side-menu-item:active {
    background: rgba(220, 20, 60, 0.1);
    transform: scale(0.98);
    transition-duration: 0.1s;
}

.side-menu-close:active {
    transform: scale(0.9);
}

/* ── Header user btn press ── */
.header-user-btn:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

/* ── Safe area handling for bottom nav ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .tinda-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    
    .tinda-side-menu {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ── Landscape bottom nav — shorter height ── */
@media (orientation: landscape) and (max-width: 1024px) {
    .tinda-bottom-nav {
        height: 52px;
    }

    .bnav-tab i {
        font-size: 1rem;
    }

    .bnav-tab span {
        font-size: 9px;
    }

    .bnav-center-ring {
        width: 40px;
        height: 40px;
        top: -6px;
    }
    
    body {
        padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── Side menu overlay swipe-to-close area ── */
.tinda-side-overlay {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ── Prevent body scroll when side menu is open ── */
body.side-menu-open {
    overflow: hidden !important;
    /* NOTE: no touch-action:none — it can block tap events on menu items */
}

/* ─────────────────────────────────────────────────────────
   24. PRINT
   ───────────────────────────────────────────────────────── */
@media print {
    #mainHeader,
    .ai-fab,
    .wa-fab,
    .wa-smart-fab,
    .voice-fab,
    .ai-chat-panel,
    #smartCartDrawer,
    #smartCartOverlay,
    footer,
    .tour-start-btn,
    .onboarding-overlay,
    .theme-toggle-navbar,
    .theme-toggle-mobile,
    .lang-toggle-btn,
    .mobile-bottom-nav,
    .mobile-order-cta,
    .tinda-bottom-nav,
    .tinda-side-menu,
    .tinda-side-overlay,
    .notification-panel,
    .toast-container {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }
}