/* ---------------------------------------------------------------------------
   Mapstore web client styles.

   Design tokens follow the brief: a neutral light-grey base with translucent
   "frosted glass" panels floating over the map. No dark slate, no bright
   accent green.

   Layout: pre-search renders a centred hero card. Post-search the body
   becomes a two-column grid on >= 960 px viewports (list 40 / map 60),
   stacked on narrow screens (map on top, list below).
   --------------------------------------------------------------------------- */

:root {
  /* base */
  --bg: #ECEEF1;
  --ink: #1B1F24;
  --ink-soft: #5B636C;
  --hairline: rgba(27, 31, 36, 0.10);

  /* glass surfaces */
  --glass: rgba(248, 249, 251, 0.72);
  --glass-strong: rgba(248, 249, 251, 0.88);
  --glass-edge: rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 8px 30px rgba(20, 26, 33, 0.12);

  /* neutral accent (CTAs / selected chips) */
  --accent: #2B2F36;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(43, 47, 54, 0.08);

  /* route + primary-stop emphasis */
  --route: #0E5C4A;

  /* semantic availability */
  --confirmed: #2F7D52;
  --likely: #B07A2E;
  --unconfirmed: #8A8F8B;

  /* shapes */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --pill: 999px;

  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }

/* ----------- Icon palette -------------------------------------------------
   All FontAwesome icons inherit the brand dark green by default. The two
   exceptions (rating star, "like" heart) carry their own class-level
   overrides further down the stylesheet. */
.fa-solid,
.fa-regular,
.fa-brands { color: var(--route); }

/* Reset for icons rendered inside a coloured surface where the parent
   already paints the icon (e.g. the white "Directions" pill on merchant
   cards). These keep `color: inherit` so the green default does not fight
   the surface contrast. */
.mc-action-primary .fa-solid,
.mc-action-primary .fa-regular,
.mc-action-primary .fa-brands,
.cta .fa-solid,
.cta .fa-regular,
.cta .fa-brands { color: inherit; }

/* Heart / like icon stays red regardless of context. */
.fa-heart,
.icon-heart .fa-solid,
.icon-heart .fa-regular { color: #dc2626; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  /* Prevent any descendant (eg. an off-screen chip tooltip, an
     over-wide map tile pane) from extending the page horizontally.
     `clip` is preferred over `hidden` because it does not create a
     new scroll container and therefore plays nicely with our sticky
     header / sticky map column. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
}

body {
  /* A subtle gradient so the glass panels have something to refract. */
  background:
    radial-gradient(1200px 800px at 20% -10%, #DBE3EC 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 110%, #D8E6E0 0%, transparent 55%),
    var(--bg);
  min-height: 100vh;
}

button { font: inherit; }

/* ---------- glass primitives --------------------------------------------- */

.glass,
.glass-strong {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid var(--hairline);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge);
  border-radius: var(--radius-lg);
}
.glass-strong { background: var(--glass-strong); }

/* Fallback for browsers without backdrop-filter (Firefox in default config,
   older Safari). Swap to near-opaque so text never goes unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .glass-strong { background: rgba(248, 249, 251, 0.97); }
}

/* ---------- top bar ------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 12px;
  /* Leaflet's internal panes go up to z-index 800 (controls, popups);
     keep the topbar above them so the logo, cart and account buttons
     stay visible when the map scrolls under the header. */
  z-index: 900;
  margin: 12px 16px 0;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: var(--pill);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  /* Slightly negative top margin so the cursive wordmark's optical baseline
     aligns with the tagline next to it. */
  margin-top: -2px;
}
.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}
.brand-logo {
  display: block;
  height: 38px;
  width: auto;
  /* The bundled PNG has a hairline drop shadow already baked in, so we let
     it render as-is rather than adding a CSS filter on top. */
  user-select: none;
}
@media (max-width: 720px) {
  .brand-logo { height: 32px; }
}
.brand-tag {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  flex: 1;
}

/* Header right: cart + account affordances (spec section 15). The
   tagline is hidden on narrow viewports so the action buttons stay
   visible without crowding the brand. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.header-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--pill);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 13.5px;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.header-btn:hover {
  background: rgba(255, 255, 255, 0.85);
}
.header-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.header-btn-label { font-weight: 500; }
.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 6px rgba(20, 26, 33, 0.18);
}
@media (max-width: 720px) {
  .brand-tag { display: none; }
  .header-btn-label { display: none; }
  .header-btn { padding: 0 10px; }
}

/* ---------- side panels (cart, account, claim) ------------------------- */

.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 26, 33, 0.32);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex;
  justify-content: flex-end;
}
.side-panel {
  /* Mirror the topbar's `margin: 12px 16px 0` on the right so the modal
     looks like it drops down from the header's action cluster (cart +
     account) instead of running flush against the viewport edge.
     The narrower 360 px width keeps the modal closer to a header
     popover than to a full-height drawer, so its left edge falls
     under the right portion of the header pill. On very small phones
     `calc(100vw - 32px)` shrinks the panel further so the 16 px right
     margin is honoured even when the canonical width would overflow. */
  width: min(360px, calc(100vw - 32px));
  /* Detached from the viewport top: the panel sits as a card 5 px below
     the floating header pill. Measured topbar bottom edge on the live
     site is y = 76 px (sticky at top: 12 px, glass pill with 1 px border
     and slight extra leading), so panel top = 76 + 5 = 81 px. */
  height: calc(100vh - 81px);
  margin-top: 81px;
  margin-right: 16px;
  display: flex;
  flex-direction: column;
  background: rgba(248, 249, 251, 0.96);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  backdrop-filter: blur(24px) saturate(120%);
  border-left: 1px solid var(--hairline);
  box-shadow: -12px 0 40px rgba(20, 26, 33, 0.18);
  animation: slide-in 220ms ease-out;
  /* Soft rounded top corners now that the panel no longer hides behind
     the header; keep the bottom corners flat since the panel still
     reaches the viewport bottom edge. */
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
@keyframes slide-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.side-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
}
.side-panel-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.side-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.side-panel-foot {
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  background: rgba(248, 249, 251, 0.98);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--pill);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.9); }
.icon-btn.small { width: 26px; height: 26px; font-size: 12px; }

.cart-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.55);
}
.cart-line-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-line-title {
  font-weight: 600;
  flex: 1;
}
.cart-line-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 13px;
}
.cart-line-costs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13.5px;
}
.cart-line-costs li {
  display: flex;
  justify-content: space-between;
  color: var(--ink-soft);
}
.cart-line-costs li span { color: var(--ink); font-variant-numeric: tabular-nums; }
.cart-foot-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
}
.cart-foot-total strong { font-size: 22px; font-variant-numeric: tabular-nums; }

.account-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.55);
}
.account-block h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.account-note {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.account-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.account-menu li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.account-menu li:last-child { border-bottom: none; }
.empty {
  margin: 16px 0;
  color: var(--ink-soft);
  font-size: 14px;
  text-align: center;
}

/* ---------- shell layout ------------------------------------------------- */

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px;
  align-items: start;
}

