/* ============================================
   LIKEFOOD Mobile Responsive CSS Override
   Covers: nav, hero, products, detail, cart,
   checkout, footer, chatbox
   ============================================ */

/* ===== GLOBAL MOBILE RESET ===== */
@media (max-width: 768px) {
    body { font-size: 15px; -webkit-text-size-adjust: 100%; }
    .container, [style*="max-width:1280px"], [style*="max-width:1200px"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    img { max-width: 100%; height: auto; }
}

/* ===== NAVIGATION ===== */
@media (max-width: 768px) {
    /* Top promo bar */
    .promo-bar, [style*="background:linear-gradient"][style*="font-size:.82rem"] {
        font-size: 0.72rem !important;
        padding: 6px 12px !important;
    }
    /* Navbar - wrap so search goes below */
    .wf-navbar, [style*="max-width:1280px"][style*="align-items:center"] {
        padding: 8px 12px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    /* Logo */
    .wf-logo, .wf-logo img { height: 36px !important; }
    .wf-logo span { font-size: 1.1rem !important; }
    /* Search bar - full width BELOW nav row */
    .wf-search, #navbarSearch {
        order: 10 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 0 100% !important;
    }
    .wf-search input, #navbarSearch input {
        font-size: 14px !important;
        padding: 10px 14px !important;
    }
    /* Desktop nav links - hide */
    .wf-nav { display: none !important; }
    /* Nav actions (cart, user) */
    .wf-actions { gap: 6px !important; }
    .wf-actions a, .wf-actions button {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }
    /* Hamburger - ensure visible and clickable */
    .wf-hamburger, #mobileHamburger {
        display: flex !important;
        position: relative !important;
        z-index: 100 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    /* Search results dropdown */
    #navSearchResults {
        width: calc(100vw - 32px) !important;
        left: 16px !important;
        right: 16px !important;
    }
}

