/* 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__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;
}

.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-bids-inline {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.offer-bids-inline__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.offer-bids-inline__header strong {
  color: var(--color-text);
}
.offer-bids-inline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.offer-bids-inline__item {
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.offer-bids-inline__item:first-child {
  padding-top: 0;
  border-top: 0;
}
.offer-bids-inline__top,
.offer-bids-inline__meta,
.offer-bids-inline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.offer-bids-inline__top {
  justify-content: space-between;
}
.offer-bids-inline__buyer {
  font-weight: 700;
  color: var(--color-text);
}
.offer-bids-inline__meta {
  margin-top: 4px;
  color: var(--color-text-mut);
  font-size: 0.84rem;
}
.offer-bids-inline__note {
  margin: 6px 0 0;
  color: var(--color-text);
  font-size: 0.88rem;
}
.offer-bids-inline__actions {
  margin-top: 8px;
}
.offer-bids-inline__actions form {
  margin: 0;
}
.offer-bids-inline__actions .btn {
  padding: 6px 10px;
  font-size: 0.82rem;
}
.offer-bids-inline__empty {
  color: var(--color-text-mut);
  font-size: 0.86rem;
  margin: 0;
}

/* ── 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; }
.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;
}
.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;
}
.product-picker select.form-input {
  min-height: 220px;
  padding: 6px;
  border: 0;
  border-radius: 0;
  background: #fff;
}
.product-picker select.form-input:focus {
  box-shadow: inset 0 0 0 3px rgba(122, 167, 230, 0.18);
}
.product-picker select.form-input option {
  padding: 9px 10px;
  border-radius: 6px;
}

/* 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; }