/* Pre-search: hide the map column entirely and let the list panel breathe. */
.shell:not(.has-result) .panel-map { display: none; }
.shell:not(.has-result) .layout {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
  padding-top: 6vh;
}

.panel-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* The map column. Sticky on wide screens so the user can scroll the list
   without losing the map. `isolation: isolate` creates a stacking context
   so Leaflet's internal z-indices (up to 800 for controls/popups) cannot
   poke through the sticky header. */
.panel-map {
  position: relative;
  isolation: isolate;
  z-index: 0;
  min-width: 0;
  min-height: 280px;
}

/* Desktop / tablet landscape: two-column split. */
@media (min-width: 960px) {
  .shell.has-result .layout {
    grid-template-columns: minmax(420px, 40fr) minmax(0, 60fr);
  }
  .shell.has-result .panel-list {
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding-right: 4px;
  }
  .shell.has-result .panel-map {
    position: sticky;
    top: 90px;
    height: calc(100vh - 110px);
  }
}

/* Narrow screens: stack with the map pinned on top of the list.
   The map breaks out of the `.layout` padding (16 px) and is pulled up
   further so its top edge sits BEHIND the floating header (sticky at
   top: 12 px, ~62 px tall). The topbar's z-index (900) keeps it above
   the map, producing an Airbnb-style "header floats over map" effect
   without a visible gap on phones / narrow tablets. */
@media (max-width: 959.98px) {
  .shell.has-result .layout {
    grid-template-columns: 1fr;
  }
  .shell.has-result .panel-map {
    order: -1;
    height: 50vh;
    min-height: 320px;
    /* -90 px = 16 px parent padding + ~74 px topbar (margin + box) so
       the map's top edge reaches y = 0 of the viewport, behind the
       floating header. -16 px on the sides cancels the parent padding
       so the map spans 100% of the device width. */
    margin: -90px -16px 0;
    width: auto;
  }
  .shell.has-result .panel-map .map-shell {
    /* Edge-to-edge map under a phone-width viewport: kill the rounded
       corners, border and shadow that look great inside the desktop
       column but become visual noise when the map fills the screen. */
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
  /* Leaflet anchors its zoom control in the top-left corner by default,
     which sits behind the floating header once the map slides under it.
     Re-park the whole top-left corner to the bottom on narrow screens so
     +/- stay tappable. `env(safe-area-inset-bottom)` keeps clearance from
     the iOS home indicator. */
  .shell.has-result .panel-map .leaflet-top.leaflet-left {
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* ---------- search card -------------------------------------------------- */

.search-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.search-input {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font: inherit;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.search-input::placeholder { color: var(--ink-soft); }
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cta {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--pill);
  padding: 10px 22px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s ease;
}
.cta:hover { background: #14171B; }
.cta:active { transform: translateY(1px); }
.cta:disabled { opacity: 0.6; cursor: progress; }
.cta-light { background: #FFFFFF; color: var(--ink); border: 1px solid var(--hairline); }

/* Stacked CTA used by the account panel: primary action on top, a
   secondary alternative reading "Ou creer un compte" 10 px below.
   Keeps the pill geometry of `.cta`, only changes the inner layout. */
.cta-stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.15;
  padding: 12px 22px;
  text-align: center;
}
.cta-stacked .cta-primary {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1px;
}
.cta-stacked .cta-secondary {
  /* Second line is rendered 10 px smaller than the primary label and
     with a lighter weight so the call to action stays focused on "Se
     connecter" while the alternative remains discoverable. */
  font-size: 11px;
  font-weight: 500;
  opacity: 0.82;
  letter-spacing: 0.2px;
  /* The secondary line is its own click target (opens the modal on the
     register tab). The cursor stays the parent button's `pointer`,
     but we hint a focusable label by underlining on hover. */
  border-radius: 6px;
  padding: 2px 6px;
  margin-top: 2px;
}
.cta-stacked .cta-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Logged-in identity card (inside the account panel) ------ */

.account-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--hairline);
  background: #FFFFFF;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.account-avatar {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(20, 23, 27, 0.06);
  color: var(--accent);
  font-size: 18px;
  flex: 0 0 40px;
}
.account-identity-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.account-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-email {
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-role-pill {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(20, 23, 27, 0.08);
  color: var(--ink);
  margin-top: 2px;
}
.account-signout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
}

/* ---------- Auth modal (login + signup) ----------------------------- */

.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 13, 16, 0.55);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: auth-fade-in 140ms ease-out;
}
@keyframes auth-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.auth-modal {
  width: min(420px, 100%);
  max-height: calc(100vh - 32px);
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(11, 13, 16, 0.30);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.auth-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
}
.auth-modal-head h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.auth-tabs {
  display: flex;
  padding: 0 20px;
  border-bottom: 1px solid var(--hairline);
  background: #F8F9FB;
}
.auth-tab {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  position: relative;
  transition: color 0.12s ease;
}
.auth-tab.is-active {
  color: var(--ink);
}
.auth-tab.is-active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.auth-tab:hover { color: var(--ink); }

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.auth-input {
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.auth-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20, 23, 27, 0.12);
}
.auth-error {
  font-size: 13px;
  font-weight: 500;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 10px 12px;
  border-radius: 10px;
}
.auth-submit {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
}
.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.auth-link {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-link:hover { color: #14171B; }

/* ---------- Account sub-pages -------------------------------------- */

.account-back {
  margin-right: 6px;
}
.account-back .fa-rotate-180 {
  /* Reuse the `circle-info` glyph rotated 180 deg so we do not pull a
     second icon for the back arrow. */
  transform: rotate(180deg);
}

.account-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.account-menu li { margin: 0; }
.account-menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.account-menu-row:hover { background: rgba(20, 23, 27, 0.06); }
.account-menu-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.account-menu-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}
.account-menu-chevron {
  /* `circle-info` glyph reused as a chevron at the row end. */
  opacity: 0.45;
  font-size: 12px;
}
.account-menu-row.is-disabled {
  cursor: not-allowed;
  color: var(--ink-soft);
}
.account-menu-row.is-disabled:hover { background: transparent; }
.account-menu-hint {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-soft);
  text-transform: uppercase;
}

/* Mes affaires - stat grid */
.affaires-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.affaires-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.affaires-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  color: var(--ink-soft);
}
.affaires-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.affaires-stat-hint {
  font-size: 12px;
  color: var(--ink-soft);
  word-break: break-all;
}
.affaires-stat-link {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: 2px;
}

/* Toasts shown inline at the top of a sub-page */
.account-toast {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  margin-bottom: 10px;
}
.account-toast.is-ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

/* Profile editor (Mon profil) */
.profile-editor { display: flex; flex-direction: column; gap: 16px; }
.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-photo-preview {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}
.profile-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-photo-initials {
  font-size: 28px;
  font-weight: 700;
  color: rgba(31, 41, 51, 0.55);
}
.profile-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-photo-pick {
  cursor: pointer;
}
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile-bio {
  resize: vertical;
  min-height: 84px;
  font-family: inherit;
}
.profile-addresses-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.profile-addresses-link p { margin: 2px 0 0 0; }
.auth-hint {
  font-size: 12px;
  color: rgba(31, 41, 51, 0.55);
  margin-left: 6px;
}

