/* ==========================================================================
   TFAST Hub — mobile app chrome (public storefront + customer panel)
   Keeps the ledger world (paper/cobalt/lime) and makes the mobile web feel
   like the installed app: bottom navigation clearance, thumb-reach actions,
   native touch feedback and slow-network friendly media frames.
   Loaded after the theme CSS on every layout.
   ========================================================================== */

/* 1. Native touch behaviour ------------------------------------------------ */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body,
button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.cmn-btn:active,
.btn:active,
button:active {
    transform: translateY(1px);
}

/* 2. Reserve room for the fixed bottom navigation on phones ---------------- */
@media (max-width: 991.98px) {
    /* Full app-tab chrome, mirroring the customer panel (app-chrome.css) so
       the storefront tab bar is styled even where that file is not loaded. */
    .bottom-nav {
        background: var(--cobalt-deep, #031b52) !important;
        border-top: 1px solid rgba(255, 255, 255, .12);
        z-index: 1030;
    }

    .bottom-nav > ul.nav,
    .bottom-nav .nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        list-style: none !important;
    }

    .bottom-nav .nav-item {
        flex: 1 1 20% !important;
        max-width: 20% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .bottom-nav .nav-item .nav-link {
        color: rgba(255, 255, 255, .72) !important;
        min-height: 54px;
        height: 100%;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
        padding: 5px 0 !important;
        margin: 0 !important;
        text-align: center !important;
        text-decoration: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .bottom-nav .nav-item .nav-link i {
        font-size: 18px;
        line-height: 1;
        display: block;
    }

    .bottom-nav .nav-item .nav-link span {
        line-height: 1;
        white-space: nowrap;
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bottom-nav .nav-item .nav-link.active,
    .bottom-nav .nav-item .nav-link:hover,
    .bottom-nav .nav-item .nav-link:focus {
        color: var(--lime, #d9f20f) !important;
    }

    .bottom-nav {
        padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    body {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }

    /* Keep floating helpers above the tab bar, thumbs-first */
    .tf-chat-widget .tf-chat-toggle {
        bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* On service pages the quick-order bar sits there: lift the chat above it */
    body:has(.tf-order-bar) .tf-chat-widget .tf-chat-toggle {
        bottom: calc(146px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .tf-pwa-banner {
        bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .tf-pwa-update {
        bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* The chat panel closes short of the tab bar when open */
    .tf-chat-panel {
        max-height: calc(100dvh - 150px);
    }
}

/* 3. Media frames: soft paper placeholders while lazy images decode --------- */
img[loading="lazy"] {
    background-color: var(--paper-muted, #f0efe7);
}

img {
    max-width: 100%;
    height: auto;
}

/* 4. App-grade horizontal rails (platforms, categories, chips) ------------- */
.tf-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tf-rail::-webkit-scrollbar {
    display: none;
}

.tf-rail > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* 5. Sticky quick-order bar on service pages (mobile only) ----------------- */
.tf-order-bar {
    align-items: center;
    background: var(--surface, #fff);
    border-top: 1px solid var(--line, rgba(7, 24, 63, .18));
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    display: none;
    gap: 12px;
    justify-content: space-between;
    left: 0;
    padding: 10px 14px;
    position: fixed;
    right: 0;
    z-index: 1035;
    box-shadow: 0 -10px 30px rgba(3, 27, 82, .12);
}

.tf-order-bar .tf-order-price {
    color: var(--ink, #07183f);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.1;
}

.tf-order-bar .tf-order-price small {
    color: var(--muted, #68728a);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tf-order-bar .cmn-btn {
    margin: 0;
    min-height: 44px;
    padding: 10px 22px;
}

@media (max-width: 991.98px) {
    .tf-order-bar {
        display: flex;
    }

    /* the inline order widget would be a duplicate on phones */
    .tf-hide-mobile {
        display: none !important;
    }
}

/* 6. App-grade list rows on phones ---------------------------------------- */
@media (max-width: 767.98px) {
    .table-responsive {
        border: 0;
    }

    .form-control,
    .form-select {
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    /* Long provider titles on service pages should read like an app header,
       not a five-line wall: tighter scale, controlled wrapping. */
    .service-details-section h1 {
        font-size: clamp(22px, 6.4vw, 34px) !important;
        line-height: 1.16 !important;
        overflow-wrap: anywhere;
    }
}

/* 7. Mobile density: app-scale spacing so pages fit the screen ------------- */
@media (max-width: 991.98px) {

    /* Sections breathe at phone scale, not desktop scale (the homepage hero
       keeps its presence). */
    section:not(.sm-hero) {
        padding-top: clamp(20px, 5vw, 54px) !important;
        padding-bottom: clamp(20px, 5vw, 54px) !important;
    }

    .py-5 {
        padding-top: 1.4rem !important;
        padding-bottom: 1.4rem !important;
    }

    .mb-4 {
        margin-bottom: .9rem !important;
    }

    .mb-5 {
        margin-bottom: 1.4rem !important;
    }

    /* Cards stay airy but stop wasting vertical space */
    .card-body {
        padding: 14px !important;
    }

    .widget {
        margin-bottom: 12px !important;
    }

    /* Service pages: two-column feature grid + swipeable related rail */
    .features-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
    }

    .feature-item {
        font-size: 13px;
        margin: 0 !important;
    }

    .related-grid {
        display: flex !important;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }

    .related-grid .related-item {
        flex: 0 0 72%;
        scroll-snap-align: start;
    }

    /* Footer: two tidy columns instead of four stacked blocks */
    .footer-section .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 18px 14px;
        margin: 0 !important;
    }

    .footer-section .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .footer-section .row > [class*="col-"]:first-child {
        grid-column: 1 / -1;
    }

    .footer-section .footer-widget {
        margin-bottom: 0 !important;
    }

    .footer-section .footer-widget ul {
        margin-bottom: 0 !important;
    }

    .footer-section .footer-widget li {
        line-height: 1.55;
        margin-bottom: 2px;
    }

    .footer-section h5,
    .footer-section h6 {
        font-size: 14px;
        margin-bottom: 8px !important;
    }

    .footer-section .footer-wordmark img,
    .footer-section .footer-wordmark svg {
        max-height: 42px;
        width: auto;
    }
}

/* 8b. Catalogue rows on phones: app-style compact list ----------------------
   The services and country catalogues render as data-label tables; on
   phones each row becomes one tight block (name line + inline facts +
   details action) instead of six stacked label/value pairs. */
@media (max-width: 767.98px) {
    .is-services-page .table tbody tr,
    .sm-country-page .table tbody tr {
        display: block !important;
        padding: 10px 12px !important;
    }

    .is-services-page .table td[data-label="ID"],
    .sm-country-page .table td[data-label="ID"] {
        display: none !important;
    }

    .is-services-page .table td,
    .sm-country-page .table td {
        border: 0 !important;
        display: inline-block !important;
        margin: 2px 0 !important;
        padding: 0 12px 0 0 !important;
        width: auto !important;
    }

    .is-services-page .table td[data-label="Name"],
    .sm-country-page .table td[data-label="Name"] {
        display: block !important;
        margin-bottom: 4px !important;
        padding-right: 0 !important;
    }

    .is-services-page .table td::before,
    .sm-country-page .table td::before {
        display: inline !important;
        margin-right: 4px;
    }

    .is-services-page .service-average-time {
        display: inline !important;
        font-size: 12px;
        margin: 0 0 0 6px;
    }

    /* Platform filter tiles: two per row on phones instead of one tall stack */
    .is-services-page .col-lg-3,
    .is-services-page .col-md-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .is-services-page .table td.td-quick-view,
    .sm-country-page .table td.td-quick-view {
        padding-right: 0 !important;
    }
}

/* 10. Homepage density: condense long marketing sections on phones ---------
   Measured at 390x844 the homepage ran 16.9 screens: every section keeps
   its content but grids tighten to two columns, testimonials become a
   swipe rail and section rhythm shrinks to app scale. */
@media (max-width: 767.98px) {
    .sm-section {
        padding-top: clamp(22px, 6vw, 52px) !important;
        padding-bottom: clamp(22px, 6vw, 52px) !important;
    }

    .sm-section-head {
        margin-bottom: clamp(14px, 4vw, 26px) !important;
    }

    .sm-platform-grid,
    .sm-benefit-grid,
    .sm-guide-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .sm-platform-card,
    .sm-benefit-grid > *,
    .sm-guide-grid > * {
        min-height: 0 !important;
        padding: 12px !important;
    }

    .sm-service-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

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

    .sm-testimonial-grid {
        display: flex !important;
        gap: 12px !important;
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .sm-testimonial-grid > * {
        flex: 0 0 86%;
        scroll-snap-align: start;
    }

    .sm-step-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .sm-step-list > * {
        margin-bottom: 0 !important;
    }

    /* Discovery example services: swipe rail keeps every card, fits the screen */
    .sm-discovery .sm-service-grid {
        display: flex !important;
        gap: 10px !important;
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .sm-discovery .sm-service-grid > * {
        flex: 0 0 84%;
        scroll-snap-align: start;
    }

    .sm-payment-rail {
        gap: 8px !important;
    }
}

/* 9. Long service descriptions collapse on phones --------------------------
   Content stays in the DOM (SEO, answer engines) but the page fits the
   screen: phones show a single toggle row, desktop keeps full text. */
.tf-more > summary {
    display: none;
}

@media (max-width: 991.98px) {
    .tf-more > summary {
        align-items: center;
        background: var(--paper-muted, #f0efe7);
        border: 1px solid var(--line, rgba(7, 24, 63, .14));
        border-radius: 10px;
        color: var(--ink, #07183f);
        display: flex !important;
        font-size: 14px;
        font-weight: 700;
        justify-content: center;
        list-style: none;
        min-height: 46px;
        padding: 10px 14px;
    }

    .tf-more > summary::-webkit-details-marker {
        display: none;
    }

    .tf-more[open] > summary {
        margin-bottom: 10px;
    }
}

/* 11. Installed app chrome -------------------------------------------------
   Launched from the home screen the panel behaves like a native app: no
   site header, no footer, no marketing scroll - a compact hero, then the
   marketplace itself (services, platform rails, payments). */
@media all and (display-mode: standalone) {
    header,
    .main-header,
    .header-area,
    .sm-why,
    .sm-testimonials,
    .sm-steps,
    .sm-api,
    .sm-faq,
    .sm-final-cta,
    .sm-cta-network,
    footer,
    .footer-section {
        display: none !important;
    }

    body {
        background: var(--paper, #fbfaf4);
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Compact hero: brand line, promise, one primary action */
    .sm-hero {
        min-height: auto !important;
        padding: 16px 0 6px !important;
    }

    .sm-hero h1 {
        font-size: clamp(24px, 7vw, 34px) !important;
        line-height: 1.12 !important;
    }

    .sm-hero .sm-hero-proof,
    .sm-hero .sm-hub-stage {
        margin-top: 10px !important;
    }

    .sm-discovery,
    .service-page-area,
    .service-details-section {
        padding-top: 14px !important;
    }

    /* The tab bar is the app's navigation */
    .bottom-nav {
        display: flex !important;
    }
}