/* GoLouma — light, airy theme.
   Soft palette per project guideline: lighter colors only. */

:root {
  --color-bg:        #fafbff;
  --color-surface:   #ffffff;
  --color-surface-2: #f4f6fb;
  --color-border:    #e5e9f2;
  --color-text:      #2a3142;
  --color-text-mut:  #6b7280;
  --color-primary:   #7aa7e6;   /* soft sky blue */
  --color-primary-d: #5a8fd4;
  --color-accent:    #b8e0d2;   /* soft mint */
  --color-warn:      #f6c89f;   /* peach */
  --color-error:     #e8a4a4;
  --color-success:   #a4d4b4;
  --radius:          12px;
  --shadow:          0 1px 3px rgba(40, 60, 100, 0.06),
                     0 4px 14px rgba(40, 60, 100, 0.05);
  --font-sans:       -apple-system, BlinkMacSystemFont, "Segoe UI",
                     Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary-d); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* ── Top bar ───────────────────────────── */
.topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.topbar__brand:hover { text-decoration: none; }
.topbar__brand-logo {
  display: block;
  width: 60px;
  height: 40px;
  object-fit: contain;
}
.topbar__nav {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.95rem;
}

/* ── Language switcher ─────────────────── */
.lang-switch { display: inline-flex; gap: 4px; }
.lang-switch button,
.lang-switch a {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-mut);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: none;
  line-height: 1;
}
.lang-switch a:hover { text-decoration: none; }
.lang-switch button.is-active,
.lang-switch a.is-active {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-primary);
}

/* ── Cards / panels ────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.hero {
  text-align: center;
  padding: 56px 20px 24px;
}
.hero h1 {
  font-size: 2.2rem;
  margin: 0 0 12px;
  color: var(--color-text);
}
.hero p { color: var(--color-text-mut); max-width: 560px; margin: 0 auto; }

/* ── Forms ────────────────────────────── */
.form-row { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-mut);
  margin-bottom: 6px;
}
.form-input,
select.form-input,
textarea.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
textarea.form-input { resize: vertical; min-height: 80px; }
.form-card { max-width: 540px; margin: 0 auto; }
.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(122, 167, 230, 0.18);
}

.form-hint {
  font-size: 0.8rem;
  color: var(--color-text-mut);
  margin: 6px 0 0;
}

.form-cancel {
  text-align: center;
  margin-top: 14px;
}

.form-row--check { margin: 18px 0; }
.check-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.form-check-input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

/* ── Buttons ──────────────────────────── */
.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.04s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-primary);
  color: #ffffff;
}
.btn--primary:hover { background: var(--color-primary-d); }

.btn--ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover { background: var(--color-surface-2); }

.btn--danger {
  background: var(--color-error);
  color: #ffffff;
}
.btn--danger:hover { background: #d98585; }

.btn--block { display: block; width: 100%; text-align: center; }

/* ── Messages / alerts ────────────────── */
.alert {
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  border: 1px solid transparent;
}
.alert--info     { background: #eaf2fc; border-color: #cfe0f6; color: #2f5894; }
.alert--success  { background: #e8f5ee; border-color: #c9e6d6; color: #2f6b48; }
.alert--error    { background: #fceaea; border-color: #f3c9c9; color: #8c3a3a; }

/* ── Dashboard action tiles ─────────────── */
.dash-greeting {
  text-align: center;
  margin: 0 0 24px;
  font-size: 1.5rem;
  color: var(--color-text);
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--color-text);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.action-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(40, 60, 100, 0.10),
              0 10px 30px rgba(40, 60, 100, 0.06);
  text-decoration: none;
}

.action-tile__icon {
  font-size: 2.6rem;
  margin-bottom: 14px;
  display: block;
}
.action-tile__title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
}
.action-tile__desc {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text-mut);
}

.action-tile--demand:hover { border-color: #b8e0d2; }
.action-tile--offer:hover  { border-color: #f6c89f; }
.action-tile--admin:hover  { border-color: var(--color-primary); }

/* ── Staff catalog management ─────────── */
.admin-hero { padding-bottom: 18px; }

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 auto 28px;
  max-width: 760px;
}
.admin-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
  box-shadow: var(--shadow);
}
.admin-stat__value {
  display: block;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary-d);
}
.admin-stat__label {
  display: block;
  margin-top: 4px;
  color: var(--color-text-mut);
  font-size: 0.86rem;
}

.admin-section {
  margin: 0 auto 34px;
  max-width: 940px;
}
.admin-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.admin-section__header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.catalog-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: min(100%, 420px);
}

.admin-table-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.admin-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.admin-table th,
.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.admin-table th {
  background: var(--color-surface-2);
  color: var(--color-text-mut);
  font-size: 0.78rem;
  text-transform: uppercase;
}
.admin-table__sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.admin-table__sort:hover { color: var(--color-primary-d); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table__sub {
  display: block;
  color: var(--color-text-mut);
  font-size: 0.8rem;
  margin-top: 2px;
}
.admin-table__actions {
  white-space: nowrap;
  text-align: right;
}
.admin-table__actions a + a { margin-left: 10px; }

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.78rem;
  font-weight: 600;
}
.status-pill--active {
  background: #e8f5ee;
  color: #2f6b48;
  border-color: #c9e6d6;
}
.status-pill--inactive {
  background: var(--color-surface-2);
  color: var(--color-text-mut);
}

.link-danger { color: #a44d4d; }

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.category-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.category-list__icon {
  font-size: 1.25rem;
  line-height: 1;
  margin-right: 4px;
}
.category-list__meta {
  color: var(--color-text-mut);
  font-size: 0.86rem;
  margin-top: 2px;
}
.category-list__actions {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .admin-stats { grid-template-columns: 1fr; }
  .admin-section__header { align-items: stretch; flex-direction: column; }
  .catalog-filter { grid-template-columns: 1fr; min-width: 0; }
  .category-list__item { align-items: flex-start; flex-direction: column; }
}

/* ── Topbar icon buttons (user, profile, logout) ─ */
.topbar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.topbar__icon-btn:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary-d);
  text-decoration: none;
}

/* ── Role bar (above dashboard greeting when multi-role) ─ */
.role-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 900px;
  margin: 0 auto 18px;
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.role-bar__label {
  font-size: 0.82rem;
  color: var(--color-text-mut);
  margin-right: 4px;
}
.role-bar__form { margin: 0; }
.role-bar__btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--color-text-mut);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.role-bar__btn:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}
.role-bar__btn.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  font-weight: 600;
}

/* ── User menu (topbar dropdown) ──────── */
.user-menu { position: relative; }

.user-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.user-menu__trigger::-webkit-details-marker { display: none; }
.user-menu__trigger:hover,
.user-menu[open] .user-menu__trigger {
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary-d);
}
.user-menu__trigger:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(122, 167, 230, 0.18);
}

