/* Careby mobile quick wins — loaded last so it overrides per-page inline styles */
/* Q1: Hide desktop Member Login on mobile (it overflows the nav bar) */
/* Q4: Tighten mobile hamburger menu padding so the whole menu fits in one screen */
/* Q6: Shrink the chatbot widget on mobile and lift it above the new bottom CTA bar */
/* Q2: Sticky bottom CTA bar — common styles. Per-page HTML required. */
/* Q3: Compress mobile hero so the H1 sits above the fold */

/* ─── Footer language switcher: always visible.
   The global bilingual rule hides any element with data-lang="zh"
   when the body is in English mode (and vice versa). That mistakenly
   hides the footer's "中文"/"EN" toggle links. Override at higher specificity. */
.careby-footer .careby-footer-lang a[data-lang],
.careby-footer-lang a[data-lang]{display:inline-block !important;}

/* Designer #6 (2026-05-27): Center every footer column on mobile */
@media (max-width: 768px) {
  .careby-footer .careby-footer-col,
  .careby-footer .careby-footer-col-h,
  .careby-footer .careby-footer-col ul,
  .careby-footer .careby-footer-col li,
  .careby-footer .careby-footer-tag,
  .careby-footer .careby-footer-loc {
    text-align: center !important;
  }
  .careby-footer .careby-footer-col ul {
    list-style: none !important;
    padding: 0 !important;
    align-items: center !important;
  }
  .careby-footer .careby-footer-logo-block {
    align-items: center !important;
    text-align: center !important;
  }
  .careby-footer .careby-footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .careby-footer .careby-footer-legal,
  .careby-footer .careby-footer-lang {
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ─── Top-nav language toggle: tighten width on mobile.
   Default min-width 42px + 12px padding creates a wide pill with empty
   space to the right of "中". Reduce so the pill hugs the content. */
@media (max-width: 768px) {
  nav .lang-toggle span,
  .topbar .lang-btn,
  nav .mm-lang-toggle span {
    min-width: 0 !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
  }

  /* ─── Unified mobile nav across all pages.
     User feedback (2026-05-27): the 医生 (Doctor On-Call) header style
     (compact pill with 12px side margin + 56px height) should be the
     baseline on every page. Some pages were still using the desktop
     24px-margin floating pill on mobile — too wide, sits awkwardly. */
  nav {
    top: 8px !important;
    left: 12px !important;
    right: 12px !important;
    height: 56px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
  }

  /* ─── Hamburger: consistent style across all pages.
     The homepage uses a smaller 36px transparent button; other pages had
     a wider 44px button. Unify to 36px + transparent so the right side of
     the nav (lang toggle + hamburger) reads as a clean group on every page.
     Also force display:flex — some pages (Insight) had no mobile-show rule. */
  nav .nav-hamburger {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  nav .nav-hamburger:hover { background: transparent !important; }
  nav .nav-hamburger span {
    width: 20px !important;
    height: 2px !important;
    background: var(--ink, #1A1E23) !important;
  }

  /* ─── Lang toggle: abbreviate "中文" → "中" on mobile across all pages.
     Pages where the markup wraps "文" in .lang-toggle-extra get the hide
     for free. Pages with plain "中文" text need a JS shim — handled below
     by a tiny script-injected fix in pages that already include this CSS. */
  .lang-toggle .lang-toggle-extra { display: none !important; }
}

@media (max-width: 768px) {
  /* ─────────────────────────────────────────── Q1: nav overflow ─── */
  nav .nav-r > a[href*="gotodoctor"],
  nav .nav-r > a[target="_blank"],
  nav .nav-r .nav-signin,
  nav .nav-r .nav-cta {
    display: none !important;
  }

  /* ─────────────────────────────────────────── Q4: hamburger menu ─── */
  .mobile-menu {
    justify-content: flex-start !important;
    padding-bottom: 80px !important;
  }
  .mobile-menu a,
  .mobile-menu .mm-accordion-toggle {
    padding: 12px 24px !important;
    min-height: 44px !important;
    font-size: 17px !important;
  }
  .mobile-menu .mm-sub a {
    padding: 10px 40px !important;
    min-height: 40px !important;
    font-size: 15px !important;
  }
  .mobile-menu .mm-phone,
  .mobile-menu .mm-login {
    padding: 10px 24px !important;
    min-height: 40px !important;
  }
  .mobile-menu .mm-divider {
    height: 4px !important;
  }

  /* ─────────────────────────────────────────── Q6: chatbot widget ─── */
  .cb-btn {
    width: 44px !important;
    height: 44px !important;
    bottom: 90px !important;   /* lift above the sticky CTA bar */
    right: 16px !important;
    font-size: 16px !important;
    box-shadow: 0 2px 12px rgba(34,160,107,0.35) !important;
  }
  .cb-win {
    bottom: 142px !important;   /* lift above the CTA bar + button */
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* ─────────────────────────────────────────── Q3: compress mobile hero ─── */
  /* Cap the hero photo so the headline appears above the fold on iPhone. */
  .hero-v2,
  .hero-bg,
  .hero-vid-mobile {
    max-height: 45vh !important;
  }
  .hero-v2-video {
    max-height: 45vh !important;
  }
  /* Tighten the hero text block padding */
  .hero-left,
  .hero-v2-text {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  /* ─────────────────────────────────────────── Q2: sticky bottom CTA bar ─── */
  body {
    padding-bottom: 76px !important;
  }
  .mobile-cta-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 550 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid rgba(15,25,35,0.08) !important;
    box-shadow: 0 -4px 24px rgba(15,25,35,0.08) !important;
    box-sizing: border-box !important;
  }
  .mobile-cta-bar a {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #22A06B !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-align: center !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    min-height: 48px !important;
    box-shadow: 0 2px 8px rgba(34,160,107,0.25) !important;
    transition: background .15s, transform .15s !important;
  }
  .mobile-cta-bar a:active {
    transform: scale(0.98) !important;
    background: #1A8559 !important;
  }
  .mobile-cta-bar a + a {
    margin-left: 8px !important;
  }
  .mobile-cta-bar a.mobile-cta-secondary {
    background: transparent !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(15,25,35,0.18) !important;
    box-shadow: none !important;
  }
}

/* Desktop: hide the mobile CTA bar entirely */
@media (min-width: 769px) {
  .mobile-cta-bar {
    display: none !important;
  }
  body {
    /* keep body padding default on desktop */
  }
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║ B1 — APP-STYLE BOTTOM TAB BAR (Week 4)                                   ║
   ║ Replaces the sticky CTA bar on mobile. Persistent navigation across      ║
   ║ all pages, like a native app. Center tab is the page-context CTA pill.   ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 768px) {
  /* Hide old sticky CTA bar — replaced by the tab bar */
  .mobile-cta-bar {
    display: none !important;
  }
  /* Body padding for the tab bar (78px) + iOS safe-area */
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Designer spec [27]: all text + icons stay within the white area of the bar.
     Bar height = 64px content area + iOS safe-area inset for the home indicator,
     so content never gets squeezed by the safe-area padding. */
  .mobile-tab-bar {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 600 !important;
    display: flex !important;
    align-items: stretch !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid rgba(15, 25, 35, 0.08) !important;
    box-shadow: 0 -4px 24px rgba(15, 25, 35, 0.06) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    box-sizing: border-box !important;
  }

  .mobile-tab-bar > a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 64px !important;
    padding: 8px 2px 8px !important;
    font-family: 'Inter', 'Noto Sans SC', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
    -webkit-tap-highlight-color: transparent !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-tab-bar > a:active {
    background: rgba(26, 122, 82, 0.04) !important;
  }

  .mobile-tab-bar > a.active {
    color: #1A7A52 !important;
    font-weight: 600 !important;
  }

  .mobile-tab-bar > a svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    fill: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .mobile-tab-bar > a.active svg {
    stroke-width: 2 !important;
  }

  /* Tab label - smaller on narrow phones */
  .mobile-tab-bar > a > span {
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Center "Get Started" tab — elevated green pill (page-context CTA) */
  .mobile-tab-bar > a.tab-cta {
    background: #1A7A52 !important;
    color: #FFFFFF !important;
    margin: 6px 6px !important;
    border-radius: 14px !important;
    flex: 1.15 1 0 !important;
    height: 52px !important;
    padding: 6px 4px !important;
    box-shadow: 0 2px 10px rgba(26, 122, 82, 0.32) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
  }
  .mobile-tab-bar > a.tab-cta:active {
    background: #14633F !important;
    transform: scale(0.97) !important;
  }
  .mobile-tab-bar > a.tab-cta svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2.2 !important;
  }

  /* If the page also injects mobile-anchor-nav, lift it to avoid the tab bar
     overlapping the bottom — anchor nav is sticky-top, no change needed. */
}

/* Desktop: hide tab bar — top nav is the only nav */
@media (min-width: 769px) {
  .mobile-tab-bar {
    display: none !important;
  }
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║ B2 — PWA INSTALL BANNER                                                   ║
   ║ "Add Careby to your home screen" prompt. Built by an inline script;       ║
   ║ these styles render it. Hidden by default; the script reveals it.         ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

.pwa-install-banner {
  display: none;
}

@media (max-width: 768px) {
  .pwa-install-banner.pwa-show {
    display: flex !important;
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;  /* above the tab bar */
    z-index: 620 !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    background: #1b3d2f !important;
    color: #FFFFFF !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(15, 25, 35, 0.28) !important;
    font-family: 'Inter', 'Noto Sans SC', sans-serif !important;
    animation: pwaSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }
  @keyframes pwaSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .pwa-install-banner .pwa-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
    flex-shrink: 0 !important;
    display: block !important;
  }
  .pwa-install-banner .pwa-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .pwa-install-banner .pwa-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 0 2px !important;
    color: #FFFFFF !important;
  }
  .pwa-install-banner .pwa-sub {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
  }
  .pwa-install-banner .pwa-action {
    flex-shrink: 0 !important;
    background: #2ECC8A !important;
    color: #06281B !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 9px 16px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .pwa-install-banner .pwa-action:active {
    background: #25B377 !important;
  }
  .pwa-install-banner .pwa-close {
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    padding: 4px 6px !important;
    cursor: pointer !important;
  }
  /* iOS hint variant — fuller-width instruction, no green button */
  .pwa-install-banner.pwa-ios .pwa-action {
    display: none !important;
  }
}

/* Never show inside an already-installed standalone app */
@media (display-mode: standalone) {
  .pwa-install-banner { display: none !important; }
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║ WEEK 2 MEDIUM ITEMS — M1 (2×2 grid), M2 (swipe tiers), M3 (anchor nav),  ║
   ║ M4 (hide low-value sections on mobile)                                    ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 768px) {
  /* M1 routing-card overrides removed (2026-05-26): the homepage now has a
     designer-spec'd 2x2 card layout in index.html's @media block. Leaving
     this section's rules in fights the new layout — see index.html. */

  /* ─────────────────────────── M2: horizontal swipe Body Check tiers ─── */
  /* The Body Check tier cards (Essentials / Plus / Senior / Complete)
     stack vertically and take 4 screens to scroll through. Convert to
     a snap-scrolling horizontal carousel — 1 card visible at a time,
     swipe left/right to compare. */
  .bc-tiers,
  .bc-grid,
  .bc-tier-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding: 4px 16px 16px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    scrollbar-width: none !important;
  }
  .bc-tiers::-webkit-scrollbar,
  .bc-grid::-webkit-scrollbar,
  .bc-tier-grid::-webkit-scrollbar {
    display: none !important;
  }
  .bc-tier {
    flex: 0 0 82% !important;
    scroll-snap-align: center !important;
    max-width: none !important;
    width: auto !important;
  }
  /* Cue: faint scroll-indicator dots can go under the carousel later */

  /* ─────────────────────────── M3: anchor-nav strip ─── */
  /* Sticky horizontal tab strip under the main nav. Lets visitors jump
     to a section instead of scrolling 13 screens. Per-page HTML required. */
  .mobile-anchor-nav {
    position: fixed !important;
    top: 84px !important;  /* sits below the fixed top nav (12 + 64 + ~8 gap) */
    left: 0 !important;
    right: 0 !important;
    z-index: 480 !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(15, 25, 35, 0.06) !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 2px 12px rgba(15, 25, 35, 0.04) !important;
  }
  /* Push page content down so the anchor nav doesn't cover the hero */
  body:has(.mobile-anchor-nav) main,
  body:has(.mobile-anchor-nav) > section:first-of-type,
  body:has(.mobile-anchor-nav) > .hero,
  body:has(.mobile-anchor-nav) .hero-v2 {
    margin-top: 48px !important;
  }
  .mobile-anchor-nav::-webkit-scrollbar {
    display: none !important;
  }
  .mobile-anchor-nav a {
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: #F2EFEA !important;
    color: #1A1E23 !important;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border: 1px solid rgba(15, 25, 35, 0.06) !important;
  }
  .mobile-anchor-nav a:active {
    background: #22A06B !important;
    color: #fff !important;
  }

  /* ─────────────────────────── M3: scroll offset for sticky nav ─── */
  /* When you tap a chip in the anchor nav, the target section needs to
     scroll so its top sits *below* the fixed top nav + anchor nav. */
  #tiers,
  #how-it-works,
  #detect,
  #pricing,
  #conditions,
  #how,
  #trust,
  #faq {
    scroll-margin-top: 140px !important;
  }

  /* ─────────────────────────── M4: trim low-value sections on mobile ─── */
  /* The scrolling trust marquee duplicates information already shown above
     the fold (the chip strip under the hero). Hide on mobile to save a
     full screenful of scroll. */
  .marquee {
    display: none !important;
  }
  /* Tighten the "3 blind spots" section padding so it fits in fewer screens */
  .gaps-bg {
    padding: 40px 0 !important;
  }
  /* "Reach us" QR contact section: keep accessible via footer phone number,
     hide the big QR block on mobile (it's screen 12+). */
  .hp-contact {
    display: none !important;
  }
}

/* Desktop: hide mobile-only chrome */
@media (min-width: 769px) {
  .mobile-anchor-nav {
    display: none !important;
  }
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║ WEEK 3 — HOMEPAGE HOLISTIC MOBILE REDESIGN                                ║
   ║ Cuts the offenders where one item = one screen of scroll.                 ║
   ║ Editorial promises section and "Every membership includes" section both   ║
   ║ get aggressive compression so 3 items fit in ~1 screen.                   ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 768px) {
  /* Homepage mobile rules removed (2026-05-26):
     .ed-section / .ed-col / .hp-mem-* / .mr-* / .pct-* / .routing-section
     are now defined in index.html's own @media block per the designer specs.
     Keeping them here was fighting the new design. If you need to adjust
     these sections on mobile, edit index.html, not this file. */

  /* ─────────────────────────── FOOTER: trim oversized padding ─── */
  .careby-footer {
    padding-top: 36px !important;
    padding-bottom: 80px !important;  /* room for sticky CTA bar */
  }

  /* ─────────────────────────── IN-HOME CARE: section compression ─── */
  .hero-ihc,
  .hero-ihc-strip {
    padding: 24px 16px !important;
  }
  .detect-section,
  .split,
  .caregivers-section,
  .pricing-section,
  .ihc-closer {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  /* Tighten detect cards */
  .detect-grid,
  .detect-list {
    gap: 12px !important;
  }
  .detect-card {
    padding: 16px !important;
  }
  /* Split sections — stack tighter, smaller images */
  .split-inner,
  .split-grid {
    gap: 16px !important;
  }
  .split-media {
    max-height: 220px !important;
    overflow: hidden !important;
  }
  /* Pricing cards — tighten the SafeHome cards */
  .ph-starter,
  .ph-continuation,
  .ph-cont-card {
    padding: 24px 20px !important;
  }
  .ph-cards,
  .ph-grid {
    gap: 14px !important;
  }
  /* Caregiver cards — compact */
  .caregivers-grid,
  .cgvr-grid {
    gap: 14px !important;
  }
  .cgvr-card {
    padding: 18px 16px !important;
  }

  /* ─────────────────────────── PERSONAL CARE: section compression ─── */
  .hub-section,
  .hiw,
  .trust-section,
  .faq {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  /* Hub grid — keep 2 columns on mobile (was 1-col-stacking) */
  .hub-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .hub-card {
    padding: 16px 14px !important;
  }
  .hub-card-img,
  .hub-card-illust {
    max-height: 90px !important;
  }
  .hub-card-title,
  .hub-card h3 {
    font-size: 15px !important;
    margin: 8px 0 4px !important;
  }
  .hub-card-desc,
  .hub-card p {
    font-size: 12px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .hub-card-cta {
    font-size: 12px !important;
  }
  /* Trust pillars — stack on mobile but tighter */
  .trust-grid {
    gap: 14px !important;
  }
  .trust-pillar {
    padding: 20px 18px !important;
  }
}