/* App-style mobile layout, matching lib/theme/app_colors.dart in the Customer App. Everything that
 * changes the look of an existing page sits inside the max-width query, so desktop is unaffected.
 */
.as-nav, .as-cart-pill, .as-notice, .as-offline { display: none; }

.as-sheet {
  position: fixed; inset: 0; z-index: 9500; background: #fff; color: #0F172A;
  display: none; flex-direction: column;
  padding-top: env(safe-area-inset-top);
}
.as-sheet.open { display: flex; }
.as-sheet-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #E6E8EC; }
.as-sheet-head h2 { margin: 0; font: 700 18px/1.3 var(--ff-body, system-ui, sans-serif); color: #0F172A; }
.as-back { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; font-size: 22px; color: #0F172A; cursor: pointer; }
.as-sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.as-offer-hero { background: #0B2A6B; color: #fff; border-radius: 16px; padding: 18px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.as-offer-hero strong { font-size: 18px; }
.as-offer-hero span { font-size: 13px; }
.as-offer { width: 100%; min-height: 56px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff; border: 1px solid #E6E8EC; border-radius: 14px; text-align: left; font: 600 15px/1.3 var(--ff-body, system-ui, sans-serif); color: #0F172A; cursor: pointer; }
.as-offer-price { color: #1D4ED8; font-weight: 800; white-space: nowrap; }
.as-empty { text-align: center; color: #475467; padding: 40px 16px; font-size: 15px; }
.as-skeleton { height: 56px; border-radius: 14px; margin-bottom: 10px; background: linear-gradient(90deg, #F2F4F7 25%, #F8F9FB 50%, #F2F4F7 75%); background-size: 200% 100%; animation: as-shimmer 1.2s infinite linear; }
@keyframes as-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .as-skeleton { animation: none; } }

@media (max-width: 768px) {
  /* ── App palette: blue for navigation and selection, orange for primary actions ── */
  :root {
    --sienna: #C2410C;
    --cream: #FFFFFF;
    --ivory: #FFFFFF;
    --charcoal: #0F172A;
    --graphite: #0F172A;
    --mist: #E6E8EC;
    --txt-muted: #475467;
    --radius: 14px;
    --ff-display: var(--ff-body);
  }
  html, body { background: #fff; overflow-x: clip; }
  body.as-has-nav { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Replaced by .as-nav */
  .m-bottom-nav { display: none !important; }
  #mobile-app { padding-bottom: 0 !important; }

  /* An off-canvas drawer stays out of the page width until it is opened. */
  .mobile-nav:not(.open) { visibility: hidden; }

  /* Header */
  header { background: #fff; padding-top: max(10px, env(safe-area-inset-top)); }
  header.site-header { background: #0F172A; }
  .header-search { border: 1.5px solid #0F172A; background: #fff; box-shadow: none; }
  .header-search .search-btn-icon { background: #1D4ED8; }
  .header-search .search-btn-icon:hover { background: #0B2A6B; }
  .ai-mic-btn { background: #EEF4FF; color: #1D4ED8; }
  .ai-mic-btn:hover { background: #1D4ED8; }
  .ai-mic-btn::before { background: #1D4ED8; color: #fff; }

  /* Home: selection and text links are blue, as in the app */
  .m-tab.active { color: #1D4ED8; border-bottom-color: #1D4ED8; }
  .m-sec-hd a, .m-loc-change { color: #1D4ED8; }
  .m-loc-bar { background: #fff; }
  .m-cat-icon { background: #F2F4F7 !important; }
  .m-svc-img { background: #F2F4F7; }
  .m-svc-card, .m-cat-item { border-color: #E6E8EC; }


  /* A bottom sheet with the hidden attribute must stay hidden (shop filter drawer). */
  .ap-drawer[hidden], .ap-drawer-overlay[hidden] { display: none !important; }

  /* Text on these needs to stay readable (WCAG AA). */
  .m-prod-stars { color: #8A5A00; }
  .m-prod-mrp { color: #667085; }
  .loc-btn-allow { background: #C2410C; }

  /* The checkout form's side-by-side fields must fit inside the modal. */
  #checkout-modal input, #checkout-modal select, #checkout-modal textarea { min-width: 0; max-width: 100%; box-sizing: border-box; }

  /* The location prompt sits above the bottom navigation, not over it. */
  #loc-banner { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  #loc-banner:not(.show) { transform: translateY(calc(100% + 120px)); visibility: hidden; }

  /* ── Bottom navigation ── */
  .as-nav {
    display: flex; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
    background: #fff; border-top: 1px solid #E6E8EC; box-shadow: 0 -4px 16px rgba(15, 23, 42, .08);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .as-tab {
    flex: 1 1 0; min-width: 0; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: #475467; text-decoration: none; font: 600 12px/1.2 var(--ff-body, system-ui, sans-serif);
    -webkit-tap-highlight-color: transparent;
  }
  .as-tab.active { color: #1D4ED8; }
  .as-book {
    flex: 0 0 72px; align-self: flex-start; margin-top: -22px; width: 66px; height: 66px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #1D4ED8; color: #fff; border: 4px solid #fff; border-radius: 50%;
    box-shadow: 0 4px 12px rgba(29, 78, 216, .35); text-decoration: none;
    font: 700 12px/1 var(--ff-body, system-ui, sans-serif); -webkit-tap-highlight-color: transparent;
  }
  .as-book svg { width: 26px; height: 26px; }

  /* ── Cart pill ── */
  .as-cart-pill.show {
    display: block; position: fixed; left: 50%; transform: translateX(-50%); z-index: 790;
    bottom: calc(80px + env(safe-area-inset-bottom));
    background: #C2410C; color: #fff; text-decoration: none; white-space: nowrap;
    padding: 12px 22px; border-radius: 999px; font: 700 14px/1.2 var(--ff-body, system-ui, sans-serif);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .25);
  }

  /* ── Notices ── */
  .as-notice {
    display: flex; flex-direction: column; gap: 10px; position: fixed; left: 12px; right: 12px; z-index: 850;
    bottom: calc(84px + env(safe-area-inset-bottom));
    background: #0B2A6B; color: #fff; border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .3); font: 400 14px/1.4 var(--ff-body, system-ui, sans-serif);
  }
  .as-notice-text { display: flex; flex-direction: column; gap: 2px; }
  .as-notice-actions { display: flex; justify-content: flex-end; gap: 8px; }
  .as-notice button { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #fff; background: none; color: #fff; font: 700 14px/1 var(--ff-body, system-ui, sans-serif); cursor: pointer; }
  .as-notice button.primary { background: #C2410C; border-color: #C2410C; }
  .as-offline {
    display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 9600;
    background: #B42318; color: #fff; text-align: center; font: 600 13px/1.4 var(--ff-body, system-ui, sans-serif);
    padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top));
  }

  /* ── Installed app: no browser-style site navigation ── */
  .as-standalone .mobile-nav, .as-standalone .hamburger, .as-standalone #hamburger, .as-standalone .mobile-menu-btn, .as-standalone footer { display: none !important; }
}

/* Desktop never shows the app's notices, but an update must still be offered there. */
@media (min-width: 769px) {
  .as-notice.as-update {
    display: flex; align-items: center; gap: 16px; position: fixed; right: 24px; bottom: 24px; z-index: 850;
    background: #0B2A6B; color: #fff; border-radius: 12px; padding: 14px 18px; font: 400 14px/1.4 system-ui, sans-serif;
  }
  .as-notice.as-update .as-notice-actions { display: flex; gap: 8px; }
  .as-notice.as-update button { min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid #fff; background: none; color: #fff; font-weight: 700; cursor: pointer; }
  .as-notice.as-update button.primary { background: #C2410C; border-color: #C2410C; }
}