/* ============================================================================
   store-mobile.css — makes the storefront feel like an Android app on phones.

   Loaded by app/Views/layouts/store.php, so it reaches all 25 views that
   extend it (store/*, customer/account, customer/login, customer/register, ...).

   ── Rule 1: everything lives inside @media (max-width: 768px) ───────────────
   Apart from the short preamble below, every rule is inside the media query.
   "Desktop is unaffected" is therefore a property of the file, not something
   that has to be re-tested after each edit. 768px is the breakpoint the
   layout's own inline <style> already uses, where .store-nav hides and
   .hamburger appears.

   ── Rule 2: page sections are prefixed with `body` ──────────────────────────
   The <link> for this file sits in <head>, but the store views put their CSS
   in a <style> inside section('content'), which renders into <main> — AFTER
   this file. At equal specificity the later rule wins, so an unprefixed
   `.cart-container { padding: … }` here would lose to cart.php's own.
   Prefixing with `body` lifts these to (0,2,0) and they win on specificity
   regardless of order. The shell sections (tab bar, header, footer, frame) are
   NOT prefixed — they only compete with the layout's inline <style>, which
   comes earlier in the document, so ordinary order already favours this file.

   `!important` appears only where the thing being overridden is an inline
   style="" attribute, which nothing else can beat. Each one says so.

   ── Why an external sheet ───────────────────────────────────────────────────
   layouts/store.php already carries a ~950-line inline <style> (~101 KB that
   is re-sent on every page view and never cached). This file is cached, and
   cache-busted by asset_ver() — filemtime-based, because prod deploys by file
   copy, so the version moves exactly when the bytes ship.
   ========================================================================== */

