/* The refined look, after the reference: monochrome, hairlines and plenty of air. Orange stays
   for the brand, the route and live state; the main action is --cta (black by day, white at night).
   This file loads last, so it can sit on top of screens.css and screens-2.css. */

/* Headings: light and tight, with one grey underlined word. */
.ride__title h2, .searching__txt h2, .trip__head h2, .done h2, .hchat__hello h2, .profile__who h2, .signin__card .h1,
.signin__pitch h1, .drive-card__head h2, .mhead h1, .profile__top h1 {
  font-weight: 300; letter-spacing: -0.03em;
}
.ride__title h2, .searching__txt h2, .trip__head h2, .done h2, .hchat__hello h2, .signin__card .h1 { color: var(--text); }
.ride__title h2 em, .searching__txt h2 em, .trip__head h2 em, .done h2 em, .hchat__hello h2 em {
  font-style: normal; color: var(--muted-2); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.sec-title { font-weight: 500; }

/* Actions */
.ride .btn--primary { border-radius: 99px; font-size: 16px; font-weight: 500; }
.ride__title .icon-btn, :root[data-theme="dark"] .ride__title .icon-btn { border-radius: 50%; background: transparent; border: 1px solid var(--line); }
.chip, .ride__chips .chip, .ride__pay .chip { background: transparent; border: 1px solid var(--line); border-radius: 99px; color: var(--text-2); font-weight: 500; }
.dd__menu button:hover { background: var(--field); color: var(--text); }
.seg button[aria-selected="true"] { background: var(--cta); color: var(--cta-text); }
.field:focus-within { border-color: var(--text); box-shadow: none; }

/* Set location */
.loc-box { border-color: var(--line); border-radius: 24px; box-shadow: none; }
.ride__history { color: var(--text-2); font-weight: 500; }

/* Choose a ride */
.ride-seg { display: flex; gap: 8px; margin-top: -8px; }
.ride-seg button {
  height: 38px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); font-size: 14px; color: var(--text-2);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.ride-seg button[aria-pressed="true"] { background: var(--cta); border-color: transparent; color: var(--cta-text); }
.ride-types { gap: 10px; }
.ride-type { gap: 12px; padding: 12px 16px 12px 12px; border-radius: 24px; background: transparent; border-color: var(--line); }
.ride-type.is-on { background: transparent; border-color: var(--text); box-shadow: inset 0 0 0 0.5px var(--text); }
.ride-type__car { width: 88px; height: 48px; flex: none; display: grid; place-items: center; transition: transform 0.4s var(--spring); }
.ride-type__car img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; } /* wheels on one line */
.ride-type.is-on .ride-type__car { transform: scale(1.06); }
.ride-type__txt { gap: 3px; }
.ride-type__txt b { font-weight: 500; opacity: 1; color: var(--text); }
.ride-type__txt small { font-size: 13px; opacity: 1; color: var(--muted); }
.ride-type__end { display: grid; gap: 3px; justify-items: end; }
.ride-type__end strong { font-weight: 500; color: var(--text); }
.ride-type__end small { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Searching: quiet rings round one orange dot */
.searching__txt p { font-weight: 400; font-size: 16px; opacity: 1; color: var(--muted); }
.radar-rings i, .radar-rings i:nth-child(1) { background: var(--ring); border: 0; }
.radar-rings::after { border-color: var(--line); }

/* Arriving, driver is here */
.trip__head h2 { font-size: 28px; line-height: 1.2; }
.trip__line { margin-top: 8px; }
.trip .plate, .done .plate, .drive-who__car .plate { background: transparent; border: 1px solid var(--line); border-radius: 99px; color: var(--text-2); opacity: 1; }
.trip__driver { padding: 12px; border: 1px solid var(--line); border-radius: 24px; }
.trip__driver b { font-weight: 500; font-size: 17px; }
.trip__driver span { font-weight: 400; font-size: 13px; opacity: 1; color: var(--muted); }
.trip__driver .avatar { width: 56px; height: 56px; border-radius: 50%; }
.ride-details__dest small { font-weight: 400; font-size: 13px; color: var(--muted); }
.ride-details__dest b, .ride-details__card b { font-weight: 500; }
.ride-details__pay strong { font-weight: 500; }
.trip__act { font-weight: 400; font-size: 13px; }
.fab { width: 56px; height: 56px; border-radius: 50%; background: transparent; border: 1px solid var(--line); }
.fab--red { background: var(--red); border-color: transparent; }
.ride[data-step="here"] .panel { background: var(--surface); }
.ride[data-step="here"] .trip { border-radius: 0 0 50px 50px; }
.wait-bar { color: var(--text); border-bottom: 1px solid var(--line); height: 56px; }
.wait-bar span { opacity: 1; color: var(--muted); }
.wait-bar b { font-weight: 500; }
:root[data-theme="light"] .wait-bar .hg, :root:not([data-theme]) .wait-bar .hg { filter: grayscale(1); }

/* Driving */
.drive-card { border: 0; box-shadow: none; }
.drive-card__eta b, .drive-card__speed b { font-weight: 500; }
.drive-who__txt b { font-weight: 500; }

/* Home panel and chat */
.home__switch button { font-weight: 500; }
.home__switch button[aria-selected="true"] { color: var(--text); }
.hchat__chip { background: rgba(0, 0, 0, 0.05); color: var(--text); font-weight: 500; }
.hchat__ask:focus-within { border-color: var(--text); box-shadow: none; }
.hchat__send { background: var(--cta); }
:root[data-theme="dark"] .hchat__send img { filter: invert(1); }
:root[data-theme="dark"] .hchat__ride img[src$="people.svg"] { filter: invert(1); } /* black artwork on dark */

/* Profile keeps its own style; only its type follows the rest of the app. */
.set-card__label, .set-card.is-toggle .set-card__label { font-weight: 400; }

/* Sign in */
.signin__card { border: 1px solid var(--line); box-shadow: none; }
.signin__card .btn--primary, .signin__card .btn--light { border-radius: 99px; font-weight: 500; }
.signin__card .btn--light { border: 1px solid var(--line); }

/* Ride completed */
.review:focus { border-color: var(--text); box-shadow: none; }
.review { border-color: var(--line); border-radius: 20px; }
.done__details { width: 100%; height: 56px; border-radius: 99px; background: rgba(0, 0, 0, 0.05); color: var(--text); font-size: 16px; font-weight: 500; text-decoration: none; }
:root[data-theme="dark"] .done__details { background: rgba(255, 255, 255, 0.1); color: #fff; }
:root[data-theme="dark"] [data-type="wait"] .ride-type__car img { filter: brightness(1.5); } /* the black car on a dark card */

@media (max-width: 767px) {
  .ride-seg { margin-top: 0; }
  .done__details { height: 52px; }
  .trip__head h2 { font-size: 22px; white-space: nowrap; }
  .signin__hero { background: #111214; }
  .welcome { background: rgba(255, 255, 255, 0.1); color: #fff; }
  .signin__card { border: 0; }
}