/* ==========================================================================
   UNO — страница «Такси»
   --------------------------------------------------------------------------
   Слой поверх brand.css: используются токены --b-*, поэтому страница выглядит
   частью платформы. Классы с префиксом tx- (taxi). Карта — Leaflet, его
   собственные стили подключаются отдельно из CDN.
   ========================================================================== */

.tx-page{
    margin:0 0 40px;
    font-family:var(--b-font);
    color:var(--b-ink);
}

/*
 | Скрытые блоки. Браузерный [hidden] — это display:none из стилей агента, и его
 | перебивает любое наше правило с display (grid/flex). Поэтому фиксируем явно:
 | иначе «карточка поездки» и скрытые кнопки видны до первого заказа.
 */
.tx-page [hidden]{
    display:none !important;
}

/* ------------------------------------------------------------- бейджи */

.tx-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 20px;
    padding:0;
    list-style:none;
}

.tx-badge{
    padding:7px 12px;
    font-size:13px;
    font-weight:600;
    color:var(--b-teal);
    background:var(--b-teal-soft);
    border-radius:var(--b-r-pill);
}

/* ------------------------------------------------------------- раскладка */

.tx-layout{
    display:grid;
    grid-template-columns:minmax(360px,420px) minmax(0,1fr);
    gap:18px;
    align-items:start;
    margin-bottom:32px;
}

@media (max-width:991px){
    .tx-layout{
        grid-template-columns:1fr;
    }
    /* На телефоне карта должна быть первой: сначала выбор точки, потом адреса */
    .tx-map-block{ order:-1; }
}

/* ------------------------------------------------------------- панель */

.tx-panel{
    padding:18px;
    background:var(--b-surface);
    border:1px solid var(--b-line);
    border-radius:var(--b-r-md);
    box-shadow:var(--b-shadow-sm);
}

.tx-panel__title{
    margin:0 0 14px;
    font-size:19px;
    font-weight:700;
    line-height:1.25;
    color:var(--b-ink);
}

.tx-note{
    padding:14px;
    margin:0 0 16px;
    border-radius:var(--b-r-sm);
    font-size:14px;
    line-height:1.5;
}

.tx-note p{ margin:0 0 10px; }
.tx-note p:last-child{ margin-bottom:0; }

.tx-note--info{
    background:var(--b-accent-soft);
    border:1px solid #EAFDD2;
    color:var(--b-ink-soft);
}

.tx-note--warn{
    background:#F8FAFC;
    border:1px solid #EAFDD2;
    color:var(--b-warning);
}

.tx-note__muted{
    font-size:13px;
    color:var(--b-muted);
}

.tx-note a{ color:var(--b-accent-text); font-weight:600; }

/* ------------------------------------------------------------- форма */

.tx-form{ display:grid; gap:12px; }

.tx-field{ display:grid; gap:6px; position:relative; }

.tx-field label{
    font-size:12px;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--b-muted);
    text-transform:uppercase;
}

.tx-input-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 0 0 12px;
    background:var(--b-bg);
    border:1px solid var(--b-line-strong);
    border-radius:var(--b-r-sm);
    transition:border-color .15s ease, box-shadow .15s ease;
}

.tx-input-wrap:focus-within{
    border-color:var(--b-accent);
    box-shadow:0 0 0 3px var(--b-accent-soft);
}

.tx-input-wrap input{
    flex:1 1 auto;
    min-width:0;
    height:48px;
    padding:0;
    font:inherit;
    font-size:15px;
    color:var(--b-ink);
    background:transparent;
    border:0;
    outline:none;
}

.tx-input-wrap input::placeholder{ color:var(--b-muted); }

.tx-pin{
    flex:0 0 auto;
    height:34px;
    margin-right:6px;
    padding:0 10px;
    font:inherit;
    font-size:12px;
    font-weight:600;
    color:var(--b-teal);
    background:var(--b-teal-soft);
    border:0;
    border-radius:var(--b-r-xs);
    cursor:pointer;
}

