/**
 * Fardeteen — global mobile / touch styles (one file, all pages).
 * Load after theme.css, or injected by load-navigator.js
 */

@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    /* ——— Liquid nav: mobile shell sizing (drawer/menu behavior lives in navigator.css) ——— */
    .liquid-nav {
        top: max(42px, calc(env(safe-area-inset-top, 0px) + 32px));
        width: min(calc(100vw - 14px), 720px);
        max-width: calc(100vw - 14px);
        border-radius: 32px;
    }

    .liquid-nav.hide-up {
        transform: translate(-50%, -150%);
    }

    .nav-brand {
        flex: 0 0 auto;
    }

    .nav-brand .logo img {
        max-height: 28px;
    }

    .nav-links a {
        font-size: clamp(0.8rem, 2.9vw, 0.95rem);
    }

    .nav-icons {
        gap: 6px 10px;
        align-items: center;
    }

    .icon-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }

    #langToggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 10px;
    }

    .theme-toggle-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .search-form input {
        font-size: 16px;
        min-height: 40px;
    }

    .search-suggestions {
        min-width: min(280px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
    }

    /* ——— Cart drawer ——— */
    .cart-sidebar {
        width: min(100vw, 380px) !important;
        max-width: 100vw !important;
        padding: 20px 16px;
        padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    }

    .cart-items {
        max-height: min(52dvh, 380px);
    }

    .quantity-btn {
        min-width: 36px;
        min-height: 36px;
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .cart-item-remove {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        font-size: 1.35rem;
    }

    .checkout-btn {
        min-height: 48px;
        padding: 14px 12px;
        font-size: 1rem;
    }

    /* ——— WhatsApp FAB ——— */
    #whatsAppFloat {
        right: max(12px, env(safe-area-inset-right, 0px));
        bottom: max(76px, calc(12px + env(safe-area-inset-bottom, 0px)));
        width: 56px;
        height: 56px;
    }

    #whatsAppFloat svg {
        width: 26px;
        height: 26px;
    }

    /* ——— Cart toast ——— */
    .cart-notification {
        top: calc(max(42px, calc(env(safe-area-inset-top, 0px) + 32px)) + 104px);
        padding: 10px 14px;
    }

    .notification-content {
        gap: 7px;
        font-size: 0.88rem;
    }

    .notification-product-image {
        width: 34px;
        height: 34px;
    }

    [dir="ltr"] .cart-notification.show {
        right: 12px;
        max-width: calc(100vw - 24px);
    }

    [dir="rtl"] .cart-notification.show {
        left: 12px;
        max-width: calc(100vw - 24px);
    }

    /* ——— Forms: readable + reduce iOS input zoom ——— */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }

    textarea {
        min-height: 6rem;
    }

    /* ——— Media ——— */
    img,
    video {
        max-width: 100%;
        height: auto;
    }

    /* ——— Shop / collection heroes ——— */
    .shop-hero,
    .collection-hero {
        padding: clamp(152px, 34vw, 198px) 16px clamp(48px, 12vw, 72px) !important;
    }

    .shop-hero h1,
    .collection-hero h1 {
        font-size: clamp(1.65rem, 7vw, 2.4rem) !important;
        line-height: 1.15;
    }

    .shop-hero p,
    .collection-hero p {
        font-size: clamp(0.95rem, 3.5vw, 1.1rem) !important;
    }

    .shop-header h2 {
        font-size: clamp(1.45rem, 6vw, 2rem) !important;
    }

    .shop-container,
    .breadcrumb {
        padding-left: max(14px, env(safe-area-inset-left, 0px));
        padding-right: max(14px, env(safe-area-inset-right, 0px));
    }

    /* ——— Toolbar / filters row ——— */
    .shop-toolbar,
    .collection-toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* ——— Generic containers ——— */
    .container {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    /* ——— Buttons ——— */
    button.btn,
    .btn,
    a.btn {
        min-height: 44px;
        box-sizing: border-box;
    }

    /* ——— Product cards on phones: bigger preview, tighter text ——— */
    .product-card {
        border-radius: 16px;
    }

    .product-image-area {
        padding-bottom: 68% !important;
    }

    .product-info {
        padding: 12px 12px 14px !important;
        gap: 8px !important;
    }

    .product-title {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
    }

    .product-price {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }

    .product-code {
        font-size: 0.75rem !important;
        margin-bottom: 2px !important;
    }

    .add-to-cart-btn,
    .whatsapp-btn {
        min-height: 42px;
        padding: 9px 10px !important;
        font-size: 0.88rem !important;
    }

    /* ——— Admin / wide tables ——— */
    .orders-table-container,
    .table-responsive-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .orders-table {
        min-width: 520px;
    }

    .btn-close-sidebar {
        min-width: 44px;
        min-height: 44px;
    }

    /* Main page admin FAB: keep above bottom safe area, below WhatsApp */
    #adminFloatBtn {
        left: max(10px, env(safe-area-inset-left, 0px));
        top: auto;
        bottom: max(96px, calc(88px + env(safe-area-inset-bottom, 0px)));
        transform: none;
    }

    #adminFloatBtn:hover {
        transform: scale(1.06);
    }
}

@media (max-width: 480px) {
    /* Shop / search product grids stay two-up on phones */
    .products-grid:not(.view-list) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }

    /* Home featured products stay 2-up on phones */
    .products-section .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }

    .products-section .product-image-area {
        padding-bottom: 74% !important;
    }

    .products-section .product-info {
        padding: 10px 10px 12px !important;
        gap: 7px !important;
    }

    .products-section .product-title {
        font-size: 0.88rem !important;
    }

    .products-section .product-price {
        font-size: 0.95rem !important;
    }

    .liquid-nav {
        border-radius: 32px;
    }

    /* Full-bleed cart on small phones (same left/right slide as navigator.css, full width) */
    .cart-sidebar {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    [dir="rtl"] .cart-sidebar {
        right: 0;
        left: auto;
        transform: translate3d(100%, 0, 0);
    }

    [dir="rtl"] .cart-sidebar.active {
        transform: translate3d(0, 0, 0);
    }

    [dir="ltr"] .cart-sidebar {
        left: 0;
        right: auto;
        transform: translate3d(-100%, 0, 0);
    }

    [dir="ltr"] .cart-sidebar.active {
        transform: translate3d(0, 0, 0);
    }
}

/* Checkout header: drop fake spacer, stack title + back on narrow screens */
@media (max-width: 640px) {
    .checkout-header-top {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 12px;
        padding: 0 12px !important;
    }

    .checkout-header-top h1 {
        order: 1;
        width: 100%;
        text-align: center;
        font-size: 1.35rem !important;
    }

    .checkout-header-top .back-arrow-btn {
        order: 2;
    }

    .checkout-header-spacer {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
    }
}

/* Product detail: safe horizontal padding */
@media (max-width: 768px) {
    body.product-detail-page .container {
        padding-top: clamp(150px, 34vw, 196px) !important;
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }
}

/* Main page scroll offset scales with shorter mobile nav */
@media (max-width: 768px) {
    html {
        scroll-padding-top: clamp(72px, 20vw, 96px);
    }
}