/* ══════════════════════════════════════════════════════════════════════════
   APP MOBILE THEME
   Reskins the core shopper flow (store, product, cart, checkout, courier,
   shop+, account, dashboard) on small screens to match app/index.php's
   palette: navy background, slate cards, purple accent. Desktop is
   untouched — everything here is scoped to the same 768px breakpoint the
   rest of the site's mobile CSS (mobile-app.css, global-wide.css) uses.

   Loaded last (after each page's own <style> block) and uses !important
   throughout for the same reason global-wide.css and mobile-app.css do:
   every target page hardcodes its own light-theme colors rather than the
   --bn-* tokens, so matching or beating their specificity is the only way
   to win the cascade without rewriting each page's CSS from scratch.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --bn-primary:       #0f766e !important;
    --bn-primary-dark:  #115e59 !important;
    --bn-primary-light: #042f2e !important;
    --bn-accent:        #2dd4bf !important;
    --bn-surface:       #1e293b !important;
    --bn-bg:            #0f172a !important;
    --bn-border:        #334155 !important;
    --bn-text:          #e2e8f0 !important;
    --bn-muted:         #94a3b8 !important;
  }

  html, body { background: #0f172a !important; color: #e2e8f0 !important; }

  /* ── Generic light "card on white page" pattern used across store.php,
     product.php, cart.php, checkout.php, account.php, dashboard.php ──── */
  body, .app-sec, #main-content, #app-root,
  .card, .info-card, .stat-card, .product-card, .store-card, .n-card,
  .cart-item, .checkout-form, .form-section, .summary-box, .order-card,
  .dashboard-card, .account-card, .sidebar-checkout, .empty-state,
  section, .container, .page-section {
    background-color: transparent;
  }
  body { background-color: #0f172a !important; }
  .app-sec, #main-content, #app-root, .container, .page-section, section,
  .admin-wrapper, .admin-content, .sd-desktop-wrap, .sd-main-col {
    background-color: #0f172a !important;
  }
  .card, .info-card, .stat-card, .product-card, .store-card, .n-card,
  .cart-item, .checkout-form, .form-section, .summary-box, .order-card,
  .dashboard-card, .account-card, .sidebar-checkout {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
  }

  /* Common hardcoded white/near-white surfaces, page by page — grepped for
     each target page's own background:#fff rules rather than guessed, since
     forcing light text globally (previous approach) without confirming
     every one of these was actually darkened is what caused invisible
     light-on-still-white text on Shop+ and Courier. */
  .white-card, .bg-white, .light-panel,
  /* customer/shop-deliver.php */
  .how-it-works, .order-panel, .chat-wrap,
  /* courier-book.php (#courierBookPage .card, .btn-outline) */
  #courierBookPage .card,
  /* store.php / product.php product grid (v3-complete.css .product-item) */
  .product-item {
    background-color: #1e293b !important;
    border-color: #334155 !important;
  }
  #courierBookPage .btn-outline {
    background-color: transparent !important;
    border-color: #2dd4bf !important;
    color: #2dd4bf !important;
  }

  /* Text color is only ever forced *inside a container this file has
     actually darkened above* — never globally. A blanket rule on every
     heading/paragraph on the page makes text invisible the moment it sits
     in some other light box this stylesheet doesn't know about yet; scoping
     to known-dark containers means anything not yet covered just keeps its
     own (legible-on-light) color instead of turning invisible. */
  .card, .info-card, .stat-card, .product-card, .store-card, .n-card,
  .cart-item, .checkout-form, .form-section, .summary-box, .order-card,
  .dashboard-card, .account-card, .sidebar-checkout,
  .how-it-works, .order-panel, .chat-wrap, #courierBookPage .card,
  .app-sec, #main-content, #app-root, .admin-wrapper, .admin-content,
  .sd-desktop-wrap, .sd-main-col, .product-item {
    color: #e2e8f0 !important;
  }
  /* :not([style*="background"]) is load-bearing: several of these dark
     containers wrap their own self-contained colored callouts/badges
     (e.g. courier-book.php's light-lavender "multiple shipments are
     cheaper" tip, save-banners, "Open Now" pills) that set their OWN
     background + a color chosen to match it via inline style="". Without
     this guard, the blanket rule below forced those elements' text light
     too while leaving their (non-white, so untouched) background alone —
     light text on a light background, invisible again. Anything that
     declares its own background is assumed to already pair it with a
     readable text color and is left alone; everything else (plain text
     sitting directly on the container) gets relit for the dark bg. */
  .card :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .info-card :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .stat-card :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .cart-item :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .checkout-form :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .form-section :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .summary-box :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .order-card :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .dashboard-card :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .account-card :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .sidebar-checkout :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .how-it-works :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .order-panel :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .chat-wrap :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  #courierBookPage .card :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .product-item :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])) {
    color: #e2e8f0 !important;
  }
  /* Class-based light bubbles/badges (not inline-styled, so the guard above
     can't catch them) get their own explicit exclusion instead. */
  .chat-wrap .msg.assistant .msg-bubble,
  .chat-wrap .msg.assistant .msg-bubble * {
    color: #1f2937 !important;
  }

  /* templates/store-restaurant.php's menu — plain CSS classes (not inline
     styles), so neither the guard above nor the attribute selectors reach
     them; the page's own dark-on-white colors go invisible once this
     stylesheet darkens the page background under them. */
  .menu-section-title, .menu-item-name { color: #e2e8f0 !important; }
  .menu-item-desc { color: #94a3b8 !important; }
  .menu-section-title { border-bottom-color: #334155 !important; }
  .menu-item { border-bottom-color: #334155 !important; }

  /* ── Raw inline-styled boxes (store.php's About/Hours/Contact cards, and
     others across the flow, are plain `<div style="background:#fff;...">`
     with no class at all — an external stylesheet can't reach them with a
     normal selector, but CSS attribute selectors can text-match inside the
     style="" attribute itself. Also catches the same hardcoded hex values
     wherever else these pages inline them (sort dropdown's siblings,
     courier/shop-deliver leftovers, etc). Broad but scoped to mobile only,
     and only these exact literal hex strings — legitimate colored badges
     (green "Open Now", red "Closed") use other hex values and are untouched. */
  [style*="background:#fff"], [style*="background: #fff"],
  [style*="background:#ffffff"], [style*="background-color:#fff"] {
    background-color: #1e293b !important;
  }
  [style*="color:#111827"], [style*="color: #111827"],
  [style*="color:#1f2937"], [style*="color: #1f2937"] {
    color: #e2e8f0 !important;
  }
  [style*="color:#374151"], [style*="color: #374151"] {
    color: #cbd5e1 !important;
  }
  [style*="color:#6b7280"], [style*="color: #6b7280"],
  [style*="color:#9ca3af"], [style*="color: #9ca3af"],
  [style*="color:#4b5563"], [style*="color: #4b5563"] {
    color: #94a3b8 !important;
  }

  /* store.php's shared v3-complete.css white components */
  .sort-button, .sort-menu, .checkout-option, .modal-content, .modal-header,
  .store-group, .form-card,
  /* account.php */
  .account-sidebar, .account-content, .loyalty-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
  }
  .sort-option:hover { background-color: #263449 !important; }
  .account-nav a { color: #cbd5e1 !important; }
  .account-nav a:hover, .account-nav a.active {
    background: rgba(15, 118, 110,.18) !important;
    color: #2dd4bf !important;
  }
  .account-nav-logout { color: #f87171 !important; }
  .account-nav-logout:hover { color: #f87171 !important; background: rgba(220,38,38,.15) !important; }

  /* account.php: header sits directly on the page body (not inside any of
     the darkened containers above) and keeps its own dark heading color;
     the Messages panel's thread box and notify banner are inline-styled
     with hex values (#f9fafb, #f0fdfa) this file's #fff-only attribute
     selectors don't match. */
  .account-header h1, .account-header p { color: #e2e8f0 !important; }
  #msgThread { background-color: #1e293b !important; }
  #msgThread > div { color: #94a3b8 !important; }
  #msgNotifyBanner {
    background-color: #042f2e !important;
    border-color: #115e59 !important;
  }
  #msgNotifyBanner, #msgNotifyBanner * { color: #99f6e4 !important; }

  /* ── Product card polish (store.php / product.php grid) — a modern,
     app-store-style tile instead of v3-complete.css's plain flat card:
     tighter radius, a real border instead of just a shadow, a squared-off
     image with its own soft backdrop, and a smaller pill-style button. */
  .product-item {
    border: 1px solid #334155 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
    padding: 10px !important;
  }
  .product-item img {
    border-radius: 12px !important;
    height: 130px !important;
    background: #0f172a !important;
    object-fit: contain !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    margin-bottom: .6rem !important;
  }
  .product-item h4 {
    font-size: .88rem !important;
    font-weight: 700 !important;
    margin-bottom: .3rem !important;
  }
  .product-item p {
    font-size: .78rem !important;
    margin-bottom: .6rem !important;
  }
  .product-item button {
    border-radius: 20px !important;
    padding: 9px !important;
    font-size: .82rem !important;
    box-shadow: none !important;
  }
  .product-item:active { transform: scale(.98); }
  .muted, .subtitle, .sub, small, .text-muted, .help-text,
  .step, .step-label, .item-qty {
    color: #94a3b8 !important;
  }
  .item-price { color: #e2e8f0 !important; }
  a { color: #2dd4bf !important; }

  /* Success/confirmation messages inside the now-dark .card (cart.php,
     checkout.php's #success-msg) hardcode a dark green/gray meant for a
     white card — swap for tones that read on the dark one instead. */
  #success-msg h2, .success-msg h2 { color: #34d399 !important; }
  #success-msg p, .success-msg p, #success-msg i, .success-msg i {
    color: #94a3b8 !important;
  }
  #success-msg .fa-check-circle, .success-msg .fa-check-circle {
    color: #34d399 !important;
  }

  /* checkout.php's .error-box (light pink, dark red text) and
     .flash-deal-card (light green, dark green text) are CSS classes, not
     inline style="" -- the :not([style*="background"]) guard above only
     catches inline-styled self-contained badges, so a class-based one
     inside .card still got its text force-relit while its own
     (untouched, still-light) background stayed exactly as messed-up as
     every other case of this same bug. Explicit exclusion, same fix as
     .msg-bubble and #success-msg above. */
  .error-box, .error-box * { color: #991b1b !important; }
  .flash-deal-card, .flash-deal-card * { color: #14532d !important; }
  /* courier-book.php's quote-box (light lavender/indigo) and
     shop-deliver.php's confirmed-banner (light green) — same class-based
     self-contained-badge pattern as .error-box above. */
  #courierBookPage .quote-box, #courierBookPage .quote-box * { color: #115e59 !important; }
  .confirmed-banner, .confirmed-banner * { color: #065f46 !important; }

  /* shop-deliver.php's login/payment modals, and store-restaurant.php's
     sidebar card + sticky fulfillment bar — real white surfaces (not
     self-contained badges), so darkened + relit the same way as .card. */
  .login-modal, .pay-modal, .sidebar-card, .fulfillment-bar {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
  }
  .login-modal :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .pay-modal :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .sidebar-card :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .fulfillment-bar :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])) {
    color: #e2e8f0 !important;
  }
  .sidebar-empty { color: #94a3b8 !important; }

  /* product.php has its own page-level background (.product-page, not
     body) and a full set of its own white-card component classes never
     touched by anything above -- an entirely separate light "page inside
     the page" that the earlier per-page passes missed since none of the
     other target pages nest a second full-page background this way. */
  .product-page { background-color: #0f172a !important; }
  .page-nav-btn, .qty-ctrl, .related-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
  }
  .page-nav-btn :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])),
  .related-card :where(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):where(:not([style*="background"])) {
    color: #e2e8f0 !important;
  }
  .qty-btn { color: #cbd5e1 !important; }
  .trust-item { background-color: #1e293b !important; border-color: #334155 !important; }
  .trust-item span { color: #94a3b8 !important; }
  .carousel-btn { background-color: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
  /* product.php's "visit store" mini-card -- .store-card is already
     darkened generically above, but its own h4/p/arrow have their own
     explicit (non-inherited) colors that inheriting #e2e8f0 from the
     container can't override. */
  .store-info h4 { color: #e2e8f0 !important; }
  .store-info p { color: #94a3b8 !important; }
  .store-arrow { color: #64748b !important; }
  .rating-avg { color: #e2e8f0 !important; }
  /* .related-card's own colored tags ("Same Store", department name) --
     same self-contained-badge-inside-a-now-dark-card pattern as
     .error-box etc: the guard's :where() relight reaches these <span>s
     too, leaving their light background untouched underneath. */
  .related-tag-store, .related-tag-store * { color: #134e4a !important; }
  .related-tag-dept, .related-tag-dept * { color: #0369a1 !important; }

  /* Frequently Bought Together (inline-styled, amber background:#fffbeb)
     -- its own [style*="color:#1f2937"] elements get caught by the
     generic attribute-selector relight above with no awareness that
     *this* particular element's light text sits on an equally light
     amber background, not a dark card. A compound attribute selector
     (background context + color) outranks the single-attribute global
     rule on specificity, so this wins regardless of source order. */
  [style*="background:#fffbeb"] [style*="color:#1f2937"] { color: #92400e !important; }

  /* checkout.php's order summary (.order-box, background:#f9fafb) and
     pre-auth notice (.preauth-note, background:#eff6ff) -- same
     class-based-badge-inside-.card pattern as .error-box, just two more
     instances the earlier pass didn't know about yet. .order-box is a
     real content box (order lines/total), not a self-contained badge, so
     it's darkened properly rather than just having its text reasserted. */
  .order-box { background-color: #1e293b !important; }
  .order-row { color: #cbd5e1 !important; border-bottom-color: #334155 !important; }
  .order-row:last-child { color: #2dd4bf !important; border-top-color: #042f2e !important; }
  .order-meta { color: #94a3b8 !important; }
  .preauth-note, .preauth-note * { color: #93c5fd !important; }

  /* auth/login.php never loaded this stylesheet at all until now -- its
     purple-gradient header/buttons already match the app accent color and
     are left alone, but the white card body underneath was completely
     untouched (not even the generic input-darkening rule below reached it,
     since nothing here was applying to this page). */
  .login-card { background-color: #1e293b !important; }
  .form-group label { color: #cbd5e1 !important; }
  .divider::before { background-color: #334155 !important; }
  .divider span { background-color: #1e293b !important; color: #64748b !important; }
  .social-btn {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
  }
  .social-btn:hover { background-color: #1e293b !important; border-color: #475569 !important; }
  .login-footer { color: #94a3b8 !important; }
  .error-message, .error-message * { color: #991b1b !important; }

  hr, .divider, .border-top, .border-bottom {
    border-color: #334155 !important;
  }

  /* ── Typography scale — match app/index.php's compact sizing instead of
     each page's own desktop-scale headings (e.g. cart.php's "Your Cart"
     was an inline font-size:3rem, roughly 3x the app's page titles). */
  h1 { font-size: 1.4rem !important; margin-top: 0 !important; }
  h2 { font-size: 1.15rem !important; }
  h3 { font-size: 1rem !important; }

  /* ── Buttons / primary actions ──────────────────────────────────────── */
  .btn-primary, .btn-add, .btn-checkout, .checkout-btn, .order-btn,
  .add-to-cart, button[type="submit"], input[type="submit"] {
    background: #0f766e !important;
    background-image: none !important;
    border-color: #0f766e !important;
    color: #fff !important;
  }
  .btn-secondary, .btn-outline {
    background: transparent !important;
    border-color: #0f766e !important;
    color: #2dd4bf !important;
  }

  /* ── Inputs ──────────────────────────────────────────────────────────── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select, textarea {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
  }
  input::placeholder, textarea::placeholder { color: #64748b !important; }

  /* ── Headers some of these pages render themselves (not header.php's) ── */
  header, .page-header, .top-bar, .sd-header, .dash-header {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
  }

  /* ── Bottom nav bar (header.php's inline copy, includes/mobile-bottom-nav.php,
     and shop-deliver.php's own copy) — match app/index.php's dark nav instead
     of the site's white one. */
  .mob-bottom-nav {
    background: #0f172a !important;
    border-top-color: #1e293b !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,.35) !important;
  }
  .mob-nav-item { color: #64748b !important; }
  .mob-nav-item.active, .mob-nav-item:hover { color: #2dd4bf !important; }
}