/* Address cards (Mes adresses) */
.address-card {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.address-card.is-default { border-color: var(--accent); }
.address-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.address-card-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.address-card-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
}
.address-card-line {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
}
.address-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.cta-tight {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
}
.cta.is-danger,
.cta-light.is-danger {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}
.cta.is-danger:hover,
.cta-light.is-danger:hover {
  background: #fee2e2;
}

/* Address form */
.address-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  margin-top: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: #F8F9FB;
}
.address-form h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
}
.address-form-row {
  display: flex;
  gap: 10px;
}
.address-form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
}
.address-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* Generic empty state used by Mes commandes / Mes paiements / Mon commerce */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 24px 16px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  color: var(--ink-soft);
}
.empty-state h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.empty-state p {
  margin: 0;
  font-size: 13px;
}
.empty-state-icon {
  font-size: 24px;
  opacity: 0.45;
}

/* Reclamer un commerce - ordered steps */
.account-steps {
  padding-left: 20px;
  margin: 0 0 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}
.account-steps li::marker {
  color: var(--accent);
  font-weight: 700;
}

/* Centre d aide - collapsible FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}
.faq-item > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  padding: 4px 0;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '+';
  float: right;
  font-weight: 400;
  color: var(--ink-soft);
}
.faq-item[open] > summary::after { content: '-'; }
.faq-item p {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 6px 0 2px 0;
}

/* Confidentialite - legal copy */
.account-block.legal h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 12px 0 4px 0;
  color: var(--ink);
}
.account-block.legal h4:first-of-type { margin-top: 0; }
.account-block.legal p {
  font-size: 13px;
  color: var(--ink);
  margin: 0 0 6px 0;
  line-height: 1.45;
}

.user-loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 13px;
}
.loc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563EB;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.chip {
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--pill);
  padding: 6px 12px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.chip:hover { background: rgba(255, 255, 255, 0.95); }

/* Personal search history rail under the Rechercher button + location.
   Rendered only when the shopper has at least one prior query stored. */
.history-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.history-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.history-clear {
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.history-clear:hover { color: var(--ink); background: rgba(0,0,0,0.05); }
.history-chips { margin-top: 0; }
.history-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.history-chip svg { opacity: 0.55; font-size: 11px; flex: 0 0 auto; }
.history-chip-text {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .history-chip-text { max-width: 200px; }
}

/* ---------- plan strip --------------------------------------------------- */

.section-title {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 14px 4px 6px;
  font-weight: 700;
}

.plan-strip {
  display: flex;
  /* `align-items: flex-start` so each chip is sized to its own intrinsic
     height instead of being stretched to the row baseline (which collapsed
     them to 22 px). */
  align-items: flex-start;
  /* Let chips wrap onto a second row when the panel is too narrow for
     all of them. The previous `overflow-x: auto` turned this element
     into a scroll container which, as a flex item inside the
     column-flex `.panel-list` (max-height + overflow-y: auto on
     desktop), was free to collapse vertically to 8 px and hide the
     chips behind the next card. Wrapping side-steps that entirely. */
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0;
  /* Belt-and-braces: never let the parent column flex shrink us
     vertically below our intrinsic content height. */
  flex: 0 0 auto;
  min-height: 72px;
}

.plan-chip {
  flex: 0 0 auto;
  min-width: 168px;
  min-height: 64px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 26, 33, 0.06);
  transition: transform 0.08s ease, background 0.12s ease, color 0.12s ease;
  user-select: none;
}
.plan-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-chip > * + * { margin-top: 2px; }
.plan-chip:hover { transform: translateY(-1px); }
.plan-chip.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.plan-chip.active .plan-meta,
.plan-chip.active .plan-meta.dim { color: rgba(255, 255, 255, 0.82); }

.plan-label { font-weight: 700; font-size: 13.5px; }
.plan-meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.plan-meta.dim { opacity: 0.85; }

/* ---------- plan summary ------------------------------------------------- */

.plan-summary { padding: 14px 16px; }
.plan-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plan-summary-stops { font-weight: 800; font-size: 18px; }
.plan-summary-dist { color: var(--ink-soft); font-size: 13px; }
.plan-summary-price { font-weight: 800; font-size: 22px; }

/* ---------- stops list --------------------------------------------------- */

.stops {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stop-card {
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.12s ease;
}
.stop-card:hover { transform: translateY(-1px); }
.stop-card.primary { border-color: var(--route); }
.stop-card.selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.stop-pin {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  border: 2px solid;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.stop-pin.primary {
  width: 32px;
  height: 32px;
  font-size: 14px;
  outline: 2px solid var(--route);
  outline-offset: 2px;
}

.stop-body { flex: 1; min-width: 0; }
.stop-name { font-weight: 700; font-size: 15px; display: block; }
.stop-addr { color: var(--ink-soft); font-size: 12.5px; margin: 2px 0 8px; }

.line-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.line-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
}
.line-item-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.line-item-title { color: var(--ink-soft); }
.line-item-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* ---------- FontAwesome icon chips -------------------------------------- */

.badge-stack { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0; }

.fa-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.fa-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border-radius: 8px;
  background: rgba(43, 47, 54, 0.06);
  color: var(--ink);
  font-size: 11px;
  cursor: help;
  border: 1px solid var(--hairline);
  transition: background 0.12s ease;
}
.fa-chip:hover { background: rgba(43, 47, 54, 0.12); }
.fa-chip i { font-size: 12px; line-height: 1; }
/* Chip tone variants. All three share the same neutral pill background
   so the offer-card icon row reads as a single, cohesive group instead
   of three competing accent palettes. The tone classes remain in place
   for downstream logic (panel content, future per-category emphasis)
   but no longer change the chip's resting colour. The icon itself is
   coloured globally to `var(--route)` (dark green) by an earlier rule
   on `.fa-solid`. */
.fa-chip-logistics,
.fa-chip-service,
.fa-chip-overflow {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.18);
  color: #1d4fc0;
}
.fa-chip-overflow {
  font-weight: 700;
  padding: 0 6px;
  width: auto;
  min-width: 26px;
}

/* Interactive chip turned into a real button (no native button chrome). */
button.fa-chip {
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  transition: background 0.12s ease, transform 0.12s ease;
}
button.fa-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button.fa-chip.is-open {
  background: rgba(43, 47, 54, 0.16);
  transform: translateY(-1px);
}
button.fa-chip-logistics.is-open,
button.fa-chip-service.is-open,
button.fa-chip-overflow.is-open {
  background: rgba(37, 99, 235, 0.20);
}

/* Rich hover/focus tooltip rendered above the chip. CSS-only: appears on
   hover and keyboard focus, dismisses when either leaves. The tip is
   hidden while the chip's collapsible panel is open (the panel already
   carries the same information). */
