/* Buttons - large, obvious controls */
.crwm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  border-radius: var(--crwm-radius);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 3rem;
}

.crwm-btn--primary {
  background: var(--crwm-amber);
  color: #1a1200;
}

.crwm-btn--primary:hover {
  background: var(--crwm-amber-dark);
}

.crwm-btn--ghost {
  background: transparent;
  border-color: var(--crwm-border);
  color: var(--crwm-text);
}

.crwm-btn--small {
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  min-height: 2.25rem;
}

.crwm-btn--block {
  display: flex;
  width: 100%;
}

.crwm-btn--disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Compact "back to My account" link above the H1 on driver sub-pages
   (Requests, Active journeys, Completed journeys). Visually small, but
   padding still gives it a ~44px tap target - the same touch-target floor
   the rest of the app's buttons already meet via min-height, just here
   via padding since the text itself stays deliberately compact. */
.crwm-subpage-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.25rem;
  min-height: 44px;
  box-sizing: border-box;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--crwm-text-dim);
  text-decoration: none;
}

.crwm-subpage-back:hover {
  color: var(--crwm-amber);
}

/* Homepage */
.crwm-home {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.crwm-hero {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}

.crwm-hero__title {
  font-size: 2rem;
  margin: 0 0 0.5rem;
}

.crwm-hero__strapline {
  color: var(--crwm-text-dim);
  margin: 0 0 1.5rem;
}

.crwm-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 360px;
  margin: 0 auto;
}

.crwm-section-title {
  font-size: 1.1rem;
  color: var(--crwm-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.85rem;
}

.crwm-drivers {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.crwm-driver-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--crwm-bg-raised);
  border: 1px solid var(--crwm-border);
  border-radius: var(--crwm-radius);
  padding: 1rem;
  text-decoration: none;
  color: var(--crwm-text);
}

.crwm-driver-card__name {
  font-weight: 700;
  font-size: 1.05rem;
}

.crwm-driver-card__area {
  color: var(--crwm-text-dim);
  font-size: 0.9rem;
}

.crwm-driver-card__cta {
  color: var(--crwm-amber);
  font-weight: 600;
  margin-top: 0.4rem;
}

/* Homepage weather panel - compact, informative, not a weather app. */
.crwm-weather__panel {
  background: var(--crwm-bg-raised);
  border: 1px solid var(--crwm-border);
  border-radius: var(--crwm-radius);
  padding: 1rem;
}

.crwm-weather__now {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.crwm-weather__now-temp {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--crwm-amber);
}

.crwm-weather__now-condition {
  color: var(--crwm-text-dim);
}

.crwm-weather__later {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--crwm-border);
}

.crwm-weather__slot {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.crwm-weather__slot-label {
  color: var(--crwm-text-dim);
}

.crwm-weather__attribution {
  font-size: 0.7rem;
  color: var(--crwm-text-dim);
  margin: 0.5rem 0 0;
}

.crwm-weather__attribution a {
  color: var(--crwm-text-dim);
  text-decoration: underline;
}

/* Forms */
.form-item {
  margin-bottom: 1.1rem;
}

.form-item label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--crwm-text-dim);
}

.form-item input,
.form-item select,
.form-item textarea {
  width: 100%;
  padding: 0.85rem 0.9rem;
  border-radius: var(--crwm-radius);
  border: 1px solid var(--crwm-border);
  background: var(--crwm-bg-raised);
  color: var(--crwm-text);
  font-size: 1rem;
}

.form-item input:focus,
.form-item select:focus,
.form-item textarea:focus {
  outline: 2px solid var(--crwm-blue-light);
  outline-offset: 1px;
}

/* Generic Drupal buttons (login, passkey management) - map onto crwm-btn look */
.button,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.9rem 1.5rem;
  margin-top: 0.25rem;
  border-radius: var(--crwm-radius);
  border: 2px solid transparent;
  font-size: 1.05rem;
  font-weight: 700;
  min-height: 3rem;
  background: var(--crwm-bg-raised);
  color: var(--crwm-text);
  border-color: var(--crwm-border);
  cursor: pointer;
}