.user-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px 0;
  z-index: 60;
}
.user-menu__greeting {
  padding: 10px 14px 6px;
  font-size: 0.75rem;
  color: var(--color-text-mut);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.user-menu__greeting strong {
  display: inline-block;
  max-width: 170px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-text);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.user-menu__section {
  padding: 10px 14px 4px;
  font-size: 0.72rem;
  color: var(--color-text-mut);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.user-menu__item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.93rem;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
}
.user-menu__item[data-state="granted"] { color: var(--color-primary); }
.user-menu__item:disabled { opacity: 0.55; cursor: default; }
.user-menu__item:hover {
  background: var(--color-surface-2);
  text-decoration: none;
}
.user-menu__item--active {
  font-weight: 600;
}
.user-menu__dot {
  color: var(--color-primary);
  margin-left: 8px;
  font-size: 0.6rem;
}
.user-menu__divider {
  height: 1px;
  background: var(--color-border);
  margin: 6px 0;
}
.user-menu__form { margin: 0; }

@media (max-width: 520px) {
  .topbar {
    padding: 12px 14px;
  }
  .topbar__nav {
    gap: 8px;
  }
  .user-menu__panel {
    right: -72px;
  }
}

/* Form row split (used on /profile/) */
.form-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 540px) {
  .form-row--split { grid-template-columns: 1fr; }
}

.topbar__user {
  color: var(--color-text-mut);
  font-size: 0.92rem;
}

.role-switcher {
  position: relative;
}
.role-switcher__current,
.role-switcher--single {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;       /* hide <summary> marker */
  user-select: none;
}
.role-switcher__current::-webkit-details-marker { display: none; }
.role-switcher[open] .role-switcher__current {
  background: var(--color-surface);
  border-color: var(--color-primary);
}
.role-switcher__chevron {
  font-size: 0.7rem;
  color: var(--color-text-mut);
  transition: transform 0.15s;
}
.role-switcher[open] .role-switcher__chevron { transform: rotate(180deg); }

.role-switcher__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px 0;
  z-index: 50;
}
.role-switcher__menu form { margin: 0; }
.role-switcher__option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 14px;
  font-size: 0.92rem;
  color: var(--color-text);
  cursor: pointer;
}
.role-switcher__option:hover {
  background: var(--color-surface-2);
}

/* ── Onboarding role picker ────────────── */
.onboarding-card { max-width: 560px; margin: 0 auto; }

.role-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.role-choice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.role-choice:has(input:checked) {
  border-color: var(--color-primary);
  background: #eaf2fc;
}
.role-choice input {
  margin-right: 8px;
}
.role-choice__title {
  font-weight: 600;
  color: var(--color-text);
}
.role-choice__desc {
  font-size: 0.85rem;
  color: var(--color-text-mut);
  padding-left: 24px;
}

.primary-picker { margin-bottom: 20px; }
.primary-picker__radios {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.primary-choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--color-text);
}

/* ── Cross-role panels ─────────────────── */
.cross-role {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.cross-role__heading {
  font-size: 0.92rem;
  color: var(--color-text-mut);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 14px;
}
.cross-role__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cross-role__form { margin: 0; }
.cross-role__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  cursor: pointer;
  color: var(--color-text);
  font-size: 0.95rem;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.cross-role__item:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
}
.cross-role__count {
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--color-primary-d);
  min-width: 32px;
  text-align: center;
}
.cross-role__label { flex: 1; }
.cross-role__arrow { color: var(--color-text-mut); }

/* ── Driver dashboard + routes ─────────── */
.driver-dash { max-width: 900px; margin: 0 auto; }

.driver-dash__heading {
  font-size: 1.05rem;
  color: var(--color-text-mut);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.driver-dash__active { margin-bottom: 28px; }

.routes-actions {
  max-width: 900px;
  margin: 0 auto 28px;
  text-align: center;
}
.offers-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.offers-toolbar .btn { min-height: 48px; }
.subscriber-composer { position: relative; }
.subscriber-composer > summary {
  display: inline-flex;
  align-items: center;
  list-style: none;
  user-select: none;
}
.subscriber-composer > summary::-webkit-details-marker { display: none; }
.subscriber-composer[open] > summary {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
}
.subscriber-composer__panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  padding: 16px;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(40, 60, 100, 0.16);
}
.subscriber-composer__panel form { margin: 0; }
.subscriber-composer__panel textarea { min-height: 88px; }
.subscriber-composer__panel .btn { margin-top: 12px; }
@media (max-width: 520px) {
  .offers-toolbar { display: grid; grid-template-columns: 1fr; }
  .offers-toolbar .btn { display: block; width: 100%; }
  .subscriber-composer > summary { justify-content: center; }
  .subscriber-composer__panel {
    position: static;
    width: 100%;
    margin-top: 8px;
  }
}

.routes-section {
  max-width: 900px;
  margin: 0 auto 32px;
}
.routes-section h2 {
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 0 0 14px;
}

.route-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.route-list__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
}
.route-list__path {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.route-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.88rem;
  color: var(--color-text-mut);
}

