/* TooWe shared-shell polish: brings every plain page in the passenger/driver shell onto the iOS design language.
   Zero-specificity (:where) element defaults so ANY component stylesheet (class-based) still wins; this only replaces the
   legacy browser-default look (black borders, blue links, bare buttons, small titles) that plain-baseline.css supplies.
   Tokens mirror Theme.swift: purple #6f4cff, ink #0e132e, muted #5b6079, line #e6e8f2, radius 16 / 13, control height 52 / 48. */

:where(.tw-plain-app--passenger-shell) {
  --tw-ink: #0e132e;
  --tw-muted: #5b6079;
  --tw-line: #e6e8f2;
  --tw-purple: #6f4cff;
  --tw-soft: #f3f1ff;
  --tw-radius: 16px;
  --tw-radius-compact: 13px;
  color: var(--tw-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Page title (the shell h1) = iOS large title; hidden when the page renders its own hero heading. */
.tw-plain-app--passenger-shell > h1 {
  margin: 8px 0 14px;
  color: var(--tw-ink, #0e132e);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.tw-plain-app--passenger-shell > h1:has(~ * h1),
.tw-plain-app--passenger-shell > h1:has(~ h1) {
  display: none;
}
:where(.tw-plain-app--passenger-shell) :is(h2, h3) {
  color: var(--tw-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}
:where(.tw-plain-app--passenger-shell) h2 { font-size: 18px; margin: 20px 0 8px; }
:where(.tw-plain-app--passenger-shell) h3 { font-size: 16px; }
:where(.tw-plain-app--passenger-shell) p { color: inherit; line-height: 1.45; }

/* Links: product purple, no browser blue/purple-visited, no raw underline */
:where(.tw-plain-app--passenger-shell) a:not([class]) {
  color: var(--tw-purple);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
}
:where(.tw-plain-app--passenger-shell) a:not([class]):visited { color: var(--tw-purple); }
:where(.tw-plain-app--passenger-shell) a:not([class]):hover { text-decoration: underline; }

/* Form controls: 48 pt, 13 pt radius, hairline border, no browser default */
:where(.tw-plain-app--passenger-shell) :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="file"]), select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-radius-compact);
  background: #fff;
  color: var(--tw-ink);
  font: inherit;
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
}
:where(.tw-plain-app--passenger-shell) select {
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, #5b6079 50%), linear-gradient(135deg, #5b6079 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
:where(.tw-plain-app--passenger-shell) textarea { padding: 12px 14px; min-height: 96px; }
:where(.tw-plain-app--passenger-shell) :is(input, select, textarea):focus { outline: none; border-color: var(--tw-purple); box-shadow: 0 0 0 3px rgba(111, 76, 255, .16); }
:where(.tw-plain-app--passenger-shell) :is(input, textarea)::placeholder { color: #a0a4b8; }
:where(.tw-plain-app--passenger-shell) :is(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; accent-color: var(--tw-purple); }
:where(.tw-plain-app--passenger-shell) label { margin: 12px 0 6px; color: var(--tw-muted); font-size: 13px; font-weight: 600; }

/* Bare buttons -> TooWe primary button (52 pt, 16 pt radius) */
:where(.tw-plain-app--passenger-shell) :is(button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not([class])) {
  width: 100%;
  min-height: 52px;
  margin: 8px 0 0;
  padding: 0 18px;
  border: 0;
  border-radius: var(--tw-radius);
  background: var(--tw-purple);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(111, 76, 255, .22);
}
:where(.tw-plain-app--passenger-shell) :is(button:not([class]), input[type="submit"]:not([class])):active { transform: translateY(1px); opacity: .92; }

/* Tables / definition lists / details = cards, no black grid */
:where(.tw-plain-app--passenger-shell) table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--tw-line); border-radius: var(--tw-radius); overflow: hidden; background: #fff; }
:where(.tw-plain-app--passenger-shell) :is(th, td) { border: 0; border-bottom: 1px solid var(--tw-line); padding: 12px 14px; font-size: 14px; }
:where(.tw-plain-app--passenger-shell) tr:last-child :is(th, td) { border-bottom: 0; }
:where(.tw-plain-app--passenger-shell) th { color: var(--tw-muted); font-weight: 600; background: #fafaff; }
:where(.tw-plain-app--passenger-shell) dl { padding: 14px 16px; border: 1px solid var(--tw-line); border-radius: var(--tw-radius); background: #fff; }
:where(.tw-plain-app--passenger-shell) dt { color: var(--tw-muted); font-size: 12px; font-weight: 600; margin-top: 10px; }
:where(.tw-plain-app--passenger-shell) dt:first-child { margin-top: 0; }
:where(.tw-plain-app--passenger-shell) dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; }
:where(.tw-plain-app--passenger-shell) details { padding: 12px 16px; border: 1px solid var(--tw-line); border-radius: var(--tw-radius); background: #fff; }
:where(.tw-plain-app--passenger-shell) summary { font-weight: 700; }
:where(.tw-plain-app--passenger-shell) fieldset { padding: 14px; border: 1px solid var(--tw-line); border-radius: var(--tw-radius); }
:where(.tw-plain-app--passenger-shell) hr { border: 0; border-top: 1px solid var(--tw-line); }

/* Payment-method badge (CASH / CARD) - one look everywhere */
.tw-badge[data-payment-method] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--tw-soft, #f3f1ff);
  color: #5a3fe0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.tw-badge[data-payment-method="CASHLESS"]::before,
.tw-badge[data-payment-method="CASH"]::before { content: ""; width: 14px; height: 10px; border-radius: 3px; border: 1.6px solid currentColor; box-sizing: border-box; }
.tw-badge[data-payment-method="CASH"]::before { border-radius: 50%; width: 11px; height: 11px; }

/* Bottom spacing: content never hides under the floating tab bar */
.tw-plain-app--passenger-shell { padding-bottom: calc(var(--tw-bottom-nav-content-inset, 128px) + 8px); }

/* Tablet / desktop: the product stays a centred phone-width column (platform-appropriate), with the page background calm */
@media (min-width: 700px) {
  body { background: #f6f6fb; }
  .tw-plain-app--passenger-shell {
    max-width: 480px;
    background: #fff;
    min-height: 100vh;
    box-shadow: 0 0 0 1px var(--tw-line, #e6e8f2), 0 24px 60px rgba(14, 19, 48, .06);
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Canonical button family (base look when a page does not scope it inside a component) - mirrors iOS CTA: 52 pt, 16 pt radius */
:where(.tw-plain-app--passenger-shell) .tw-c-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 18px; border: 0; border-radius: var(--tw-radius);
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
  box-sizing: border-box; -webkit-tap-highlight-color: transparent;
}
:where(.tw-plain-app--passenger-shell) .tw-c-button--full { width: 100%; }
:where(.tw-plain-app--passenger-shell) .tw-c-primary-button { background: var(--tw-purple); color: #fff; box-shadow: 0 8px 18px rgba(111, 76, 255, .22); }
:where(.tw-plain-app--passenger-shell) .tw-c-primary-button:visited { color: #fff; }
:where(.tw-plain-app--passenger-shell) .tw-c-secondary-button { background: #fff; color: var(--tw-purple); border: 1.5px solid var(--tw-purple); }
:where(.tw-plain-app--passenger-shell) .tw-c-secondary-button:visited { color: var(--tw-purple); }
:where(.tw-plain-app--passenger-shell) .tw-c-text-button { background: transparent; color: var(--tw-purple); min-height: 44px; }
:where(.tw-plain-app--passenger-shell) .tw-c-danger-button { background: #fff3f9; color: #b3261e; border: 1px solid #f3c9cc; }
:where(.tw-plain-app--passenger-shell) .tw-c-button:is([disabled], [aria-disabled="true"]) { opacity: .45; cursor: not-allowed; box-shadow: none; }
:where(.tw-plain-app--passenger-shell) .tw-c-button:active { transform: translateY(1px); }

/* Notification block + secondary CTA links used by the passenger flow pages */
:where(.tw-plain-app--passenger-shell) .tw-c-notification {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  border: 1px solid var(--tw-line); border-radius: var(--tw-radius); background: #fafaff; color: var(--tw-ink);
}
:where(.tw-plain-app--passenger-shell) .tw-c-notification strong { display: block; font-size: 15px; }
:where(.tw-plain-app--passenger-shell) .tw-c-notification p { margin: 4px 0 0; color: var(--tw-muted); font-size: 14px; }
:where(.tw-plain-app--passenger-shell) .tw-trip-secondary-cta {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 18px;
  border-radius: var(--tw-radius); background: var(--tw-soft); color: var(--tw-purple); font-weight: 700; text-decoration: none;
}
:where(.tw-plain-app--passenger-shell) .tw-c-status-chip {
  display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
  background: #eef0f6; color: #4a4f68; font-size: 12px; font-weight: 700; line-height: 1.2;
}
:where(.tw-plain-app--passenger-shell) .tw-c-status-chip--success { background: #e5f4ec; color: #17693f; }
:where(.tw-plain-app--passenger-shell) .tw-c-status-chip--warning { background: #fff2d6; color: #8a5a00; }
:where(.tw-plain-app--passenger-shell) .tw-c-status-chip--error { background: #ffe9e9; color: #b3261e; }
.tw-waiting-driver { margin-top: 8px; }
.tw-plain-app--passenger-shell a.tw-c-text-button,
.tw-plain-app--passenger-shell a.tw-c-text-button:visited { color: var(--tw-purple, #6f4cff); font-weight: 700; }

/* =====================================================================================================================
   iOS parity layer (final RC audit).  Tokens: Theme.swift - purple #6f4cff, ink #0e132e, muted #5b6079, line #e6e8f2,
   softPurple #f3f1ff, card radius 16, control radius 13, control height 52, touch target 48, tab bar glyph 26.
   ===================================================================================================================== */

/* ---- passenger City trip pages: iOS card language (DriverFound / ActiveTrip / TripComplete) ---- */
.tw-ios-trip { display: grid; gap: 12px; width: min(100%, 402px); margin: 0 auto; padding: 0 16px calc(var(--tw-bottom-nav-content-inset, 128px) + 8px); box-sizing: border-box; }
.tw-ios-head { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-top: 4px; }
.tw-ios-head h1 { margin: 0; color: #0e132e; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.tw-ios-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; color: #0e132e; text-decoration: none; }
.tw-ios-back svg { width: 22px; height: 22px; stroke: currentColor; }
.tw-ios-card { box-sizing: border-box; display: grid; gap: 12px; padding: 16px; background: #fff; border: 1px solid #e6e8f2; border-radius: 16px; box-shadow: 0 8px 22px rgba(14, 19, 48, 0.045); color: #0e132e; }
.tw-ios-card > h2 { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.005em; color: #0e132e; }
.tw-ios-card hr { width: 100%; margin: 0; border: 0; border-top: 1px solid #e6e8f2; }
.tw-ios-muted { margin: 0; color: #5b6079; font-size: 15px; line-height: 20px; }
.tw-ios-status { grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 14px; }
.tw-ios-status__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: #f3f1ff; color: #6f4cff; }
.tw-ios-status__icon svg { width: 28px; height: 28px; stroke: currentColor; }
.tw-ios-status--done .tw-ios-status__icon { background: #e5f4ec; color: #17693f; }
.tw-ios-status strong { display: block; font-size: 17px; line-height: 22px; font-weight: 600; }
.tw-ios-status p { margin: 2px 0 0; color: #5b6079; font-size: 15px; line-height: 20px; }
.tw-ios-driver { display: flex; align-items: center; gap: 14px; }
.tw-ios-driver strong { display: block; font-size: 17px; line-height: 22px; font-weight: 600; }
.tw-ios-avatar { position: relative; flex: 0 0 auto; display: inline-flex; width: 64px; height: 64px; box-sizing: border-box; border: 3px solid #fff; border-radius: 50%; background: #f3f1ff; box-shadow: 0 4px 14px rgba(14, 19, 48, 0.16); overflow: hidden; align-items: center; justify-content: center; }
.tw-ios-avatar .tw-default-avatar__image { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tw-ios-vehicle { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; }
.tw-ios-vehicle__glyph { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 40px; color: #6f4cff; }
.tw-ios-vehicle__glyph svg { width: 36px; height: 36px; stroke: currentColor; }
.tw-ios-vehicle strong { font-size: 17px; line-height: 22px; font-weight: 600; }
.tw-ios-stop { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.tw-ios-stop small { display: block; color: #5b6079; font-size: 12px; line-height: 16px; font-weight: 500; }
.tw-ios-stop strong { display: block; font-size: 17px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.tw-ios-stop span:not([class]) { display: block; color: #5b6079; font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.tw-ios-stop__dot, .tw-ios-stop__pin { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 12px; border-radius: 50%; background: #6f4cff; color: #fff; }
.tw-ios-stop__pin svg { width: 14px; height: 14px; stroke: currentColor; }
.tw-ios-when { display: flex; align-items: center; gap: 10px; color: #5b6079; font-size: 17px; line-height: 22px; }
.tw-ios-when svg { width: 22px; height: 22px; stroke: currentColor; }
.tw-ios-when__seats { margin-left: auto; font-size: 15px; }
.tw-ios-payment__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 20px; color: #5b6079; }
.tw-ios-payment__row strong { color: #0e132e; font-size: 17px; font-weight: 600; }
.tw-ios-confirm p, .tw-ios-cancel label { margin: 0; color: #5b6079; font-size: 15px; line-height: 20px; }
.tw-ios-cancel label { margin: 0; color: #0e132e; font-weight: 600; font-size: 13px; }
.tw-ios-city-active { display: grid; gap: 12px; }
.tw-ios-city-active > .tw-ios-card { width: min(100% - 32px, 370px); margin: 0 auto; }

/* ---- shared tab bar: iOS pill (68 pt, 26 pt glyphs, soft-purple selected bubble) ---- */
:root { --tw-bottom-nav-height: 68px; --tw-bottom-nav-icon-size: 26px; --tw-bottom-nav-icon-label-gap: 8px; --tw-bottom-nav-inactive: #5b6079; --tw-bottom-nav-shadow: 0 10px 28px rgba(14, 19, 48, 0.08); }
.tw-bottom-nav { border: 1px solid #e6e8f2; box-sizing: border-box; }
.tw-bottom-nav__item--active .tw-bottom-nav__icon { border-radius: 50%; background: #f3f1ff; box-shadow: 0 0 0 7px #f3f1ff; }
.tw-bottom-nav__label { font-weight: 500; }
.tw-bottom-nav__item--active .tw-bottom-nav__label { font-weight: 700; }

/* ---- shared top bar: iOS full-width bar with hairline and 44 pt bordered circular controls ---- */
[data-component="top-navigation-bar"] { top: 0; left: 0; right: 0; width: 100%; max-width: none; height: 72px; padding: 0 12px; margin: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid #e6e8f2; grid-template-columns: 56px minmax(0, 1fr) 56px; background: #fff; }
.twn-topbar__control { width: 44px; min-width: 44px; height: 44px; border: 1px solid #e6e8f2; border-radius: 50%; background: #fff; justify-self: center; }

/* ---- avatars: iOS CanonicalAvatarView = circle clip, 3 pt white ring, soft shadow (ink 12 %, r10, y5); 52 pt rows / 64 pt detail ---- */
:root { --tw-avatar-size-detail: 64px; --tw-avatar-size-card: 52px; }
.tw-c-avatar, .tw-active-trip-driver__avatar, .dx-active-passenger__avatar, .tw-trip-complete-avatar, .tw-default-avatar {
  border-radius: 50% !important; border: 3px solid #fff !important; box-sizing: border-box; overflow: hidden;
  background: #f3f1ff; box-shadow: 0 5px 10px rgba(14, 19, 48, 0.12);
}
.tw-c-avatar img, .tw-active-trip-driver__avatar img, .tw-trip-complete-avatar img { border-radius: 50%; object-fit: cover; }

/* ---- canonical Active Trip page (passenger + driver): same card family, no legacy share/SOS defaults ---- */
.tw-active-trip-next, .tw-active-trip-driver, .tw-active-trip-route, .tw-active-trip-safety, .tw-active-trip-share, .tw-active-trip-protection, .tw-active-trip-sos,
.dx-section.dx-active-payment { border: 1px solid #e6e8f2; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(14, 19, 48, 0.045); box-sizing: border-box; }
.dx-section.dx-active-payment { padding: 14px 16px; }
.tw-active-trip-share { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; color: inherit; text-decoration: none; }
.tw-active-trip-share > span, .tw-active-trip-sos__button > span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f3f1ff; color: #6f4cff; }
.tw-active-trip-share svg, .tw-active-trip-sos__button svg { width: 20px; height: 20px; stroke: currentColor; }
.tw-active-trip-sos { margin: 0; padding: 0; border-color: #f3c9cc; background: #fff3f9; }
.tw-active-trip-sos__button { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; border: 0; border-radius: 16px; background: transparent; color: #b3261e; font: inherit; text-align: left; cursor: pointer; }
.tw-active-trip-sos__button > span { background: #ffe9e9; color: #b3261e; }
.tw-active-trip-sos__button > div { display: grid; gap: 2px; }
.tw-active-trip-safety strong, .tw-active-trip-share strong, .tw-active-trip-sos strong, .tw-active-trip-protection strong { font-size: 15px; line-height: 20px; font-weight: 600; }
.tw-active-trip-safety small, .tw-active-trip-share small, .tw-active-trip-sos small, .tw-active-trip-protection small { font-size: 13px; line-height: 17px; color: #5b6079; font-weight: 400; }
.tw-active-trip-sos small { color: #8a4a4d; }
.tw-active-trip-driver__text strong { font-size: 17px; line-height: 22px; font-weight: 600; }
.tw-active-trip-driver__text small, .tw-active-trip-driver__text span { font-size: 13px; line-height: 17px; }
.tw-my-request-card__chevron svg { width: 20px; height: 20px; stroke: #5b6079; }

/* ---- type floor (iOS: caption 12 / footnote 13 / subheadline 15): nothing below 12 pt, secondary lines >= 13 pt, body copy >= 14 pt ---- */
body .dx-page small, body .tw-plain-app--passenger-shell small { font-size: 13px; line-height: 1.3; }
body .dx-page p { font-size: 14px; line-height: 1.4; }
body .dx-page .dx-chip, body .dx-page .dx-badge, body .tw-c-status-chip, .dx-home-context, .tw-trips-date-label, .tw-home-moment-secondary,
.tw-active-trip-map__freshness, .geo-warning, .dx-active-stop-evidence, .tw-c-notification-card__badge { font-size: 12px !important; line-height: 1.3; }
.tw-badge[data-payment-method] { font-size: 13px; }
body .dx-page .dx-active-stop-evidence, body .dx-page .geo-warning { font-size: 12px !important; }

/* ---- canonical Active Trip page type scale (iOS: title2 22 bold, headline 17, subheadline 15, caption 12) ---- */
body .tw-active-trip-status h1 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
body .tw-active-trip-status p { font-size: 15px; line-height: 20px; color: #5b6079; }
body .tw-active-trip :is(small, .tw-active-trip-map__freshness, time) { font-size: 12px; line-height: 16px; }
body .tw-active-trip :is(.tw-active-trip-driver__text strong, .tw-active-trip-next strong, .tw-active-trip-route strong) { font-size: 15px; line-height: 20px; font-weight: 600; }
body .tw-active-trip :is(.tw-active-trip-time span, .tw-active-trip-time small, .tw-active-trip-next span, .tw-active-trip-route span, .tw-active-trip-route p) { font-size: 13px; line-height: 17px; }
body .tw-active-trip :is(.tw-active-trip-time strong) { font-size: 17px; font-weight: 600; }
body .tw-active-trip .dx-section h2 { font-size: 17px; line-height: 22px; font-weight: 600; margin: 0 0 6px; }
body .tw-active-trip .dx-section p { font-size: 15px; }

/* ---- trip draft / create form: iOS segmented time control, selectable chips, payment tiles ---- */
.tw-plain-app--passenger-shell:has(.tw-trip-draft) > h1 { display: none; }
.tw-trip-draft > header h1, .tw-trip-draft h1 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; color: #0e132e; }
.tw-trip-draft-card { border-radius: 16px; border: 1px solid #e6e8f2; box-shadow: 0 8px 22px rgba(14, 19, 48, 0.045); }
.tw-trip-draft-kicker { color: #0e132e; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.tw-trip-draft-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-trip-draft-chips > label { position: relative; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; padding: 0 14px; box-sizing: border-box; border: 1px solid #e6e8f2; border-radius: 13px; background: #f3f1ff; color: #0e132e; font-size: 15px; font-weight: 600; cursor: pointer; }
.tw-trip-draft-chips > label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tw-trip-draft-chips > label:has(input[type="radio"]:checked) { background: #6f4cff; border-color: #6f4cff; color: #fff; box-shadow: 0 6px 14px rgba(111, 76, 255, 0.22); }
.tw-trip-draft-chips > label:has(input[type="checkbox"]) { flex: 0 0 auto; }
.tw-trip-draft-chips > label:has(input[type="checkbox"]:checked) { background: #fff; border-color: #6f4cff; color: #6f4cff; }
[data-payment-method-selector] { display: grid; gap: 8px; padding: 16px; border: 1px solid #e6e8f2; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(14, 19, 48, 0.045); }
[data-payment-method-selector] > h2 { margin: 0 0 4px; font-size: 17px; line-height: 22px; font-weight: 600; }
[data-payment-method-selector] > label { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0; padding: 0 14px; box-sizing: border-box; border: 1px solid #e6e8f2; border-radius: 13px; background: #fff; color: #0e132e; font-size: 15px; font-weight: 600; }
[data-payment-method-selector] > label:has(input:checked) { border-color: #6f4cff; background: #f3f1ff; }
[data-payment-method-selector] > label input { accent-color: #6f4cff; width: 20px; height: 20px; }
.tw-trip-draft__hero .tw-passenger-search-eyebrow { display: none; }
.tw-trip-draft__hero p { color: #5b6079; font-size: 15px; line-height: 20px; margin: 4px 0 0; }

/* tablet / desktop: the passenger shell is a centred 480 pt phone column, so its top bar follows the same column */
@media (min-width: 700px) {
  body:has(.tw-plain-app--passenger-shell) [data-component="top-navigation-bar"] { left: 50%; right: auto; width: 480px; transform: translateX(-50%); border-left: 1px solid #e6e8f2; border-right: 1px solid #e6e8f2; box-sizing: border-box; }
}

/* ---- control + card geometry on driver / profile / completed pages: iOS 52 pt controls, 16 pt radius, 16 pt side inset ---- */
.tw-c-button:not(.tw-c-text-button):not(.tw-c-switch), .tw-c-primary-button:not(.tw-c-switch), .tw-c-secondary-button.tw-button, .tw-driver-found-action { min-height: 52px; border-radius: 16px; }
.tw-profile-action-card, .tw-vehicle-identity-card, .tw-c-notification-card, .tw-c-trip-card.dx-home-work-state, .dx-readiness-card { border-radius: 16px; }
.tw-ios-trip { padding-left: 0; padding-right: 0; }
body .tw-trip-complete { padding-left: 0; padding-right: 0; }
body .tw-my-requests__header h1 { font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; }
.tw-profile-canonical__avatar .tw-c-avatar { width: 82px; height: 82px; }
.tw-ios-city-active > .tw-ios-card { width: 100%; margin: 0; }
body .tw-profile-action-card, body .tw-vehicle-identity-card, body .tw-c-notification-card { border-radius: 16px !important; }
body .tw-profile-canonical__avatar .tw-c-avatar { width: 82px !important; height: 82px !important; }

/* drawn check marks (no Unicode glyphs in the lifecycle / stop markers) */
.dx-active-stop-marker[data-done]::after, .dx-lifecycle li > span[data-done]::after { content: ""; display: block; width: 7px; height: 4px; margin: 3px auto 0; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }

/* =====================================================================================================================
   Driver Active Trip - iOS DriverActiveTripView structure: header (back + "Текущая поездка" + date) -> status card (stage glyph,
   stage title, address, ETA) -> map card -> "Маршрут" card -> 52 pt CTA -> secondary cards (passenger, payment, load, stops, safety)
   ===================================================================================================================== */
.tw-ios-driver-trip { display: grid; gap: 12px; align-content: start; width: min(100%, 402px); margin: 0 auto; padding: 0 16px calc(var(--tw-bottom-nav-content-inset, 128px) + 8px); box-sizing: border-box; }
.tw-ios-driver-trip > * { margin: 0; min-width: 0; }
.tw-ios-head--stacked { align-items: center; padding-top: 8px; }
.tw-ios-head--stacked h1 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.tw-ios-head--stacked time { display: block; color: #5b6079; font-size: 15px; line-height: 20px; }
.tw-ios-driver-trip .tw-ios-back { border: 1px solid #e6e8f2; border-radius: 50%; background: #fff; margin-left: 0; width: 44px; height: 44px; flex: none; }
.tw-ios-driver-status { padding: 14px 16px; }
.tw-ios-driver-status .dx-active-stop-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: center; }
.tw-ios-driver-status .tw-ios-status__icon { width: 54px; height: 54px; }
.tw-ios-driver-status .dx-active-stop-row-copy { display: grid; gap: 2px; min-width: 0; }
.tw-ios-driver-status__title { font-size: 17px; line-height: 22px; font-weight: 600; color: #0e132e; }
.tw-ios-driver-status .dx-active-current-address { color: #5b6079; font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.tw-ios-driver-status .tw-ios-chip { justify-self: start; margin: 6px 0 0; padding: 4px 11px; border-radius: 999px; background: #f3f1ff; color: #5a3fe0; font-size: 12px; line-height: 16px; font-weight: 700; }
.tw-ios-driver-status .dx-active-task-metrics { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; color: #6f4cff; }
.tw-ios-driver-status .dx-active-metric-cell, .tw-ios-driver-status .dx-active-metric-arrival { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.tw-ios-driver-status .dx-active-stop-action { margin-top: 10px; }
.tw-ios-driver-trip .dx-active-map-support { padding: 0; overflow: hidden; border: 1px solid #e6e8f2; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(14, 19, 48, 0.045); }
.tw-ios-driver-trip .dx-active-map-support > .dx-section-head { display: none; }
.tw-ios-driver-trip .dx-active-map-support [data-active-trip-map], .tw-ios-driver-trip .dx-active-map-support .tw-active-trip-map { min-height: 220px; border-radius: 0; border: 0; box-shadow: none; }
.tw-ios-driver-route .tw-ios-stop__pin { background: #ff8a1f; }
.tw-ios-driver-trip .dx-active-action { position: static; padding: 0; margin: 0; background: transparent; box-shadow: none; border: 0; }
.tw-ios-driver-trip .dx-active-action .tw-c-button, .tw-ios-driver-trip .dx-active-action button { width: 100%; min-height: 52px; border-radius: 16px; font-size: 17px; font-weight: 600; }
.tw-ios-driver-trip .dx-active-action form, .tw-ios-driver-trip .dx-active-action > * { display: grid; gap: 10px; }
.tw-ios-driver-trip .dx-section { border: 1px solid #e6e8f2; border-radius: 16px; background: #fff; padding: 14px 16px; box-shadow: 0 8px 22px rgba(14, 19, 48, 0.045); box-sizing: border-box; }
.tw-ios-driver-trip .dx-section > h2, .tw-ios-driver-trip .dx-section-head h2 { margin: 0 0 8px; font-size: 17px; line-height: 22px; font-weight: 600; }
.tw-ios-driver-trip .dx-active-passenger-section { padding: 0; border: 0; background: transparent; box-shadow: none; }

/* DriverActiveTripView geometry: status tile 42, passenger avatar 44, sticky primary bar above the tab bar */
.tw-ios-driver-status .dx-active-stop-row { grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: start; }
.tw-ios-driver-status .tw-ios-status__icon { width: 42px; height: 42px; border-radius: 13px; }
.tw-ios-driver-status .tw-ios-status__icon svg { width: 22px; height: 22px; }
.tw-ios-driver-trip .dx-active-passenger-section .tw-c-avatar, .tw-ios-driver-trip .dx-active-passenger__avatar { width: 44px; height: 44px; }
.tw-ios-driver-trip .dx-active-action { position: sticky; bottom: calc(var(--tw-bottom-nav-height, 68px) + 26px); z-index: 6; padding: 10px 0 8px; background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0)); }

/* DriverActiveTripView numeric lock (beats the older dx-page rules): title2 22, 16 pt cards, 12 pt rhythm, 16 pt inset CTA */
body .tw-ios-driver-trip { gap: 12px !important; row-gap: 12px !important; }
body .tw-ios-driver-trip .tw-ios-head h1 { font-size: 22px !important; line-height: 28px !important; }
body .tw-ios-driver-trip .tw-ios-driver-status, body .tw-ios-driver-trip .tw-ios-driver-route, body .tw-ios-driver-trip .dx-active-map-support { border-radius: 16px !important; }
body .tw-ios-driver-trip .tw-ios-driver-status { padding: 14px 16px !important; }
body .tw-ios-driver-trip .tw-ios-driver-route h2 { font-size: 17px !important; line-height: 22px !important; }
body .tw-ios-driver-trip .dx-active-action { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
body .tw-ios-driver-trip .dx-active-map-support .tw-active-trip-map, body .tw-ios-driver-trip .dx-active-map-support [data-active-trip-map] { min-height: 190px; max-height: none; }

/* Desktop (>= 1100px): Passenger Home is a two-column workspace — the map on the left, the trip form and shortcuts on the right.
   Top bar, bottom navigation and Halo stay the frozen shared components; below 1100px nothing changes (the phone layout). */
@media (min-width: 1100px) {
  /* Only the actual Home owns the desktop map/form workspace.  The next
     order step deliberately reuses the tw-home visual tokens, but has no
     map column; applying this grid there pushed every control into an
     orphaned right column on Safari/desktop. */
  .tw-plain-app:has(.tw-home[data-passenger-home="true"]) { max-width: 1120px; padding-left: 32px; padding-right: 32px; }
  .tw-home[data-passenger-home="true"] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr); column-gap: 28px; row-gap: 14px; align-items: start; }
  .tw-home[data-passenger-home="true"] > * { grid-column: 2; min-width: 0; }
  .tw-home[data-passenger-home="true"] > .tw-home-header { grid-column: 1 / -1; }
  .tw-home[data-passenger-home="true"] > .tw-home-map { grid-column: 1; grid-row: 2 / span 8; height: min(640px, calc(100vh - 220px)); min-height: 420px; margin-top: 0; }
  .tw-home[data-passenger-home="true"] > .tw-home-map .tw-home-map__canvas { height: 100%; }
}