.button--primary,
input[type="submit"] {
  background: var(--crwm-amber);
  color: #1a1200;
  border-color: transparent;
}

.button--danger {
  background: transparent;
  border-color: var(--crwm-danger);
  color: var(--crwm-danger);
  width: auto;
  min-height: 2.25rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
}

/* Passkey sign-in fieldset on the login form */
#edit-wa-login-method {
  border: 1px solid var(--crwm-border);
  border-radius: var(--crwm-radius);
  padding: 1rem;
  margin-top: 1.25rem;
}

#edit-wa-login-method legend {
  color: var(--crwm-text-dim);
  font-weight: 600;
  padding: 0 0.4rem;
}

/* Manage Passkeys table */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

table th,
table td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--crwm-border);
  color: var(--crwm-text);
}

table th {
  color: var(--crwm-text-dim);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Below 640px, the passkeys table (and any similar 4-column table) becomes
   stacked cards instead of a horizontally-scrolling grid. Column order is
   fixed (name, created, last used, actions), so labels are added via
   nth-child rather than editing the table markup itself. */
@media (max-width: 640px) {
  table.responsive-enabled {
    border: none;
  }

  table.responsive-enabled thead {
    display: none;
  }

  table.responsive-enabled,
  table.responsive-enabled tbody,
  table.responsive-enabled tr,
  table.responsive-enabled td {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  table.responsive-enabled tr {
    background: var(--crwm-bg-raised);
    border: 1px solid var(--crwm-border);
    border-radius: var(--crwm-radius);
    padding: 0.85rem;
    margin-bottom: 0.85rem;
  }

  table.responsive-enabled td {
    border: none;
    padding: 0.35rem 0;
    word-break: break-word;
  }

  table.responsive-enabled td:nth-child(1) {
    font-weight: 700;
    font-size: 1.05rem;
    padding-top: 0;
  }

  table.responsive-enabled td:nth-child(2)::before {
    content: 'Created: ';
    color: var(--crwm-text-dim);
  }

  table.responsive-enabled td:nth-child(3)::before {
    content: 'Last used: ';
    color: var(--crwm-text-dim);
  }

  table.responsive-enabled td:last-child {
    padding-top: 0.6rem;
    padding-bottom: 0;
  }

  table.responsive-enabled td:last-child .button,
  table.responsive-enabled td:last-child input[type="submit"] {
    width: 100%;
    min-height: 2.75rem;
  }
}

details {
  border: 1px solid var(--crwm-border);
  border-radius: var(--crwm-radius);
  padding: 1rem;
}

details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--crwm-text);
}

/* Collapsible journey row - used consistently on Requests, Active journeys
   and Completed journeys. Collapsed by default (native <details>), the
   summary always shows pickup/destination/distance/customer/time/status
   without expanding; actions and full detail live in the expanded body. */
.crwm-journey-row {
  background: var(--crwm-bg-raised);
  margin-bottom: 0.75rem;
  padding: 0;
  overflow: hidden;
}

.crwm-journey-row__summary {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  min-height: 3rem;
  list-style: revert;
}

.crwm-journey-row__field {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.crwm-journey-row__customer {
  font-weight: 600;
  color: var(--crwm-text);
}

.crwm-journey-row__time {
  font-size: 0.8rem;
  color: var(--crwm-text-dim);
}

/* Requests only - a quiet nudge showing how to open/close the card. Both
   live inside the same <summary>, so they share its tap target rather than
   adding one; only the hint matching the card's current state is shown. */
.crwm-journey-row__hint {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--crwm-amber);
  margin-top: 0.1rem;
}

.crwm-journey-row__hint--open {
  display: none;
}

details[open] .crwm-journey-row__hint--closed {
  display: none;
}

details[open] .crwm-journey-row__hint--open {
  display: block;
}

.crwm-journey-row__details {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--crwm-border);
  margin: 0;
}

.crwm-journey-row__details dt {
  margin-top: 0.6rem;
}

.crwm-journey-row__details dt:first-child {
  margin-top: 0.85rem;
}

.crwm-journey-row__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.crwm-journey-row__actions .crwm-btn {
  flex: 1;
}

