/* Customer "My account" - Bento design (Hari 2026-10-05; mockup: design/customer-dashboard/bento.html).
   Everything is scoped to .bento-dash, so no other page (home, menu, cart, checkout) can change.
   Loaded after styles.css and css/dashboard.css, so it wins over the old dashboard look.
   Fonts are our own copies (css/fonts): Sora (OFL) and Phosphor icons (MIT). */

@font-face { font-family: "Sora"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/sora-latin.woff2") format("woff2"); }
@font-face { font-family: "Phosphor"; font-weight: normal; font-style: normal; font-display: block; src: url("fonts/Phosphor.woff2") format("woff2"); }
@font-face { font-family: "Phosphor-Bold"; font-weight: normal; font-style: normal; font-display: block; src: url("fonts/Phosphor-Bold.woff2") format("woff2"); }
@font-face { font-family: "Phosphor-Fill"; font-weight: normal; font-style: normal; font-display: block; src: url("fonts/Phosphor-Fill.woff2") format("woff2"); }

.bento-dash {
  --bd-bg: #f1f2f4; --bd-tile: #ffffff; --bd-ink: #17181c; --bd-muted: #6b6f78; --bd-line: #e4e6ea;
  --bd-accent: #ea580c; --bd-accent-soft: #fff1e8; --bd-r: 22px;
  font-family: "Sora", system-ui, sans-serif; color: var(--bd-ink);
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  -webkit-font-smoothing: antialiased;
}
body.theme-v2 #account { background: var(--bd-bg, #f1f2f4); }
body.theme-v2 #account .account-shell { max-width: 1280px; }
.bento-dash button, .bento-dash input { font-family: inherit; }
.bento-dash a { color: inherit; }
.bento-dash [hidden], .bento-dash .bd-legacy { display: none !important; }

/* ---------- icons (only the classes this screen uses) ---------- */
.bento-dash .ph, .bento-dash .ph-bold, .bento-dash .ph-fill { font-style: normal; font-weight: normal; line-height: 1; display: inline-block; speak: never; -webkit-font-smoothing: antialiased; }
.bento-dash .ph, .bd-receipt .ph { font-family: "Phosphor" !important; }
.bento-dash .ph-bold, .bd-receipt .ph-bold { font-family: "Phosphor-Bold" !important; }
.bento-dash .ph-fill { font-family: "Phosphor-Fill" !important; }

/* ---------- header: hi + tabs + avatar ---------- */
.bento-dash .bd-top { display: flex; align-items: center; gap: 12px; padding: 4px 2px 16px; flex-wrap: wrap; }
.bento-dash .bd-hi small { display: block; color: var(--bd-muted); font-size: 13px; }
.bento-dash .bd-hi b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.bento-dash .bd-avatar { margin-left: auto; width: 44px; height: 44px; border-radius: 14px; background: var(--bd-ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; border: 0; cursor: pointer; overflow: hidden; padding: 0; }
.bento-dash .bd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bento-dash .udash-tabs.bd-seg { order: 3; width: 100%; display: flex; background: #e6e8ec; border-radius: 14px; padding: 4px; gap: 4px; margin: 0; border: 0; box-shadow: none; }
.bento-dash .bd-seg .udash-tab { flex: 1; border: 0; background: transparent; border-radius: 11px; padding: 10px 14px; font-weight: 700; font-size: 14px; color: var(--bd-muted); cursor: pointer; display: inline-flex; gap: 7px; align-items: center; justify-content: center; box-shadow: none; }
.bento-dash .bd-seg .udash-tab.active { background: #fff; color: var(--bd-ink); box-shadow: 0 2px 8px rgba(23, 24, 28, .08); }
.bento-dash .bd-seg .udash-tab-badge { background: var(--bd-accent); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; }
@media (min-width: 1000px) {
  .bento-dash .udash-tabs.bd-seg { order: 0; width: auto; margin-left: 24px; }
  .bento-dash .bd-seg .udash-tab { flex: none; padding: 9px 18px; }
}
.bento-dash .udash-tab-pane { display: none; }
.bento-dash .udash-tab-pane.active { display: block; }

/* ---------- layout ---------- */
.bento-dash .bd-split { display: grid; gap: 12px; }
@media (min-width: 1000px) {
  .bento-dash .bd-split { grid-template-columns: minmax(0, 1fr) 440px; gap: 20px; align-items: start; }
  .bento-dash .bd-mapcol { position: sticky; top: 110px; }
}
.bento-dash .bd-tiles { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-content: start; }
.bento-dash .bd-t { background: var(--bd-tile); border-radius: var(--bd-r); padding: 16px; position: relative; overflow: hidden; display: block; text-decoration: none; }
.bento-dash .bd-full { grid-column: 1 / -1; }
.bento-dash .bd-lbl { font-size: 12px; color: var(--bd-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.bento-dash .bd-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; }
.bento-dash .bd-h b { font-size: 15px; }
.bento-dash .bd-h a { font-size: 13px; color: var(--bd-accent); font-weight: 700; text-decoration: none; }

/* ---------- live map ---------- */
.bento-dash .bd-map { padding: 0; height: 380px; }
@media (min-width: 1000px) { .bento-dash .bd-map { height: calc(100vh - 150px); min-height: 480px; max-height: 760px; } }
.bento-dash #userTrackingMap { width: 100% !important; height: 100% !important; min-height: 0 !important; border-radius: 0 !important; margin: 0 !important; }
.bento-dash .bd-badge { position: absolute; z-index: 3; top: 14px; left: 14px; background: #fff; border-radius: 999px; padding: 8px 13px; font-size: 13px; font-weight: 700; display: flex; gap: 8px; align-items: center; box-shadow: 0 8px 22px rgba(23, 24, 28, .12); }
.bento-dash .bd-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--bd-accent); animation: bd-blink 1.4s infinite; }
.bento-dash .tracking-proximity { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; margin: 0; }
.bento-dash .tracking-proximity:not(.show) { display: none; }

/* ---------- live tiles ---------- */
.bento-dash .bd-eta { background: var(--bd-ink); color: #fff; }
.bento-dash .bd-eta .bd-lbl { color: #a3a7b0; }
.bento-dash .bd-eta b { display: block; font-size: 42px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: 12px; }
.bento-dash .bd-eta span:last-child { color: #a3a7b0; font-size: 13px; }
.bento-dash .bd-now { font-size: 17px; font-weight: 700; margin-top: 12px; }
.bento-dash .bd-seg5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 12px; }
.bento-dash .bd-seg5 i { height: 7px; border-radius: 4px; background: var(--bd-line); transform-origin: left; }
.bento-dash .bd-seg5 i.on { background: var(--bd-accent); animation: bd-grow .6s cubic-bezier(.16, 1, .3, 1) both; }
.bento-dash .bd-seg5 i.cur { background: var(--bd-accent); animation: bd-grow .6s cubic-bezier(.16, 1, .3, 1) both, bd-blink 1.6s 1s infinite; }
.bento-dash .bd-step small { display: block; margin-top: 8px; color: var(--bd-muted); font-size: 12px; }

/* rider card (written by the tracking code into #trackRiderCard) */
.bento-dash .bd-rider:empty { display: none; }
.bento-dash .bd-rider .track-rider { background: var(--bd-tile); border-radius: var(--bd-r); padding: 16px; display: flex; align-items: center; gap: 12px; border: 0; margin: 0; box-shadow: none; }
.bento-dash .bd-rider .track-rider::before { font-family: "Phosphor"; width: 48px; height: 48px; border-radius: 15px; background: var(--bd-accent-soft); color: var(--bd-accent); display: grid; place-items: center; font-size: 23px; flex: none; }
.bento-dash .bd-rider .track-rider > div { display: grid; gap: 1px; min-width: 0; }
.bento-dash .bd-rider .track-rider small { color: var(--bd-muted); font-size: 12.5px; }
.bento-dash .bd-rider .track-rider b { font-size: 15px; }
.bento-dash .bd-rider .track-rider-call { margin-left: auto; background: var(--bd-accent); color: #fff !important; border-radius: 15px; padding: 12px 16px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; }
.bento-dash .bd-rider .track-rider-waiting b { font-size: 14px; font-weight: 700; }

/* old tracking-card rules (styles.css body.theme-v2 .track-rider*) overridden on this screen only */
body.theme-v2 .bento-dash .bd-rider .track-rider { flex-wrap: nowrap; justify-content: flex-start; border: 0; border-radius: var(--bd-r); padding: 16px; margin: 0; opacity: 1; }
body.theme-v2 .bento-dash .bd-rider .track-rider small { display: block; font-size: 12.5px; color: var(--bd-muted); text-transform: none; letter-spacing: 0; }
body.theme-v2 .bento-dash .bd-rider .track-rider b { color: var(--bd-ink); }
body.theme-v2 .bento-dash .bd-rider .track-rider-call { background: var(--bd-accent); border-radius: 15px; padding: 12px 16px; font-size: 14px; }

.bento-dash .bd-row { display: flex; align-items: center; gap: 12px; }
.bento-dash .bd-row b { display: block; font-size: 15px; }
.bento-dash .bd-row small { color: var(--bd-muted); font-size: 12.5px; }
.bento-dash .bd-thumb { width: 58px; height: 58px; border-radius: 16px; object-fit: cover; flex: none; background: var(--bd-bg); }
.bento-dash .bd-price { margin-left: auto; font-size: 20px; font-weight: 800; white-space: nowrap; }
.bento-dash .bd-btn { background: var(--bd-accent); color: #fff; border: 0; border-radius: 15px; padding: 12px 16px; font-weight: 700; font-size: 14px; display: inline-flex; gap: 7px; align-items: center; cursor: pointer; white-space: nowrap; }
.bento-dash .bd-btn:active, .bento-dash .bd-ghost:active { transform: scale(.98); }

/* cancel box (written by the tracking code) */
.bento-dash #trackCancelBox:empty { display: none; }
.bento-dash #trackCancelBox { background: var(--bd-tile); border-radius: var(--bd-r); padding: 14px 16px; margin: 0; }

/* rewards, reorder, links */
.bento-dash .bd-reward { background: var(--bd-accent); color: #fff; }
.bento-dash .bd-reward .bd-lbl, .bento-dash .bd-reward span { color: #ffe4d4; }
.bento-dash .bd-reward b { display: block; font-size: 30px; font-weight: 800; margin-top: 10px; color: #fff; }
.bento-dash .bd-reward span { font-size: 12.5px; display: block; }
.bento-dash .bd-meter { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .3); margin-top: 10px; overflow: hidden; }
.bento-dash .bd-meter i { display: block; height: 100%; width: 0; background: #fff; border-radius: inherit; transition: width .6s ease; }
.bento-dash .bd-again { padding: 0; min-height: 150px; display: grid; }
.bento-dash .bd-again img { width: 100%; height: 100%; object-fit: cover; grid-area: 1 / 1; }
.bento-dash .bd-again div { grid-area: 1 / 1; align-self: end; margin: 10px; background: rgba(255, 255, 255, .95); border-radius: 15px; padding: 9px 10px; display: flex; align-items: center; gap: 8px; }
.bento-dash .bd-again b { font-size: 13px; display: block; }
.bento-dash .bd-again small { font-size: 12px; color: var(--bd-muted); }
.bento-dash .bd-again button { margin-left: auto; width: 34px; height: 34px; border-radius: 11px; border: 0; background: var(--bd-ink); color: #fff; display: grid; place-items: center; flex: none; cursor: pointer; }
.bento-dash .bd-link { display: grid; gap: 18px; align-content: space-between; cursor: pointer; color: var(--bd-ink); }
.bento-dash .bd-link .bd-big { font-size: 28px; color: var(--bd-accent); }
.bento-dash .bd-link b { font-size: 15px; }
.bento-dash .bd-link small { display: block; color: var(--bd-muted); font-size: 12.5px; margin-top: 2px; }

/* all orders list (rows written by the existing code) */
.bento-dash .bd-orders .dashboard-orders { display: grid; gap: 8px; }
.bento-dash .bd-orders .udash-order-row { width: 100%; border: 0; background: var(--bd-bg); border-radius: 16px; padding: 12px 14px; display: flex; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; font-family: inherit; color: var(--bd-ink); }
.bento-dash .bd-orders .udash-order-row b, .bento-dash .bd-orders .udash-order-row strong { font-size: 13.5px; }
.bento-dash .bd-orders .udash-order-row small, .bento-dash .bd-orders .udash-order-row span { font-size: 12px; }

/* ---------- no order on the way ---------- */
.bento-dash .bd-idlecol { display: none; gap: 12px; }
.bento-dash.bd-idle .bd-idlecol { display: grid; }
.bento-dash.bd-idle .bd-map, .bento-dash.bd-idle .bd-live { display: none !important; }
.bento-dash:not(.bd-idle) .bd-idle-only { display: none !important; }
.bento-dash.bd-idle .bd-mapcol { position: static; }
.bento-dash.bd-idle .bd-reward { grid-column: 1 / -1; }
.bento-dash .bd-hero { background: var(--bd-ink); color: #fff; padding: 22px; }
.bento-dash .bd-hero small { color: #a3a7b0; font-size: 13px; font-weight: 600; }
.bento-dash .bd-hero h2 { font-family: inherit; color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin: 6px 0 14px; max-width: 18ch; }
.bento-dash .bd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.bento-dash .bd-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #e7e8eb; border-radius: 999px; padding: 7px 11px; font-size: 12.5px; font-weight: 600; }
.bento-dash .bd-chip .open { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.bento-dash .bd-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.bento-dash .bd-ghost { background: transparent; color: #fff; border: 1.5px solid #3a3d45; border-radius: 15px; padding: 12px 16px; font-weight: 700; font-size: 14px; display: inline-flex; gap: 7px; align-items: center; cursor: pointer; }
.bento-dash .bd-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
@media (min-width: 1000px) { .bento-dash .bd-shelf { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; } }
.bento-dash .bd-item { scroll-snap-align: start; background: var(--bd-bg); border-radius: 18px; overflow: hidden; }
.bento-dash .bd-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #e6e8ec; }
.bento-dash .bd-item div { padding: 10px 12px 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.bento-dash .bd-item b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bento-dash .bd-item small { color: var(--bd-muted); font-size: 12px; grid-column: 1; }
.bento-dash .bd-item button { grid-row: 1 / 3; grid-column: 2; width: 36px; height: 36px; border-radius: 12px; border: 0; background: var(--bd-accent); color: #fff; display: grid; place-items: center; font-size: 17px; cursor: pointer; }
.bento-dash .bd-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bento-dash .bd-cat { text-align: center; color: var(--bd-ink); font-size: 12.5px; font-weight: 700; display: grid; gap: 8px; justify-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.bento-dash .bd-cat span { width: 100%; aspect-ratio: 1; border-radius: 20px; background: #e6e8ec center / cover no-repeat; }
.bento-dash .bd-last .bd-row { margin-top: 10px; }
.bento-dash .bd-last .bd-ok { display: inline-flex; gap: 6px; align-items: center; color: #15803d; font-size: 12.5px; font-weight: 700; margin-top: 12px; }
.bento-dash .bd-last .bd-acts2 { display: flex; gap: 8px; margin-top: 12px; }
.bento-dash .bd-last .bd-acts2 button { flex: 1; border-radius: 12px; padding: 10px; font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.bento-dash .bd-last .bd-a1 { background: var(--bd-accent-soft); color: var(--bd-accent); border: 0; }
.bento-dash .bd-last .bd-a2 { background: #fff; color: var(--bd-ink); border: 1.5px solid var(--bd-line); }

/* ---------- profile ---------- */
.bento-dash .bd-pgrid { display: grid; gap: 12px; }
.bento-dash .bd-stack { display: grid; gap: 12px; align-content: start; }
@media (min-width: 1000px) { .bento-dash .bd-pgrid { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } }
@media (max-width: 999px) {
  .bento-dash .bd-pgrid > .bd-stack { display: contents; }
  .bento-dash .bd-pgrid .bd-me { order: 1; } .bento-dash .bd-pgrid .bd-form { order: 2; } .bento-dash .bd-pgrid .bd-pair { order: 3; }
  .bento-dash .bd-pgrid .bd-list { order: 4; } .bento-dash .bd-pgrid .bd-danger { order: 5; }
}
.bento-dash .bd-me { display: flex; align-items: center; gap: 16px; background: var(--bd-ink); color: #fff; }
.bento-dash .bd-photo { position: relative; flex: none; }
.bento-dash .bd-photo .bd-av { width: 72px; height: 72px; border-radius: 22px; background: var(--bd-accent); display: grid; place-items: center; font-size: 28px; font-weight: 800; overflow: hidden; }
.bento-dash .bd-photo .bd-av img { width: 100%; height: 100%; object-fit: cover; }
.bento-dash .bd-photo label { position: absolute; right: -6px; bottom: -6px; width: 31px; height: 31px; border-radius: 10px; background: #fff; color: var(--bd-ink); display: grid; place-items: center; border: 3px solid var(--bd-ink); cursor: pointer; font-size: 14px; }
.bento-dash .bd-me h2 { font-family: inherit; color: #fff; font-size: 20px; letter-spacing: -.02em; margin: 0; }
.bento-dash .bd-me p { color: #a3a7b0; font-size: 13px; margin: 3px 0 0; overflow-wrap: anywhere; }
.bento-dash .bd-me .bd-rm { margin-left: auto; align-self: flex-start; background: transparent; color: #a3a7b0; border: 1px solid #33363d; border-radius: 12px; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; flex: none; }
.bento-dash .bd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bento-dash .bd-stat b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-top: 12px; }
.bento-dash .bd-stat span { font-size: 12.5px; color: var(--bd-muted); }
.bento-dash .bd-bday { background: var(--bd-accent-soft); }
.bento-dash .bd-bday .bd-big { font-size: 26px; color: var(--bd-accent); }
.bento-dash .bd-bday b { display: block; font-size: 15px; margin-top: 10px; }
.bento-dash .bd-bday span { font-size: 12.5px; color: var(--bd-muted); }
.bento-dash .bd-form { display: grid; gap: 14px; }
.bento-dash .bd-field { display: grid; gap: 7px; }
.bento-dash .bd-field label { font-size: 12.5px; font-weight: 700; display: flex; justify-content: space-between; gap: 8px; color: var(--bd-ink); }
.bento-dash .bd-field label small { color: var(--bd-muted); font-weight: 500; }
.bento-dash .bd-box { display: flex; align-items: center; gap: 10px; background: var(--bd-bg); border: 1.5px solid transparent; border-radius: 14px; padding: 0 14px; height: 50px; }
.bento-dash .bd-box:focus-within { border-color: var(--bd-accent); background: #fff; }
.bento-dash .bd-box i { color: var(--bd-muted); font-size: 18px; }
.bento-dash .bd-box input { border: 0 !important; background: transparent !important; outline: none; font-weight: 600; font-size: 15px; color: var(--bd-ink); width: 100%; min-width: 0; padding: 0 !important; height: 100%; box-shadow: none !important; }
.bento-dash .bd-box.locked input { color: var(--bd-muted); }
.bento-dash .bd-save { height: 52px; border: 0; border-radius: 15px; background: var(--bd-accent); color: #fff; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; width: 100%; }
.bento-dash .prof-save-status { font-size: 13px; font-weight: 600; min-height: 1em; }
.bento-dash .prof-save-status.success { color: #15803d; }
.bento-dash .prof-save-status.error { color: #b42318; }
.bento-dash .bd-list > * + * { border-top: 1px solid var(--bd-line); }
.bento-dash .bd-list h3 { font-family: inherit; font-size: 13px; color: var(--bd-muted); font-weight: 600; padding-bottom: 6px; margin: 0; }
.bento-dash .bd-list a { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 2px; text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--bd-ink); }
.bento-dash .bd-list .bd-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--bd-bg); display: grid; place-items: center; font-size: 18px; flex: none; }
.bento-dash .bd-list .bd-go { margin-left: auto; color: var(--bd-muted); }
.bento-dash .bd-danger { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.bento-dash .bd-danger p { font-size: 12.5px; color: var(--bd-muted); max-width: 46ch; margin: 0; }
.bento-dash .bd-danger .bd-acts3 { display: flex; gap: 10px; flex-wrap: wrap; }
.bento-dash .bd-danger button { border-radius: 13px; padding: 11px 14px; font-weight: 700; font-size: 13.5px; display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; cursor: pointer; }
.bento-dash .bd-out { background: var(--bd-ink); color: #fff; border: 0; }
.bento-dash .bd-del { background: #fff; color: #b42318; border: 1.5px solid #f3c4bf; }
.bento-dash #accountDeleteStatus { width: 100%; font-size: 13px; }

/* The old dashboard rules target #dashboardProfile p / span / b and .customer-dashboard h2 / p with an id or a
   body.theme-v2 prefix, which beats plain class rules. Reset them on this screen, then restate what we need. */
body.theme-v2 .bento-dash #dashboardProfile p { border: 0; background: none; padding: 0; border-radius: 0; }
body.theme-v2 .bento-dash #dashboardProfile span { display: revert; font-size: inherit; letter-spacing: normal; text-transform: none; color: inherit; font-weight: inherit; }
body.theme-v2 .bento-dash #dashboardProfile b { margin-top: 0; color: inherit; }
body.theme-v2 .bento-dash #dashboardProfile .bd-lbl { display: flex; font-size: 12px; color: var(--bd-muted); font-weight: 600; }
body.theme-v2 .bento-dash #dashboardProfile .bd-ic { display: grid; }
body.theme-v2 .bento-dash #dashboardProfile .bd-av span { display: block; }
body.theme-v2 .bento-dash #dashboardProfile .bd-bday span, body.theme-v2 .bento-dash #dashboardProfile .bd-stat span:not(.bd-lbl) { display: block; font-size: 12.5px; color: var(--bd-muted); }
body.theme-v2 .bento-dash #dashboardProfile .bd-bday b { display: block; margin-top: 10px; font-size: 15px; color: var(--bd-ink); }
body.theme-v2 .bento-dash #dashboardProfile .bd-stat b { display: block; margin-top: 12px; font-size: 18px; color: var(--bd-ink); }
body.theme-v2 .bento-dash #dashboardProfile .prof-save-status { display: block; font-size: 13px; font-weight: 600; }
body.theme-v2 .bento-dash #dashboardProfile .prof-save-status.success { color: #15803d; }
body.theme-v2 .bento-dash #dashboardProfile .prof-save-status.error { color: #b42318; }
body.theme-v2 .bento-dash .bd-me h2 { font-size: 20px; line-height: 1.2; margin: 0; color: #fff; letter-spacing: -.02em; }
body.theme-v2 .bento-dash .bd-me p { color: #a3a7b0; font-size: 13px; line-height: 1.4; margin: 3px 0 0; }
body.theme-v2 .bento-dash .bd-danger p { color: var(--bd-muted); font-size: 12.5px; line-height: 1.5; margin: 0; }
body.theme-v2 .bento-dash .bd-hero h2 { color: #fff; font-size: 30px; line-height: 1.12; margin: 6px 0 14px; letter-spacing: -.03em; }
body.theme-v2 .bento-dash .bd-hero small, body.theme-v2 .bento-dash .bd-hero p { color: #a3a7b0; }

@keyframes bd-grow { from { transform: scaleX(0); } }
@keyframes bd-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .bento-dash * { animation: none !important; transition: none !important; } }

/* the rider card's scooter badge uses the moped glyph */
.bento-dash .bd-rider .track-rider::before { content: "\e824"; }
.bento-dash .bd-avatar img { border-radius: inherit !important; }
.bento-dash .bd-box:has(.field-invalid) { border-color: #dc2626; }

/* ---------- receipt popup (appended to <body>) ---------- */
.bd-receipt { position: fixed; inset: 0; z-index: 120; background: rgba(23, 24, 28, .45); display: grid; place-items: center; padding: 16px; font-family: "Sora", system-ui, sans-serif; }
.bd-receipt .bdr-card { width: min(420px, 100%); background: #fff; color: #17181c; border-radius: 22px; padding: 20px; display: grid; gap: 6px; box-shadow: 0 30px 60px rgba(23, 24, 28, .25); }
.bd-receipt .bdr-head { display: flex; justify-content: space-between; align-items: center; }
.bd-receipt .bdr-head b { font-size: 17px; }
.bd-receipt .bdr-head button { width: 36px; height: 36px; border-radius: 12px; border: 0; background: #f1f2f4; font-size: 20px; cursor: pointer; }
.bd-receipt small { color: #6b6f78; font-size: 12.5px; }
.bd-receipt .bdr-lines { margin: 10px 0; display: grid; gap: 8px; border-top: 1px dashed #e4e6ea; padding-top: 12px; }
.bd-receipt .bdr-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.bd-receipt .bdr-total { font-weight: 800; border-top: 1px dashed #e4e6ea; padding-top: 10px; }

/* ---------- icon glyphs used on this screen (Phosphor 2.1.1, MIT) ---------- */
.bento-dash .ph.ph-arrow-counter-clockwise:before, .bd-receipt .ph.ph-arrow-counter-clockwise:before { content: "\e038"; }
.bento-dash .ph.ph-cake:before, .bd-receipt .ph.ph-cake:before { content: "\e780"; }
.bento-dash .ph.ph-camera:before, .bd-receipt .ph.ph-camera:before { content: "\e10e"; }
.bento-dash .ph.ph-caret-right:before, .bd-receipt .ph.ph-caret-right:before { content: "\e13a"; }
.bento-dash .ph.ph-check:before, .bd-receipt .ph.ph-check:before { content: "\e182"; }
.bento-dash .ph.ph-check-circle:before, .bd-receipt .ph.ph-check-circle:before { content: "\e184"; }
.bento-dash .ph.ph-clock:before, .bd-receipt .ph.ph-clock:before { content: "\e19a"; }
.bento-dash .ph.ph-confetti:before, .bd-receipt .ph.ph-confetti:before { content: "\e81a"; }
.bento-dash .ph.ph-file-text:before, .bd-receipt .ph.ph-file-text:before { content: "\e23a"; }
.bento-dash .ph.ph-gift:before, .bd-receipt .ph.ph-gift:before { content: "\e276"; }
.bento-dash .ph.ph-lock-simple:before, .bd-receipt .ph.ph-lock-simple:before { content: "\e308"; }
.bento-dash .ph.ph-moped:before, .bd-receipt .ph.ph-moped:before { content: "\e824"; }
.bento-dash .ph.ph-path:before, .bd-receipt .ph.ph-path:before { content: "\e39c"; }
.bento-dash .ph.ph-phone:before, .bd-receipt .ph.ph-phone:before { content: "\e3b8"; }
.bento-dash .ph.ph-phone-call:before, .bd-receipt .ph.ph-phone-call:before { content: "\e3ba"; }
.bento-dash .ph.ph-plus:before, .bd-receipt .ph.ph-plus:before { content: "\e3d4"; }
.bento-dash .ph.ph-receipt:before, .bd-receipt .ph.ph-receipt:before { content: "\e3ec"; }
.bento-dash .ph.ph-shield-check:before, .bd-receipt .ph.ph-shield-check:before { content: "\e40c"; }
.bento-dash .ph.ph-sign-out:before, .bd-receipt .ph.ph-sign-out:before { content: "\e42a"; }
.bento-dash .ph.ph-squares-four:before, .bd-receipt .ph.ph-squares-four:before { content: "\e464"; }
.bento-dash .ph.ph-storefront:before, .bd-receipt .ph.ph-storefront:before { content: "\e470"; }
.bento-dash .ph.ph-trash:before, .bd-receipt .ph.ph-trash:before { content: "\e4a6"; }
.bento-dash .ph.ph-user:before, .bd-receipt .ph.ph-user:before { content: "\e4c2"; }
.bento-dash .ph.ph-user-circle:before, .bd-receipt .ph.ph-user-circle:before { content: "\e4c4"; }
.bento-dash .ph.ph-warning-circle:before, .bd-receipt .ph.ph-warning-circle:before { content: "\e4e2"; }
.bento-dash .ph.ph-whatsapp-logo:before, .bd-receipt .ph.ph-whatsapp-logo:before { content: "\e5d0"; }
.bento-dash .ph.ph-x-circle:before, .bd-receipt .ph.ph-x-circle:before { content: "\e4f8"; }
.bento-dash .ph-bold.ph-arrow-counter-clockwise:before, .bd-receipt .ph-bold.ph-arrow-counter-clockwise:before { content: "\e038"; }
.bento-dash .ph-bold.ph-cake:before, .bd-receipt .ph-bold.ph-cake:before { content: "\e780"; }
.bento-dash .ph-bold.ph-camera:before, .bd-receipt .ph-bold.ph-camera:before { content: "\e10e"; }
.bento-dash .ph-bold.ph-caret-right:before, .bd-receipt .ph-bold.ph-caret-right:before { content: "\e13a"; }
.bento-dash .ph-bold.ph-check:before, .bd-receipt .ph-bold.ph-check:before { content: "\e182"; }
.bento-dash .ph-bold.ph-check-circle:before, .bd-receipt .ph-bold.ph-check-circle:before { content: "\e184"; }
.bento-dash .ph-bold.ph-clock:before, .bd-receipt .ph-bold.ph-clock:before { content: "\e19a"; }
.bento-dash .ph-bold.ph-confetti:before, .bd-receipt .ph-bold.ph-confetti:before { content: "\e81a"; }
.bento-dash .ph-bold.ph-file-text:before, .bd-receipt .ph-bold.ph-file-text:before { content: "\e23a"; }
.bento-dash .ph-bold.ph-gift:before, .bd-receipt .ph-bold.ph-gift:before { content: "\e276"; }
.bento-dash .ph-bold.ph-lock-simple:before, .bd-receipt .ph-bold.ph-lock-simple:before { content: "\e308"; }
.bento-dash .ph-bold.ph-moped:before, .bd-receipt .ph-bold.ph-moped:before { content: "\e824"; }
.bento-dash .ph-bold.ph-path:before, .bd-receipt .ph-bold.ph-path:before { content: "\e39c"; }
.bento-dash .ph-bold.ph-phone:before, .bd-receipt .ph-bold.ph-phone:before { content: "\e3b8"; }
.bento-dash .ph-bold.ph-phone-call:before, .bd-receipt .ph-bold.ph-phone-call:before { content: "\e3ba"; }
.bento-dash .ph-bold.ph-plus:before, .bd-receipt .ph-bold.ph-plus:before { content: "\e3d4"; }
.bento-dash .ph-bold.ph-receipt:before, .bd-receipt .ph-bold.ph-receipt:before { content: "\e3ec"; }
.bento-dash .ph-bold.ph-shield-check:before, .bd-receipt .ph-bold.ph-shield-check:before { content: "\e40c"; }
.bento-dash .ph-bold.ph-sign-out:before, .bd-receipt .ph-bold.ph-sign-out:before { content: "\e42a"; }
.bento-dash .ph-bold.ph-squares-four:before, .bd-receipt .ph-bold.ph-squares-four:before { content: "\e464"; }
.bento-dash .ph-bold.ph-storefront:before, .bd-receipt .ph-bold.ph-storefront:before { content: "\e470"; }
.bento-dash .ph-bold.ph-trash:before, .bd-receipt .ph-bold.ph-trash:before { content: "\e4a6"; }
.bento-dash .ph-bold.ph-user:before, .bd-receipt .ph-bold.ph-user:before { content: "\e4c2"; }
.bento-dash .ph-bold.ph-user-circle:before, .bd-receipt .ph-bold.ph-user-circle:before { content: "\e4c4"; }
.bento-dash .ph-bold.ph-warning-circle:before, .bd-receipt .ph-bold.ph-warning-circle:before { content: "\e4e2"; }
.bento-dash .ph-bold.ph-whatsapp-logo:before, .bd-receipt .ph-bold.ph-whatsapp-logo:before { content: "\e5d0"; }
.bento-dash .ph-bold.ph-x-circle:before, .bd-receipt .ph-bold.ph-x-circle:before { content: "\e4f8"; }
.bento-dash .ph-fill.ph-arrow-counter-clockwise:before, .bd-receipt .ph-fill.ph-arrow-counter-clockwise:before { content: "\e038"; }
.bento-dash .ph-fill.ph-cake:before, .bd-receipt .ph-fill.ph-cake:before { content: "\e780"; }
.bento-dash .ph-fill.ph-camera:before, .bd-receipt .ph-fill.ph-camera:before { content: "\e10e"; }
.bento-dash .ph-fill.ph-caret-right:before, .bd-receipt .ph-fill.ph-caret-right:before { content: "\e13a"; }
.bento-dash .ph-fill.ph-check:before, .bd-receipt .ph-fill.ph-check:before { content: "\e182"; }
.bento-dash .ph-fill.ph-check-circle:before, .bd-receipt .ph-fill.ph-check-circle:before { content: "\e184"; }
.bento-dash .ph-fill.ph-clock:before, .bd-receipt .ph-fill.ph-clock:before { content: "\e19a"; }
.bento-dash .ph-fill.ph-confetti:before, .bd-receipt .ph-fill.ph-confetti:before { content: "\e81a"; }
.bento-dash .ph-fill.ph-file-text:before, .bd-receipt .ph-fill.ph-file-text:before { content: "\e23a"; }
.bento-dash .ph-fill.ph-gift:before, .bd-receipt .ph-fill.ph-gift:before { content: "\e276"; }
.bento-dash .ph-fill.ph-lock-simple:before, .bd-receipt .ph-fill.ph-lock-simple:before { content: "\e308"; }
.bento-dash .ph-fill.ph-moped:before, .bd-receipt .ph-fill.ph-moped:before { content: "\e824"; }
.bento-dash .ph-fill.ph-path:before, .bd-receipt .ph-fill.ph-path:before { content: "\e39c"; }
.bento-dash .ph-fill.ph-phone:before, .bd-receipt .ph-fill.ph-phone:before { content: "\e3b8"; }
.bento-dash .ph-fill.ph-phone-call:before, .bd-receipt .ph-fill.ph-phone-call:before { content: "\e3ba"; }
.bento-dash .ph-fill.ph-plus:before, .bd-receipt .ph-fill.ph-plus:before { content: "\e3d4"; }
.bento-dash .ph-fill.ph-receipt:before, .bd-receipt .ph-fill.ph-receipt:before { content: "\e3ec"; }
.bento-dash .ph-fill.ph-shield-check:before, .bd-receipt .ph-fill.ph-shield-check:before { content: "\e40c"; }
.bento-dash .ph-fill.ph-sign-out:before, .bd-receipt .ph-fill.ph-sign-out:before { content: "\e42a"; }
.bento-dash .ph-fill.ph-squares-four:before, .bd-receipt .ph-fill.ph-squares-four:before { content: "\e464"; }
.bento-dash .ph-fill.ph-storefront:before, .bd-receipt .ph-fill.ph-storefront:before { content: "\e470"; }
.bento-dash .ph-fill.ph-trash:before, .bd-receipt .ph-fill.ph-trash:before { content: "\e4a6"; }
.bento-dash .ph-fill.ph-user:before, .bd-receipt .ph-fill.ph-user:before { content: "\e4c2"; }
.bento-dash .ph-fill.ph-user-circle:before, .bd-receipt .ph-fill.ph-user-circle:before { content: "\e4c4"; }
.bento-dash .ph-fill.ph-warning-circle:before, .bd-receipt .ph-fill.ph-warning-circle:before { content: "\e4e2"; }
.bento-dash .ph-fill.ph-whatsapp-logo:before, .bd-receipt .ph-fill.ph-whatsapp-logo:before { content: "\e5d0"; }
.bento-dash .ph-fill.ph-x-circle:before, .bd-receipt .ph-fill.ph-x-circle:before { content: "\e4f8"; }

/* QA 2026-10-06: a long name wraps beside the avatar on phones instead of pushing it onto its own line, and
   'Call branch' fills the row when there is no last-order tile next to it. */
@media (max-width: 999px) { .bento-dash .bd-hi { flex: 1 1 0; min-width: 0; } .bento-dash .bd-hi b { display: block; overflow-wrap: anywhere; } }
.bento-dash:not(.bd-idle) #bdAgainTile[hidden] ~ #bdCallBranch { grid-column: 1 / -1; }

/* UX pass 2026-10-06 */
.bento-dash .bd-stepnext { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--bd-accent); }
.bento-dash #bdStatusSub, .bento-dash .bd-rider small, .bento-dash .bd-row small, .bento-dash .bd-orders .udash-order-row small { font-size: 13px; }
.bento-dash #bdBill { cursor: pointer; }
.bento-dash #bdBill .bd-billhint { display: block; color: var(--bd-accent); font-weight: 700; font-size: 12px; margin-top: 2px; }
.bento-dash .bd-again button { width: 44px !important; height: 44px !important; }
.bento-dash .bd-count { font-size: 13px; color: var(--bd-muted); font-weight: 600; }
.bento-dash .bd-endnote { display: block; color: var(--bd-muted); font-size: 13px; margin-top: 4px; }
/* quieter cancel: still clear, no longer the loudest thing on the screen */
body .bento-dash .track-cancel-box .track-cancel-btn { background: #fff !important; color: #b42318 !important; border: 1.5px solid #f2b8b2 !important; box-shadow: none !important; }
/* unpaid online order note */
.bento-dash .bd-unpaid { display: flex; gap: 12px; align-items: flex-start; background: #fff7ed; border: 1.5px solid #fdba74; margin-bottom: 12px; }
.bento-dash .bd-unpaid[hidden] { display: none; }
.bento-dash .bd-unpaid .bd-big { color: #c2410c; font-size: 26px; }
.bento-dash .bd-unpaid b { display: block; font-size: 14.5px; }
.bento-dash .bd-unpaid small { display: block; color: var(--bd-muted); font-size: 13px; margin: 2px 0 10px; }
/* loading */
.bento-dash.bd-loading .bd-tiles, .bento-dash.bd-loading .bd-idlecol > :not(.bd-hero) { opacity: .45; pointer-events: none; }
/* orders list */
.bento-dash .bd-orders .udash-order-row { align-items: center; }
.bento-dash .bd-orders .uor-thumb { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; }
.bento-dash .bd-orders .uor-left { flex: 1; min-width: 0; }
.bento-dash .bd-orders .uor-left b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bento-dash .bd-orders .uor-left small { display: block; }
.bento-dash .bd-orders .uor-left .udash-badge { display: inline-block; margin-top: 5px; font-size: 11px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.bento-dash .bd-orders .uor-right { text-align: right; flex: none; }
.bento-dash .udash-badge.badge-bad { background: #fee4e2; color: #b42318; }
/* receipt */
.bd-receipt .bdr-note { margin: 10px 0 0; font-size: 13px; color: #b42318; line-height: 1.4; }
.bd-receipt .bdr-acts { display: grid; gap: 8px; margin-top: 14px; }
.bd-receipt .bdr-acts .bd-btn, .bd-receipt .bdr-acts .bd-ghost { width: 100%; justify-content: center; min-height: 44px; border-radius: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.bd-receipt .bdr-acts .bd-btn { background: #ea580c; color: #fff; border: 0; }
.bd-receipt .bdr-acts .bd-ghost { background: #fff; color: #b42318; border: 1.5px solid #f2b8b2; }
/* birthday boxes */
.bento-dash .bd-dob { display: grid; grid-template-columns: 0.8fr 1.4fr 1fr; gap: 8px; }
.bento-dash .bd-dob .bd-box { padding: 0 8px; }
.bento-dash .bd-dob select { width: 100%; border: 0; background: transparent; font: inherit; font-size: 15px; padding: 12px 2px; color: var(--bd-ink); }
.bento-dash .bd-unpaid .bd-acts2 { display: flex; gap: 8px; }
.bento-dash .bd-unpaid .bd-acts2 button { min-height: 42px; padding: 0 18px; border-radius: 12px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; display: inline-flex; gap: 6px; align-items: center; }
.bento-dash .bd-unpaid .bd-a1 { background: #ea580c; color: #fff; border: 0; }
.bento-dash .bd-unpaid .bd-a2 { background: #fff; color: #b42318; border: 1.5px solid #f2b8b2; }
.bento-dash .bd-orders .dashboard-orders { grid-template-columns: minmax(0, 1fr); }
.bento-dash .bd-orders .udash-order-row { min-width: 0; }

/* Notifications + fixes 4-9 (2026-10-06) */
.bd-banner { position: fixed; left: 12px; right: 12px; top: 10px; z-index: 10050; max-width: 520px; margin: 0 auto; display: flex; gap: 12px; align-items: center;
  background: #17181c; color: #fff; border-radius: 18px; padding: 12px 12px 12px 14px; box-shadow: 0 16px 40px rgba(0,0,0,.28); cursor: pointer;
  transform: translateY(-140%); transition: transform .35s cubic-bezier(.2,.9,.3,1.2); font-family: inherit; }
.bd-banner.show { transform: translateY(0); }
.bd-banner-ic { width: 44px; height: 44px; border-radius: 14px; background: #ea580c; display: grid; place-items: center; font-size: 22px; flex: none; }
.bd-banner-tx { flex: 1; min-width: 0; }
.bd-banner-tx b { display: block; font-size: 15px; }
.bd-banner-tx span { display: block; font-size: 13px; color: #d1d5db; margin-top: 2px; line-height: 1.35; }
.bd-banner button { background: #fff; color: #17181c; border: 0; border-radius: 12px; padding: 10px 14px; font-weight: 800; font-family: inherit; cursor: pointer; flex: none; }
.bento-dash .bd-notify { display: flex; gap: 12px; align-items: flex-start; background: #eef6ff; border: 1.5px solid #bfdbfe; margin-bottom: 12px; }
.bento-dash .bd-notify[hidden] { display: none; }
.bento-dash .bd-notify .bd-big { color: #2563eb; font-size: 26px; }
.bento-dash .bd-notify b { display: block; font-size: 14.5px; }
.bento-dash .bd-notify small { display: block; color: var(--bd-muted); font-size: 13px; margin: 2px 0 10px; }
.bento-dash .bd-notify .bd-a1 { min-height: 42px; padding: 0 18px; border-radius: 12px; border: 0; background: #2563eb; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; }
.bd-receipt .bdr-share { margin-top: 12px; }
.bd-receipt .bdr-share button { width: 100%; min-height: 44px; border-radius: 12px; border: 1.5px solid #bbf7d0; background: #f0fdf4; color: #15803d; font-weight: 700; font-family: inherit; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.hbc-confirm-card .bd-del-check { display: flex; gap: 10px; align-items: center; margin: 12px 0 4px; font-weight: 600; font-size: 14px; cursor: pointer; text-align: left; }
.hbc-confirm-card .bd-del-check input { width: 20px; height: 20px; accent-color: #dc2626; }
.hbc-confirm-card .hbc-confirm-ok:disabled { opacity: .45; cursor: not-allowed; }

/* Trip (2026-10-22): "N deliveries before yours" covers the map until this customer is next */
.bd-map.bd-trip-wait .route-canvas { opacity:.22; filter:grayscale(1); }
.bd-trip-note { position:absolute; left:12px; right:12px; bottom:12px; z-index:6; background:#fff; border-radius:14px; padding:12px 14px; box-shadow:0 8px 24px rgba(15,23,42,.18); font-size:14px; }
.bd-trip-note small { display:block; color:#64748b; margin-top:3px; font-size:12.5px; }
/* Just delivered (2026-10-25): the map card says so plainly — no scooter, no line. */
.bd-map.bd-done .tracking-proximity { display:none; }
.bd-done-note { position:absolute; left:16px; right:16px; top:50%; transform:translateY(-50%); z-index:6; text-align:center; background:#fff; border-radius:18px; padding:18px 16px; box-shadow:0 10px 28px rgba(15,23,42,.12); }
.bd-done-note .bd-done-ic { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 8px; border-radius:50%; background:#dcfce7; color:#15803d; font-size:28px; font-weight:800; }
.bd-done-note b { display:block; font-size:19px; color:#14532d; }
.bd-done-note small { display:block; margin-top:4px; color:#475569; font-size:13.5px; }
.busy-note { margin-top:10px; padding:10px 12px; border-radius:10px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; font-size:13px; }