/* Такси — заказ, цена и статус поездки. */

.taxi-page{
  --taxi-brand: var(--theme-color, #0088cc);
  --taxi-text: #0f172a;
  --taxi-muted: #64748b;
  --taxi-border: #e2e8f0;
  --taxi-bg: #f8fafc;
  --taxi-ok: #16a34a;
  --taxi-warn: #d97706;
  --taxi-error: #dc2626;
  padding: 20px 0 40px;
}

/*
 * Ширина как у остальных страниц сайта (--container). Раньше здесь стояло своё
 * ограничение в 1080 px, и на широком экране раздел выглядел уже и беднее
 * соседних страниц.
 */
.taxi-wrap{
  width: 100%;
  max-width: var(--container, 1440px);
  margin: 0 auto;
  padding: 0 16px;
  color: var(--taxi-text);
}

.taxi-title{
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

/* Подзаголовок под главным заголовком страницы. */
.taxi-lead{
  margin: 6px 0 14px;
  max-width: 900px;
  font-size: 15px;
  line-height: 1.5;
}

/*
 * Рабочая область — одной белой панелью, как на остальных страницах сайта
 * (ui-card). До этого форма и карта висели отдельными карточками прямо на
 * фоне-иллюстрации, и раздел выглядел чужим.
 */
.taxi-panel{
  padding: 20px;
  background: #fff;
}

@media (max-width: 860px){
  .taxi-panel{ padding: 14px; }
}

/* --- работа в такси (вход для водителей) --- */

.taxi-work{
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.taxi-work__title{
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 800;
  color: var(--taxi-text);
}

.taxi-work__note{
  margin: 0;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.5;
}

.taxi-work .ui-btn{ flex: 0 0 auto; }

.taxi-subtitle{
  margin: 0 0 18px;
  color: var(--taxi-muted);
  line-height: 1.5;
}

/* --- сообщения --- */

.taxi-alert{
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  border: 1px solid var(--taxi-border);
  background: var(--taxi-bg);
}

.taxi-alert.is-ok{ border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.taxi-alert.is-info{ border-color: #bae6fd; background: #f0f9ff; color: #075985; }
.taxi-alert.is-warn{ border-color: #fde68a; background: #fffbeb; color: #92400e; }
.taxi-alert.is-error{ border-color: #fecaca; background: #fef2f2; color: #991b1b; }

/* --- сетка --- */

.taxi-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/*
 * На широком экране форма получает свою ширину, а карта — всё остальное.
 * Половина на половину на большом мониторе растягивала три поля ввода на 700 px
 * и оставляла карту маленькой.
 */
@media (min-width: 1000px){
  .taxi-grid{ grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 860px){
  .taxi-grid{ grid-template-columns: 1fr; }
}

.taxi-col{ display: flex; flex-direction: column; gap: 14px; }

/* --- поля --- */

.taxi-field{ display: flex; flex-direction: column; gap: 6px; }

.taxi-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--taxi-muted);
}

.taxi-input-row{ display: flex; gap: 8px; }

.taxi-input{
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--taxi-border);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--taxi-text);
  background: #fff;
}

.taxi-input:focus{
  outline: none;
  border-color: var(--taxi-brand);
  box-shadow: 0 0 0 3px rgba(0, 136, 204, .12);
}

.taxi-pick{
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid var(--taxi-border);
  border-radius: 10px;
  background: #fff;
  color: var(--taxi-brand);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.taxi-pick:hover{ background: var(--taxi-bg); }

.taxi-note{
  margin: 0;
  font-size: 12.5px;
  color: var(--taxi-muted);
  line-height: 1.45;
}

.taxi-dim{ color: var(--taxi-muted); }

.taxi-radio{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  padding: 6px 0;
  cursor: pointer;
}

/*
 * Общее правило сайта растягивает поля формы на всю ширину
 * (form:not(.search-form) input). Для переключателя это ломает вид: кружок
 * остаётся слева, а подпись уезжает к правому краю, и связь между ними
 * теряется. Возвращаем переключателю его собственный размер.
 */
.taxi-radio input[type="radio"]{
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  accent-color: var(--taxi-brand, #ea580c);
}

/* --- карта --- */

.taxi-map-side{ display: flex; flex-direction: column; gap: 8px; }

.taxi-map-targets{ display: flex; gap: 8px; }

.taxi-map-target{
  padding: 7px 12px;
  border: 1px solid var(--taxi-border);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--taxi-muted);
  cursor: pointer;
}

.taxi-map-target.is-active{
  border-color: var(--taxi-brand);
  color: #fff;
  background: var(--taxi-brand);
}

.taxi-map{
  height: 340px;
  border-radius: 14px;
  border: 1px solid var(--taxi-border);
  overflow: hidden;
  background: #e2e8f0;
}

/* На широком экране карте есть где развернуться: она и есть главный элемент. */
@media (min-width: 1000px){
  .taxi-map{ height: 460px; }
}

@media (max-width: 860px){
  .taxi-map{ height: 280px; }
}

.taxi-pin{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .3);
}

.taxi-pin.is-from{ background: var(--taxi-brand); }
.taxi-pin.is-to{ background: #0f172a; }

/* --- цена --- */

.taxi-price{
  border: 1px solid var(--taxi-border);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
}

.taxi-price__amount{
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}

.taxi-price__hint{
  margin-top: 4px;
  font-size: 13px;
  color: var(--taxi-muted);
}

.taxi-price__parts{
  margin: 12px 0 0;
  padding: 0 0 0 18px;
  font-size: 13px;
  color: var(--taxi-muted);
  line-height: 1.6;
}

/* --- кнопки --- */

.taxi-btn{
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.taxi-btn.is-primary{ background: var(--taxi-brand); color: #fff; }
.taxi-btn.is-primary:hover{ filter: brightness(.94); }
.taxi-btn.is-primary:disabled{ opacity: .5; cursor: not-allowed; }
.taxi-btn.is-danger{ background: #fff; color: var(--taxi-error); border-color: #fecaca; }
.taxi-btn.is-wide{ width: 100%; }

/* --- статусы и карточки --- */

.taxi-chip{
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--taxi-bg);
  color: var(--taxi-muted);
  border: 1px solid var(--taxi-border);
}

.taxi-chip.is-searching{ background: #f0f9ff; color: #075985; border-color: #bae6fd; }
.taxi-chip.is-assigned,
.taxi-chip.is-arrived{ background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.taxi-chip.is-progress{ background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.taxi-chip.is-finished{ background: var(--taxi-bg); color: var(--taxi-muted); }
.taxi-chip.is-cancelled{ background: #fef2f2; color: #991b1b; border-color: #fecaca; }

.taxi-order-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.taxi-order-head .taxi-title{ margin: 0; }

.taxi-card{
  border: 1px solid var(--taxi-border);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.taxi-card.is-muted{ background: var(--taxi-bg); }

.taxi-card__row{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14.5px;
}

.taxi-card__row.is-total{
  border-top: 1px solid var(--taxi-border);
  padding-top: 10px;
  font-size: 18px;
  font-weight: 700;
}

.taxi-card__label{ color: var(--taxi-muted); flex: 0 0 auto; }
.taxi-card__value{ text-align: right; }

.taxi-breakdown{
  border: 1px solid var(--taxi-border);
  border-radius: 14px;
  padding: 12px 16px;
  background: #fff;
}

.taxi-breakdown summary{
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.taxi-cancel{
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--taxi-border);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
}

/* --- активный заказ --- */

.taxi-active{
  border: 1px solid var(--taxi-border);
  border-radius: 14px;
  padding: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.taxi-active__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.taxi-active__price{ font-size: 24px; font-weight: 700; }
.taxi-active__route{ font-size: 15px; }
.taxi-active__hint{ margin: 0; color: var(--taxi-muted); font-size: 13.5px; }

/* --- список поездок --- */

.taxi-list{ display: flex; flex-direction: column; gap: 10px; }

.taxi-list__item{
  display: block;
  border: 1px solid var(--taxi-border);
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
  text-decoration: none;
  color: inherit;
}

.taxi-list__item:hover{ border-color: var(--taxi-brand); }

.taxi-list__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.taxi-list__price{ font-size: 18px; font-weight: 700; }
.taxi-list__route{ font-size: 15px; margin-bottom: 4px; }
.taxi-list__meta{ font-size: 12.5px; color: var(--taxi-muted); }