/* Active Journeys expanded card - navigation-first layout: compact header,
   target address, then the map dominate; the primary action and secondary
   nav/call links are always full-width and stacked (never side-by-side, so
   labels never wrap on a phone); everything else lives in "More details". */
.crwm-journey-row__body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--crwm-border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.crwm-journey-row__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.85rem;
}

.crwm-journey-row__header-name {
  color: var(--crwm-text);
}

.crwm-journey-row__header-time {
  font-size: 0.8rem;
  color: var(--crwm-text-dim);
  margin-left: auto;
}

.crwm-journey-row__target {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.crwm-journey-row__target-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--crwm-text-dim);
}

.crwm-journey-row__target-address {
  font-size: 1.05rem;
  color: var(--crwm-text);
}

.crwm-journey-row__secondary-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.crwm-journey-row__more {
  border-top: 1px solid var(--crwm-border);
  margin-top: 0.25rem;
}

.crwm-journey-row__more > summary {
  padding: 0.75rem 0;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--crwm-text-dim);
  cursor: pointer;
  list-style: revert;
}

.crwm-journey-row__more[open] > summary {
  margin-bottom: 0.5rem;
}

/* Flash messages */
.crwm-flash {
  padding: 0.85rem 1rem;
  border-radius: var(--crwm-radius);
  margin-bottom: 1rem;
  border: 1px solid var(--crwm-border);
}

.crwm-flash--status {
  border-color: var(--crwm-success);
}

.crwm-flash--error {
  border-color: var(--crwm-danger);
}

/* Driver profile */
.crwm-profile__photo {
  height: 220px;
  border-radius: var(--crwm-radius);
  background-size: cover;
  background-position: center;
  background-color: var(--crwm-bg-raised);
  margin-bottom: 1rem;
}

.crwm-profile__name {
  font-size: 1.6rem;
}

.crwm-profile__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.crwm-profile__badge {
  display: inline-block;
  background: var(--crwm-blue);
  color: #fff;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
  margin: 0 0.4rem 0.75rem 0;
}

.crwm-profile__badges .crwm-profile__badge {
  margin: 0;
}

.crwm-profile__badge--verified {
  background: var(--crwm-success);
  color: #062a1a;
}

.crwm-profile__badge--pending {
  background: var(--crwm-amber);
  color: #1a1200;
}

.crwm-profile__area {
  color: var(--crwm-text-dim);
  margin: 0 0 1.25rem;
}

.crwm-profile__driver-photo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.5rem;
  border: 2px solid var(--crwm-border);
}

.crwm-profile__driver-name,
.crwm-profile__meta {
  color: var(--crwm-text-dim);
  margin: 0 0 0.5rem;
}

.crwm-profile__edit-link {
  display: block;
  text-align: center;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--crwm-text-dim);
  text-decoration: underline;
}

.crwm-profile__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

/* Booking status */
.crwm-status {
  background: var(--crwm-bg-raised);
  border: 1px solid var(--crwm-border);
  border-radius: var(--crwm-radius);
  padding: 1.25rem;
}

.crwm-status--accepted {
  border-color: var(--crwm-success);
  border-width: 2px;
  background: linear-gradient(180deg, rgba(76, 175, 125, 0.14), var(--crwm-bg-raised) 60%);
}

.crwm-status--declined {
  border-color: var(--crwm-blue-light);
}

.crwm-status--pending {
  border-color: var(--crwm-amber);
}

.crwm-status--on_the_way,
.crwm-status--arrived {
  border-color: var(--crwm-blue-light);
  border-width: 2px;
  background: linear-gradient(180deg, rgba(44, 107, 179, 0.16), var(--crwm-bg-raised) 60%);
}

.crwm-status--completed {
  border-color: var(--crwm-success);
}

.crwm-status__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}

.crwm-status__badge--accepted {
  background: var(--crwm-success);
  color: #062a1a;
}

.crwm-status__badge--pending {
  background: var(--crwm-amber);
  color: #1a1200;
}

.crwm-status__badge--declined {
  background: transparent;
  border: 1px solid var(--crwm-blue-light);
  color: var(--crwm-blue-light);
}

.crwm-status__badge--on_the_way,
.crwm-status__badge--arrived {
  background: var(--crwm-blue-light);
  color: #071522;
}

