/* Форма заказа пассажира, макет 05.10.2026 (docs/design-rules.md).
   Телефон ≤560: три экрана-шага без прокрутки, кнопка действия в одной точке над нижним меню.
   Планшет 561–900 и ПК ≥901: панель слева, карта справа, кнопка заказа прилипает к низу панели.
   Файл подключается последним и перекрывает прежние слои только внутри #order-editor.of2. */

/* ---------- Шапка кабинета на телефоне: логотип слева, колокольчик и QR справа ---------- */
@media (max-width:560px){
  body.design-787.role-passenger .cabinet-header{gap:8px;padding:0 12px}
  body.design-787.role-passenger .cabinet-header .cabinet-logo{gap:8px;min-height:44px}
  body.design-787.role-passenger .cabinet-header .cabinet-logo>span:last-child{display:inline!important}
  body.design-787.role-passenger .cabinet-header>#page-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body.design-787.role-passenger .cabinet-header .cabinet-head-actions{margin-left:auto;gap:8px}
  body.design-787.role-passenger .cabinet-header .header-qr{display:grid!important;place-items:center;order:3}
  /* Профиль на телефоне открывается из нижнего меню; дубль-аватар в шапке уступает место QR. */
  body.design-787.role-passenger .cabinet-header .design-profile{display:none!important}
}

/* ---------- Каркас ---------- */
body.design-787.role-passenger #order-editor.of2:not([hidden]){
  position:fixed;z-index:80;inset:60px 0 0 0;left:0;transform:none;display:grid!important;gap:0!important;
  width:auto;height:auto;min-height:0;max-width:none;max-height:none;margin:0;
  background:#fff;border:0;border-radius:0;overflow:hidden;align-items:stretch;justify-items:stretch;
  grid-template-columns:440px minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto;
}
/* Скрытая форма (заказ отправлен, показана активная поездка) не должна проявляться из-за старых display:grid!important. */
body.design-787.role-passenger #order-editor.of2[hidden],
body.design-787.role-passenger #order-editor.of2 [hidden]{display:none!important}
body.design-787.role-passenger #order-editor.of2>.of-stephead{display:none}
body.design-787.role-passenger #order-editor.of2>#trip-form{grid-column:1;grid-row:1;min-height:0;min-width:0;width:auto;max-width:none;box-sizing:border-box;overflow:hidden auto;overscroll-behavior:contain;padding:16px 20px 8px;scrollbar-width:thin}
body.design-787.role-passenger #order-editor.of2>.booking-page-footer{grid-column:1;grid-row:2;display:grid;gap:8px;padding:10px 20px 16px;background:#fff;border-top:1px solid var(--787-line);position:relative}
body.design-787.role-passenger #order-editor.of2>.booking-sidebar{grid-column:2;grid-row:1/-1;display:block!important;position:relative;top:auto;min-width:0;width:auto!important;max-width:none!important;height:auto;align-self:stretch;justify-self:stretch;isolation:isolate;background:#e9eef3;border-left:1px solid var(--787-line)}
body.design-787.role-passenger #order-editor.of2>.booking-sidebar>:is(.booking-route-map,.booking-summary){display:none!important}
body.design-787.role-passenger #order-editor.of2 #booking-inputs{display:flex!important;flex-direction:column;min-width:0;min-inline-size:0;width:auto;box-sizing:border-box;gap:12px!important;margin:0!important;padding:0!important;border:0;overflow:visible;min-height:0;flex:none}
body.design-787.role-passenger #order-editor.of2 .booking-page{display:flex;flex-direction:column;gap:12px;flex:none;min-height:0;min-width:0;width:100%;box-sizing:border-box;padding:0;overflow:visible}
body.design-787.role-passenger #order-editor.of2 .booking-page>*{box-sizing:border-box;min-width:0;max-width:100%}
body.design-787.role-passenger #order-editor.of2 #order-edit-notice{margin:0 0 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
body.design-787.role-passenger #order-editor.of2 .field-error:empty{display:none}
body.design-787.role-passenger #order-editor.of2 .field-error{margin:0;font-size:13px;line-height:1.35}
@media (min-width:561px) and (max-width:900px){
  body.design-787.role-passenger #order-editor.of2:not([hidden]){grid-template-columns:360px minmax(0,1fr)!important}
  body.design-787.role-passenger #order-editor.of2>#trip-form{padding:14px 16px 8px}
  body.design-787.role-passenger #order-editor.of2>.booking-page-footer{padding:10px 16px 14px}
}
/* Между 561 и 1099 нижнее меню остаётся внизу экрана — панель заканчивается над ним. */
@media (min-width:561px) and (max-width:1099px){
  body.design-787.role-passenger #order-editor.of2:not([hidden]){bottom:calc(var(--of-nav,66px) + env(safe-area-inset-bottom,0px))}
}