.fa-chip-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 140px;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(20, 26, 33, 0.94);
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 30;
  box-shadow: 0 8px 20px rgba(20, 26, 33, 0.18);
}
.fa-chip-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(20, 26, 33, 0.94);
}
.fa-chip-tip-label { display: block; font-weight: 600; }
.fa-chip-tip-sub {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}
.fa-chip:hover .fa-chip-tip,
.fa-chip:focus-visible .fa-chip-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 120ms;
}
.fa-chip.is-open .fa-chip-tip { opacity: 0 !important; }

/* First chip in a row: tooltip anchored to the chip's left edge so it
   cannot bleed past the offer-card / panel-list boundary on the left
   (which was clipping its label and pushing the page horizontally). */
.fa-chip-row > .fa-chip:first-child .fa-chip-tip {
  left: 0;
  transform: translateX(0) translateY(4px);
}
.fa-chip-row > .fa-chip:first-child .fa-chip-tip::after {
  left: 13px;
  transform: translateX(-50%);
}
.fa-chip-row > .fa-chip:first-child:hover .fa-chip-tip,
.fa-chip-row > .fa-chip:first-child:focus-visible .fa-chip-tip {
  transform: translateX(0) translateY(0);
}

/* Symmetric right-anchor on the last chip so multi-chip rows in narrow
   cards do not push the tooltip past the right edge either. */
.fa-chip-row > .fa-chip:last-child .fa-chip-tip {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(4px);
}
.fa-chip-row > .fa-chip:last-child .fa-chip-tip::after {
  left: auto;
  right: 13px;
  transform: translateX(50%);
}
.fa-chip-row > .fa-chip:last-child:hover .fa-chip-tip,
.fa-chip-row > .fa-chip:last-child:focus-visible .fa-chip-tip {
  transform: translateX(0) translateY(0);
}

/* Inline collapsible details panel below the chip row. Shows the
   tooltip's content in long form, with extra metadata (pricing,
   duration, insurance). */
.badge-panel {
  position: relative;
  margin-top: 2px;
  padding: 10px 36px 10px 12px;
  border-radius: 10px;
  background: rgba(43, 47, 54, 0.04);
  border: 1px solid rgba(43, 47, 54, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: badgePanelOpen 0.18s ease;
}
.badge-panel[hidden] { display: none; }
@keyframes badgePanelOpen {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.badge-panel-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.badge-panel-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }
.badge-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.badge-panel-icon { font-size: 18px; color: var(--ink); }
.badge-panel-title { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.badge-panel-sub { color: var(--ink-soft); font-size: 12px; }
.badge-panel-price {
  margin-left: auto;
  font-weight: 700;
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
}
.badge-panel-body {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}
.badge-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.badge-panel-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(43, 47, 54, 0.06);
  font-size: 11.5px;
  color: var(--ink-soft);
}
.badge-panel-tag i { font-size: 10px; }
.badge-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.badge-panel-svc {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px dashed rgba(43, 47, 54, 0.10);
}
.badge-panel-svc:first-child { border-top: 0; }
.badge-panel-svc-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.badge-panel-svc-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.badge-panel-svc-title .badge-panel-price { font-weight: 600; }

/* ---------- Add-to-cart sheet ------------------------------------------ */

.atc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 13, 16, 0.45);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
}

.atc-sheet {
  width: min(560px, 100%);
  max-height: 92vh;
  border-radius: 18px;
  background: rgba(248, 249, 251, 0.96);
  box-shadow: 0 24px 60px rgba(11, 13, 16, 0.30);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.atc-head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(248, 249, 251, 0.96);
}

.atc-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 12px;
  min-height: 0;
}

.atc-product { font-weight: 800; font-size: 16px; }
.atc-merchant { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }

.atc-close {
  background: rgba(43, 47, 54, 0.06);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
}
.atc-close:hover { background: rgba(43, 47, 54, 0.16); }

.atc-section {
  margin-top: 16px;
}
.atc-h3 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

.atc-mode {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--hairline);
  cursor: pointer;
  margin-bottom: 6px;
}
.atc-mode.active {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: rgba(43, 47, 54, 0.05);
}
.atc-mode-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(37, 99, 235, 0.10);
  border-radius: 8px;
  color: #1d4fc0;
}
.atc-mode-label { flex: 1; font-weight: 700; }
.atc-mode-fee { font-weight: 700; color: var(--ink); }

.atc-pickup-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 8px 4px 0;
}

.atc-receiver {
  margin-top: 10px;
}
.atc-receiver-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.atc-address {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  margin-bottom: 6px;
}
.atc-address.active {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: rgba(43, 47, 54, 0.05);
}
.atc-address-label { font-weight: 700; font-size: 14px; }
.atc-address-line { color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
.atc-live .atc-address-label { display: inline-flex; align-items: center; gap: 6px; }

.atc-service {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--hairline);
  cursor: pointer;
  margin-bottom: 6px;
}
.atc-service.selected {
  outline: 2px solid var(--confirmed);
  outline-offset: -2px;
  background: rgba(47, 125, 82, 0.08);
}
.atc-service-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(47, 125, 82, 0.10);
  border-radius: 8px;
  color: #1f6041;
}
.atc-service-body { flex: 1; min-width: 0; }
.atc-service-label { font-weight: 700; font-size: 14px; }
.atc-service-descr {
  color: var(--ink-soft); font-size: 12.5px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.atc-service-price {
  font-weight: 700;
  white-space: nowrap;
  font-size: 13px;
}

.atc-foot {
  flex: 0 0 auto;
  padding: 12px 16px 16px;
  background: rgba(248, 249, 251, 0.96);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -8px 24px rgba(11, 13, 16, 0.08);
}
.atc-total-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.atc-total-grand {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 800;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
}
.atc-confirm {
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  font-size: 15px;
}
.atc-loading {
  color: var(--ink-soft);
  font-size: 13px;
  margin: 4px;
}

/* ---------- Clickable product + merchant link buttons ------------------- */

.link-product,
.link-merchant {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: inline-block;
  max-width: 100%;
}

.link-product:hover,
.link-product:focus-visible,
.link-merchant:hover,
.link-merchant:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.link-merchant {
  color: var(--accent);
  font-weight: 700;
}

.link-product {
  color: var(--ink);
}

/* ---------- Product + merchant detail sheets ---------------------------- */

.detail-attrs {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}
.detail-attrs th,
.detail-attrs td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--hairline);
}
.detail-attrs th {
  color: var(--ink-soft);
  font-weight: 600;
  width: 40%;
}
.detail-attrs td { color: var(--ink); }
.detail-attrs tr:last-child th,
.detail-attrs tr:last-child td { border-bottom: 0; }

.detail-offers {
  list-style: none;
  padding: 0;
  margin: 0;
}
.detail-offer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--hairline);
  margin-bottom: 6px;
}
.detail-offer-main { flex: 1; min-width: 0; }
.detail-offer-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.detail-offer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.merchant-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.merchant-stat {
  display: inline-flex;
  flex-direction: column;
  font-size: 13.5px;
}
.merchant-stat strong {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 800;
}
.merchant-note {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 12.5px;
  margin: 8px 0 0;
}

