/* ==========================================================================
   Vendor — shared design system
   Plain CSS, no preprocessor, no build step (shared hosting constraint).
   Loaded once in layouts/app.blade.php; every page adds its own CSS on top.
   ========================================================================== */

:root {
  /* Color: a night-market palette — indigo dusk, marigold stall-light,
     leaf green for "available", coral for anything that needs attention.
     Not the cream+terracotta or near-black+neon defaults. */
  --ink: #1B1F3B;         /* deep indigo — header, nav, headings */
  --ink-soft: #363B63;    /* ink at rest, for secondary dark surfaces */
  --paper: #FBF7EF;       /* warm page background */
  --paper-raised: #FFFFFF;/* cards sit above the paper */
  --marigold: #F2A93B;    /* primary action, price tags */
  --marigold-deep: #D98F1F;
  --leaf: #2E9E5B;        /* available, confirmed, success */
  --coral: #E4572E;       /* dispute, error, destructive */
  --charcoal: #20222B;    /* body text */
  --charcoal-soft: #5B5E6B;/* secondary text */
  --line: #E7DFCB;        /* hairline borders on paper */
  --line-on-ink: rgba(255,255,255,0.16);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --font-wordmark: 'Harlow Solid Italic', 'Kaushan Script', cursive;

  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-tag: 6px;

  --shadow-card: 0 2px 10px rgba(27, 31, 59, 0.07);
  --shadow-raised: 0 8px 24px rgba(27, 31, 59, 0.14);

  /* Accessibility floor set by the product laws: large tap targets, high
     contrast, nothing smaller than 16px body text. */
  --tap-min: 56px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--charcoal);
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: calc(var(--tap-min) + 24px); /* room for bottom nav */
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 8px;
}

h1 { font-size: 28px; font-weight: 600; }
h2 { font-size: 21px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; }

p { margin: 0 0 12px; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

button, input, select, textarea { font-family: inherit; font-size: 16px; }

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px;
}

/* --- Top bar --- */
.topbar {
  background: var(--ink);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar__brand .dot { color: var(--marigold); }

.topbar__action {
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

/* Sticky just below the header, not just at page-top — search stays
   reachable while scrolling any page on the site, matching the header's
   own position:sticky. z-index one below the header's so the header's
   shadow/edge still reads as "on top" if they ever overlap during the
   scroll transition. */
.global-search-wrap {
  position: sticky;
  top: 0;
  z-index: 19;
  /* Same soft marigold tint already used for a highlighted/active zone
     elsewhere (availability selector, type cards) — reusing an
     established accent rather than adding a new color to the palette.
     Distinct from both the white search pill inside it and the cream
     page below, so neither blends into the other. */
  background: #FCF0DA;
  border-bottom: 1px solid var(--line);
}

.global-search-wrap .search-bar-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 16px 10px;
}

/* Four icon+label buttons crowd a narrow phone screen fast — labels
   drop first, the icons alone (already meaningful on their own: a
   store, a person, a gear, a door) still carry the meaning. */
@media (max-width: 420px) {
  .topbar__action {
    padding: 8px 10px;
  }
  .topbar__action-label {
    display: none;
  }
}

/* --- Bottom nav: mirrors the app's 5-tab bar, one primary action each --- */
.bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--paper-raised);
  border-top: 1px solid var(--line);
  display: flex;
  z-index: 30;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottomnav a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: var(--charcoal-soft);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 4px 8px;
  min-height: var(--tap-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.bottomnav a.is-active { color: var(--ink); }
.bottomnav a.is-active .bottomnav__icon { color: var(--marigold-deep); }
.bottomnav__icon { font-size: 20px; line-height: 1; }
.bottomnav__badge {
  position: absolute;
  transform: translate(10px, -10px);
  background: var(--coral);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap-min);
  padding: 14px 22px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 16px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
}