:root {
    /* Tab-bar height, and the same height plus the Android gesture bar / iOS
       home indicator. env() needs viewport-fit=cover on the viewport meta —
       without it this is always 0 and the bar sits inside the system gesture
       area. The fallback keeps it correct where env() is unsupported. */
    --app-tabbar-h: 56px;
    --app-tabbar-safe: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* Hidden by default so the bar can never reach desktop, not even for the frame
   before the media query is evaluated. The media query switches it on. */
.app-tabbar { display: none; }


@media (max-width: 768px) {

    /* ═══════════════════════════════════════════════════════ page frame ══ */

    html {
        /* In-page anchors must not land under the 56px sticky header. */
        scroll-padding-top: 64px;
    }

    body {
        /* dvh, not vh: the layout's min-height:100vh jumps by the toolbar's
           height every time a mobile browser hides or shows it. */
        min-height: 100dvh;
        /* Clear the fixed tab bar. */
        padding-bottom: var(--app-tabbar-safe);
        /* Stops the page rubber-banding behind the fixed bar. */
        overscroll-behavior-y: contain;
        /* The grey flash on every tap is the loudest "this is a web page"
           tell. Removing it means tappable things need their own :active
           state instead — those are defined with each component below. */
        -webkit-tap-highlight-color: transparent;
    }

    /* ═══════════════════════════════════════════════════════════ tab bar ══ */

    .app-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* Above content and the sticky header (100), below the mobile drawer
           (160) so the drawer covers it, and far below the Google sign-up
           popup (.gjp-backdrop, 9000). */
        z-index: 120;
        height: var(--app-tabbar-safe);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #fff;
        border-top: 1px solid var(--gray-200);
        /* A lift, not a drop — the bar sits above the content. */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    }

    .app-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        /* The whole 56px column is the target, well over the 44px minimum —
           which is the point of a bottom bar in the first place. */
        height: var(--app-tabbar-h);
        text-decoration: none;
        color: var(--gray-500);
        transition: color 0.15s ease;
    }

    .app-tab-ico {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }

    .app-tab-ico svg {
        width: 23px;
        height: 23px;
    }

    .app-tab-label {
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1;
    }

    .app-tab.is-active { color: var(--blue); }
    .app-tab.is-active .app-tab-ico svg { stroke-width: 2.4; }
    .app-tab.is-active .app-tab-label { font-weight: 800; }

    /* Replaces the tap highlight removed on body — a quick inward press. */
    .app-tab:active .app-tab-ico {
        transform: scale(0.88);
        transition: transform 0.08s ease;
    }

    /* Count badge. Shares .js-cart-badge with the header badge so one call to
       updateCartBadges() (layouts/store.php) keeps both in step. */
    .app-tab-badge {
        position: absolute;
        top: -4px;
        right: -8px;
        /* flex, because updateCartBadges() writes display:'flex' to show and
           'none' to hide — the two values the header badge has always used. */
        align-items: center;
        justify-content: center;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 9px;
        background: #ef4444;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 0 0 2px #fff;
    }

    .app-tab-avatar {
        width: 23px;
        height: 23px;
        border-radius: 50%;
        object-fit: cover;
        border: 1.5px solid var(--gray-300);
    }

    .app-tab.is-active .app-tab-avatar { border-color: var(--blue); }

    /* ═══════════════════════════════════════════════════ header polish ══ */

    .store-header {
        /* Already sticky in the layout; the shadow is what separates it from
           scrolling content the way an app toolbar does. */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    }

    /* The layout's own mobile query already hides .store-brand h1 — the logo
       mark alone is enough once the tab bar carries the navigation. */

    /* The layout's inline <style> sets this with !important inside its own
       768px query, so matching it is the only way to win. */
    .nav-cart-btn { margin-right: 0 !important; }

    .hamburger,
    .mobile-nav-close {
        min-width: 44px;
        min-height: 44px;
    }

    .mobile-nav a,
    .mobile-nav-cat-toggle,
    .mobile-nav-logout,
    .mobile-nav-login {
        /* Drawer rows are padding:.75rem .5rem by default — under 44px. */
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* The drawer scrolls full height; keep its last row clear of the bar. */
    .mobile-nav { padding-bottom: var(--app-tabbar-safe); }

    /* ═════════════════════════════════════ fixed elements that collide ══ */

    /* The buyer chat launcher is inline-styled bottom:20px, so it lands under
       the tab bar — !important is the only way past an inline style.
       #buyer-chat-widget is deliberately left alone: the layout already makes
       it 100dvh / bottom:0 on mobile, and a full-screen chat covering the tab
       bar (z-index 1001 > 120) is the correct app behaviour. */
    #buyer-chat-launcher {
        bottom: calc(var(--app-tabbar-safe) + 14px) !important;
    }

    /* ════════════════════════════════════════════════════════════ footer ══ */

    /* The desktop 4-column footer merely stacks today, leaving a long dead
       scroll tail under every page. The tab bar now does the navigating, so
       the footer collapses to a compact strip. */
    .store-footer-inner {
        display: block;
        padding: 1.5rem 1rem 1rem;
        text-align: center;
    }

    .footer-brand h3 { margin-bottom: 1rem; }
    .footer-brand p { display: none; }

    /* .footer-col holds bare <a> children (no <ul>), and the layout makes them
       display:block. Flow them into a centred wrapped row instead. */
    .footer-col {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.1rem 1rem;
        margin-bottom: 0.9rem;
    }

    /* The layout renders an empty <div class="footer-col"></div> when there
       are no published pages. */
    .footer-col:empty { display: none; }

    .footer-col h4 {
        flex-basis: 100%;
        font-size: 11px;
        margin-bottom: 0.3rem;
    }

    .footer-col a {
        display: inline-block;
        padding: 7px 2px;
        font-size: 12.5px;
    }

    /* ═══════════════════════════════════════════════════════ form inputs ══ */

    /* Anything under 16px makes iOS Safari zoom the whole page on focus, and
       the zoom is never undone — the most website-ish behaviour there is.
       !important because several of these inputs carry an inline font-size
       (e.g. the account filter row). */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Deliberately NOT a blanket `.btn` rule: the layout's 480px query makes
       .product-card-footer .btn compact on purpose (12px, 0.4rem padding) for
       the two-up Shopee-style cards, and a 44px floor would undo that. */
    body .auth-btn,
    body .dl-btn { min-height: 44px; }

    /* ═════════════════════════════════ My Account (customer/account.php) ══ */

    body .account-wrap { padding: 1.25rem 1rem 2rem; }

    body .account-header { margin-bottom: 1.25rem; }

    body .account-tabs {
        /* Already overflow-x:auto; this hides the scrollbar and bleeds the
           strip to the screen edges so it reads as an app's tab row. */
        gap: 1.25rem;
        margin: 0 -1rem 1.25rem;
        padding: 0 1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body .account-tabs::-webkit-scrollbar { display: none; }

    body .account-tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* The filter row is a desktop toolbar: a 200px search box, two selects and
       a button. Stack it. All three are inline-styled, hence !important. */
    #filter-form {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem !important;
        width: 100%;
    }

    #filter-form input[name="q"] {
        grid-column: 1 / -1;
        width: 100% !important;
    }

    #filter-form select { width: 100%; }

    /* Full width rather than half a row with dead space beside it. The
       conditional "Clear" link then wraps below, which is fine. */
    #filter-form button {
        grid-column: 1 / -1;
        width: 100%;
    }

    /* ── Orders table → one card per purchase ──
       The markup is a real <table> with five columns (Product, Date, Amount,
       Status, Delivery) and no data-label attributes, so the cells are
       addressed by position. That is only safe because the column order is
       fixed in customer/account.php — if a column is added or moved there,
       these nth-child rules must move with it. */
    body .order-card {
        background: transparent;
        border: none;
        border-radius: 0;
        margin-bottom: 1.25rem;
    }

    body .orders-table,
    body .orders-table tbody { display: block; width: 100%; }

    body .orders-table thead { display: none; }

    body .orders-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 0.5rem 0.75rem;
        padding: 0.9rem 1rem;
        margin-bottom: 0.75rem;
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: 14px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    body .orders-table tr:hover td { background: transparent; }

    body .orders-table td {
        display: block;
        padding: 0;
        border-bottom: none;
    }

    body .orders-table td:nth-child(1) { grid-column: 1 / -1; }  /* product  */
    body .orders-table td:nth-child(2) { grid-column: 1; }       /* date     */
    body .orders-table td:nth-child(4) { grid-column: 1 / -1; }  /* status   */
    body .orders-table td:nth-child(5) { grid-column: 1 / -1; }  /* delivery */

    body .orders-table td:nth-child(3) {                         /* amount   */
        grid-column: 2;
        text-align: right;
        font-size: 1.05rem;
    }

    /* The thumbnail is an inline-styled 40px img, so !important is required. */
    body .orders-table td:nth-child(1) img {
        width: 52px !important;
        height: 52px !important;
        border-radius: 10px !important;
    }

    body .orders-table td:nth-child(1) strong { font-size: 14px; }

    /* Download is the reason this page exists — give it the full width. */
    body .orders-table td:nth-child(5) .dl-btn {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0.7rem 1rem;
        font-size: 14px;
        border-radius: 10px;
    }

    body .key-display {
        display: block;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    body .seller-card { padding: 1rem 1.1rem; }

    body .seller-card-btn {
        width: 100%;
        text-align: center;
        padding: 0.7rem 1rem;
    }

    body .pagination { flex-wrap: wrap; }

    body .pagination a,
    body .pagination span {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ═══════════════════════════════════════ Cart (store/cart.php) ══ */

    body .cart-container { padding: 1rem 1rem 1.5rem; }

    /* The fixed summary bar covers the bottom of the page, so the clearance
       belongs at the very END of the document — not on .cart-container, where
       it would show as a white gap between a short cart and the footer.
       :has() scopes it to the cart, since .cart-summary is rendered only there
       and only when the cart has items. Browsers without :has() simply skip
       this and get the pre-existing behaviour: the footer's last line sits
       under the bar until you scroll. */
    body:has(.cart-summary) {
        padding-bottom: calc(var(--app-tabbar-safe) + 130px);
    }

    body .cart-header { font-size: 1.15rem; margin-bottom: 1rem; }

    body .cart-items { border-radius: 14px; }

    body .cart-item { padding: 0.9rem 1rem; gap: 0.85rem; }

    body .item-img { width: 62px; height: 62px; }

    body .item-title {
        /* Ellipsising a product name to one line hides what was bought. Two
           lines fit on a phone. */
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 14px;
        line-height: 1.3;
    }

    body .btn-remove { width: 44px; height: 44px; }

    /* The order summary becomes a fixed bar above the tab bar, so the total
       and the checkout button stay on screen however far the list scrolls.
       The rows it repeats (Items / Subtotal / trust note) are hidden rather
       than duplicated — the list above already shows them. */
    body .cart-summary {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--app-tabbar-safe);
        top: auto;
        z-index: 110;
        margin: 0;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        border: none;
        border-top: 1px solid var(--gray-200);
        border-radius: 0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.07);
    }

    body .cart-summary .summary-title,
    body .cart-summary .summary-row,
    body .cart-summary .trust-note { display: none; }

    body .cart-summary .summary-total {
        margin: 0 0 0.6rem;
        padding: 0;
        border-top: none;
        font-size: 1.05rem;
    }

    /* The checkout anchor carries an inline margin-top:1.5rem. */
    body .cart-summary .btn { margin-top: 0 !important; }

    body .empty-cart { padding: 2.5rem 1.25rem; }

    /* ═════════════════════ Auth (customer/login.php + register.php) ══ */

    body .auth-wrap {
        /* min-height: calc(100vh - 130px) centres the card against a viewport
           height that is wrong on mobile and ignores the tab bar. Note
           login.php also renders a second .auth-wrap with an inline
           min-height:0 for its local-tools block — that inline value still
           wins, which is what we want. */
        min-height: auto;
        align-items: flex-start;
        padding: 1.25rem 1rem 2rem;
        background: #fff;
    }

    body .auth-box {
        /* Full-bleed, no card — a sign-in screen, not a card on a page. */
        max-width: none;
        padding: 0.5rem 0 0;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }

    body .auth-title { font-size: 1.5rem; }
    body .auth-sub { margin-bottom: 1.5rem; }
    body .auth-field input { padding: 0.8rem 0.9rem; }

    body .auth-btn,
    body .oauth-btn { min-height: 48px; }

    body .local-tools { max-width: none; }

    /* ════════════════════════════════════ FAQ and Terms (long text) ══ */

    body .page-hero { padding: 2rem 1rem; }

    body .faq-section,
    body .policy-section { padding: 1.5rem 0; }

    body .faq-group { margin-bottom: 1.75rem; }

    body .faq-question {
        /* Accordion rows are the main target on this page. */
        min-height: 52px;
        font-size: 14.5px;
        gap: 0.75rem;
    }

    body .faq-answer { font-size: 14px; }
    body .faq-cta { padding: 1.5rem 1.25rem; }

    body .policy-content { padding: 0; font-size: 14.5px; }
    body .policy-content h2 { font-size: 1.1rem; }

    body .contact-box { padding: 1.1rem; }

    /* ════════════════════════════════════════════════════════════ motion ══ */

    @media (prefers-reduced-motion: reduce) {
        .app-tab,
        .app-tab:active .app-tab-ico {
            transition: none;
            transform: none;
        }
    }
}