.add {
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--pill);
  padding: 5px 12px;
  font-weight: 600;
  cursor: pointer;
  font-size: 12.5px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.add:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- per-need offers --------------------------------------------- */

.need-block { margin: 14px 0 6px; }
.need-title { font-weight: 700; font-size: 14.5px; margin: 6px 4px 8px; }

.offer-card {
  padding: 14px;
  margin: 8px 0;
  cursor: pointer;
  transition: transform 0.08s ease;
}
.offer-card:hover { transform: translateY(-1px); }
.offer-card.selected { outline: 2px solid var(--accent); outline-offset: -2px; }

.offer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.offer-name { font-weight: 700; font-size: 15.5px; display: block; }
.offer-title { color: var(--ink-soft); font-size: 13px; margin-top: 2px; display: block; }
.offer-title.link-product { color: var(--ink-soft); }
.offer-price { font-weight: 800; font-size: 17px; }

.offer-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 10px 0 2px;
}

.badge {
  --badge: var(--unconfirmed);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--pill);
  border: 1px solid var(--badge);
  color: var(--badge);
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.7);
}
.badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--badge);
  display: inline-block;
}
.meta { color: var(--ink-soft); font-size: 12.5px; }

.rationale {
  background: rgba(14, 92, 74, 0.06);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin: 10px 0 4px;
  font-size: 13px;
  color: var(--ink);
}

.offer-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ---------- map ---------------------------------------------------------- */

.map-shell {
  width: 100%;
  height: 100%;
  min-height: 280px;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--hairline);
}
.map-canvas { width: 100%; height: 100%; min-height: 280px; }

/* Cowboy-style minimalist basemap. The tile layer ships in a neutral
   gray palette; a low-saturation warmth filter on the tile container
   pushes it toward the cream / sand palette used by premium store
   finders. Markers and the route overlay are excluded so the brand
   green dot and pins keep their full saturation. */
.map-canvas .leaflet-tile-pane { filter: saturate(0.78) sepia(0.06) brightness(1.02); }
.map-canvas { background: #f5f1ea; }

/* Quiet, premium-feeling zoom controls (matches the rounded buttons used
   by typical store finders). */
.map-canvas .leaflet-bar {
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(20, 26, 33, 0.12);
}
.map-canvas .leaflet-bar a {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--ink) !important;
  border: 0 !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 16px !important;
}
.map-canvas .leaflet-bar a:first-child { border-bottom: 1px solid rgba(0,0,0,0.06) !important; }
.map-canvas .leaflet-bar a:hover { background: #fff !important; }

.map-unavailable {
  position: absolute;
  inset: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.map-unavailable-title { font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.map-unavailable-body { color: var(--ink-soft); font-size: 13px; }

/* Leaflet integration tweaks: keep the OSM attribution legible against a
   light theme without recoloring tiles. */
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.78) !important;
  color: var(--ink-soft) !important;
  border-radius: 6px 0 0 0;
  font-size: 11px !important;
}
.leaflet-control-attribution a { color: var(--ink) !important; }
.leaflet-control-zoom a {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline) !important;
}
.leaflet-popup-content-wrapper {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid var(--hairline);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-md);
  padding: 4px 4px;
}
.leaflet-popup-tip { background: rgba(248, 249, 251, 0.92); }
.leaflet-popup-content { margin: 8px 12px; color: var(--ink); }

/* --- Airbnb-style map markers + popup ----------------------------------- */

/* Marker: a price pill (white background, dark text). Becomes inverted
   when selected (popup open) or when emphasised as the recommended
   plan's first stop. */
.mapstore-price-pill { background: transparent !important; border: 0 !important; }
.mapstore-user-dot { background: transparent !important; border: 0 !important; }

.mp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffffff;
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.10),
    0 6px 18px rgba(0, 0, 0, 0.10);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;
  cursor: pointer;
}
/* The discovery storefront icon inherits the pill's text colour so it
   keeps contrast through every emphasis / selected / muted state. The
   global `.fa-solid { color: var(--route) }` rule is more specific
   than `.mp-pill`, so we declare both `color` and `--fa-color` and
   bump specificity with a chained selector. */
.mp-pill.is-discover .mp-pill-icon,
.mp-pill .mp-pill-icon.fa-solid {
  color: inherit;
  font-size: 11.5px;
  opacity: 0.85;
}
.mp-pill.is-discover { font-weight: 600; }
.mp-pill:hover {
  transform: scale(1.05);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.16);
}
.mp-pill.is-muted {
  opacity: 0.82;
  font-weight: 600;
}
.mp-pill.is-primary {
  background: var(--ink);
  color: #ffffff;
  border-color: rgba(0, 0, 0, 0.32);
}
.mp-pill.is-selected,
.mp-pill.is-primary.is-selected {
  background: var(--ink);
  color: #ffffff;
  border-color: rgba(0, 0, 0, 0.32);
  transform: scale(1.06);
}
/* "Likely" rates (unconfirmed price): subtle amber underline so the
   shopper knows the figure may shift at the till. */