.btn-primary { background: var(--marigold); color: var(--ink); }
.btn-primary:active { background: var(--marigold-deep); }
.btn-primary:disabled { background: #EFE3CB; color: #A79A78; cursor: not-allowed; }

.btn-dark { background: var(--ink); color: #fff; }
.btn-outline { background: transparent; color: var(--marigold-deep); border: 2px solid var(--marigold-deep); }
.btn-outline.is-active { background: var(--marigold-deep); color: #fff; }
.btn-outline:active { background: rgba(217, 143, 31, 0.1); }
.follow-btn--following { background: var(--leaf-soft, #E4F3EA); color: var(--leaf); border: 2px solid var(--leaf); }
.btn-danger-outline { background: transparent; color: var(--coral); border: 2px solid var(--coral); }
.btn-small { min-height: 44px; padding: 10px 16px; font-size: 14px; width: auto; }

/* --- Cards --- */
.card {
  background: var(--paper-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.card + .card { margin-top: 14px; }

/* .stack already spaces its children via flex gap - without this,
   .card + .card fires AGAIN on cards inside a .stack, stacking
   additively on top of the gap (12px + 14px = 26px combined) rather
   than the two ever being alternatives for the same job. */
.stack > .card + .card { margin-top: 0; }

/* --- Product card (feed) --- */
.product-card { position: relative; }

.product-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--line);
}

.product-card__body { padding: 14px 16px 16px; }

.product-gallery { position: relative; }

.product-gallery__scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: var(--radius-lg);
}
.product-gallery__scroll::-webkit-scrollbar { display: none; }

.product-gallery__img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  scroll-snap-align: start;
  background: var(--line);
}

.product-gallery__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.product-gallery__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.15s ease, transform 0.15s ease;
}

.product-gallery__dot.is-active {
  background: var(--marigold);
  transform: scale(1.3);
}

.product-card__vendor {
  font-size: 13px;
  color: var(--charcoal-soft);
  font-weight: 600;
  margin-bottom: 4px;
}

.product-card__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.product-card__description {
  font-size: 13px;
  color: var(--charcoal-soft);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.star-input {
  display: flex;
  gap: 4px;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  color: var(--marigold);
}
.star-input__star { transition: transform 0.1s ease; }
.star-input__star:hover { transform: scale(1.15); }

/* Read-only display, distinct from the clickable input above — used
   anywhere a rating is shown rather than entered (listing/shop pages). */
.star-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--marigold);
  font-size: 14px;
}
.star-display__count { color: var(--charcoal-soft); font-size: 13px; margin-left: 2px; }

.search-bar-wrap {
  position: relative;
  margin-bottom: 16px;
}

.search-bar {
  display: flex;
  align-items: center;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  padding: 4px 6px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.search-bar:focus-within {
  border-color: var(--marigold);
  box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.18), var(--shadow-card);
}

.search-bar__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--charcoal-soft);
}
.search-bar__icon:hover { background: var(--paper); }

.search-bar__input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 12px 8px 4px;
  font-size: 15px;
  min-height: 0;
}
.search-bar__input:focus { outline: none; }

/* The type-ahead dropdown — floats below the bar without pushing the
   feed content down, and closes itself on blur/outside click (wired
   in JS) rather than staying open indefinitely. */
.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  max-height: 360px;
  overflow-y: auto;
  z-index: 20;
}

.search-suggestions__group-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--charcoal-soft);
  padding: 10px 14px 4px;
}

.search-suggestions__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  text-decoration: none;
  color: inherit;
}
.search-suggestions__item:hover { background: var(--paper); }

.search-suggestions__thumb {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--line);
  flex: 0 0 auto;
}
.search-suggestions__thumb--round { border-radius: 999px; }

.search-suggestions__empty {
  padding: 16px;
  text-align: center;
  color: var(--charcoal-soft);
  font-size: 14px;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 31, 59, 0.45);
  z-index: 90;
  animation: sheet-fade-in 0.2s ease;
}

.bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper-raised);
  border-radius: 14px 14px 0 0;
  box-shadow: var(--shadow-raised);
  padding: 12px 20px 24px;
  z-index: 91;
  max-height: 85vh;
  overflow-y: auto;
  animation: sheet-slide-up 0.25s ease;
}

.bottom-sheet__handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  margin: 0 auto 16px;
}