.route-tag {
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-surface-2);
  color: var(--color-text);
}
.route-tag--planned   { background: #eaf2fc; color: #2f5894; }
.route-tag--active    { background: #e8f5ee; color: #2f6b48; }
.route-tag--completed { background: #f4f6fb; color: var(--color-text-mut); }
.route-tag--cancelled { background: #fceaea; color: #8c3a3a; }
.route-tag--open      { background: #e8f5ee; color: #2f6b48; }
.route-tag--assigned  { background: #eaf2fc; color: #2f5894; }
.route-tag--picked_up { background: #f4f6fb; color: var(--color-text-mut); }
.route-tag--reserved  { background: #fff6df; color: #8a6115; }
.route-tag--expired   { background: #f4f6fb; color: var(--color-text-mut); }
.route-tag--pending   { background: #fff6df; color: #8a6115; }
.route-tag--accepted  { background: #e8f5ee; color: #2f6b48; }
.route-tag--rejected  { background: #fceaea; color: #8c3a3a; }

.routes-empty {
  color: var(--color-text-mut);
  font-style: italic;
  text-align: center;
  padding: 20px;
}

.offer-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}
.offer-price-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.offer-price-form__input-wrap {
  position: relative;
  width: 160px;
}
.offer-price-form__input-wrap .form-input {
  height: 38px;
  padding: 7px 48px 7px 10px;
}
.offer-price-form__input-wrap span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-mut);
  font-size: 0.76rem;
  font-weight: 700;
  pointer-events: none;
}
/* The way back for a sold-out posting whose goods came home. Soft green: an
   opportunity, not a problem. */
.offer-restock-hint {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eef9f0;
  border: 1px solid #cfe7d6;
  color: #1f6b3a;
  font-size: 0.86rem;
  font-weight: 700;
}
@media (max-width: 520px) {
  .offer-list-actions { align-items: stretch; flex-direction: column; }
  .offer-list-actions > .btn { text-align: center; }
  .offer-price-form { display: grid; grid-template-columns: 1fr auto; }
  .offer-price-form__input-wrap { width: auto; }
}

/* ── Voice intake ──────────────────────── */
.voice-card { max-width: 540px; margin: 0 auto; }

.voice-lang-row { margin-bottom: 24px; }

.lang-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lang-chip {
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-mut);
  border-radius: 999px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s;
}
.lang-chip.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.voice-mic-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
}

.voice-mic-btn {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  box-shadow: 0 6px 20px rgba(122, 167, 230, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, box-shadow 0.2s;
}
.voice-mic-btn:hover:not(:disabled) {
  transform: scale(1.03);
  box-shadow: 0 8px 26px rgba(122, 167, 230, 0.45);
}
.voice-mic-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.voice-mic-btn.is-recording {
  background: linear-gradient(135deg, #e8a4a4, #f6c89f);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 164, 164, 0.5); }
  50%      { box-shadow: 0 0 0 16px rgba(232, 164, 164, 0); }
}

.voice-status {
  font-size: 1.05rem;
  color: var(--color-text-mut);
  margin: 0;
}
.voice-timer {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  margin: 0;
  min-height: 1.5em;
}

.voice-hint {
  font-size: 0.85rem;
  color: var(--color-text-mut);
  text-align: center;
  margin-top: 12px;
}

.voice-format-hint {
  max-width: 540px;
  margin: 16px auto 0;
  padding: 16px 20px;
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  text-align: center;
}
.voice-format-hint__label {
  font-size: 0.78rem;
  color: var(--color-text-mut);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}
.voice-format-hint__example {
  font-size: 1.05rem;
  color: var(--color-text);
  margin: 0;
  line-height: 1.5;
}
.voice-format-hint__example strong {
  color: var(--color-primary-d);
}
.voice-format-hint__sub {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--color-text-mut);
}

/* ── Voice confirmation ─────────────────── */
.voice-confirm-card { max-width: 640px; margin: 0 auto; }

.confirm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
.confirm-tile {
  background: var(--color-surface-2);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--color-border);
}
.confirm-tile__label {
  font-size: 0.85rem;
  color: var(--color-text-mut);
  margin-bottom: 6px;
}
.confirm-tile__value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
}
.confirm-tile__value--big {
  font-size: 2.4rem;
  font-variant-numeric: tabular-nums;
}
.confirm-unit {
  font-size: 1rem;
  color: var(--color-text-mut);
  margin-left: 4px;
  font-weight: 400;
}
.confirm-tile__sub {
  font-size: 0.75rem;
  color: var(--color-text-mut);
  margin-top: 6px;
  font-family: ui-monospace, monospace;
}
.confirm-coords { font-family: ui-monospace, monospace; font-size: 0.9rem; }

.confirm-audio { margin: 16px 0; }
.confirm-audio audio { width: 100%; }
.confirm-transcript {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--color-text-mut);
}
.confirm-transcript summary { cursor: pointer; }

.confirm-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}
.btn--big {
  padding: 16px 28px;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.confirm-emoji { font-size: 1.4rem; }

@media (max-width: 480px) {
  .confirm-grid { grid-template-columns: 1fr; }
  .voice-mic-btn { width: 120px; height: 120px; }
}

/* ── Compact bid cell (browse / marketplace) ─ */
.bid-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
}
.bid-cell__video {
  width: 100%;
  max-width: 240px;
  max-height: 130px;
  border-radius: 8px;
  background: #000;
  object-fit: cover;
}
.bid-cell__form { margin: 0; }
.bid-cell__row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.bid-cell__row .form-input {
  padding: 6px 8px;
  font-size: 0.9rem;
  min-width: 0;
  flex: 1 1 0;
}
.bid-cell__row .btn {
  padding: 6px 14px;
  font-size: 0.9rem;
  white-space: nowrap;
}
.bid-cell__note { margin-top: 4px; }
.bid-cell__note summary {
  font-size: 0.78rem;
  color: var(--color-text-mut);
  cursor: pointer;
  padding: 2px 0;
}
.bid-cell__note textarea {
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 0.85rem;
}

/* ── Mobile offer cards (browse / marketplace) ─ */
.offer-card-list {
  display: grid;
  gap: 14px;
}
.offer-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.offer-card__video-wrap {
  position: relative;
  background: #000;
}
.offer-card__video-button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.offer-card__video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  object-fit: cover;
}
.offer-card__video-play {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
  transition: transform 0.15s, background 0.15s;
}
.offer-card__video-play-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.offer-card__video-button:hover .offer-card__video-play,
.offer-card__video-button:focus-visible .offer-card__video-play {
  background: rgba(31, 122, 62, 0.9);
  transform: scale(1.06);
}
.offer-card__video-button:focus-visible {
  outline: 3px solid rgba(31, 122, 62, 0.35);
  outline-offset: -3px;
}
.offer-card__body {
  padding: 14px;
}
.offer-card__top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}
.offer-card__title {
  margin: 0;
  color: var(--color-text);
  font-size: 1.08rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.offer-card__quantity {
  margin: 4px 0 0;
  color: var(--color-text);
  font-weight: 700;
}
.offer-card__packaging {
  margin: 2px 0 0;
  color: var(--color-text-mut);
  font-size: 0.85rem;
}
.offer-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 0;
}
.offer-card__facts div {
  min-width: 0;
}
.offer-card__facts dt {
  color: var(--color-text-mut);
  font-size: 0.74rem;
}
.offer-card__facts dd {
  margin: 2px 0 0;
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.offer-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.offer-card__share {
  background: #eef9f0;
  color: #1f6b3a;
  border-color: #cfe7d6;
}
.seller-follow-form {
  display: inline-flex;
  margin-left: 6px;
  vertical-align: middle;
}
.seller-follow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-d);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.seller-follow-btn__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.seller-follow-btn:hover {
  border-color: var(--color-primary);
  background: #eef4fc;
}
.seller-follow-btn.is-following {
  border-color: var(--color-success);
  background: #e8f5ee;
  color: #2f6b48;
}
.offer-card__bid-form {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.offer-card__bid-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.offer-card__bid-grid label {
  min-width: 0;
}
.offer-card__bid-grid label > span {
  display: block;
  color: var(--color-text-mut);
  font-size: 0.78rem;
  margin-bottom: 4px;
}
.offer-card__note {
  margin: 10px 0 12px;
}
.offer-card__note summary {
  cursor: pointer;
  color: var(--color-primary-d);
  font-size: 0.86rem;
}
.offer-card__note textarea {
  margin-top: 6px;
}

@media (max-width: 520px) {
  .offer-card__facts {
    grid-template-columns: 1fr 1fr;
  }
  .offer-card__facts div:last-child {
    grid-column: 1 / -1;
  }
  .offer-card__bid-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 760px) {
  .offer-card {
    display: grid;
    grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
  }
  .offer-card--no-video {
    display: block;
  }
  .offer-card__video-wrap,
  .offer-card__video-button {
    height: 100%;
    min-height: 260px;
  }
  .offer-card__video {
    height: 100%;
    min-height: 260px;
    aspect-ratio: auto;
  }
  .offer-card__body {
    padding: 16px;
  }
}

.has-video-modal {
  overflow: hidden;
}
.browse-video-modal[hidden] {
  display: none;
}
.browse-video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(9, 14, 12, 0.84);
}
.browse-video-modal__dialog {
  width: min(900px, 100%);
}
.browse-video-modal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: #fff;
}
.browse-video-modal__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.browse-video-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.browse-video-modal__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.browse-video-modal__close:hover,
.browse-video-modal__close:focus-visible {
  background: rgba(255, 255, 255, 0.22);
}
.browse-video-modal__player {
  display: block;
  width: 100%;
  max-height: 78vh;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

/* ── Live video recorder (typed-offer form) ─ */
.video-recorder {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 16px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-2);
}
.video-recorder__live,
.video-recorder__playback {
  width: 100%;
  max-height: 360px;
  border-radius: 10px;
  background: #000;
  object-fit: cover;
}
.video-recorder__status {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-mut);
  margin: 0;
}
.video-recorder__timer {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 1.3rem;
  color: var(--color-text);
  margin: 0;
  min-height: 1.3em;
}
.video-recorder__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* ── Preferences ─ */
.preference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.preference-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.preference-item:hover { border-color: var(--color-primary); }
.preference-item:has(input:checked) {
  border-color: var(--color-primary);
  background: #eaf2fc;
}
.preference-item input { margin: 0; }
/* The emoji is the primary cue for low-literacy users, so it is sized well
   above the label rather than treated as decoration next to it. */