.mp-pill.is-likely { color: #92400e; }
.mp-pill.is-likely.is-selected { color: #fef3c7; }

/* Popup chrome: a wider, edge-to-edge image at the top followed by a
   padded body. Closely mirrors the Airbnb pattern. */
.leaflet-popup.mp-popup-wrap .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
}
.leaflet-popup.mp-popup-wrap .leaflet-popup-content {
  margin: 0;
  width: 260px !important;
}
.leaflet-popup.mp-popup-wrap .leaflet-popup-tip { background: #ffffff; }
.leaflet-popup.mp-popup-wrap .leaflet-popup-close-button {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  font-size: 22px;
  font-weight: 600;
  padding: 6px 8px 0 0;
  z-index: 2;
}

.mp-popup { position: relative; }
.mp-photo {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  background: #f1f2f4;
  text-decoration: none;
  color: inherit;
}
.mp-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-stop-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.mp-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mp-head {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
}
.mp-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.mp-link:hover { text-decoration: underline; }
.mp-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.mp-meta-row .mp-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-weight: 700;
}
.mp-meta-row .mp-rating .fa-star {
  color: #f4b400;
  font-size: 11px;
}
.mp-meta-row .mp-dot { color: var(--ink-soft); }
.mp-meta-row .mp-sub { text-transform: capitalize; }
.mp-meta { color: var(--ink-soft); font-size: 12.5px; }
.mp-item {
  color: var(--ink-soft);
  font-size: 12.5px;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  color: var(--ink);
}
.mp-price { font-weight: 800; font-size: 14px; }
.mp-price-suffix { font-size: 12px; color: var(--ink-soft); }
.mp-add {
  margin-top: 8px;
  width: 100%;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--pill);
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}
.mp-add:hover { background: #14171B; }

/* ---------- cart bar (floating) ----------------------------------------- */

.cart-bar {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: var(--pill);
  font-weight: 600;
}
.cart-total { font-weight: 800; font-size: 16px; }


/* ---------- merchant detail rich profile + claim ------------------------ */

.merchant-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 6px;
  align-items: center;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.status-chip.status-verified {
  background: rgba(31, 156, 92, 0.14);
  color: #1F9C5C;
}
.status-chip.status-claimed {
  background: rgba(31, 90, 156, 0.14);
  color: #1F5A9C;
}
.status-chip.status-provisional {
  background: rgba(196, 110, 25, 0.16);
  color: #9C5A1F;
}
.merchant-tag {
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--surface-soft, rgba(255, 255, 255, 0.6));
  border: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  padding: 4px 10px;
  border-radius: var(--pill);
}
.merchant-about {
  margin: 8px 0 12px;
  color: var(--ink);
  line-height: 1.45;
  font-size: 14px;
}
.merchant-block {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.merchant-block-h {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0 0 4px;
  font-weight: 700;
}
.merchant-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.merchant-chip {
  background: var(--surface-soft, rgba(255, 255, 255, 0.55));
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: var(--pill);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-transform: capitalize;
}
.merchant-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
}
.merchant-line-text {
  margin: 4px 0;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
}
.merchant-line-meta {
  font-size: 12px;
  color: var(--ink-soft);
}
.claim-cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  font-weight: 700;
  cursor: pointer;
}
.claim-cta:hover { background: #14171B; }

/* ---------- claim sheet form ------------------------------------------- */

.claim-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
}
.claim-field > span {
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.claim-field input {
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  background: var(--surface-soft, rgba(255, 255, 255, 0.85));
  color: var(--ink);
}
.claim-role-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.claim-role-chip {
  background: var(--surface-soft, rgba(255, 255, 255, 0.6));
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: var(--pill);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
}
.claim-role-chip.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}
.claim-error {
  color: #C03A2B;
  font-size: 13px;
  margin-top: 8px;
}
.claim-legal {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.claim-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #1F9C5C;
  margin-bottom: 8px;
}
.claim-docs {
  margin-top: 10px;
  background: var(--surface-soft, rgba(255, 255, 255, 0.55));
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  font-weight: 700;
  cursor: pointer;
}
.cta:hover { background: #14171B; }
.cta:disabled { opacity: 0.6; cursor: not-allowed; }


/* ---------- Google-Maps-style merchant card (spec section 15) ---------- */

/* Override the base atc-sheet to give the merchant card a tighter
   layout so the photo carousel can run edge-to-edge under the
   header. */
.merchant-card-sheet {
  padding: 0 !important;
  overflow: hidden;
}
.merchant-card-sheet .atc-body {
  padding: 0 0 16px;
}
.merchant-card-sheet .atc-body > .atc-section {
  padding-left: 16px;
  padding-right: 16px;
}
.merchant-card-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}
.merchant-card-close:hover { background: #fff; }

/* Photo carousel */
.mc-carousel {
  position: relative;
  width: 100%;
  height: clamp(220px, 36vh, 360px);
  background: #0e0f12;
  overflow: hidden;
}
@media (max-width: 760px) {
  .mc-carousel {
    height: clamp(240px, 42vh, 360px);
  }
}
.mc-carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 240ms ease;
}
/* When an image 404s the `on:error` hook tags it `.is-broken`; we
   pin it out of view so the browser's broken-image glyph never
   leaks through. The `.mc-carousel-empty` placeholder underneath
   takes over visually. */
.mc-carousel-img.is-broken { opacity: 0 !important; visibility: hidden; }
.mc-carousel-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255, 255, 255, 0.08),
      transparent 60%
    ),
    #15171c;
  color: rgba(255, 255, 255, 0.55);
  font-size: 42px;
  z-index: 1;
}
.mc-carousel-empty .fa-solid { color: inherit; }
.mc-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mc-carousel-nav.prev { left: 8px; }
.mc-carousel-nav.next { right: 8px; }
.mc-carousel-nav:hover { background: rgba(0, 0, 0, 0.6); }
.mc-carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.mc-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
}
.mc-carousel-dot.active { background: #fff; }

/* Head block: title, score line, actions, notes */
.merchant-card-head {
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.merchant-card-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
}
.merchant-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--ink-soft);
  font-size: 13px;
}
.merchant-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-weight: 700;
}
.merchant-score-star { color: #f5b400; font-size: 12px; }
.merchant-score-count {
  color: var(--ink-soft);
  font-weight: 600;
}
.merchant-card-dot { padding: 0 2px; }
.merchant-card-cat { text-transform: capitalize; }
.merchant-card-distance {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  font-weight: 600;
}
.merchant-card-distance svg { font-size: 12px; opacity: 0.75; }

/* Sticky compact head pinned at the top of the modal so the title and
   score line stay visible while the carousel, notes and contact rows
   scroll out of view. */
.merchant-card-compact {
  position: relative;
  z-index: 3;
  padding: 14px 48px 12px 16px;
  background: rgba(248, 249, 251, 0.98);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.merchant-card-compact .merchant-card-title {
  font-size: 18px;
  line-height: 1.2;
}
.merchant-card-compact .merchant-card-meta {
  font-size: 12.5px;
}
.merchant-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.mc-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  min-width: 40px;
  min-height: 36px;
}
.mc-action:hover { background: #f5f5f7; }
.mc-action-primary {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
  padding-left: 18px;
  padding-right: 18px;
}
.mc-action-primary:hover { background: #1666cb; }
.merchant-card-notes {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 4px;
}
.merchant-card-notes-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.merchant-card-notes p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}
.merchant-link {
  color: #1a73e8;
  text-decoration: none;
}
.merchant-link:hover { text-decoration: underline; }

/* ---- Discovered (live Google Places) rail ---- */
.section-subtitle {
  font-size: 13px;
  margin: -2px 0 8px 0;
  color: rgba(60, 64, 67, 0.7);
}
.discovered-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 6px 0 18px 0;
}
.discovered-card {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 120ms ease;
}
.discovered-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.discovered-name { font-weight: 600; line-height: 1.2; }
.discovered-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
  color: rgba(60, 64, 67, 0.85);
}
.discovered-rating { font-weight: 600; }
.discovered-dot { opacity: 0.6; }
.discovered-kind { text-transform: capitalize; }
.discovered-addr {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(60, 64, 67, 0.7);
  line-height: 1.25;
}

/* === Merchant funnel + admin overlays (Phase A/B/C) ================ */