@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes sheet-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Signature element: the price tag — a small stall-sticker shape with a
   die-cut notch, set in mono to read like a hand-marked market price. */
.price-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  background: var(--ink);
  color: #fff;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-tag);
  position: relative;
}

.price-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marigold);
}

.distance-pin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--charcoal-soft);
  font-weight: 600;
}

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.badge-open { background: #E1F3E8; color: var(--leaf); }
.badge-closed { background: #F3E1DC; color: var(--coral); }
.badge-waiting { background: #FDEFD9; color: var(--marigold-deep); }

/* --- Forms --- */
.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 6px;
}

.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  color: var(--charcoal);
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid var(--marigold);
  outline-offset: 1px;
  border-color: var(--marigold-deep);
}

.field-hint { font-size: 13px; color: var(--charcoal-soft); margin-top: 6px; }
.field-error { font-size: 13px; color: var(--coral); margin-top: 6px; font-weight: 600; }

/* --- Wallet numbers --- */
.money-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-on-ink);
}

.money-row:last-child { border-bottom: none; }

.money-row__label { font-size: 14px; color: rgba(255,255,255,0.72); font-weight: 600; }

.money-row__value { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: #fff; }

.wallet-panel {
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: 20px 20px 8px;
}

/* --- Toast --- */
#toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--tap-min) + 16px);
  background: var(--ink);
  color: #fff;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  box-shadow: var(--shadow-raised);
  z-index: 50;
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* opacity/pointer-events alongside the transform, deliberately — confirmed
   live that translateY(120%) alone (120% of the toast's OWN height, not
   the viewport) wasn't reliably enough to clear the screen once a longer
   message wrapped to two lines, so the class was correctly toggling but
   the toast stayed visibly on screen anyway. Opacity guarantees real
   invisibility regardless of whether the transform's offset is enough. */
#toast.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
#toast.is-error { background: var(--coral); }

/* --- Empty / loading states --- */
.state-block {
  text-align: center;
  padding: 48px 20px;
  color: var(--charcoal-soft);
}

.state-block h3 { color: var(--ink); margin-bottom: 6px; }

/* --- Utility --- */
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mt-4 { margin-top: 4px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.center { text-align: center; }
.hidden { display: none !important; }

@media (min-width: 640px) {
  .feed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .feed-grid .card { margin-top: 0; }
}

/* --- Wordmark (real, licensed Harlow Solid Italic — matches hub.vendor.ng) --- */
@font-face {
  font-family: 'Harlow Solid Italic';
  src: url('/fonts/harlow-solid-italic.woff2') format('woff2');
  font-display: swap;
}
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* On the dark ink top bar, the base .wordmark color above (dark ink)
   would be invisible against the dark ink background — this needs to
   come AFTER that base rule specifically, since both are single-class
   selectors of equal CSS specificity and source order decides the tie.
   White matches the top bar's own existing text color exactly, rather
   than introducing a second, slightly different tone next to it. */
.wordmark--topbar { color: #fff; font-size: 26px; }

.topbar__brand {
  display: flex;
  line-height: 0; /* prevents the img's inline baseline from adding unwanted extra height to the flex row */
}
.topbar__brand img {
  border-radius: 22%; /* matches the icon's own baked-in rounded-square shape, so it never reads as a hard-edged box against the dark topbar */
  display: block;
}

/* --- Icon + wordmark lockup --- */
/* Horizontal by default (icon before text) — the topbar's own usage.
   .wordmark-lockup--stacked flips to icon-above-text for login/hero
   contexts, where the wordmark stands alone and larger. */
.wordmark-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.wordmark-lockup--stacked {
  flex-direction: column;
  gap: 10px;
}
.wordmark-lockup__icon {
  border-radius: 22%; /* matches the icon's own rounded-square shape so it never looks like a hard-edged box next to the soft wordmark script */
  flex: 0 0 auto;
}

/* --- Chat / messaging --- */
.chat-container {
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow-y: auto;
  padding: 12px;
  background: var(--paper);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.chat-empty {
  text-align: center;
  color: var(--charcoal-soft);
  font-size: 14px;
  padding: 24px 12px;
}

.chat-date-divider {
  text-align: center;
  margin: 10px 0 6px;
}
.chat-date-divider span {
  display: inline-block;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  color: var(--charcoal-soft);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}

.chat-row {
  display: flex;
  flex-direction: column;
  margin-top: 3px;
}
.chat-row--mine { align-items: flex-end; }
.chat-row--theirs { align-items: flex-start; }
/* Extra breathing room between distinct groups (sender changed, or a
   real time gap) — tighter spacing within a run from the same sender,
   the same visual grammar WhatsApp/iMessage use for grouped messages. */
.chat-row--group-start { margin-top: 12px; }

.chat-bubble {
  max-width: 78%;
  padding: 9px 13px;
  font-size: 14.5px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.chat-bubble--mine {
  background: var(--marigold);
  color: var(--ink);
  border-radius: 12px 12px 3px 12px;
}
.chat-bubble--theirs {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  color: var(--charcoal);
  border-radius: 12px 12px 12px 3px;
}

.chat-meta {
  font-size: 11px;
  color: var(--charcoal-soft);
  margin-top: 3px;
  padding: 0 4px;
}

.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 5px 5px 16px;
  margin-top: 12px;
}
.chat-input-bar input {
  flex: 1;
  border: none;
  background: transparent;
  min-height: 0;
  padding: 8px 0;
  font-size: 15px;
}
.chat-input-bar input:focus { outline: none; }
.chat-send-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: var(--marigold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-send-btn:active { background: var(--marigold-deep); }
.chat-send-btn:disabled { background: #EFE3CB; color: #A79A78; cursor: not-allowed; }

/* --- Order row: product thumbnail + vendor avatar --- */
.order-row {
  gap: 12px;
  align-items: center;
  text-decoration: none;
}
.order-row__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-tag);
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--line);
}
.order-row__thumb--empty { background: var(--line); }

.order-row__avatar {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
}
.order-row__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--marigold);
  color: var(--ink);
  font-weight: 700;
  font-size: 10px;
}

/* --- Find Vendors card: small avatar flush with the shop name --- */
.vendor-card__avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
}
.vendor-card__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--marigold);
  color: var(--ink);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 13px;
}