.crwm-status__badge--completed {
  background: var(--crwm-success);
  color: #062a1a;
}

.crwm-status__badge--cancelled,
.crwm-status__badge--no_show,
.crwm-status__badge--unable_to_contact {
  background: transparent;
  border: 1px solid var(--crwm-text-dim);
  color: var(--crwm-text-dim);
}

.crwm-status__headline {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.crwm-status--accepted .crwm-status__headline {
  color: var(--crwm-success);
}

.crwm-status--declined .crwm-status__headline {
  color: var(--crwm-text);
}

.crwm-status--pending .crwm-status__headline {
  color: var(--crwm-amber);
}

.crwm-status--on_the_way .crwm-status__headline,
.crwm-status--arrived .crwm-status__headline {
  color: var(--crwm-blue-light);
}

.crwm-status--completed .crwm-status__headline {
  color: var(--crwm-success);
}

/* Interactive Leaflet map - one shared pattern reused on Nearby pickups,
   Requests and the passenger "On my way" screen. Pan/pinch/wheel-zoom are
   Leaflet defaults; nothing here changes that. No route lines, no
   traffic/weather overlays - just markers on a plain OSM base layer. */
.crwm-map-wrap {
  margin: 0.75rem 0;
}

.crwm-map {
  width: 100%;
  max-width: 100%;
  height: 260px;
  border: 1px solid var(--crwm-border);
  border-radius: var(--crwm-radius);
  overflow: hidden;
  background: var(--crwm-bg);
}

/* Leaflet ships its own inline sizes on internal elements; keep the whole
   thing from ever forcing the page wider than the viewport. Leaflet adds
   this class to the same element that already carries .crwm-map, which
   sets the real height (260px) - no height here, since a same-specificity
   height:100% on an unsized wrapper collapses the container to 0. */
.leaflet-container {
  width: 100%;
  font-family: var(--crwm-font);
  background: var(--crwm-bg);
}

.crwm-map-marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.crwm-map-marker--driver {
  background: var(--crwm-amber);
}

.crwm-map-marker--pickup {
  background: var(--crwm-blue-light);
}

.crwm-map-marker--destination {
  background: var(--crwm-success);
}

/* Active Journeys map is the visually dominant part of the expanded card -
   large enough to actually navigate by on a phone screen. */
.crwm-journey-row__map .crwm-map {
  height: 340px;
}

.crwm-map-recenter {
  width: 34px;
  height: 34px;
  min-height: 34px;
  border: none;
  border-radius: var(--crwm-radius);
  background: var(--crwm-bg-raised);
  color: var(--crwm-text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--crwm-bg-raised);
  color: var(--crwm-text);
}

.leaflet-popup-content {
  font-size: 0.85rem;
  line-height: 1.4;
}

.crwm-status__note {
  color: var(--crwm-text-dim);
  margin: 0 0 1rem;
}

/* Fare estimate - passenger status page. Compact: amount, then small
   distance/ETA meta, then the "confirmed by driver" caveat. */
.crwm-fare-estimate {
  margin: 0 0 1rem;
}

.crwm-fare-estimate__amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--crwm-amber);
  margin: 0 0 0.15rem;
}

.crwm-fare-estimate__meta {
  font-size: 0.8rem;
  color: var(--crwm-text-dim);
  margin: 0 0 0.35rem;
}

.crwm-fare-estimate__note {
  font-size: 0.85rem;
  color: var(--crwm-text-dim);
  margin: 0 0 1rem;
}

/* Fare breakdown - expanded driver request rows. Simple line items, no
   invoice styling. */
.crwm-fare-breakdown {
  padding: 0.75rem 1rem 0;
  border-top: 1px solid var(--crwm-border);
}

.crwm-fare-breakdown__row {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--crwm-text-dim);
}

.crwm-fare-breakdown__row--total {
  color: var(--crwm-text);
  font-weight: 700;
}

/* Earnings screen - three compact sections, no charts/tables. */
.crwm-earnings__section {
  background: var(--crwm-bg-raised);
  border: 1px solid var(--crwm-border);
  border-radius: var(--crwm-radius);
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
}

