/* ─── Shared Routebook detail (expanded) card — 1:1 port of
       src/components/RouteDetailCard.tsx ───
   This is the LARGE expanded view shown when you tap a RouteCard in the
   app. Not the compact list card — that lives in route-card.css. The two
   have different radii, backgrounds, colour tokens, and layouts: the
   detail card uses a dot-connector route (not left/right arrow), real
   vehicle silhouette images, and specific DC colour tokens from the
   native source. Do not mix them.

   Native tokens (RouteDetailCard.tsx:442-447):
     DC_T1   = #0d0d12   primary text
     DC_T2   = #5a5a6a   secondary text / muted body
     DC_T3   = #9a9aaa   label text / very muted
     DC_BRD  = rgba(0,0,0,0.1)
     DC_BRD2 = rgba(0,0,0,0.07)
     DC_FILL = rgba(0,0,0,0.04)
   -------------------------------------------------------------------- */

:root {
  --rcd-t1:   #0d0d12;
  --rcd-t2:   #5a5a6a;
  --rcd-t3:   #9a9aaa;
  --rcd-brd:  rgba(0,0,0,0.1);
  --rcd-brd2: rgba(0,0,0,0.07);
  --rcd-fill: rgba(0,0,0,0.04);
  --rcd-card-grad-top:    #ffffff;
  --rcd-card-grad-bottom: #f4f4f6;
  --rcd-card-border:      rgba(0,0,0,0.07);
  --rcd-close-bg:         rgba(0,0,0,0.05);
  --rcd-close-bd:         rgba(0,0,0,0.08);
  --rcd-close-fg:         #50505a;
  --rcd-dot-sec-bd:       rgba(0,0,0,0.25);
  --rcd-conn-dim:         rgba(0,0,0,0.1);
  --rcd-conn-solid:       rgba(0,0,0,0.2);
  --rcd-city-dim:         rgba(0,0,0,0.3);
  --rcd-time-est:         rgba(0,0,0,0.3);
  --rcd-section-bg:       transparent;
}
html[data-theme="dark"] {
  --rcd-t1:   #ffffff;
  --rcd-t2:   rgba(255,255,255,0.65);
  --rcd-t3:   rgba(255,255,255,0.42);
  --rcd-brd:  rgba(255,255,255,0.14);
  --rcd-brd2: rgba(255,255,255,0.09);
  --rcd-fill: rgba(255,255,255,0.06);
  --rcd-card-grad-top:    #1c1c1e;
  --rcd-card-grad-bottom: #141416;
  --rcd-card-border:      rgba(255,255,255,0.11);
  --rcd-close-bg:         rgba(255,255,255,0.1);
  --rcd-close-bd:         rgba(255,255,255,0.14);
  --rcd-close-fg:         rgba(255,255,255,0.75);
  --rcd-dot-sec-bd:       rgba(255,255,255,0.35);
  --rcd-conn-dim:         rgba(255,255,255,0.14);
  --rcd-conn-solid:       rgba(255,255,255,0.3);
  --rcd-city-dim:         rgba(255,255,255,0.35);
  --rcd-time-est:         rgba(255,255,255,0.35);
}

/* ─── Backdrop + card shell ─ RouteDetailCard.tsx:449-461 ────────────── */
.rcd-backdrop {
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  animation: rcd-fade 220ms ease forwards;
}
@keyframes rcd-fade { to { opacity: 1; } }

.rcd-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  border-radius: 28px;              /* detail card is 28, not 24 */
  border: 1px solid var(--rcd-card-border);
  background: linear-gradient(180deg, var(--rcd-card-grad-top) 0%, var(--rcd-card-grad-bottom) 100%);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--rcd-t1);
  animation: rcd-rise 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes rcd-rise {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Close button — RouteDetailCard.tsx:462-468 */
.rcd-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 10;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--rcd-close-bg);
  border: 1px solid var(--rcd-close-bd);
  display: grid; place-items: center;
  color: var(--rcd-close-fg);
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.rcd-close:hover { background: var(--rcd-brd); }
.rcd-close ion-icon { font-size: 16px; }