/* --- Avatar upload (profile page) --- */
.avatar-upload__preview {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--marigold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 32px;
  overflow: hidden;
}
.avatar-upload__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Chats list row --- */
.conversation-row {
  gap: 12px;
  align-items: center;
  text-decoration: none;
}
.chat-row-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
}
.chat-row-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--marigold);
  color: var(--ink);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 17px;
}

/* --- Settings: availability selector --- */
.availability-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper-raised);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.availability-option.is-active {
  background: #FCF0DA;
  border-color: var(--marigold);
}
.availability-option__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.availability-option__dot--online { background: #3FAE6A; }
.availability-option__dot--busy { background: var(--marigold-deep); }
.availability-option__dot--paused { background: #A79A78; }
.availability-option__dot--offline { background: var(--coral); }
.availability-option__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.availability-option__check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--marigold);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.availability-option.is-active .availability-option__check {
  opacity: 1;
  transform: scale(1);
}

/* --- Settings: integrated @ prefix on the username field --- */
.username-input-wrap {
  display: flex;
  align-items: center;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  overflow: hidden;
}
.username-input-wrap:focus-within {
  outline: 3px solid var(--marigold);
  outline-offset: 1px;
  border-color: var(--marigold-deep);
}
.username-input-wrap__prefix {
  padding: 12px 0 12px 14px;
  font-weight: 700;
  color: var(--charcoal-soft);
}
.username-input-wrap input {
  flex: 1;
  min-height: var(--tap-min);
  padding: 12px 14px 12px 4px;
  border: none;
  background: transparent;
  color: var(--charcoal);
}
.username-input-wrap input:focus { outline: none; }

/* --- My Listings: expandable edit panel --- */
.listing-edit-panel {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 4px;
}

/* --- Trust signals --- */
.trust-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--charcoal-soft);
}
.trust-row svg { flex: 0 0 auto; opacity: 0.8; }
.trust-row-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}