.preference-item__icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.preference-item__title {
  font-size: 0.95rem;
  color: var(--color-text);
}
.preference-section {
  margin-top: 22px;
  margin-bottom: 22px;
}
.preference-section__header {
  margin-bottom: 10px;
}
.preference-section__header h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text);
}
.preference-section__header p {
  margin: 4px 0 0;
  color: var(--color-text-mut);
  font-size: 0.84rem;
}
.preference-location-add-label {
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 800;
}
.location-list {
  display: grid;
  gap: 10px;
}
.location-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.location-row:hover { border-color: var(--color-primary); }
.location-row.is-default {
  border-color: var(--color-primary);
  background: #eaf2fc;
}
.location-row input {
  margin: 3px 0 0;
}
.location-row__main {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.location-row__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.location-row__name {
  font-weight: 700;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.location-row__badge {
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.location-row__coords {
  color: var(--color-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
}
.location-row__meta {
  color: var(--color-text-mut);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.location-add-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.location-add-actions .btn {
  flex: 1 1 170px;
  text-align: center;
}
.location-add-actions .btn--location-capture {
  background: #eaf2fc;
  border-color: var(--color-primary-d);
  border-width: 2px;
  color: var(--color-text);
  font-weight: 800;
}
.location-add-actions .btn--location-capture:hover {
  background: #dbeafe;
}
.location-add-actions .btn--location-capture:disabled {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text-mut);
  cursor: wait;
}

/* Catalog filter pill row active state (used by offer marketplace) */
.catalog-filters .btn.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Browse posts search + category filter */
.browse-tools {
  max-width: 340px;
  margin: 0 0 20px;
}
.browse-search {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.browse-search__input {
  flex: 1 1 auto;
}
.browse-search__btn {
  flex: 0 0 auto;
}

/* Browse posts category filter (multi-select checkbox dropdown) */
.browse-filter {
  max-width: 340px;
  margin: 0 0 20px;
}
.browse-filter__dd {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
}
.browse-filter__summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--color-text-mut);
  list-style: none;
}
.browse-filter__summary::-webkit-details-marker { display: none; }
.browse-filter__summary::after {
  content: "▾";
  float: right;
}
.browse-filter__dd[open] .browse-filter__summary::after { content: "▴"; }
.browse-filter__panel {
  border-top: 1px solid var(--color-border);
  padding: 10px 14px;
  max-height: 320px;
  overflow-y: auto;
}
.browse-filter__group {
  margin: 10px 0 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-mut);
}
.browse-filter__group:first-child { margin-top: 0; }
.browse-filter__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.92rem;
  cursor: pointer;
}
.browse-filter__opt input { margin: 0; flex: 0 0 auto; }
.browse-filter__apply { margin-top: 14px; }

/* Vehicle picker — large graphic icon tiles (low-literacy friendly) */
.vehicle-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.vehicle-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.vehicle-tile:hover { border-color: var(--color-primary); }
.vehicle-tile input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.vehicle-tile__icon {
  font-size: 2.6rem;
  line-height: 1;
}
.vehicle-tile__label {
  font-size: 0.95rem;
  color: var(--color-text);
}
.vehicle-tile.is-selected,
.vehicle-tile:has(input:checked) {
  border-color: var(--color-primary);
  background: #eef4fc;
}
.vehicle-tile:has(input:focus-visible) {
  outline: 2px solid var(--color-primary-d);
  outline-offset: 2px;
}
/* Urban + Inter-urban both use the sedan glyph — tint each a distinct
   colour (the default emoji is red) so they read as different at a glance. */
.vehicle-tile--urban .vehicle-tile__icon { filter: hue-rotate(95deg) saturate(1.2); }
.vehicle-tile--interurban .vehicle-tile__icon { filter: hue-rotate(200deg) saturate(1.35); }

/* Request transport page */
.delivery-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 18px 0 18px;
  padding: 26px 0 6px;
}
.delivery-hero h1 {
  margin: 0 0 8px;
  font-size: 2rem;
  line-height: 1.15;
}
.delivery-hero p {
  margin: 0;
  max-width: 620px;
  color: var(--color-text-mut);
}
.delivery-hero__eyebrow {
  color: #7a4e18 !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.delivery-form {
  display: grid;
  gap: 16px;
}
.delivery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.delivery-panel {
  position: relative;
  padding: 20px;
  border: 1px solid #dfe6dc;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.99)),
    #fff;
  box-shadow: 0 10px 28px rgba(35, 48, 76, 0.07);
}
.delivery-panel--vehicle {
  border-color: #d9e4f5;
  background:
    linear-gradient(135deg, rgba(238, 244, 252, 0.92), rgba(255, 255, 255, 0.98) 55%),
    #fff;
}
.delivery-panel--package {
  border-color: #ead8c4;
  background:
    linear-gradient(135deg, rgba(255, 247, 237, 0.88), rgba(255, 255, 255, 0.98) 58%),
    #fff;
}
.delivery-panel[hidden] { display: none; }
.delivery-form:has(input[name="vehicle_type"][value="URBAN"]:checked) #package-panel,
.delivery-form:has(input[name="vehicle_type"][value="INTERURBAN"]:checked) #package-panel {
  display: none;
}
.delivery-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.delivery-panel__head h2 {
  margin: 0 0 3px;
  font-size: 1.18rem;
  line-height: 1.25;
}
.delivery-panel__head p {
  margin: 0;
  color: var(--color-text-mut);
  font-size: 0.92rem;
}
.delivery-panel__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #2e7d57;
  color: #fff;
  font-weight: 800;
  line-height: 1;
}
.delivery-panel--vehicle .delivery-panel__badge { background: #4f79b8; }
.delivery-panel--package .delivery-panel__badge { background: #b96f2c; }
.delivery-vehicle-picker {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.delivery-vehicle-picker .vehicle-tile {
  min-height: 122px;
  border-radius: 8px;
}
.pickup-choice {
  display: grid;
  gap: 12px;
}
.pickup-choice__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-mut);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}
.pickup-choice__divider::before,
.pickup-choice__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
}
.native-select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.delivery-subbox {
  border: 1px solid #e5e9f2;
  border-radius: 8px;
  background: #fbfcff;
  padding: 14px;
  margin-top: 12px;
}
.delivery-subbox:first-of-type { margin-top: 0; }
.delivery-subbox h3 {
  margin: 0 0 10px;
  font-size: 0.98rem;
  line-height: 1.25;
}
.receiver-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.receiver-search-row .form-row { margin-bottom: 0; }
.receiver-search-row__btn {
  min-height: 44px;
  white-space: nowrap;
}
.receiver-selected {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #bdd9c8;
  border-radius: 8px;
  background: #f1faf4;
  color: #195c35;
  font-weight: 800;
}
.location-card-list {
  display: grid;
  gap: 9px;
}
.location-card {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 24px 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid #dfe6dc;
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  padding: 10px;
  text-align: left;
}
.location-card:hover,
.location-card:focus-visible {
  border-color: #2e7d57;
  outline: none;
}
.location-card.is-selected {
  border-color: #2e7d57;
  background: #f1faf4;
  box-shadow: 0 0 0 2px rgba(46, 125, 87, 0.10);
}
.location-card--gps {
  min-height: 58px;
}
.location-card__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #cfd8cf;
  color: transparent;
  background: #fff;
  font-weight: 900;
  line-height: 1;
}
.location-card.is-selected .location-card__check {
  background: #2e7d57;
  border-color: #2e7d57;
  color: #fff;
}
.location-card__icon {
  font-size: 1.35rem;
  line-height: 1;
  text-align: center;
}
.location-card strong,
.location-card small {
  display: block;
  overflow-wrap: anywhere;
}
.location-card strong {
  font-size: 0.95rem;
  line-height: 1.25;
}
.location-card small {
  color: var(--color-text-mut);
  font-size: 0.78rem;
  line-height: 1.25;
  margin-top: 2px;
}
.receiver-results {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.receiver-results[hidden] { display: none; }
.receiver-result {
  width: 100%;
  border: 1px solid #dfe6dc;
  border-radius: 8px;
  background: #f7fbf7;
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 10px;
  text-align: left;
}
.receiver-result:hover,
.receiver-result:focus-visible {
  border-color: #2e7d57;
  outline: none;
}
.delivery-package-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(260px, 1fr);
  gap: 18px;
  align-items: start;
}
.delivery-submit {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 4px;
}
.delivery-submit .btn {
  max-width: 440px;
}