/* Scroller — scrollContent paddingHorizontal:20, paddingTop:22 */
.rcd-scroll {
  padding: 22px 20px 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── Person row ─ RouteDetailCard.tsx:473-501 ───────────────────────── */
.rcd-person {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-right: 36px;              /* room for close btn */
}
.rcd-avatar {
  width: 50px; height: 50px;
  border-radius: 25px;              /* round (native size=50, borderRadius=25) */
  display: grid; place-items: center;
  background: #4a6fa5;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  border: 2px solid var(--rcd-brd);
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.rcd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcd-person-info { flex: 1; min-width: 0; }
.rcd-person-name {
  font-weight: 600;
  font-size: 17px;
  color: var(--rcd-t1);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}
.rcd-person-bio {
  font-weight: 400;
  font-size: 12px;
  color: var(--rcd-t2);
  line-height: 17px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Legacy single-column rating box — superseded by the richer version below
   that stacks a price badge + status pill right-aligned. Kept for any pages
   that still use the standalone rating-num element. */
.rcd-rating-num {
  font-weight: 600;
  font-size: 18px;
  color: var(--rcd-t1);
}
.rcd-rating-star {
  font-size: 12px;
  color: var(--rcd-t1);
}
.rcd-trips {
  font-weight: 400;
  font-size: 10px;
  color: var(--rcd-t3);
  margin-top: 1px;
}
.rcd-new-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--rcd-brd2);
  background: transparent;
}
.rcd-new-pill-text {
  font-weight: 500;
  font-size: 10px;
  color: var(--rcd-t1);
  letter-spacing: 0.3px;
}
.rcd-new-pill ion-icon {
  font-size: 10px;
  color: var(--rcd-t2);
}

/* Star row under the name — mirrors app's CardDetailView starsRow (fontSize 11
   stars, Inter_500Medium 11pt rating/trips suffix). */
.rcd-stars-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 3px;
}
.rcd-stars-row ion-icon {
  font-size: 11px;
  color: var(--rcd-t1);
}
.rcd-stars-row .rcd-rating-num {
  font-weight: 500;
  font-size: 11px;
  color: var(--rcd-t2);
  margin-left: 4px;
}

/* Price badge sits in the top-right next to the status pill. Rounded rect,
   subtle surface, matches app's priceBadge style. */
.rcd-price-badge {
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--rcd-surface-2, rgba(0,0,0,0.06));
  color: var(--rcd-t1);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.1px;
}

/* Status pill — flat capsule for "Approved" / "Waiting" / "Sent" etc. */
.rcd-status-pill {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rcd-brd2);
  background: transparent;
  font-weight: 500;
  font-size: 10px;
  color: var(--rcd-t1);
  letter-spacing: 0.3px;
}

/* The rating-box container becomes column so price + pill stack right-aligned. */
.rcd-rating-box {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

/* ─── Divider ─ 1px, 18px vertical margin ────────────────────────────── */
.rcd-divider {
  height: 1px;
  background: var(--rcd-brd2);
  margin: 18px 0;
}

/* ─── Route section — dot-connector (browse mode) ────────────────────── */
.rcd-route { padding-left: 2px; }
.rcd-route-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.rcd-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}
.rcd-dot-origin {
  width: 9px; height: 9px;
  border-radius: 4.5px;
  background: transparent;
  border: 1.5px solid var(--rcd-dot-sec-bd);
  flex-shrink: 0;
}
.rcd-dot-dest {
  width: 9px; height: 9px;
  border-radius: 4.5px;
  background: var(--rcd-t1);
  flex-shrink: 0;
}
.rcd-line {
  width: 1.5px;
  flex: 1;
  background: var(--rcd-conn-dim);
  margin: 4px 0;
  min-height: 24px;
}
.rcd-addrs { flex: 1; min-width: 0; }
.rcd-addr-group + .rcd-addr-group { margin-top: 18px; }
.rcd-addr-label {
  font-weight: 500;
  font-size: 9px;
  color: var(--rcd-t3);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-bottom: 4px;
}
.rcd-addr-text {
  font-weight: 600;
  font-size: 18px;
  color: var(--rcd-t1);
  letter-spacing: -0.2px;
  line-height: 24px;
}
.rcd-addr-full {
  font-weight: 400;
  font-size: 12px;
  color: var(--rcd-t2);
  margin-top: 3px;
  line-height: 1.5;
}