/* ---------- Направление: один переключатель ---------- */
body.design-787.role-passenger #order-editor.of2 .direction-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px!important;margin:0!important;padding:3px;background:#e9eef3;border-radius:13px}
body.design-787.role-passenger #order-editor.of2 .direction-tabs button{min-height:44px;min-width:0;padding:6px 4px!important;border:0;border-radius:10px;background:transparent;color:var(--787-ink);font-size:14px!important;font-weight:500;text-align:center;line-height:1.2}
body.design-787.role-passenger #order-editor.of2 .direction-tabs button[aria-pressed=true]{background:var(--787-blue);color:#fff;font-weight:600}

/* ---------- Маршрут одним блоком ---------- */
body.design-787.role-passenger #order-editor.of2 .booking-addresses{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;margin:0;background:#fff;border:1px solid var(--787-line);border-radius:14px;overflow:hidden}
body.design-787.role-passenger #order-editor.of2 .booking-addresses::before{content:"";position:absolute;z-index:1;left:19px;top:38px;bottom:38px;border-left:2px dotted #9fb0bf;pointer-events:none}
body.design-787.role-passenger #order-editor.of2 .booking-addresses .endpoint-card{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
body.design-787.role-passenger #order-editor.of2 .booking-addresses .endpoint-card+.endpoint-card{border-top:1px solid var(--787-line)}
body.design-787.role-passenger #order-editor.of2 .booking-addresses .booking-sheet-trigger{display:grid;gap:2px;width:100%;min-height:58px;padding:9px 62px 9px 40px;border:0;border-radius:0;background:transparent;text-align:left;justify-items:start;align-content:center}
body.design-787.role-passenger #order-editor.of2 .booking-sheet-trigger>span{font-size:12px;font-weight:400;color:var(--787-muted);line-height:1.3}
body.design-787.role-passenger #order-editor.of2 .booking-sheet-trigger>strong{font-size:15px;font-weight:500;line-height:1.3;color:var(--787-ink);overflow-wrap:anywhere}
body.design-787.role-passenger #order-editor.of2 .booking-sheet-trigger>small{font-size:12px;color:var(--787-muted)}
body.design-787.role-passenger #order-editor.of2 .booking-sheet-trigger>small:empty{display:none}
body.design-787.role-passenger #order-editor.of2 .booking-addresses .booking-sheet-trigger::before{left:15px;width:10px;height:10px;z-index:2;box-shadow:0 0 0 3px #fff}
body.design-787.role-passenger #order-editor.of2 .booking-sheet-trigger[aria-invalid=true]{box-shadow:inset 0 0 0 2px #b3261e!important;background:#fdf3f2}
body.design-787.role-passenger #order-editor.of2 .of-swap{position:absolute;z-index:3;right:9px;top:50%;transform:translateY(-50%);width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:grid;place-items:center;border:1px solid var(--787-line);border-radius:50%;background:#fff;color:var(--787-blue);font-size:20px;line-height:1;box-shadow:0 2px 6px rgba(24,43,62,.1)}
body.design-787.role-passenger #order-editor.of2 .of-swap:disabled{opacity:.5}