.tx-pin:hover{ background:#D3EBE7; }

/* Подсказки адресов */

.tx-suggest{
    position:absolute;
    z-index:20;
    top:100%;
    left:0;
    right:0;
    max-height:260px;
    overflow:auto;
    background:var(--b-surface);
    border:1px solid var(--b-line-strong);
    border-radius:var(--b-r-sm);
    box-shadow:var(--b-shadow-md);
}

.tx-suggest:empty{ display:none; }

.tx-suggest button{
    display:block;
    width:100%;
    padding:10px 12px;
    font:inherit;
    font-size:14px;
    line-height:1.35;
    text-align:left;
    color:var(--b-ink-soft);
    background:transparent;
    border:0;
    border-bottom:1px solid var(--b-line);
    cursor:pointer;
}

.tx-suggest button:last-child{ border-bottom:0; }
.tx-suggest button:hover,
.tx-suggest button:focus-visible{ background:var(--b-accent-soft); color:var(--b-ink); }

.tx-hint{
    font-size:13px;
    line-height:1.45;
    color:var(--b-muted);
}

/* ------------------------------------------------------------- классы авто */

.tx-classes{ display:grid; gap:8px; }

.tx-classes__empty{
    padding:14px;
    font-size:14px;
    color:var(--b-muted);
    background:var(--b-bg);
    border:1px dashed var(--b-line-strong);
    border-radius:var(--b-r-sm);
}

.tx-class{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    background:var(--b-bg);
    border:1px solid var(--b-line);
    border-radius:var(--b-r-sm);
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
}

.tx-class:hover{ border-color:var(--b-line-strong); }

.tx-class input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.tx-class__mark{
    flex:0 0 auto;
    width:18px;
    height:18px;
    border:2px solid var(--b-line-strong);
    border-radius:50%;
    background:var(--b-surface);
}

.tx-class__body{ flex:1 1 auto; min-width:0; }

.tx-class__name{
    display:block;
    font-size:15px;
    font-weight:600;
    color:var(--b-ink);
}

.tx-class__meta{
    display:block;
    font-size:12px;
    color:var(--b-muted);
}

.tx-class__price{
    flex:0 0 auto;
    font-family:var(--b-font-num);
    font-size:17px;
    font-weight:700;
    color:var(--b-ink);
}

.tx-class--active{
    background:var(--b-accent-soft);
    border-color:var(--b-accent);
}

.tx-class--active .tx-class__mark{
    border-color:var(--b-accent);
    box-shadow:inset 0 0 0 4px var(--b-accent);
}

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

.tx-alert{
    padding:12px 14px;
    font-size:14px;
    line-height:1.45;
    color:var(--b-danger);
    background:#FBEDEB;
    border:1px solid #E9C9C4;
    border-radius:var(--b-r-sm);
}

.tx-alert a{ color:inherit; font-weight:600; }

.tx-legal{
    margin:0;
    font-size:12px;
    line-height:1.45;
    color:var(--b-muted);
}

.tx-legal a{ color:var(--b-accent-text); }

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

.tx-map-block{ display:grid; gap:8px; }

.tx-map{
    width:100%;
    height:520px;
    background:#F8FAFC;
    border:1px solid var(--b-line);
    border-radius:var(--b-r-md);
    box-shadow:var(--b-shadow-sm);
    overflow:hidden;
}

@media (max-width:991px){
    .tx-map{ height:340px; }
}

.tx-map__note{
    margin:0;
    font-size:12px;
    color:var(--b-muted);
}

/* Leaflet: аккуратные маркеры и отступы под наши поля */
.tx-map .leaflet-control-attribution{
    font-size:10px;
    background:rgba(255,255,255,.78);
}

.tx-marker__dot{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    font-family:var(--b-font);
    font-size:13px;
    font-weight:700;
    color:#fff;
    border:2px solid #fff;
    border-radius:50%;
    box-shadow:0 2px 6px rgba(11, 15, 20,.35);
}

.tx-marker__dot--pick{ background:var(--b-teal); }
.tx-marker__dot--drop{ background:var(--b-accent); color:var(--b-on-accent); }

/* ------------------------------------------------------------- текущая поездка */

.tx-ride{
    display:grid;
    gap:12px;
    padding:16px;
    margin-top:4px;
    background:var(--b-bg);
    border:1px solid var(--b-line);
    border-radius:var(--b-r-sm);
}

.tx-ride__head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
}

.tx-ride__status{
    font-size:17px;
    font-weight:700;
    color:var(--b-ink);
}

.tx-ride__number{
    font-family:var(--b-font-num);
    font-size:13px;
    color:var(--b-muted);
}

.tx-ride__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 16px;
    margin:0;
}

.tx-ride__grid dt{
    font-size:12px;
    color:var(--b-muted);
}

.tx-ride__grid dd{
    margin:2px 0 0;
    font-size:14px;
    font-weight:600;
    color:var(--b-ink-soft);
}

.tx-ride__car{
    margin:0;
    font-size:14px;
    color:var(--b-ink-soft);
}

.tx-ride__actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

/* Пульсация, пока идёт поиск водителя */
.tx-ride--searching .tx-ride__status::after{
    content:'';
    display:inline-block;
    width:7px;
    height:7px;
    margin-left:8px;
    vertical-align:middle;
    background:var(--b-accent);
    border-radius:50%;
    animation:tx-pulse 1.4s ease-in-out infinite;
}

@keyframes tx-pulse{
    0%,100%{ opacity:.25; transform:scale(.8); }
    50%{ opacity:1; transform:scale(1.15); }
}

@media (prefers-reduced-motion:reduce){
    .tx-ride--searching .tx-ride__status::after{ animation:none; }
}

/* ------------------------------------------------------------- история */

.tx-history{ display:grid; gap:12px; }

.tx-history h2{
    margin:0;
    font-size:22px;
    font-weight:700;
    color:var(--b-ink);
}

.tx-history__list{ display:grid; gap:8px; }

.tx-history__item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 14px;
    background:var(--b-surface);
    border:1px solid var(--b-line);
    border-radius:var(--b-r-sm);
}

