/* ============================================================
   GenZ Dabba — app chrome for the pages that live OUTSIDE the app shell (Pay, Notifications, Help).
   On a phone browser and inside the Android app these pages used to show the old website header (logo + hamburger) and the old five-item
   bottom bar. js/shell-chrome.js now gives them the SAME top bar and bottom bar as the app shell (Home · Menu · Plans · Orders · Account),
   so tapping "Claim offer", "View all notifications" or "Pay" never drops the customer into a different-looking app.
   Everything is scoped to html.gd-chrome-on, which only that script sets (never on desktop, tablets or the owner pages).
   ============================================================ */

html.gd-chrome-on,
html.gd-chrome-on body { background: #FFF9F1; color: #1D1916; }
html.gd-chrome-on body {
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
}

/* the old website chrome is replaced */
html.gd-chrome-on .site-header,
html.gd-chrome-on .quick-nav,
html.gd-chrome-on .site-footer,
html.gd-chrome-on .app-popup { display: none !important; }

/* ---- top bar (same look as the shell's app bar) ---- */
.gd-chrome-top, .gd-chrome-bottom { display: none; }
html.gd-chrome-on .gd-chrome-top { display: block; position: sticky; top: 0; z-index: 40; background: #FFF9F1; }
html.gd-chrome-on .gd-chrome-bottom { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; }
.gd-chrome *, .gd-chrome *::before, .gd-chrome *::after { box-sizing: border-box; }
.gd-chrome a { text-decoration: none; color: inherit; }
.gd-chrome svg { width: 18px; height: 18px; flex-shrink: 0; }

.gd-chrome .as-appbar {
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #FFF9F1;
}
.gd-chrome .as-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gd-chrome .as-brand-mark { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: #fff; border: 1px solid #f0e6d8; }
.gd-chrome .as-brand-name { font: 800 16px "Plus Jakarta Sans", Inter, sans-serif; }
.gd-chrome .as-brand-sub { font: 500 11px Inter, sans-serif; color: #746B64; margin-top: 1px; }
.gd-chrome .as-appbar-title { font: 800 17px "Plus Jakarta Sans", Inter, sans-serif; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-chrome .as-back, .gd-chrome .as-bell {
  width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1.5px solid #eee2d2; color: #1D1916;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; padding: 0; cursor: pointer;
}
.gd-chrome .as-bell .as-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #e8720c; border: 1.5px solid #fff; }
.gd-chrome .as-appbar-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* ---- bottom bar (same look as the shell's) ---- */
.gd-chrome .as-navbar {
  display: flex; background: #fffdf8; border-top: 1px solid #f0e6d8;
  padding: 8px 4px calc(env(safe-area-inset-bottom, 0px) + 10px);
}
.gd-chrome .as-navitem {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: #a39c92; font: 700 10.5px "Plus Jakarta Sans", Inter, sans-serif; background: none; border: 0;
  padding: 6px 2px; min-height: 48px;
}
.gd-chrome .as-navitem svg { width: 22px; height: 22px; }
.gd-chrome .as-navitem.on { color: #c25a02; }
.gd-chrome .as-navitem:active { transform: scale(.96); }

/* ---- the page itself sits like a shell screen: same side gutter, same warm ground, cards in the shell's style ---- */
html.gd-chrome-on .section.page-section { padding-top: 6px; }
html.gd-chrome-on .container { width: 100%; max-width: 560px; padding-left: 20px; padding-right: 20px; }
html.gd-chrome-on h1, html.gd-chrome-on h2, html.gd-chrome-on h3 { font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; letter-spacing: -0.01em; }
html.gd-chrome-on .section-heading h1, html.gd-chrome-on .section-heading h2, html.gd-chrome-on .page-section h1 { font-size: 26px; line-height: 1.15; }
html.gd-chrome-on .eyebrow { font-family: "Plus Jakarta Sans", Inter, sans-serif; }

/* the page's own "back to My Account" arrow duplicates the top bar's back button */
html.gd-chrome-on .back-to-dashboard-link { display: none !important; }