@media (max-width: 760px) {
  .delivery-hero {
    display: block;
    padding-top: 14px;
  }
  .delivery-hero h1 { font-size: 1.65rem; }
  .delivery-grid,
  .delivery-package-grid {
    grid-template-columns: 1fr;
  }
  .delivery-panel {
    padding: 16px;
  }
  .delivery-vehicle-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .delivery-vehicle-picker .vehicle-tile {
    min-height: 112px;
    padding: 14px 8px;
  }
  .delivery-vehicle-picker .vehicle-tile__icon {
    font-size: 2.2rem;
  }
  .delivery-vehicle-picker .vehicle-tile__label {
    font-size: 0.86rem;
  }
  .receiver-search-row {
    grid-template-columns: 1fr;
  }
  .receiver-search-row__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Sell page */
.sell-hero-simple {
  padding-bottom: 18px;
}
.offer-composer {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
.offer-composer__location-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 22px 0;
}
.offer-composer__location-alert strong,
.offer-composer__location-alert span { display: block; }
.offer-composer__location-alert span { margin-top: 2px; font-size: 0.86rem; }
.offer-composer__location-alert .btn { flex: none; }
.offer-step {
  padding: 28px;
  border-bottom: 1px solid var(--color-border);
}
.offer-step__heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.offer-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eaf2fc;
  color: var(--color-primary-d);
  font-weight: 800;
}
.offer-step__heading h2 { margin: 1px 0 2px; font-size: 1.12rem; }
.offer-step__heading p { margin: 0; color: var(--color-text-mut); font-size: 0.88rem; }
.offer-category-picker { margin: 0; padding: 0; border: 0; }
.offer-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.offer-category-tile {
  width: 100%;
  min-height: 112px;
  font-family: inherit;
  cursor: pointer;
}
.offer-category-tile.is-selected {
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(122, 167, 230, 0.15);
}
.offer-product-step { margin-top: 22px; }
.offer-category-prompt {
  margin: 16px 0 0;
  color: var(--color-text-mut);
  text-align: center;
  font-size: 0.9rem;
}
.offer-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.offer-form-grid__wide { grid-column: 1 / -1; }
.offer-field-error { margin: 6px 0 0; }
.offer-notify-row {
  margin-bottom: 0;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-2);
}
.offer-notify-row .check-label { align-items: flex-start; }
.offer-notify-row small {
  display: block;
  margin-top: 2px;
  color: var(--color-text-mut);
  font-size: 0.78rem;
  font-weight: 400;
}
.offer-composer__actions { padding: 24px 28px 28px; text-align: center; }
.offer-composer__review-hint { margin: 8px 0 12px; }
.offer-composer__cancel { display: inline-block; font-size: 0.9rem; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 600px) {
  .sell-hero-simple { padding-top: 30px; }
  .sell-hero-simple h1 { font-size: 1.8rem; }
  .offer-step { padding: 22px 18px; }
  .offer-composer__actions { padding: 20px 18px 24px; }
  .offer-composer__location-alert {
    align-items: stretch;
    flex-direction: column;
    margin: 16px 16px 0;
  }
  .offer-composer__location-alert .btn { text-align: center; }
  .offer-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-category-tile { min-height: 104px; }
  .offer-form-grid { grid-template-columns: 1fr; }
  .offer-form-grid__wide { grid-column: auto; }
}
.mode-badges {
  display: flex;
  gap: 12px;
  max-width: 440px;
  margin: 0 auto 16px;
}
.sell-mode-switch {
  max-width: 540px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(40, 60, 100, 0.04);
}
.mode-badge {
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--color-text);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.mode-badge__icon { font-size: 1.3rem; line-height: 1; }
.mode-badge__label { font-size: 0.95rem; font-weight: 600; }
.mode-badge.is-active {
  border-color: var(--color-primary);
  background: #eef4fc;
  box-shadow: 0 1px 6px rgba(90, 143, 212, 0.14);
}
.sell-panel {
  max-width: 540px;
  border-radius: 8px;
  border-top: 4px solid var(--color-warn);
}
.voice-example {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 14px;
  background: #f3f7f4;
  border: 1px solid #dcebdd;
  border-radius: 8px;
  text-align: center;
}
.voice-example__step { font-size: 1.7rem; line-height: 1.35; }
.voice-example__arrow { color: var(--color-text-mut); font-size: 1.3rem; }