.pro-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: linear-gradient(180deg, #fafbfc 0%, #f1f3f4 100%);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pro-overlay .pro-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: saturate(180%) blur(12px);
}
.pro-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  color: #1f2933;
}
.pro-logo-mark { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.pro-logo-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1a8754;
  font-weight: 700;
}
.pro-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pro-nav-link {
  font-size: 13px;
  color: rgba(31, 41, 51, 0.72);
  text-decoration: none;
}
.pro-nav-link:hover { color: #1f2933; }
.pro-nav-back {
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(31, 41, 51, 0.7);
  padding: 6px 10px;
  border-radius: 999px;
}
.pro-nav-back:hover { background: rgba(0,0,0,0.05); color: #1f2933; }

.pro-main {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.pro-hero {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  margin-bottom: 32px;
}
.pro-hero-title {
  font-size: 36px;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  color: #1f2933;
}
.pro-hero-sub {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(31, 41, 51, 0.72);
  margin: 0 0 8px;
}
.pro-hero-demand {
  margin: 0 0 24px;
  font-size: 14px;
  color: #1a8754;
  font-weight: 600;
}
.pro-hero-form { display: flex; flex-direction: column; gap: 12px; }
.pro-hero-row { display: flex; gap: 12px; flex-wrap: wrap; }
.pro-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pro-resume {
  align-self: flex-start;
}

.pro-section { background: #ffffff; border-radius: 20px; padding: 32px; margin-bottom: 24px; }
.pro-section h2 {
  font-size: 22px;
  margin: 0 0 18px;
  color: #1f2933;
  letter-spacing: -0.01em;
}
.pro-section h4 { margin: 16px 0 6px; color: #1f2933; font-size: 14px; }
.pro-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.pro-step {
  padding: 20px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  background: #fafbfc;
}
.pro-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #1a8754;
  color: white;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
}
.pro-step h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: #1f2933;
}
.pro-step p { margin: 0 0 6px; color: rgba(31, 41, 51, 0.72); font-size: 14px; }
.pro-step-time { font-size: 12px; color: rgba(31, 41, 51, 0.55); }

.pro-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.pro-pricing-card {
  padding: 18px;
  background: #fafbfc;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pro-pricing-label { font-size: 12px; color: rgba(31, 41, 51, 0.6); text-transform: uppercase; letter-spacing: 0.08em; }
.pro-pricing-value { font-size: 22px; font-weight: 700; color: #1f2933; }
.pro-pricing-hint { font-size: 12px; color: rgba(31, 41, 51, 0.55); }

.pro-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pro-trust li { display: flex; align-items: center; gap: 10px; color: #1f2933; }

.pro-cta-band { text-align: center; }
.pro-cta-band h2 { margin-bottom: 16px; }

.pro-footer {
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(31, 41, 51, 0.55);
  border-top: 1px solid rgba(0,0,0,0.04);
  background: #fafbfc;
}
.pro-footer-sep { opacity: 0.4; }
.pro-footer-link { color: rgba(31, 41, 51, 0.7); text-decoration: none; }
.pro-footer-link:hover { color: #1f2933; }

/* Wizard */
.pro-wizard { background: #ffffff; border-radius: 20px; padding: 28px; }
.wizard-progress {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.wizard-progress-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f1f3f4;
  font-size: 13px;
  color: rgba(31, 41, 51, 0.55);
}
.wizard-progress-item.is-current {
  background: #1f2933;
  color: white;
}
.wizard-progress-item.is-done {
  background: rgba(26, 135, 84, 0.12);
  color: #1a8754;
}
.wizard-progress-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 700;
}
.wizard-progress-item.is-current .wizard-progress-num { background: rgba(255, 255, 255, 0.25); }
.wizard-progress-item.is-done .wizard-progress-num { background: rgba(26, 135, 84, 0.2); }
.wizard-step h3 { margin: 0 0 16px; font-size: 20px; color: #1f2933; }
.wizard-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.wizard-review { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; margin-bottom: 12px; }
.wizard-review dt { color: rgba(31, 41, 51, 0.6); font-size: 13px; }
.wizard-review dd { margin: 0; color: #1f2933; font-size: 14px; }

.pro-done { background: #ffffff; border-radius: 20px; padding: 60px 40px; text-align: center; }
.pro-done h1 { margin: 16px 0 12px; color: #1f2933; }
.pro-done-icon { font-size: 36px; color: #1a8754; }

/* Admin */
.admin-overlay { background: #f7f8f9; }
.admin-tabs {
  display: flex;
  gap: 6px;
  background: #ffffff;
  padding: 6px;
  border-radius: 14px;
  margin-bottom: 16px;
  width: fit-content;
}
.admin-tab {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: rgba(31, 41, 51, 0.65);
}
.admin-tab.is-active { background: #1f2933; color: white; }
.admin-block { background: #ffffff; border-radius: 14px; padding: 24px; }
.admin-block + .admin-block { margin-top: 16px; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 10px; font-size: 13px; }
.admin-table thead th { color: rgba(31, 41, 51, 0.65); font-weight: 600; border-bottom: 1px solid rgba(0,0,0,0.06); }
.admin-table tbody tr { border-bottom: 1px solid rgba(0,0,0,0.04); }
.role-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(31, 41, 51, 0.08);
  color: #1f2933;
}
.role-super_admin { background: rgba(220, 38, 38, 0.10); color: #b91c1c; }
.role-admin { background: rgba(37, 99, 235, 0.10); color: #1d4ed8; }
.role-merchant { background: rgba(26, 135, 84, 0.10); color: #1a8754; }
.role-shopper { background: rgba(31, 41, 51, 0.08); color: #1f2933; }
.role-select {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 4px 8px;
  background: white;
  font-size: 13px;
}

/* Shopper-side hooks */
.shopper-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 28px;
  font-size: 13px;
  color: rgba(31, 41, 51, 0.55);
}
.shopper-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(31, 41, 51, 0.75);
  text-decoration: none;
  font-weight: 600;
}
.shopper-footer-link:hover { color: #1a8754; }
.shopper-footer-sep {
  opacity: 0.4;
  user-select: none;
}
.shopper-footer-mention {
  color: rgba(31, 41, 51, 0.55);
}

.header-btn.pro-link {
  text-decoration: none;
  color: inherit;
}
.account-nudge {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(26, 135, 84, 0.06), rgba(26, 135, 84, 0.02));
  border-radius: 12px;
}
.account-nudge-text { margin: 0; color: #1f2933; font-weight: 600; }

.discovered-claim {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(26, 135, 84, 0.08);
  color: #1a8754;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
.discovered-claim:hover { background: rgba(26, 135, 84, 0.14); }

.cta-tight { padding: 6px 12px; font-size: 13px; }
.cta-tight.is-danger {
  background: transparent;
  color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, 0.3);
}
.cta-tight.is-danger:hover { background: rgba(185, 28, 28, 0.06); }

/* === Account panel: two-column layout when on a sub-view =========== */

/* When the user navigates from the Menu (apercu) to any section, the
   panel widens so the menu rail stays visible on the left while the
   section content fills the right column. The narrow 360 px default
   is preserved for the initial menu view. */
.side-panel.is-wide {
  width: min(820px, calc(100vw - 32px));
}
.side-panel-body.is-split {
  padding: 0;
  flex-direction: row;
  gap: 0;
  overflow: hidden;
}
.account-rail {
  width: 240px;
  flex: 0 0 240px;
  border-right: 1px solid var(--hairline);
  overflow-y: auto;
  padding: 14px 10px;
  background: rgba(255, 255, 255, 0.55);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.account-rail-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 14px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 6px;
}
.account-rail-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.account-rail-name {
  font-size: 13px;
  color: #1f2933;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-rail-hint {
  font-size: 11px;
  color: rgba(31, 41, 51, 0.55);
}
.account-rail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Rail rows are tighter than the dashboard list and skip the chevron. */
.account-menu-row.account-rail-row {
  padding: 8px 10px;
  border-radius: 8px;
  gap: 10px;
  font-size: 13px;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: rgba(31, 41, 51, 0.78);
  display: flex;
  align-items: center;
}
.account-menu-row.account-rail-row:hover {
  background: rgba(31, 41, 51, 0.05);
  color: #1f2933;
}
.account-menu-row.account-rail-row.is-active {
  background: rgba(26, 135, 84, 0.10);
  color: #1a8754;
  font-weight: 600;
}
.account-menu-row.account-rail-row .account-menu-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* On phone-sized screens the two-column layout collapses: the rail
   becomes a horizontal scroll strip pinned above the content, so the
   user still gets one-tap navigation without forcing the modal to a
   tiny 60/40 split. */
@media (max-width: 760px) {
  .side-panel.is-wide {
    width: min(420px, calc(100vw - 32px));
  }
  .side-panel-body.is-split {
    flex-direction: column;
  }
  .account-rail {
    width: auto;
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding: 10px 12px;
  }
  .account-rail-identity {
    border-bottom: 0;
    margin-bottom: 4px;
    padding-bottom: 8px;
  }
  .account-rail-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .account-menu-row.account-rail-row {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ===========================================================
   Operator + merchant consoles (sidebar layout, KPI cards,
   data tables, status pills). Used by AdminConsole and
   MerchantConsole overlays. Lives at the end of the sheet so
   the more specific selectors win cleanly. */

.console-header { padding: 14px 28px; border-bottom: 1px solid var(--hairline); }
.console-main {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 64px);
}
.console-sidebar {
  background: linear-gradient(180deg, #0f1620 0%, #131c28 100%);
  color: rgba(255, 255, 255, 0.92);
  padding: 22px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.console-sidebar-identity {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.console-sidebar-identity .account-avatar {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.console-sidebar-name {
  display: block;
  color: white;
  font-size: 14px;
  line-height: 1.2;
}
.console-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.console-sidebar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: background 120ms ease, color 120ms ease;
}
.console-sidebar-row:hover { background: rgba(255, 255, 255, 0.05); color: white; }
.console-sidebar-row.is-active {
  background: linear-gradient(135deg, rgba(94, 134, 255, 0.32), rgba(94, 134, 255, 0.18));
  color: white;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.console-sidebar-row .fa,
.console-sidebar-row svg { width: 18px; }

.console-content {
  background: #f5f7fb;
  padding: 28px 32px 64px;
  min-width: 0;
  overflow: auto;
}
.console-content-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.console-content-head h2 {
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.01em;
}
.console-block {
  background: white;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.console-block h3 { margin: 0 0 14px; font-size: 16px; }
.console-block h4 { margin: 18px 0 10px; font-size: 14px; }
.console-block .empty-state { padding: 40px 16px; }

.console-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.console-search {
  flex: 1 1 280px;
  min-width: 220px;
}

/* KPI cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.kpi-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  border: 1px solid var(--hairline);
}
.kpi-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(94, 134, 255, 0.14);
  color: #3b58cc;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.kpi-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-card-label { font-size: 12px; color: rgba(31, 41, 51, 0.6); text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-card-value { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.kpi-card-hint { font-size: 12px; color: rgba(31, 41, 51, 0.55); }

.status-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(94, 134, 255, 0.08);
  border: 1px dashed rgba(94, 134, 255, 0.25);
  margin: 12px 0;
  font-size: 13px;
}
.status-strip-label { color: rgba(31, 41, 51, 0.55); text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; }

/* Data tables */
.console-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--hairline); }
.console-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.console-table th, .console-table td { text-align: left; padding: 10px 12px; }
.console-table thead th { background: #f7f9fc; color: rgba(31, 41, 51, 0.65); font-weight: 600; border-bottom: 1px solid var(--hairline); position: sticky; top: 0; }
.console-table tbody tr { border-bottom: 1px solid rgba(0, 0, 0, 0.04); }
.console-table tbody tr:hover { background: rgba(94, 134, 255, 0.05); }
.console-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.console-table td.mono, .console-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.console-table td.dim, .console-table .dim { color: rgba(31, 41, 51, 0.55); }

/* Pills (statuses, modes, availability) */
.avail-pill, .mode-pill, .status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(31, 41, 51, 0.08);
  color: #1f2933;
}
.avail-confirmed, .status-payment_authorized, .status-merchant_confirmed,
.status-ready, .status-delivered, .status-picked_up {
  background: rgba(46, 196, 122, 0.15); color: #1f8b53;
}
.avail-likely { background: rgba(245, 184, 32, 0.18); color: #8a5a00; }
.avail-unconfirmed, .status-created { background: rgba(31, 41, 51, 0.08); color: #1f2933; }
.avail-out_of_stock, .status-cancelled, .status-failed {
  background: rgba(214, 56, 76, 0.14); color: #a8253b;
}
.mode-delivery { background: rgba(94, 134, 255, 0.14); color: #3b58cc; }
.mode-collect { background: rgba(31, 41, 51, 0.08); color: #1f2933; }
.role-pill { padding: 3px 10px; border-radius: 999px; font-size: 12px; }
.role-pill.role-super_admin { background: rgba(214, 56, 76, 0.15); color: #a8253b; }
.role-pill.role-admin { background: rgba(94, 134, 255, 0.14); color: #3b58cc; }
.role-pill.role-merchant { background: rgba(46, 196, 122, 0.15); color: #1f8b53; }
.role-pill.role-shopper { background: rgba(31, 41, 51, 0.08); color: #1f2933; }

/* Reviews */
.reviews-list { display: grid; gap: 12px; }
.review-card { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--hairline); background: white; }
.review-card-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 13px; }
.review-stars { color: #f5b820; letter-spacing: 2px; }
.review-title { margin: 4px 0 6px; font-size: 14px; }
.review-body { margin: 0; font-size: 13px; color: rgba(31, 41, 51, 0.85); }
.review-product { margin-top: 8px; font-size: 11px; }
.review-response { margin-top: 8px; padding: 8px 10px; background: rgba(94, 134, 255, 0.06); border-radius: 8px; font-size: 13px; }

/* Profile form grid */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  margin: 12px 0;
}
.form-grid .grid-col-2 { grid-column: span 2; }
.form-actions { display: flex; gap: 10px; margin-top: 16px; }

.settings-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.settings-list li {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(31, 41, 51, 0.04);
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Narrow viewport: collapse sidebar to a horizontal scroller. */
@media (max-width: 880px) {
  .console-main { grid-template-columns: 1fr; }
  .console-sidebar {
    flex-direction: row;
    overflow-x: auto;
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .console-sidebar-identity { display: none; }
  .console-sidebar-list { flex-direction: row; gap: 6px; }
  .console-sidebar-row { white-space: nowrap; }
  .console-content { padding: 18px 14px 48px; }
  .form-grid .grid-col-2 { grid-column: auto; }
}