.tx-history__main{ display:grid; gap:3px; min-width:0; }

.tx-history__route{
    font-size:14px;
    font-weight:600;
    color:var(--b-ink);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.tx-history__meta{
    font-size:12px;
    color:var(--b-muted);
}

.tx-history__side{
    display:grid;
    justify-items:end;
    gap:4px;
    flex:0 0 auto;
}

.tx-history__amount{
    font-family:var(--b-font-num);
    font-size:15px;
    font-weight:700;
    color:var(--b-ink);
}

/* Статусы поездки */

.tx-status{
    padding:3px 9px;
    font-size:12px;
    font-weight:600;
    border-radius:var(--b-r-pill);
    background:var(--b-bg);
    color:var(--b-ink-soft);
}

.tx-status--searching{ background:var(--b-accent-soft); color:var(--b-accent-text); }
.tx-status--on_way,
.tx-status--arrived{ background:var(--b-teal-soft); color:var(--b-teal); }
.tx-status--in_trip{ background:#E8EEFB; color:#26468C; }
.tx-status--completed{ background:#E4F2E9; color:var(--b-success-text); }
.tx-status--cancelled{ background:#FBEDEB; color:var(--b-danger); }

/* ------------------------------------------------------------- герой UNO */
/* Тёмный блок как на главной: графит, светлый заголовок, лаймовые бейджи */
.tx-hero{
    position:relative;
    margin:0 0 24px;
    padding:26px clamp(18px, 3vw, 34px) 28px;
    border-radius:var(--b-r-md);
    background:var(--b-dark, #0B0F14);
    color:#F8FAFC;
}
/* !important: легаси-тема красит заголовки и ссылки тёмным через
   body.spa-theme :is(h1, h2, a) — на графите это невидимый текст */
.tx-hero .crumbs,
.tx-hero .crumbs a,
.tx-hero .crumbs span,
.tx-hero .crumbs *{ color:#9AA3AE !important; }
.tx-hero .crumbs a:hover{ color:#F8FAFC; }
.tx-hero__kicker{
    margin:10px 0 10px;color:#9AA3AE !important;
    font:700 11.5px/1.4 var(--b-font);letter-spacing:.14em;text-transform:uppercase;color:#9AA3AE;
}
.tx-hero__title{
    margin:0 0 12px;max-width:16em;
    font:800 clamp(28px, 4vw, 44px)/1.1 var(--b-font);letter-spacing:-.03em;
    color:#F8FAFC !important;
}
.tx-hero__lead{
    margin:0 0 18px;max-width:36em;font-size:15.5px;line-height:1.55;
    color:#AEB6C0 !important;
}
.tx-hero .tx-badges{ margin:0; }
.tx-hero .tx-badge{
    color:#A8FF3B;
    background:rgba(168, 255, 59, .12);
    border:1px solid rgba(168, 255, 59, .32);
}
@media (max-width:420px){
    .tx-hero{ margin:0 0 16px; padding:20px 16px 22px; }
    .tx-hero__lead{ font-size:14.5px; }
    .tx-hero .tx-badge{ font-size:12px; }
}
/* Крошки в тёмном герое: легаси-тема красит текущую страницу и ссылки тёмным
   с высокоценочными селекторами (:not(#_)) — перебиваем так же, иначе текст
   «Такси» на графите не виден */
html body .tx-hero .crumbs a:not(#_):not(#__):not(#___),
html body .tx-hero .crumbs span:not(#_):not(#__):not(#___),
html body .tx-hero .crumbs span[aria-current]:not(#_):not(#__):not(#___){
    color:#9AA3AE !important;
}
html body .tx-hero .crumbs a:hover:not(#_):not(#__):not(#___){
    color:#F8FAFC !important;
}
/* Кнопка внутри подсказки: на светло-лаймовой подложке лаймовая кнопка
   сливается, поэтому CTA в подсказке — графитовая, как «Войти» в шапке */
.tx-note .cc-btn,
.tx-note .cc-btn:visited{
    background:var(--b-ink);
    border-color:var(--b-ink);
}
html body .tx-note .cc-btn:not(#_):not(#__):not(#___),
html body .tx-note .cc-btn:not(#_):not(#__):not(#___):hover{
    color:#F8FAFC !important;
}
/* Легаси-тема сбрасывает вид ссылок внутри подсказки (display:inline без
   отступов), поэтому CTA в подсказке собираем заново с высоким приоритетом */
html body .tx-note .cc-btn:not(#_):not(#__):not(#___){
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:46px;
    padding:11px 18px;
    border-radius:var(--b-r-sm);
    border:1px solid var(--b-ink);
    background:var(--b-ink);
    color:#F8FAFC !important;
    font:700 14.5px var(--b-font);
    text-decoration:none;
}
html body .tx-note .cc-btn:hover:not(#_):not(#__):not(#___){
    background:#1B222B;
    border-color:#1B222B;
    color:#F8FAFC !important;
    text-decoration:none;
}