/* ===== HERO / BANNER ===== */
@media (max-width: 768px) {
    .hero-section, .wf-hero, [style*="height:420px"], [style*="min-height:420px"] {
        height: 220px !important;
        min-height: 220px !important;
    }
    .hero-section h1, .wf-hero h1 {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
    }
    .hero-section p, .wf-hero p {
        font-size: 0.85rem !important;
    }
    .hero-section .btn, .wf-hero a[class*="btn"] {
        padding: 10px 24px !important;
        font-size: 0.85rem !important;
    }
    /* Category pills */
    .wf-cats, [class*="wf-cats"] {
        padding: 12px 8px !important;
        gap: 6px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .wf-cats a, .wf-cat-pill {
        font-size: 0.78rem !important;
        padding: 6px 14px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* ===== PRODUCT CARDS (Grid & Scroll) ===== */
@media (max-width: 768px) {
    /* Section headers */
    .wf-section { padding: 16px 0 !important; }
    .wf-section-header { padding: 0 12px !important; margin-bottom: 10px !important; }
    .wf-section-title { font-size: 1rem !important; }
    /* Horizontal scroll rows */
    .product-scroll-wrap { padding: 0 !important; }
    .product-scroll {
        padding: 0 12px !important;
        gap: 10px !important;
        scroll-snap-type: x mandatory;
    }
    /* Product cards in scroll */
    .product-scroll .wf-product-card {
        min-width: 150px !important;
        max-width: 160px !important;
        scroll-snap-align: start;
    }
    .wf-product-card {
        border-radius: 10px !important;
    }
    .wf-product-img {
        height: 140px !important;
        border-radius: 10px 10px 0 0 !important;
    }
    .wf-product-body { padding: 8px 10px !important; }
    .wf-product-name {
        font-size: 0.82rem !important;
        -webkit-line-clamp: 2 !important;
        line-height: 1.3 !important;
    }
    .wf-product-price {
        font-size: 0.9rem !important;
        margin-top: 4px !important;
    }
    .wf-product-price .original {
        font-size: 0.75rem !important;
    }
    .wf-product-add {
        padding: 6px 10px !important;
        font-size: 0.78rem !important;
        border-radius: 0 0 10px 10px !important;
    }
    .wf-product-heart {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem !important;
        top: 6px !important;
        right: 6px !important;
    }
    /* Badge (sale/new) */
    .wf-product-badge, [class*="product-badge"] {
        font-size: 0.65rem !important;
        padding: 2px 8px !important;
    }
}

/* ===== PRODUCT LISTING PAGE ===== */
@media (max-width: 768px) {
    /* Hide sidebar filter on mobile — use collapsible toggle */
    .filter-sidebar, .product-sidebar,
    [style*="grid-template-columns: 260px"] > div:first-child,
    [style*="grid-template-columns:260px"] > div:first-child {
        display: none !important;
    }
    /* Main grid — single column */
    [style*="grid-template-columns: 260px"],
    [style*="grid-template-columns:260px"] {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    /* Page header */
    .page-title, h1 { font-size: 1.3rem !important; }
    /* Filter/sort bar */
    [style*="display:flex"][style*="justify-content:space-between"][style*="align-items:center"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    /* Product grid — 2 columns, compact */
    .product-grid,
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 12px !important;
    }
    /* Product card in grid — compact style */
    .product-grid .wf-product-card,
    .product-grid > div,
    .product-grid > a {
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    }
    .product-grid .wf-product-img,
    .product-grid img[class*="product"] {
        height: 140px !important;
        object-fit: cover !important;
        border-radius: 12px 12px 0 0 !important;
    }
    .product-grid .wf-product-body {
        padding: 8px 10px 10px !important;
    }
    .product-grid .wf-product-name {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin-bottom: 4px !important;
    }
    .product-grid .wf-product-price {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
    }
    .product-grid .wf-product-price .original {
        font-size: 0.72rem !important;
    }
    /* Short description — hide on mobile for cleaner look */
    .product-grid .wf-product-desc,
    .product-grid [style*="font-size:0.8rem"][style*="color:#6B7280"],
    .product-grid [style*="font-size:.8rem"][style*="color:#6B7280"] {
        display: none !important;
    }
    .product-grid .wf-product-add {
        padding: 8px !important;
        font-size: 0.78rem !important;
        border-radius: 0 0 12px 12px !important;
    }
    /* Filter tags */
    [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:8px"] {
        gap: 6px !important;
        padding: 0 12px 8px !important;
    }
}

/* ===== PRODUCT DETAIL PAGE ===== */
@media (max-width: 768px) {
    /* Main layout - stack vertically */
    .product-detail-grid, [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* Product image */
    .product-detail-image, .product-detail-grid > div:first-child {
        max-height: 320px !important;
        border-radius: 12px !important;
        overflow: hidden;
    }
    .product-detail-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    /* Product info */
    .product-detail-info { padding: 0 4px !important; }
    .product-detail-info h1, .product-detail-name {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    /* Price */
    .product-price-main, [style*="font-size:2rem"][style*="font-weight:800"] {
        font-size: 1.6rem !important;
    }
    .product-price-old, [style*="text-decoration:line-through"] {
        font-size: 0.95rem !important;
    }
    /* Quantity input */
    .qty-selector, [style*="display:flex"][style*="border-radius:10px"][style*="overflow:hidden"] {
        height: 44px !important;
    }
    /* Add to cart button */
    .add-to-cart-btn, [style*="padding:14px"][style*="font-weight:700"][style*="border-radius"] {
        padding: 14px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }
    /* Trust badges */
    .trust-badges, [style*="display:grid"][style*="grid-template-columns:1fr 1fr"][style*="gap:10px"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        font-size: 0.8rem !important;
    }
    /* Description tab */
    .product-tabs { margin-top: 16px !important; }
    .tab-content { padding: 16px !important; font-size: 0.9rem !important; line-height: 1.7 !important; }
    /* Related products */
    .related-products h2 { font-size: 1.1rem !important; }
}

/* ===== PROMO BANNER (Mid-page) ===== */
@media (max-width: 768px) {
    .promo-banner { border-radius: 12px !important; margin: 0 12px !important; }
    .promo-banner-inner {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px !important;
    }
    .promo-banner-text h3 { font-size: 1.1rem !important; }
    .promo-banner-text p { font-size: 0.85rem !important; }
    .promo-banner-img { max-width: 100% !important; height: 120px !important; object-fit: cover !important; border-radius: 10px !important; }
}

/* ===== TRUST STRIP ===== */
@media (max-width: 768px) {
    .trust-strip-inner {
        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: center !important;
    }
    .trust-strip-item {
        flex: 0 0 calc(50% - 8px) !important;
        text-align: center !important;
        gap: 6px !important;
    }
    .trust-strip-icon { font-size: 1.2rem !important; }
    .trust-strip-text h4 { font-size: 0.8rem !important; }
    .trust-strip-text p { font-size: 0.7rem !important; }
}

/* ===== NEWSLETTER BAR ===== */
@media (max-width: 768px) {
    .newsletter-bar-inner {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }
    .newsletter-bar-text { font-size: 0.85rem !important; }
    .newsletter-bar-form {
        width: 100% !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .newsletter-bar-input { width: 100% !important; }
}

/* ===== CONTACT SECTION ===== */
@media (max-width: 768px) {
    #contact [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    #contact iframe {
        min-height: 200px !important;
    }
    #contact h2 { font-size: 1.3rem !important; }
}

/* ===== CART PAGE — Mobile Redesign ===== */
@media (max-width: 768px) {
    /* Cart layout — single column */
    .cart-grid, [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* Cart items container */
    .cart-items { padding: 0 !important; }
    /* Each cart item — horizontal card */
    .cart-item, [style*="display:flex"][style*="border-bottom"] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px !important;
        border-radius: 12px !important;
        background: #fafafa !important;
        margin-bottom: 8px !important;
        border: 1px solid #f0f0f0 !important;
    }
    .cart-item img, [style*="border-radius"][style*="object-fit:cover"] {
        width: 72px !important;
        height: 72px !important;
        border-radius: 10px !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }
    /* Cart item info */
    .cart-item-info, .cart-item > div:nth-child(2) {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .cart-item-name {
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .cart-item-price {
        font-size: 0.95rem !important;
        color: #43A047 !important;
        font-weight: 700 !important;
    }
    /* Qty controls */
    .cart-qty, [style*="display:flex"][style*="border-radius"][style*="overflow:hidden"] {
        height: 32px !important;
        font-size: 0.85rem !important;
    }
    .cart-qty button, .cart-qty input {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
    }
    /* Delete button */
    .cart-delete, .cart-item [onclick*="remove"] {
        font-size: 0.85rem !important;
        color: #999 !important;
        padding: 4px !important;
    }
    /* Cart summary — sticky at bottom */
    .cart-summary {
        position: sticky !important;
        bottom: 60px !important;
        background: white !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
        padding: 16px !important;
        z-index: 50 !important;
    }
    .cart-summary h3 { font-size: 1.1rem !important; }
    /* Checkout button */
    .checkout-btn, [onclick*="checkout"][style*="padding"] {
        width: 100% !important;
        padding: 14px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }
}

/* ===== CHECKOUT PAGE ===== */
@media (max-width: 768px) {
    .checkout-grid, [style*="grid-template-columns:1.2fr 0.8fr"],
    [style*="grid-template-columns: 1.2fr"] {
        grid-template-columns: 1fr !important;
    }
    .checkout-form input, .checkout-form select, .checkout-form textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        border-radius: 10px !important;
        padding: 12px 14px !important;
    }
    .checkout-form label {
        font-size: 0.88rem !important;
        margin-bottom: 4px !important;
    }
}

/* ===== FOOTER ===== */
@media (max-width: 768px) {
    footer [style*="grid-template-columns:1fr 1fr 1fr"],
    footer [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    footer [style*="display:flex"][style*="justify-content:space-between"] {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
    /* Bottom nav bar — always visible */
    .bottom-nav, #bottomNav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9980 !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    /* Add padding to body for bottom nav */
    body { padding-bottom: 64px !important; }
}

/* ===== CHAT WIDGET ===== */
@media (max-width: 768px) {
    #chatFab {
        width: 48px !important;
        height: 48px !important;
        bottom: 80px !important;
        right: 14px !important;
        font-size: 1.2rem !important;
    }
    #chatWindow {
        width: calc(100vw - 16px) !important;
        right: 8px !important;
        left: 8px !important;
        bottom: 136px !important;
        max-height: 55vh !important;
        border-radius: 16px !important;
    }
    .chat-messages { max-height: 35vh !important; }
    .chat-suggestions { padding: 6px 10px !important; }
    .suggestion-chip { font-size: 0.72rem !important; padding: 4px 9px !important; }
    #voucherFloat {
        bottom: 136px !important;
        right: 14px !important;
    }
}

/* ===== FLOATING QR BUTTON ===== */
@media (max-width: 768px) {
    .floating-scan-btn {
        bottom: 80px !important;
        left: 14px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 1rem !important;
    }
    .floating-scan-btn .label-text { display: none !important; }
}

/* ===== MOBILE MENU OVERLAY ===== */
@media (max-width: 768px) {
    #mobileMenuOverlay {
        width: 80vw !important;
        max-width: 320px !important;
    }
    #mobileMenuOverlay a {
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    }
}

/* ===== ACCOUNT PAGE ===== */
@media (max-width: 768px) {
    /* Account page layout */
    .account-grid, [style*="grid-template-columns:280px"],
    [style*="grid-template-columns: 280px"] {
        grid-template-columns: 1fr !important;
    }
    /* User profile card */
    .account-profile, .user-card {
        text-align: center !important;
        padding: 20px 16px !important;
    }
    .account-profile img, .user-card img {
        width: 72px !important;
        height: 72px !important;
    }
    .account-profile h2, .user-card h2 { font-size: 1.2rem !important; }
    /* Stats row */
    .account-stats, [style*="display:flex"][style*="gap:20px"] {
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: center !important;
    }
    .account-stat-item {
        text-align: center !important;
        flex: 1 !important;
    }
    /* Order list */
    .order-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }
    .order-card-header {
        flex-direction: column !important;
        gap: 6px !important;
        align-items: flex-start !important;
    }
    /* Auth forms */
    .auth-container, [style*="max-width:440px"] {
        margin: 16px !important;
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }
    .auth-container h1 { font-size: 1.3rem !important; }
    /* User dropdown on mobile */
    .user-dropdown {
        width: calc(100vw - 32px) !important;
        right: 16px !important;
    }
}

/* ===== ADMIN DASHBOARD — Mobile ===== */
@media (max-width: 768px) {
    /* Admin sidebar — hidden on mobile, toggle */
    .admin-sidebar, [class*="sidebar"] {
        position: fixed !important;
        left: -280px !important;
        top: 0 !important;
        height: 100vh !important;
        width: 260px !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.15) !important;
    }
    .admin-sidebar.show, [class*="sidebar"].show {
        left: 0 !important;
    }
    /* Admin main content — full width */
    .admin-content, .main-content, [style*="margin-left:260px"],
    [style*="margin-left: 260px"] {
        margin-left: 0 !important;
        padding: 12px !important;
        width: 100% !important;
    }
    /* Stats cards */
    .stats-grid, [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .stats-grid > div, .stat-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }
    .stat-card h3, .stats-grid h3 { font-size: 0.75rem !important; }
    .stat-card .number, .stats-grid .number { font-size: 1.3rem !important; }
    /* Admin tables — horizontal scroll */
    .table-responsive, table { overflow-x: auto !important; }
    table { min-width: 600px !important; font-size: 0.82rem !important; }
    th, td { padding: 8px 10px !important; white-space: nowrap !important; }
    /* Admin header */
    .admin-header {
        padding: 10px 12px !important;
        flex-wrap: wrap !important;
    }
    .admin-header h1 { font-size: 1.1rem !important; }
}

/* ===== STATS GRID ===== */
@media (max-width: 768px) {
    .stats-grid, [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* ===== EXTRA SMALL SCREENS (< 380px) ===== */
@media (max-width: 380px) {
    .product-scroll .wf-product-card {
        min-width: 135px !important;
        max-width: 145px !important;
    }
    .wf-product-img { height: 120px !important; }
    .wf-product-name { font-size: 0.78rem !important; }
    .wf-product-price { font-size: 0.82rem !important; }
    .wf-product-add { font-size: 0.72rem !important; }
    .hero-section h1, .wf-hero h1 { font-size: 1.1rem !important; }
    #chatWindow { max-height: 50vh !important; }
    /* Stats — single column */
    .stats-grid, [style*="grid-template-columns:repeat("] {
        grid-template-columns: 1fr !important;
    }
}