/* ─── Journey mode (search context: 3-node) ──────────────────────────── */
.rcd-journey { padding-left: 2px; }
.rcd-j-row { display: flex; gap: 14px; }
.rcd-j-left { width: 14px; display: flex; flex-direction: column; align-items: center; padding-top: 20px; }
.rcd-j-dot { width: 9px; height: 9px; border-radius: 4.5px; flex-shrink: 0; }
.rcd-j-dot-sec { background: transparent; border: 1.5px solid var(--rcd-dot-sec-bd); }
.rcd-j-dot-pri { background: var(--rcd-t1); }
.rcd-j-dot-drop { background: var(--rcd-t1); }
.rcd-j-conn { flex: 1; width: 1.5px; margin-top: 4px; margin-bottom: -4px; }
.rcd-j-conn-dim   { background: var(--rcd-conn-dim); }
.rcd-j-conn-solid { background: var(--rcd-conn-solid); }
.rcd-j-content { flex: 1; padding-top: 16px; padding-bottom: 20px; }
.rcd-j-content-last { padding-bottom: 4px; }
.rcd-j-label {
  font-weight: 500; font-size: 9px;
  color: var(--rcd-t3);
  text-transform: uppercase; letter-spacing: 1.4px;
  margin-bottom: 4px;
}
.rcd-j-city {
  font-weight: 600; font-size: 18px;
  color: var(--rcd-t1);
  letter-spacing: -0.2px; line-height: 24px;
}
.rcd-j-city-dim { color: var(--rcd-city-dim); }
.rcd-j-addr {
  font-weight: 400; font-size: 12px;
  color: var(--rcd-t2);
  margin-top: 3px;
}
.rcd-j-time {
  font-weight: 600; font-size: 15px;
  color: var(--rcd-t1);
  letter-spacing: -0.2px;
  margin-top: 6px;
}
.rcd-j-time-est { color: var(--rcd-time-est); }
.rcd-j-time-dim { font-weight: 400; }

/* ─── Schedule row — 2 columns with vertical separator ───────────────── */
.rcd-schedule {
  display: flex;
  align-items: center;
}
.rcd-schedule-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rcd-schedule-sep {
  width: 1px;
  height: 36px;
  background: var(--rcd-brd);
}
.rcd-schedule-label {
  font-weight: 500; font-size: 9px;
  color: var(--rcd-t3);
  text-transform: uppercase; letter-spacing: 1.4px;
}
.rcd-schedule-value {
  font-weight: 600; font-size: 14px;
  color: var(--rcd-t1);
  letter-spacing: -0.2px;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}

/* Flexible / recurring badge */
.rcd-recur-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  background: var(--rcd-fill);
  border: 1px solid var(--rcd-brd);
  padding: 8px 12px;
  border-radius: 8px;
  align-self: flex-start;
}
.rcd-recur-pip {
  width: 5px; height: 5px;
  border-radius: 2.5px;
  background: var(--rcd-t3);
}
.rcd-recur-text {
  font-weight: 400;
  font-size: 12px;
  color: var(--rcd-t3);
}

/* ─── Map preview — mirrors src/components/RouteMapPreview.tsx ─────────
     Wrapper is a flat section with top-border + horizontal padding, no
     outer radius; the map inside is a 10px rounded rectangle. Preview
     height 120px (RouteMapPreview.PREVIEW_HEIGHT) so the map stays
     subordinate to the route information above. Pins are 12px dots with
     2px white border + 2px shadow; polyline is 4px blue (#3B82F6). All
     values from the native component.
   ------------------------------------------------------------------- */
.rcd-map-wrap {
  border-top: 1px solid var(--rcd-brd2);
  padding: 8px 14px;
  margin-top: 18px;
}
.rcd-map {
  width: 100%;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--rcd-fill);
}
.rcd-map .mapboxgl-ctrl-attrib,
.rcd-map .mapboxgl-ctrl-logo { display: none !important; }

/* ─── Vehicle section ─────────────────────────────────────────────────
     Native uses VehicleImage (expo-image) with a real silhouette webp per
     car type. Height 160, border-radius 10, aspect-ratio 1.5:1.
   ------------------------------------------------------------------- */
