/* Passenger Service Class selector v2.4 -- compact horizontal rows (the «Любой» row is text-only).
   ONE pixels-per-metre scale for every vehicle: an image is drawn at (real length in metres) x (--tw-vc-scale); all images share one baseline
   (the box is bottom-aligned and every crop ends at the tyre contact line), so natural proportions are kept and XL is simply longer. */
[data-service-class-selector] { --tw-vc-scale: 30px; --tw-vc-ink: var(--tw-home-ink, #0e132e); --tw-vc-muted: var(--tw-home-muted, #696a73);
  --tw-vc-line: var(--tw-home-line, #e4e1ec); --tw-vc-primary: var(--tw-home-primary, #6f4cff); display: grid; gap: 8px; }
[data-service-class-selector] > h2 { margin: 14px 0 0; font-size: 16px; line-height: 1.25; }
.tw-vc-list { display: grid; gap: 8px; position: relative; z-index: 0; isolation: isolate; }   /* the selector can never paint above the fixed bottom navigation (z-index 990) */
.tw-vc-row { position: relative; display: grid; grid-template-columns: calc(var(--tw-vc-scale) * 5.3) minmax(0, 1fr) 24px; align-items: center; column-gap: 14px;
  width: 100%; min-height: 72px; padding: 8px 14px 8px 12px; border: 1px solid var(--tw-vc-line); border-radius: 18px; background: #fff; color: var(--tw-vc-ink);
  font: inherit; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: border-color .15s, background-color .15s; -webkit-tap-highlight-color: transparent; }
.tw-vc-row--text { grid-template-columns: minmax(0, 1fr) 24px; min-height: 64px; padding-left: 16px; }
/* STATES -- exactly one thing means "selected": the PURPLE border + the right checkmark.  Nothing else on a row is purple.
   hover (mouse only)  -> a slightly darker NEUTRAL border (no tint: the car art has a white ground), no purple, never on touch (no sticky hover);
   keyboard focus      -> a dark ink ring OFFSET from the row (:focus-visible only; a tap / click / programmatic focus shows nothing);
   selected            -> purple border + checkmark; it may also carry the keyboard ring, which is a different colour and an offset line. */
.tw-vc-row:focus { outline: none; }
.tw-vc-row:focus-visible { outline: 2px solid var(--tw-vc-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tw-vc-row:hover:not(.is-selected):not(.is-unavailable) { border-color: #c4c1d1; }
}
.tw-vc-row.is-selected { border-color: var(--tw-vc-primary); box-shadow: 0 0 0 1px var(--tw-vc-primary); }
.tw-vc-art-box { display: flex; align-items: flex-end; justify-content: flex-start; height: calc(var(--tw-vc-scale) * 2.3); overflow: visible; }
.tw-vc-art { display: block; width: calc(var(--tw-vc-length-m) * var(--tw-vc-scale)); max-width: none; height: auto; flex: none; user-select: none; }
.tw-vc-copy { display: grid; gap: 2px; min-width: 0; }
.tw-vc-label { font-size: 17px; font-weight: 700; line-height: 1.2; }
.tw-vc-hint { color: var(--tw-vc-muted); font-size: 13px; line-height: 1.35; }
.tw-vc-check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--tw-vc-line); color: transparent; background: #fff; }
.tw-vc-check svg { width: 14px; height: 14px; }
.tw-vc-row.is-selected .tw-vc-check { background: var(--tw-vc-primary); border-color: var(--tw-vc-primary); color: #fff; }
.tw-vc-row.is-unavailable { cursor: not-allowed; }
.tw-vc-row.is-unavailable .tw-vc-art { opacity: .5; filter: grayscale(.7); }
.tw-vc-row.is-unavailable .tw-vc-label { color: var(--tw-vc-muted); }
@media (max-width: 360px) {
  [data-service-class-selector] { --tw-vc-scale: 27px; }
  .tw-vc-row { column-gap: 10px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .tw-vc-row { transition: none; } }