.product-search {
  position: relative;
  margin-bottom: 8px;
}
.product-search__input {
  padding-left: 38px;
}
.product-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-text-mut);
  border-radius: 50%;
  transform: translateY(-55%);
  pointer-events: none;
  opacity: 0.75;
}
.product-search__icon::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -5px;
  width: 7px;
  height: 2px;
  background: var(--color-text-mut);
  border-radius: 999px;
  transform: rotate(45deg);
}
.product-search__status {
  margin-top: -2px;
  margin-bottom: 8px;
}
.product-picker {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
/* Tappable item rows instead of a native list: phone browsers collapse a
   <select> into a picker, and the items must stay in view while searching. */
.product-card-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  padding: 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.product-card {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 24px 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e2e9f4;
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.product-card:hover,
.product-card:focus-visible {
  border-color: var(--color-primary);
  outline: none;
}
.product-card.is-selected {
  border-color: var(--color-primary);
  background: #eef4fc;
  box-shadow: 0 0 0 2px rgba(122, 167, 230, 0.18);
}
.product-card__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid #d3dceb;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-weight: 900;
  line-height: 1;
}
.product-card.is-selected .product-card__check {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}
.product-card__icon {
  font-size: 1.4rem;
  line-height: 1;
  text-align: center;
}
.product-card__name {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.product-card-list__empty {
  margin: 8px 4px;
  text-align: center;
}
@media (max-width: 600px) {
  /* Keep the results open on a phone: a taller box, never a collapsed field. */
  .product-card-list { max-height: 60vh; }
  .product-card { min-height: 58px; }
}

/* Guided voice capture */
.voice-capture__icon { display: inline-block; font-size: 4.2rem; line-height: 1; margin: 6px 0; }
.voice-capture__icon.is-flashing { animation: voice-flash 1s ease-in-out infinite; }
.voice-capture__icon.is-recording { animation: voice-pulse 0.8s ease-in-out infinite; }
@keyframes voice-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes voice-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.voice-capture__prompt { font-size: 1.15rem; font-weight: 600; margin: 4px 0 10px; }
.voice-progress { display: flex; justify-content: center; gap: 16px; font-size: 1.5rem; margin: 8px 0 14px; }
.voice-progress [data-dot] { opacity: 0.3; }
.voice-progress [data-dot].is-current,
.voice-progress [data-dot].is-done { opacity: 1; }
.voice-progress [data-dot].is-done::after { content: ' ✓'; font-size: 0.85rem; color: #166534; }
.voice-video { width: 100%; max-width: 320px; border-radius: 8px; background: #000; margin: 8px auto; display: block; }

/* ── Footer ───────────────────────────── */
.footer {
  text-align: center;
  color: var(--color-text-mut);
  font-size: 0.85rem;
  padding: 28px 20px;
}

/* Header bell + unread badge */
.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #2E7D32;
  background: #f3f7f4;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.notif-bell:hover,
.notif-bell:focus-visible {
  background: #e7efe9;
  outline: none;
}
.notif-bell__count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #2E7D32;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.notif-bell__count.is-hidden { display: none; }

.route-list__item--unread {
  background: #f3f7f4;
  border-left: 3px solid #2E7D32;
}

/* Camera-style photo input — replaces the native "Choose file" button. */
.photo-input {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.photo-input input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.photo-input__btn {
  cursor: pointer;
}
.photo-input__filename {
  color: var(--color-text-mut, #666);
  font-size: 0.9rem;
}

/* Inline "remove this saved location" button next to each row. */
.location-remove-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e7efe9;
  background: #fff;
  color: #b00020;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}
.location-remove-btn:hover,
.location-remove-btn:focus-visible {
  background: #fbeaee;
  outline: none;
}

/* ── Driver wallet ──────────────────────────────────────────────── */
/* Dashboard "My wallet" tile: show the balance prominently. */
.action-tile--wallet:hover { border-color: #b8e0d2; }
.action-tile__wallet-balance {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #2f6b48;
  line-height: 1.1;
}
.action-tile__wallet-balance.is-empty { color: #b06a2c; }
.action-tile__wallet-unit { font-size: 0.85rem; font-weight: 600; }

/* Balance hero card on the wallet page. */
.wallet-balance-card {
  max-width: 540px;
  margin: 0 auto 16px;
  padding: 24px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  text-align: center;
  box-shadow: var(--shadow);
}
.wallet-balance-card.is-positive { background: #e8f5ee; border-color: #c9e6d6; }
.wallet-balance-card.is-empty    { background: #fcf2e6; border-color: #f3ddc1; }
.wallet-balance-card__label {
  display: block;
  font-size: 0.95rem;
  color: var(--color-text-mut);
  margin-bottom: 6px;
}
.wallet-balance-card__amount {
  display: block;
  font-size: 2.6rem;
  font-weight: 800;
  color: #2f6b48;
  line-height: 1.05;
}
.wallet-balance-card.is-empty .wallet-balance-card__amount { color: #b06a2c; }
.wallet-balance-card__unit { font-size: 1.1rem; font-weight: 600; }
.wallet-balance-card__warn {
  margin: 12px 0 0;
  font-size: 0.95rem;
  color: #8c5a2a;
}

.wallet-fee-note {
  max-width: 540px;
  margin: 0 auto 18px;
  text-align: center;
  color: var(--color-text-mut);
  font-size: 0.95rem;
}

.wallet-topup, .wallet-activity { max-width: 540px; margin: 0 auto 18px; }
.wallet-section-title { margin: 0 0 16px; font-size: 1.2rem; }

/* Wave / Orange Money picker tiles (mirror the vehicle picker). */
.pay-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pay-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 10px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  text-align: center;
  font: inherit;
  width: 100%;
  transition: border-color 0.15s, background 0.15s, transform 0.04s;
}
.pay-tile:active { transform: translateY(1px); }
.pay-tile__icon { font-size: 2.4rem; line-height: 1; }
.pay-tile__label { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.pay-tile__go {
  font-size: 0.82rem;
  font-weight: 600;
  color: #2f6b48;
}
.pay-tile--wave  { border-color: #cfe6f5; }
.pay-tile--orange { border-color: #f6ddc1; }
.pay-tile--wave.is-selected   { border-color: #4aa3df; background: #eaf4fb; }
.pay-tile--orange.is-selected { border-color: #f29a3c; background: #fdf2e6; }
.pay-tile:focus-visible {
  outline: 2px solid var(--color-primary-d);
  outline-offset: 2px;
}
.wallet-topup__hint {
  margin: 14px 0;
  font-size: 0.9rem;
  color: var(--color-text-mut);
}
.wallet-amount-echo {
  margin: 6px 0 4px;
  text-align: center;
  color: var(--color-text-mut);
  font-size: 0.95rem;
}
.wallet-amount-echo strong { color: #2f6b48; font-size: 1.15rem; }
.wallet-copy-feedback {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: #2f6b48;
  min-height: 1.2em;
}

/* Tappable star rating (delivery ratings). Stars are laid out in reverse DOM
   order with row-reverse so hovering/checking one fills it and every lower
   star — pure CSS, no JS, works for several rating forms on one page. */
.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  font-size: 2.1rem;
  line-height: 1;
  margin: 4px 0 8px;
}
.star-rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-rating label {
  color: #dfe3ec;
  cursor: pointer;
  padding: 0 3px;
  transition: color 0.1s;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label { color: #f6c34a; }
.star-rating input:focus-visible + label {
  outline: 2px solid var(--color-primary-d);
  outline-offset: 2px;
}

/* Numbered steps + copy box + USSD fallback. */
.wallet-step { margin: 16px 0 8px; font-weight: 600; color: var(--color-text); }
.copy-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 2px dashed #cfe0f6;
  border-radius: var(--radius);
  background: #f4f8fe;
}
.copy-box__number {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.5px;
  word-break: break-all;
}
.copy-box__btn { flex: none; padding: 8px 16px; }
.wallet-ussd-btn {
  display: block;
  margin-top: 10px;
  padding: 12px;
  text-align: center;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.wallet-ussd-btn:hover { background: #eef1f7; text-decoration: none; }

/* Activity list — bank-statement style rows. */
.wallet-txn-list { list-style: none; margin: 0; padding: 0; }
.wallet-txn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.wallet-txn:last-child { border-bottom: none; }
.wallet-txn__icon { font-size: 1.4rem; line-height: 1; }
.wallet-txn__body { flex: 1; display: flex; flex-direction: column; }
.wallet-txn__title { font-weight: 600; color: var(--color-text); }
.wallet-txn__meta { font-size: 0.82rem; color: var(--color-text-mut); }
.wallet-txn__amount { font-weight: 700; white-space: nowrap; }
.wallet-txn__unit { font-size: 0.78rem; font-weight: 600; }
.wallet-txn--credit .wallet-txn__amount { color: #2f6b48; }
.wallet-txn--debit  .wallet-txn__amount { color: #b04a4a; }
.wallet-txn--pending .wallet-txn__amount { color: #b06a2c; }
.wallet-empty { color: var(--color-text-mut); text-align: center; margin: 8px 0; }

/* Order receipt: file picker plus clipboard-image paste. */
.receipt-form { margin-top: 14px; }
.receipt-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  color: var(--color-text-mut);
  font-size: 0.82rem;
  text-transform: uppercase;
}
.receipt-or::before,
.receipt-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.receipt-paste-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  padding: 18px;
  text-align: center;
  border: 2px dashed #b9cbe3;
  border-radius: var(--radius);
  background: #f7faff;
  color: var(--color-text);
  cursor: text;
}
.receipt-paste-zone:focus {
  outline: none;
  border-color: var(--color-primary-d);
  box-shadow: 0 0 0 3px rgba(122, 167, 230, 0.18);
}
.receipt-paste-zone.is-ready {
  border-color: var(--color-success);
  background: #f1faf4;
}
.receipt-paste-zone__icon { font-size: 2rem; line-height: 1; margin-bottom: 7px; }
.receipt-paste-zone strong { font-size: 1rem; }
.receipt-paste-zone span:last-child {
  margin-top: 4px;
  color: var(--color-text-mut);
  font-size: 0.82rem;
}
.receipt-clipboard-btn { margin-top: 8px; }
.receipt-paste-status { min-height: 1.25em; text-align: center; }
.receipt-paste-preview {
  display: block;
  max-width: 100%;
  max-height: 280px;
  margin: 10px auto 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  object-fit: contain;
}
.receipt-paste-preview[hidden] { display: none; }
.receipt-submit { margin-top: 12px; }

/* ── Browse category tiles ───────────────────────────────────────────────
   Shown only to a visitor with no followed sellers and no preferred
   categories. They have nothing to personalise a feed with, and an empty
   page with a search box would demand typing — the one thing our
   low-literacy users cannot do. The emoji is the cue; the label supports it. */
.browse-tiles-section { margin: 18px 0 8px; }
.browse-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.browse-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 10px;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.browse-tile:hover,
.browse-tile:focus-visible {
  border-color: var(--color-primary);
  background: #f4faf6;
  transform: translateY(-1px);
}
/* Sized well above the label: the picture is what is actually navigated by. */
.browse-tile__icon { font-size: 2.25rem; line-height: 1; }
.browse-tile__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}
.browse-tiles__hint { text-align: center; margin-top: 12px; }
/* Shown when a search found nothing in the chosen category and was widened. */
.browse-widened {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
}
.browse-tile.is-selected {
  border-color: var(--color-primary);
  background: #eaf6ed;
}

/* A seller's own listing in the browse feed: visible for price comparison,
   but visually distinct so it is never mistaken for something to buy. */
.offer-card--mine { border-color: #cbb489; background: #fffdf7; }
.route-tag--mine { background: #f6e6c8; color: #7a5b1e; }
.offer-card__mine-hint { margin-top: 10px; }
.offer-card__order-total { margin: 8px 0 0; font-size: 0.95rem; }

/* ── Follow a seller ─────────────────────────────────────────────────────
   The icon alone told nobody it was tappable, so it carries a word too.
   Red is reserved for the active state: following is the thing you can
   switch off, and an unfollowed button should invite rather than alarm. */
.seller-follow-btn {
  width: auto;
  gap: 5px;
  padding: 4px 10px;
  font-size: 0.78rem;
}
.seller-follow-btn__label { font-weight: 700; }
.seller-follow-btn.is-following {
  background: #d92d20;
  border-color: #d92d20;
  color: #fff;
}
.seller-follow-btn.is-following:hover {
  background: #b42318;
  border-color: #b42318;
}
.browse-follow-hint {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: #fff6f5;
  border: 1px solid #f7d4d0;
  color: #7a2820;
  font-size: 0.9rem;
  text-align: center;
}

/* ── Doorstep handover: inspection, payment check, courier verdict ────────── */
.order-step { text-align: center; margin-top: 16px; }
.order-step__icon { font-size: 3rem; line-height: 1; margin: 4px 0 8px; }
.order-step__title { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; }
.order-refuse-btn { margin-top: 10px; }
.order-hold {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.order-hold span:first-child { font-size: 1.6rem; line-height: 1; }
.order-hold small { display: block; color: var(--color-text-mut); }

.inspect-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.inspect-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e9f4;
  border-radius: 8px;
  background: #fff;
}
.inspect-item__icon { font-size: 1.5rem; line-height: 1; text-align: center; }
.inspect-item__label { font-size: 0.98rem; font-weight: 600; }
.inspect-item__answers { display: flex; gap: 8px; }
.inspect-answer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 44px;
  border: 1px solid #dfe6f0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1.3rem;
  opacity: 0.45;
}
.inspect-answer input { position: absolute; opacity: 0; width: 0; height: 0; }
.inspect-answer:has(input:checked) { opacity: 1; }
.inspect-answer--yes:has(input:checked) { border-color: #2e7d57; background: #f1faf4; }
.inspect-answer--no:has(input:checked)  { border-color: #c0554b; background: #fdf2f1; }

/* The courier's one instruction. Deliberately loud: it is read in a doorway,
   in a hurry, sometimes with the buyer talking over it. */
.courier-verdict {
  margin-top: 16px;
  padding: 24px 18px;
  border-radius: 12px;
  text-align: center;
  border: 2px solid transparent;
}
.courier-verdict--release { background: #eaf6ed; border-color: #2e7d57; }
.courier-verdict--hold    { background: #fdf2f1; border-color: #c0554b; }
.courier-verdict__icon  { font-size: 3.4rem; line-height: 1; margin: 0 0 8px; }
.courier-verdict__title { margin: 0 0 4px; font-size: 1.35rem; font-weight: 800; }
.courier-verdict__note  { margin: 0; font-size: 1rem; }
.courier-verdict__rule  { text-align: center; margin-top: 10px; }
.offer-card__pay-later { margin: 8px 0 0; text-align: center; }

/* Not optional, said with a colour and a dot rather than a sentence. Softer
   than an error until it is one: a red edge on the input and a mark by the
   label, so a seller filling the form in a hurry sees which two boxes the
   posting cannot do without. .is-missing is added only after they try to
   submit without it. */
.form-row--required .form-input {
  border-color: #d98b84;
  box-shadow: 0 0 0 3px rgba(217, 139, 132, 0.12);
}
.form-required-mark {
  color: #c0554b;
  font-size: 0.72rem;
  vertical-align: middle;
  margin-left: 4px;
}
.form-input.is-missing {
  border-color: #c0554b;
  background: #fdf2f1;
  box-shadow: 0 0 0 3px rgba(192, 85, 75, 0.18);
}
.offer-required-alert { margin: 0 0 12px; }

/* ── Nobody came to the door ─────────────────────────────────────────────── */
/* The courier's screen: one state at a time, big enough to read at arm's
   length in the street. */
.doorstep-state { text-align: center; }
.doorstep-state__icon { font-size: 3rem; line-height: 1; margin: 0 0 6px; }
.doorstep-state--wait { background: #fdf6e6; border-color: #e0b96a; }
.doorstep-state--act { background: #eef9f0; border-color: #cfe7d6; }
.doorstep-countdown {
  margin: 6px 0 0;
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #7a5a12;
}

/* The sender's three answers, as pictures. */
.no-show-card {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #fdf6e6;
  border: 1px solid #e0b96a;
}
.no-show-card__title { margin: 0 0 8px; font-weight: 800; color: #7a5a12; }
.no-show-card__photo {
  width: 100%;
  max-width: 320px;
  border-radius: 8px;
  display: block;
  margin-bottom: 10px;
}
.no-show-card__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.no-show-choice {
  flex: 1 1 96px;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  text-align: center;
}
.no-show-choice:hover { border-color: var(--color-primary); }
.no-show-choice__icon { font-size: 1.7rem; line-height: 1; }
.no-show-choice__label { font-size: 0.76rem; }

/* What happened last time somebody sent to this number. */
.receiver-no-show {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fdf2f1;
  border: 1px solid #c0554b;
  color: #8a3a32;
  font-weight: 700;
  font-size: 0.86rem;
}

/* Sending a job to drivers takes two answers — which transport, and what it
   pays — so they sit in one form and travel together. The tiles are smaller
   than the ones on the request form: this is a row in a list, not a page. */
.delivery-dispatch-form {
  margin-top: 10px;
  display: grid;
  gap: 12px;
  max-width: 520px;
}
.delivery-vehicle-choice {
  border: 0;
  padding: 0;
  margin: 0;
}
.delivery-vehicle-choice--unset {
  padding: 10px;
  border-radius: 10px;
  background: #fdf6e6;
  border: 1px solid #e0b96a;
}
.delivery-vehicle-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.delivery-vehicle-tiles .vehicle-tile {
  flex: 1 1 96px;
  min-width: 96px;
  padding: 10px 8px;
  gap: 4px;
}
.delivery-vehicle-tiles .vehicle-tile__icon { font-size: 1.7rem; }
.delivery-vehicle-tiles .vehicle-tile__label { font-size: 0.76rem; }

/* The receiver has no account, so the code only reaches them if the sender
   phones it through. Same amber as the unpriced banner: a thing still to do. */
.delivery-tell-receiver {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fdf6e6;
  border: 1px solid #e0b96a;
  color: #7a5a12;
  font-weight: 700;
  font-size: 0.86rem;
}

/* A courier job with no price is on nobody's map. Warm amber rather than an
   alarm: nothing has gone wrong, something is simply still to be done. */
.delivery-unpriced {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fdf6e6;
  border: 1px solid #e0b96a;
  color: #7a5a12;
  font-weight: 700;
}

/* Size tiles — clothing and shoes only, tapped not typed. */
.offer-size { margin-top: 18px; }
.size-tile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.size-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  min-height: 50px;
  padding: 6px 14px;
  border: 1px solid #dfe6f0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
}
.size-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.size-tile.is-selected {
  border-color: var(--color-primary);
  background: #eef4fc;
  box-shadow: 0 0 0 2px rgba(122, 167, 230, 0.18);
}
.offer-size__value { font-weight: 700; }

/* Delivery or collection — two pictures on the buy form. */
.fulfilment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.fulfilment-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 74px;
  padding: 8px;
  border: 1px solid #dfe6f0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: center;
}
.fulfilment-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.fulfilment-tile.is-selected {
  border-color: var(--color-primary);
  background: #eef4fc;
  box-shadow: 0 0 0 2px rgba(122, 167, 230, 0.18);
}
.fulfilment-tile__icon { font-size: 1.7rem; line-height: 1; }
.fulfilment-tile__label { font-size: 0.85rem; font-weight: 600; line-height: 1.2; }
.offer-card__pickup-where { margin: 6px 0 0; }
.offer-card__size {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef4fc;
  color: var(--color-primary-d);
  font-size: 0.82rem;
  font-weight: 700;
  vertical-align: middle;
}
/* The collection code, read out at the counter. */
.collect-code {
  margin: 8px 0 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--color-text);
}
.collect-form { margin-top: 12px; }

/* "Arrives in about X min" — one line for whoever is waiting at a door. */
.delivery-eta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #eef4fc;
  color: var(--color-primary-d);
  font-weight: 700;
}
.delivery-eta[hidden] { display: none; }
/* Taking a listing down: present, but never the loudest thing on the card. */
.offer-delete-btn { color: #a2453c; border-color: #e6cfcc; }
.offer-delete-btn:hover { background: #fdf2f1; border-color: #c0554b; }

/* A listing with no video still shows something: its category's icon, large.
   Markup and CSS rather than an image file — nothing to upload, nothing to
   download, and it stays sharp on any screen. */
.offer-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  background: linear-gradient(160deg, #eef4fc 0%, #e6efe9 100%);
}
.offer-card__placeholder-icon {
  font-size: 3.6rem;
  line-height: 1;
  opacity: 0.65;
}
.offer-public__placeholder {
  margin-top: 12px;
  max-width: 480px;
  border-radius: 8px;
}

/* Disputes: a problem reported after the goods changed hands. */
.dispute-card {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #f0d9c8;
  border-radius: 10px;
  background: #fdf8f3;
}
.dispute-card--seller { margin-top: 12px; }
.dispute-reason { grid-template-columns: 1fr; }
.dispute-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.dispute-photos img,
.dispute-photos__thumb {
  max-width: 120px;
  border-radius: 8px;
  border: 1px solid #e2d5cb;
}