.rcd-vehicle { padding: 2px 0; }
.rcd-vehicle-label {
  font-weight: 500; font-size: 9px;
  color: var(--rcd-t3);
  text-transform: uppercase; letter-spacing: 1.4px;
  margin-bottom: 12px;
}
.rcd-vehicle-img-card {
  width: 100%;
  padding: 10px 0;
  display: flex; justify-content: center;
}
.rcd-vehicle-img {
  height: 160px;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1.5;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}
.rcd-vehicle-meta {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  margin-top: 14px;
}
.rcd-vehicle-type {
  font-weight: 600; font-size: 12px;
  color: var(--rcd-t2);
  text-transform: uppercase; letter-spacing: 2.2px;
}
.rcd-vehicle-mm {
  font-weight: 400; font-size: 13px;
  color: var(--rcd-t2);
}

/* ─── Preferences / tags ──────────────────────────────────────────────
     Native uses TAG_ICONS mapping to Ionicons / MCI with size 12/13 and
     color DC_T2. Chips: fill DC_FILL, border DC_BRD, padding 12/6, radius 8.
   ------------------------------------------------------------------- */
.rcd-tags-label {
  font-weight: 500; font-size: 9px;
  color: var(--rcd-t3);
  text-transform: uppercase; letter-spacing: 1.4px;
  margin-bottom: 10px;
}
.rcd-tags-wrap {
  display: flex; flex-wrap: wrap;
  gap: 8px;
}
.rcd-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--rcd-fill);
  border: 1px solid var(--rcd-brd);
  padding: 6px 12px;
  border-radius: 8px;
}
.rcd-tag ion-icon { font-size: 13px; color: var(--rcd-t2); }
.rcd-tag-text {
  font-weight: 400;
  font-size: 12px;
  color: var(--rcd-t2);
}

/* ─── Footer actions ─ Accept / Decline / Message ────────────────────── */
.rcd-footer-single {
  border-top: 1px solid var(--rcd-brd2);
  padding: 8px 16px 10px;
}
.rcd-footer-dual {
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--rcd-brd2);
  padding: 8px 16px 10px;
}
.rcd-btn {
  border: 0;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: filter .15s, transform .08s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.rcd-btn:active { transform: scale(0.98); }
.rcd-btn[disabled] { opacity: 0.5; pointer-events: none; }

.rcd-btn-message {
  width: 100%;
  background: rgba(86,156,255,0.20);
  border: 1px solid rgba(132,186,255,0.40);
  color: #0b63d8;
  box-shadow: 0 2px 6px rgba(94,165,255,0.16);
}
.rcd-btn-message:hover { background: rgba(86,156,255,0.26); }

.rcd-btn-decline {
  flex: 1;
  background: rgba(186,194,210,0.16);
  border: 1px solid rgba(214,222,236,0.6);
  color: var(--rcd-t2);
  box-shadow: 0 2px 6px rgba(170,178,195,0.12);
}
.rcd-btn-decline:hover { background: rgba(186,194,210,0.26); }

.rcd-btn-accept {
  flex: 2;
  background: rgba(74,222,128,0.16);
  border: 1px solid rgba(116,236,156,0.5);
  color: #16a34a;
  box-shadow: 0 2px 6px rgba(74,222,128,0.16);
}
.rcd-btn-accept:hover { background: rgba(74,222,128,0.26); }
.rcd-btn-accept ion-icon { font-size: 16px; color: #16a34a; }

.rcd-btn-primary {
  width: 100%;
  background: #0071e3;
  color: #ffffff;
}
.rcd-btn-primary:hover { background: #0077ed; }

.rcd-btn-cancel {
  width: 100%;
  background: #ff3b30;
  color: #ffffff;
}
.rcd-btn-cancel:hover { filter: brightness(.94); }
html[data-theme="dark"] .rcd-btn-cancel { background: #ff453a; }

.rcd-notice {
  margin: 0 16px 10px;
  padding: 11px 14px;
  border-radius: 10px;
  background: #eff6ff;
  color: #1e40af;
  font-size: 13px;
  line-height: 1.5;
}
.rcd-notice.rcd-error {
  background: #fff2f0;
  color: #ad3024;
}

@media (max-width: 560px) {
  .rcd-backdrop { padding: 12px; }
  .rcd-scroll { padding: 20px 18px 10px; }
  .rcd-addr-text, .rcd-j-city { font-size: 17px; line-height: 22px; }
  .rcd-vehicle-img { height: 140px; }
}