/* ---------- Чипы: быстрые адреса и оплата ---------- */
body.design-787.role-passenger #order-editor.of2 .of-chips{display:flex;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
body.design-787.role-passenger #order-editor.of2 .of-chips::-webkit-scrollbar{display:none}
/* Ряд листается: край, за которым есть продолжение, затухает, чтобы обрезанный чип читался как «дальше есть ещё». */
.of-chips[data-more~=end]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.of-chips[data-more~=start]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
.of-chips[data-more="start end"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
body.design-787.role-passenger #order-editor.of2 .of-chip{flex:none;min-height:44px;min-width:44px;max-width:220px;margin:0;padding:0 14px;border:1px solid var(--787-line);border-radius:22px;background:#fff;color:var(--787-ink);font-size:14px;font-weight:500;line-height:42px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
body.design-787.role-passenger #order-editor.of2 .of-chip[aria-pressed=true]{background:var(--787-soft);border-color:var(--787-blue);color:var(--787-blue);font-weight:600}
body.design-787.role-passenger #order-editor.of2 .of-chip:disabled{opacity:.55}
body.design-787.role-passenger #order-editor.of2 .booking-favorites,
body.design-787.role-passenger #order-editor.of2 .booking-price-action,
body.design-787.role-passenger #order-editor.of2 .booking-heading,
body.design-787.role-passenger #order-editor.of2 #booking-inputs>.booking-section-title,
body.design-787.role-passenger #order-editor.of2 .booking-page>.booking-location{display:none!important}

/* ---------- Когда подать и пассажиры ---------- */
body.design-787.role-passenger #order-editor.of2 .booking-details{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;margin:0!important}
body.design-787.role-passenger #order-editor.of2 .booking-details .booking-card{min-height:66px!important;margin:0;padding:8px 12px!important;border:1px solid var(--787-line);border-radius:14px;background:#fff;box-shadow:none}
body.design-787.role-passenger #order-editor.of2 .booking-details .booking-pickup{padding:0!important;display:grid;overflow:hidden}
body.design-787.role-passenger #order-editor.of2 .booking-pickup .booking-sheet-trigger{display:grid;gap:2px;width:100%;min-height:64px;padding:8px 14px;border:0;border-radius:0;background:transparent;text-align:left;justify-items:start;align-content:center}
body.design-787.role-passenger #order-editor.of2 .booking-pickup .booking-sheet-trigger>strong{font-family:var(--font-ui,inherit);font-variant-numeric:tabular-nums}
body.design-787.role-passenger #order-editor.of2 .booking-details .booking-card>label{margin:0;font-size:12px;font-weight:400;color:var(--787-muted);line-height:1.3}
body.design-787.role-passenger #order-editor.of2 .booking-details .booking-card>.form-hint{display:none}
body.design-787.role-passenger #order-editor.of2 .passenger-counter{display:flex;align-items:center;gap:4px;margin:2px 0 0!important}
body.design-787.role-passenger #order-editor.of2 .passenger-counter>button{width:44px;height:44px;min-width:44px!important;min-height:44px!important;padding:0;border:1px solid var(--787-line);border-radius:12px;background:#fff;color:var(--787-ink);font-size:22px;line-height:1}
body.design-787.role-passenger #order-editor.of2 .passenger-counter>button:disabled{opacity:.4}
body.design-787.role-passenger #order-editor.of2 .passenger-counter>select{width:44px!important;min-width:44px;height:44px;min-height:44px;margin:0;padding:0!important;border:0;background:transparent;text-align:center;text-align-last:center;font:600 18px var(--font-data,inherit);color:var(--787-ink);appearance:none;-webkit-appearance:none}

/* ---------- Тип поездки: две карточки одинаковой высоты, цена крупно ---------- */
body.design-787.role-passenger #order-editor.of2 .booking-ride-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0!important;padding:0;border:0;min-width:0}
body.design-787.role-passenger #order-editor.of2 .booking-ride-options legend{grid-column:1/-1;margin:0 0 6px;padding:0;font-size:13px;font-weight:600;color:var(--787-ink)}
body.design-787.role-passenger #order-editor.of2 .booking-ride-options label{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:6px;align-items:start;min-height:104px!important;margin:0;padding:12px!important;border:1.5px solid var(--787-line);border-radius:14px;background:#fff;cursor:pointer}
body.design-787.role-passenger #order-editor.of2 .booking-ride-options label:has(:checked){border-color:var(--787-blue);background:var(--787-soft);box-shadow:inset 0 0 0 1px var(--787-blue)}
body.design-787.role-passenger #order-editor.of2 .booking-ride-options label:has(:disabled){opacity:.55;cursor:not-allowed}
body.design-787.role-passenger #order-editor.of2 .booking-ride-options label:focus-within{outline:2px solid var(--787-blue);outline-offset:2px}
body.design-787.role-passenger #order-editor.of2 .booking-ride-options input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
body.design-787.role-passenger #order-editor.of2 .ride-option-main{display:grid;gap:2px;grid-column:1;grid-row:1;min-width:0}
body.design-787.role-passenger #order-editor.of2 .ride-option-main strong{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px!important;font-weight:600;line-height:1.25}
body.design-787.role-passenger #order-editor.of2 .ride-option-main em{font-style:normal;padding:2px 7px;border-radius:7px;background:#dff3e8;color:#1c5c43;font-size:11px!important;font-weight:600;line-height:1.3}
body.design-787.role-passenger #order-editor.of2 .ride-option-main small{font-size:12px!important;font-weight:400;line-height:1.3;color:var(--787-muted)}
body.design-787.role-passenger #order-editor.of2 .ride-option-price{grid-column:1;grid-row:2;align-self:end;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;min-width:0;text-align:left;font:600 22px/1.1 var(--font-data,inherit);color:var(--787-ink)}
body.design-787.role-passenger #order-editor.of2 .ride-option-price small{font:400 12px/1.2 var(--font-ui,inherit);color:var(--787-muted)}
body.design-787.role-passenger #order-editor.of2 #city-ride-note{margin:0;font-size:12px}
body.design-787.role-passenger #order-editor.of2 #shared-candidates{margin:0}

/* ---------- Оплата, комментарий, расчёт цены ---------- */
body.design-787.role-passenger #order-editor.of2 .booking-extras{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px;margin:0!important;padding:0!important;min-height:0;border:0;border-radius:0;background:transparent}
body.design-787.role-passenger #order-editor.of2 .booking-extras>label{display:none}
body.design-787.role-passenger #order-editor.of2 .of-pay{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
body.design-787.role-passenger #order-editor.of2 .of-pay .of-chip{padding:0 12px}
body.design-787.role-passenger #order-editor.of2 .booking-extras>.booking-price-info{grid-column:2;justify-self:end}
body.design-787.role-passenger #order-editor.of2 .of-comment{grid-column:1;justify-self:start}
body.design-787.role-passenger #order-editor.of2 .of-label{flex:none;font-size:13px;font-weight:600;color:var(--787-ink)}
body.design-787.role-passenger #order-editor.of2 .of-link,
body.design-787.role-passenger #order-editor.of2 .booking-price-info>summary{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin:0;padding:0;border:0;background:transparent;color:var(--787-blue-2);font-size:14px;font-weight:500;text-align:left;cursor:pointer;list-style:none;text-decoration:underline;text-decoration-color:#9db9d1;text-underline-offset:3px}
body.design-787.role-passenger #order-editor.of2 .booking-price-info>summary::-webkit-details-marker{display:none}
body.design-787.role-passenger #order-editor.of2 .of-comment{max-width:100%;overflow:hidden}
body.design-787.role-passenger #order-editor.of2 .of-comment.filled{display:block;white-space:nowrap;text-overflow:ellipsis;line-height:44px;color:var(--787-ink);text-decoration:none}
body.design-787.role-passenger #order-editor.of2 .booking-price-info{margin:0;font-size:13px;order:0}
body.design-787.role-passenger #order-editor.of2 .of-price-body{position:absolute;z-index:5;left:0;right:0;bottom:calc(100% + 4px);display:grid;gap:6px;padding:14px 16px;background:#fff;border:1px solid var(--787-line);border-radius:14px;box-shadow:0 12px 32px rgba(24,43,62,.18);font-size:13px;line-height:1.45;color:var(--787-ink)}
body.design-787.role-passenger #order-editor.of2 .of-price-body>*{margin:0;display:block}
body.design-787.role-passenger #order-editor.of2 .of-price-body>:empty{display:none}
body.design-787.role-passenger #order-editor.of2 .of-pay-note{color:var(--787-muted);font-size:12px}

/* ---------- Низ панели: итог и одна кнопка ---------- */
body.design-787.role-passenger #order-editor.of2 .booking-page-errors{display:grid;gap:6px}
body.design-787.role-passenger #order-editor.of2 .booking-page-errors:not(:has(>:not([hidden]):not(:empty))){display:none}
body.design-787.role-passenger #order-editor.of2 .booking-page-errors .field-error{max-height:64px;overflow:auto}
body.design-787.role-passenger #order-editor.of2 .booking-page-price{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;flex:none;font-size:14px;font-weight:500;color:var(--787-muted)}
body.design-787.role-passenger #order-editor.of2 .booking-page-price>#quote-amount{font:600 22px/1.1 var(--font-data,inherit);color:var(--787-ink);overflow-wrap:anywhere}
body.design-787.role-passenger #order-editor.of2 .booking-page-price>.booking-price-info{margin-left:auto}
body.design-787.role-passenger #order-editor.of2 .booking-page-price>.booking-price-info .of-price-body{bottom:calc(100% + 4px)}
body.design-787.role-passenger #order-editor.of2 .booking-page-actions{display:block;min-width:0}
body.design-787.role-passenger #order-editor.of2 .booking-page-actions>button{display:block;width:100%;min-width:0;min-height:52px!important;height:52px;margin:0!important;padding:0 14px;border:1.5px solid transparent;border-radius:14px;background:var(--787-orange);color:#fff;font-size:16px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Кнопка-подсказка: не хватает данных — нейтральная, с пунктиром, ведёт к пустому полю. */
body.design-787.role-passenger #order-editor.of2 .booking-page-actions>button.of-needs-input{background:#fff;border:1.5px dashed #8496a6;color:var(--787-ink);font-weight:500}
body.design-787.role-passenger #order-editor.of2 .booking-page-actions>button:disabled{opacity:.7;cursor:progress}

/* ---------- Карта (планшет и ПК) ---------- */
body.design-787.role-passenger #order-editor.of2 .of-map{position:absolute;inset:0;background:#e9eef3;font-family:inherit}
body.design-787.role-passenger #order-editor.of2 .of-map.of-map-off{background:repeating-linear-gradient(135deg,#e9eef3 0 12px,#eef2f6 12px 24px)}
body.design-787.role-passenger #order-editor.of2 .of-map-card{position:absolute;z-index:500;top:16px;left:16px;display:grid;gap:4px;max-width:min(440px,calc(100% - 32px));padding:12px 16px;background:#fff;border-radius:14px;box-shadow:0 8px 28px rgba(24,43,62,.16);pointer-events:none}
body.design-787.role-passenger #order-editor.of2 .of-map-card strong{font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
body.design-787.role-passenger #order-editor.of2 .of-map-card span{font-size:13px;color:var(--787-muted)}
.of-pin{border:3px solid #fff;box-shadow:0 2px 8px rgba(24,43,62,.45);box-sizing:border-box}
.of-pin-origin{border-radius:50%;background:#2b755c}
.of-pin-destination{border-radius:5px;background:#b04f00}
body.design-787.role-passenger #order-editor.of2 .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:22px;color:var(--787-ink)}

/* ---------- Телефон: три экрана-шага ---------- */
@media (max-width:560px){
  body.design-787.role-passenger #order-editor.of2:not([hidden]){bottom:calc(var(--of-nav,66px) + env(safe-area-inset-bottom,0px));grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr) auto;background:#f4f7fa}
  body.design-787.role-passenger #order-editor.of2>.booking-sidebar{display:none!important}
  body.design-787.role-passenger #order-editor.of2>.of-stephead{grid-column:1;grid-row:1;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:0 6px;padding:4px 16px 8px 8px;background:#fff}
  body.design-787.role-passenger #order-editor.of2 .of-back{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:12px;background:transparent;color:var(--787-ink)}
  body.design-787.role-passenger #order-editor.of2 .of-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  body.design-787.role-passenger #order-editor.of2 .of-back.of-back-idle{visibility:hidden}
  body.design-787.role-passenger #order-editor.of2 .of-stephead-text{display:grid;gap:0;min-width:0}
  body.design-787.role-passenger #order-editor.of2 .of-step-count{font-size:12px;line-height:1.3;color:var(--787-muted)}
  body.design-787.role-passenger #order-editor.of2 .of-step-title{margin:0;font-size:19px;font-weight:600;line-height:1.2;outline:0}
  body.design-787.role-passenger #order-editor.of2 .of-eta{margin:0;max-width:136px;font-size:12px;line-height:1.3;text-align:right;color:var(--787-muted)}
  body.design-787.role-passenger #order-editor.of2 .of-progress{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:6px 0 0 8px}
  body.design-787.role-passenger #order-editor.of2 .of-progress i{height:4px;border-radius:2px;background:#dce4eb}
  body.design-787.role-passenger #order-editor.of2 .of-progress i.done{background:var(--787-blue)}
  body.design-787.role-passenger #order-editor.of2>#trip-form{grid-row:2;padding:10px 16px 6px}
  body.design-787.role-passenger #order-editor.of2>.booking-page-footer{grid-row:3;padding:8px 16px 10px}
  body.design-787.role-passenger #order-editor.of2 #booking-inputs,
  body.design-787.role-passenger #order-editor.of2 .booking-page{gap:10px!important}
  body.design-787.role-passenger #order-editor.of2 .direction-tabs button{font-size:13px!important}
  /* Шаг 2: маршрут одной строкой, время и пассажиры строками во всю ширину, типы поездки в столбик. */
  body.design-787.role-passenger #order-editor.of2 .of-route-line{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;margin:-4px 0;padding:0;border:0;background:transparent;color:var(--787-muted);font-size:13px;font-weight:400;text-align:left}
  body.design-787.role-passenger #order-editor.of2 .of-route-line span{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.design-787.role-passenger #order-editor.of2 .of-route-line i{flex:none;font-style:normal}
  body.design-787.role-passenger #order-editor.of2 .booking-details{grid-template-columns:minmax(0,1fr)!important;gap:0!important;background:#fff;border:1px solid var(--787-line);border-radius:14px;overflow:hidden}
  body.design-787.role-passenger #order-editor.of2 .booking-details .booking-card{min-height:56px!important;border:0;border-radius:0;background:transparent}
  body.design-787.role-passenger #order-editor.of2 .booking-details .booking-card+.booking-card{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--787-line);padding:6px 8px 6px 14px!important}
  body.design-787.role-passenger #order-editor.of2 .booking-details .booking-card>label{font-size:14px;color:var(--787-ink)}
  body.design-787.role-passenger #order-editor.of2 .booking-pickup .booking-sheet-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 14px}
  body.design-787.role-passenger #order-editor.of2 .booking-pickup .booking-sheet-trigger>span{font-size:14px;color:var(--787-ink)}
  body.design-787.role-passenger #order-editor.of2 .booking-pickup .booking-sheet-trigger>strong{font-weight:600;text-align:right}
  body.design-787.role-passenger #order-editor.of2 .passenger-counter{margin:0!important}
  body.design-787.role-passenger #order-editor.of2 .booking-ride-options{grid-template-columns:minmax(0,1fr);gap:8px}
  body.design-787.role-passenger #order-editor.of2 .booking-ride-options legend{margin-bottom:0}
  body.design-787.role-passenger #order-editor.of2 .booking-ride-options label{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;gap:10px;min-height:68px!important;padding:10px 14px!important}
  body.design-787.role-passenger #order-editor.of2 .ride-option-price{grid-column:2;grid-row:1;align-self:center;display:grid;justify-items:end;gap:2px;font-size:20px;text-align:right}
  /* Шаг 3: сводка, оплата, комментарий и расчёт цены ссылками. */
  body.design-787.role-passenger #order-editor.of2 #booking-review{display:grid;gap:0;margin:0;padding:0;background:#fff;border:1px solid var(--787-line);border-radius:14px;overflow:hidden}
  body.design-787.role-passenger #order-editor.of2 #booking-review>header{display:none}
  body.design-787.role-passenger #order-editor.of2 #booking-review .review-route{position:relative;display:grid;gap:6px;margin:0;padding:10px 92px 10px 14px;border:0;border-radius:0;background:transparent}
  body.design-787.role-passenger #order-editor.of2 #booking-review .review-route p{margin:0;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
  body.design-787.role-passenger #order-editor.of2 #booking-review .review-route p::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#2b755c;vertical-align:1px}
  body.design-787.role-passenger #order-editor.of2 #booking-review .review-route p+p::before{border-radius:2px;background:#b04f00}
  body.design-787.role-passenger #order-editor.of2 #booking-review .review-route button{position:absolute;top:0;right:6px;min-height:44px;min-width:44px;margin:0;padding:0 8px;font-size:14px}
  body.design-787.role-passenger #order-editor.of2 #booking-review dl{display:grid;gap:0;margin:0}
  body.design-787.role-passenger #order-editor.of2 #booking-review dl>div{display:flex;justify-content:space-between;gap:12px;padding:7px 14px;border-top:1px solid var(--787-line);font-size:14px}
  body.design-787.role-passenger #order-editor.of2 #booking-review dl>div:nth-child(n+3){display:none!important}
  body.design-787.role-passenger #order-editor.of2 #booking-review dt{color:var(--787-muted)}
  body.design-787.role-passenger #order-editor.of2 #booking-review dd{margin:0;text-align:right;font-weight:500}
  body.design-787.role-passenger #order-editor.of2 #booking-review .review-total{display:flex!important;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:9px 14px;border-top:1px solid var(--787-line);background:var(--787-soft);font-size:15px;font-weight:600}
  body.design-787.role-passenger #order-editor.of2 #booking-review .review-total strong{font:600 20px/1.1 var(--font-data,inherit)}
  body.design-787.role-passenger #order-editor.of2 #booking-review>footer{display:none!important}
}
@media (max-width:380px),(min-width:561px) and (max-width:900px){
  body.design-787.role-passenger #order-editor.of2 .of-pay .of-label>span{display:none}
}
@media (max-width:560px) and (max-height:700px){
  body.design-787.role-passenger #order-editor.of2 .booking-ride-options label{min-height:60px!important;padding:8px 14px!important}
  body.design-787.role-passenger #order-editor.of2 .ride-option-main small{display:none}
  body.design-787.role-passenger #order-editor.of2 .booking-addresses .booking-sheet-trigger{min-height:54px;padding-top:7px;padding-bottom:7px}
}
/* ПК: «Пассажиров» в одну строку со счётчиком. */
@media (min-width:901px){
  body.design-787.role-passenger #order-editor.of2 .booking-details .booking-card+.booking-card{display:flex;align-items:center;gap:10px}
}
/* Невысокий экран (ноутбук, планшет лёжа): адрес в одну строку, карточки ниже, итог на кнопке. */
@media (min-width:561px){
  body.design-787.role-passenger #order-editor.of2[data-booking-compact=true] #booking-inputs,
  body.design-787.role-passenger #order-editor.of2[data-booking-compact=true] .booking-page{gap:10px!important}
  body.design-787.role-passenger #order-editor.of2[data-booking-compact=true]>#trip-form{padding-top:12px}
  body.design-787.role-passenger #order-editor.of2[data-booking-compact=true] .booking-ride-options label{min-height:88px!important;padding:10px 12px!important}
  body.design-787.role-passenger #order-editor.of2[data-booking-compact=true] .booking-addresses .booking-sheet-trigger{min-height:54px;padding-top:7px;padding-bottom:7px}
  body.design-787.role-passenger #order-editor.of2[data-booking-compact=true] .booking-addresses .booking-sheet-trigger>strong{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- Попутчики: одна строка в шаге, список групп — в окне ---------- */
body.design-787.role-passenger #order-editor.of2 .booking-page>#shared-candidates{display:none!important}
body.design-787.role-passenger #order-editor.of2 .of-shared{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 10px;width:100%;min-height:52px;margin:0;padding:6px 14px;border:1.5px solid #8fc4a8;border-radius:14px;background:#eef8f2;color:var(--787-ink);text-align:left}
body.design-787.role-passenger #order-editor.of2 .of-shared.joined{border-color:var(--787-blue);background:var(--787-soft)}
body.design-787.role-passenger #order-editor.of2 .of-shared>span{display:grid;gap:1px;min-width:0}
body.design-787.role-passenger #order-editor.of2 .of-shared strong{font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.design-787.role-passenger #order-editor.of2 .of-shared small{font-size:12px;line-height:1.3;color:var(--787-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.design-787.role-passenger #order-editor.of2 .of-shared b{font:600 15px/1.2 var(--font-ui,inherit);font-variant-numeric:tabular-nums;white-space:nowrap}
body.design-787.role-passenger #booking-sheet[data-kind=shared] #shared-candidates{display:grid;gap:10px;margin:0;padding:0;border:0;background:transparent}
body.design-787.role-passenger #booking-sheet[data-kind=shared] .shared-candidate-list{display:grid;gap:8px}
body.design-787.role-passenger #booking-sheet[data-kind=shared] .shared-candidate{width:100%;min-height:56px;text-align:left}

/* ---------- Напоминание об активной поездке ---------- */
body.design-787.role-passenger #order-editor.of2 .of-active-banner{display:block;width:100%;min-height:44px;margin:0;padding:6px 14px;border:1px solid #9db9d1;border-radius:12px;background:var(--787-soft);color:var(--787-blue);font-size:14px;font-weight:600;line-height:1.3;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* На планшете и ПК строка лежит поверх карты, чтобы панель оставалась без прокрутки. */
@media (min-width:561px){
  body.design-787.role-passenger #order-editor.of2 .of-active-banner{position:fixed;z-index:90;left:456px;bottom:44px;width:auto;max-width:calc(100vw - 440px - 110px);background:#fff;box-shadow:0 8px 28px rgba(24,43,62,.18)}
}
@media (min-width:561px) and (max-width:900px){
  body.design-787.role-passenger #order-editor.of2 .of-active-banner{left:376px;max-width:calc(100vw - 360px - 96px)}
}
@media (min-width:561px) and (max-width:1099px){
  body.design-787.role-passenger #order-editor.of2 .of-active-banner{bottom:calc(var(--of-nav,66px) + env(safe-area-inset-bottom,0px) + 44px)}
}
@media (max-width:560px) and (max-height:700px){
  /* Невысокий телефон: строка попутчиков занимает место строки маршрута (маршрут виден на шаге 1 и на шаге 3). */
  body.design-787.role-passenger #order-editor.of2 .booking-page:has(.of-shared:not([hidden])) .of-route-line{display:none}
}

/* ---------- Идея 6: время подачи готовыми вариантами ---------- */
body.design-787 #booking-time-editor .pickup-quick-times{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
body.design-787 #booking-time-editor .pickup-quick-times button{flex:1 1 auto;width:auto;min-height:44px!important;margin:0;padding:0 14px;border-radius:22px!important;white-space:nowrap}
body.design-787 #booking-time-editor .pickup-slots-title{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--787-ink)}
body.design-787 #booking-time-editor .pickup-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 14px}
body.design-787 #booking-time-editor .pickup-slots button{width:100%;min-width:0;min-height:44px!important;margin:0;padding:0 4px;border-radius:12px!important;font-variant-numeric:tabular-nums;white-space:nowrap}
body.design-787 #booking-time-editor :is(.pickup-quick-times,.pickup-slots) button[aria-pressed=true]{background:var(--787-soft);border-color:var(--787-blue);color:var(--787-blue);font-weight:600}
body.design-787 .booking-page #booking-time-editor :is(.pickup-quick-times,.pickup-slots,.pickup-slots-title){display:none}

/* Телефон, шаг «Маршрут»: быстрые адреса («Как в прошлый раз», «Дом», «Работа», «Я здесь») видны сразу, в несколько строк,
   а не уезжают за край. Не больше трёх строк — дальше ряд прокручивается внутри себя, страница остаётся без прокрутки. */
@media(max-width:560px){
  body.design-787.role-passenger #order-editor.of2 .of-chips{flex-wrap:wrap;overflow-x:hidden;overflow-y:auto;max-height:148px;-webkit-mask-image:none;mask-image:none}
  body.design-787.role-passenger #order-editor.of2 .of-chips .of-chip{max-width:100%}
}
@media(max-width:560px) and (max-height:700px){
  body.design-787.role-passenger #order-editor.of2 .of-chips{max-height:96px}
}

/* Самые низкие телефоны: видимая область до 600 px (маленький iPhone или Android с панелями браузера, 375×553, 360×560).
   Шаги заказа остаются без прокрутки: шапка шага в одну строку, быстрые адреса одним прокручиваемым рядом, строка маршрута
   на шаге «Поездка» скрыта (маршрут виден на шагах 1 и 3), отступы плотнее. Зоны нажатия не меньше 44 px. */
@media (max-width:560px) and (max-height:600px){
  body.design-787.role-passenger #order-editor.of2>.of-stephead{padding:0 16px 4px 8px}
  body.design-787.role-passenger #order-editor.of2 .of-stephead-text{display:flex;align-items:baseline;gap:8px}
  body.design-787.role-passenger #order-editor.of2 .of-step-title{font-size:17px}
  body.design-787.role-passenger #order-editor.of2 .of-progress{margin-top:0}
  body.design-787.role-passenger #order-editor.of2 .booking-page-footer{padding:6px 16px 8px}
  body.design-787.role-passenger #order-editor.of2 .of-chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:none;scrollbar-width:none}
  body.design-787.role-passenger #order-editor.of2 .of-chips .of-chip{flex:none}
  body.design-787.role-passenger #order-editor.of2 .booking-page .of-route-line{display:none}
  /* Шаг «Проверка»: каждый адрес одной строкой (полностью он виден на шаге «Маршрут» и по кнопке «Изменить»). */
  body.design-787.role-passenger #order-editor.of2 #booking-review .review-route{gap:2px;padding-top:6px;padding-bottom:6px}
  body.design-787.role-passenger #order-editor.of2 #booking-review .review-route p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* Замечание владельца 26.10.2026 (снимок ряда «Как в прошлый раз · + Дом · + Работа · Я зд…»): последний адрес обрезался краем
   ряда. Быстрые адреса переносятся на следующую строку на всех размерах — каждый виден целиком, без прокрутки ряда вбок. */
body.design-787.role-passenger #order-editor.of2 .of-chips{flex-wrap:wrap!important;overflow:visible!important;max-height:none!important;-webkit-mask-image:none!important;mask-image:none!important}
body.design-787.role-passenger #order-editor.of2 .of-chips .of-chip{flex:0 1 auto!important;max-width:100%}
/* 06.11.2026: сохранённый маршрут — коротко, до двух строк (на 768 одна строка с многоточием обрезала вторую наполовину), полный адрес в подсказке. */
body.design-787.role-passenger #order-editor.of2 .of-chips .of-chip.of-chip-route{white-space:normal!important;text-align:left;line-height:1.25;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:clip!important;height:auto!important;min-height:44px;padding-block:6px}