.crwm-earnings__period {
  font-size: 1rem;
  margin: 0 0 0.4rem;
}

.crwm-earnings__line {
  margin: 0 0 0.15rem;
  font-size: 0.85rem;
}

.crwm-earnings__line--muted {
  color: var(--crwm-text-dim);
  font-size: 0.75rem;
}

.crwm-earnings__note {
  color: var(--crwm-text-dim);
  font-size: 0.7rem;
  margin: 0.4rem 0 0;
}

.crwm-status__details {
  margin: 0;
}

.crwm-status__details dt {
  color: var(--crwm-text-dim);
  font-size: 0.85rem;
  margin-top: 0.6rem;
}

.crwm-status__details dd {
  margin: 0;
  font-weight: 600;
}

/* Driver request cards */
.crwm-request-card {
  background: var(--crwm-bg-raised);
  border: 1px solid var(--crwm-border);
  border-radius: var(--crwm-radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.crwm-request-card__field {
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--crwm-border);
}

.crwm-request-card__field--last {
  border-bottom: none;
}

.crwm-request-card__label {
  display: block;
  color: var(--crwm-text-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.crwm-request-card__value {
  display: block;
  font-weight: 700;
  word-break: break-word;
}

.crwm-request-card__value a {
  color: var(--crwm-text);
  text-decoration: none;
}

.crwm-request-card__value--tight {
  white-space: nowrap;
  overflow-x: auto;
}

.crwm-request-card__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.crwm-request-card__actions .crwm-btn {
  flex: 1;
}

/* My account */
.crwm-account__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.crwm-account-link {
  display: flex;
  align-items: center;
  background: var(--crwm-bg-raised);
  border: 1px solid var(--crwm-border);
  border-radius: var(--crwm-radius);
  padding: 0.85rem 1rem;
  color: var(--crwm-text);
  text-decoration: none;
  font-weight: 700;
  min-height: 2.75rem;
}

.crwm-account-link--primary {
  border-color: var(--crwm-amber);
  color: var(--crwm-amber);
}

.crwm-account-link--logout {
  color: var(--crwm-danger);
  border-color: var(--crwm-danger);
}

.crwm-booking-form__terms-note {
  font-size: 0.75rem;
  color: var(--crwm-text-dim);
  text-align: center;
  margin-top: 0.5rem;
}

.crwm-booking-form__terms-note a {
  color: var(--crwm-text-dim);
  text-decoration: underline;
}

/* Site footer - discreet, small, never visually competing with the app.
   The 2rem base bottom padding already clears a regular browser chrome;
   max() only grows it further where an iPhone home-indicator inset is
   actually present (installed PWA / full-screen Safari), never shrinks
   it below that on anything else. */
.crwm-app__footer {
  padding-top: 1.25rem;
  padding-right: max(1.25rem, env(safe-area-inset-right));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  padding-left: max(1.25rem, env(safe-area-inset-left));
  text-align: center;
}

.crwm-app__footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.crwm-app__footer-links a {
  color: var(--crwm-text-dim);
  font-size: 0.8rem;
  text-decoration: none;
}

.crwm-app__footer-links a:hover {
  color: var(--crwm-text);
  text-decoration: underline;
}

/* Account page's own small terms/privacy links, separate from the site
   footer - same quiet, unobtrusive treatment. */
.crwm-account__footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1.5rem;
}

.crwm-account__footer-links a {
  color: var(--crwm-text-dim);
  font-size: 0.8rem;
  text-decoration: none;
}

.crwm-account__footer-links a:hover {
  color: var(--crwm-text);
  text-decoration: underline;
}

/* Terms/Privacy/Contact pages - deliberately boring and readable: narrow
   measure, no cards around every paragraph, clear numbered headings. */
.crwm-terms {
  max-width: 40rem;
  margin: 0 auto;
  line-height: 1.6;
}

.crwm-terms__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--crwm-text-dim);
  text-transform: uppercase;
  margin: 0 0 0.25rem;
}

.crwm-terms__version {
  color: var(--crwm-text-dim);
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
}

.crwm-terms h2 {
  font-size: 1.05rem;
  margin: 1.75rem 0 0.5rem;
  color: var(--crwm-amber);
}

.crwm-terms p {
  margin: 0 0 0.75rem;
  color: var(--crwm-text);
}

.crwm-terms ul {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
}

.crwm-terms li {
  margin-bottom: 0.35rem;
}

.crwm-call-link {
  display: inline-block;
  font-weight: 700;
  color: var(--crwm-amber);
}

.crwm-cancel-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}

.crwm-cancel-form label {
  width: 100%;
  margin: 0 0 0.25rem;
}

.crwm-cancel-form select {
  flex: 1;
  min-width: 0;
  background: var(--crwm-bg-raised);
  color: var(--crwm-text);
  border: 1px solid var(--crwm-border);
  border-radius: var(--crwm-radius);
  padding: 0.5rem;
}

.crwm-credit-bundles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin: 0.75rem 0;
}

.crwm-credit-bundle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  background: var(--crwm-bg);
  border: 1px solid var(--crwm-amber);
  border-radius: var(--crwm-radius);
  padding: 0.85rem 0.5rem;
  text-decoration: none;
  min-height: 3.25rem;
}

.crwm-credit-bundle__price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--crwm-amber);
}

.crwm-credit-bundle__credits {
  font-size: 0.8rem;
  color: var(--crwm-text-dim);
}

.crwm-availability-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--crwm-border);
  border-radius: var(--crwm-radius);
}

.crwm-availability-toggle p {
  margin: 0;
  font-weight: 700;
}

/* The small "accept terms" notice on My account - a plain inline note,
   not another large account card. */
.crwm-terms-notice {
  border: 1px solid var(--crwm-amber);
  border-radius: var(--crwm-radius);
  padding: 0.85rem 1rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.crwm-terms-notice__actions {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

/* CRWM admin - persistent nav shown on every /admin/crwm page, and the
   compact collapsible bookings filter + card list that replaced a wide
   table (which wrapped badly on mobile). */
.crwm-admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--crwm-border);
}

.crwm-admin-nav__link {
  padding: 0.4rem 0.75rem;
  border-radius: var(--crwm-radius);
  background: var(--crwm-bg-raised);
  border: 1px solid var(--crwm-border);
  color: var(--crwm-text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
}

.crwm-admin-nav__link:hover {
  border-color: var(--crwm-amber);
}

.crwm-admin-filter {
  border: 1px solid var(--crwm-border);
  border-radius: var(--crwm-radius);
  background: var(--crwm-bg-raised);
  margin-bottom: 1rem;
}

.crwm-admin-filter > summary {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.crwm-admin-filter > summary::-webkit-details-marker {
  display: none;
}

.crwm-admin-filter__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1rem 1rem;
}

.crwm-admin-filter__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.crwm-admin-filter__row select {
  flex: 1;
  min-width: 0;
  padding: 0.5rem;
  border-radius: var(--crwm-radius);
  border: 1px solid var(--crwm-border);
  background: var(--crwm-bg);
  color: var(--crwm-text);
}

.crwm-admin-booking-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.crwm-admin-booking-card {
  border: 1px solid var(--crwm-border);
  border-radius: var(--crwm-radius);
  background: var(--crwm-bg-raised);
  padding: 0.85rem 1rem;
}

.crwm-admin-booking-card__title {
  margin: 0 0 0.15rem;
  font-weight: 700;
}

.crwm-admin-booking-card__meta {
  margin: 0 0 0.6rem;
  color: var(--crwm-text-dim);
  font-size: 0.85rem;
}

.crwm-admin-booking-card__row {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  overflow-wrap: break-word;
}

.crwm-admin-booking-card__label {
  color: var(--crwm-text-dim);
}

.crwm-admin-booking-card__actions {
  margin-top: 0.6rem;
}

/* Journey messages - a short, compact thread on the passenger's booking
   status page and each driver active-journey row. Not a chat UI - just a
   few short lines and a small compose box. */
.crwm-journey-messages {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--crwm-border);
}

.crwm-journey-messages__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.crwm-journey-messages__row {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  overflow-wrap: break-word;
}

.crwm-journey-messages__row--you,
.crwm-journey-messages__row--driver {
  color: var(--crwm-text-dim);
}