/* Каркас билетного сайта. Спокойная палитра, без ярких эффектов (вкус Ирины). */
:root{
  --blue:#17509e; --blue-d:#0f3a75; --blue-l:#eaf1fb;
  --accent:#e87f1c; --accent-d:#c96a10;
  --bg:#f4f7fb; --card:#ffffff; --line:#e3e9f2;
  --text:#1b2532; --mut:#6b7684; --ok:#1c7a43;
}
*{box-sizing:border-box}
[hidden]{display:none!important} /* атрибут hidden сильнее любых display из классов */
body{margin:0;font:16px/1.55 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.wrap{max-width:1060px;margin:0 auto;padding:0 16px}
h1{font-size:26px;margin:.4em 0} h2{font-size:20px;margin:.8em 0}
a{color:var(--blue)} .mut{color:var(--mut)}

/* Шапка */
.topbar{background:var(--blue-d);color:#fff}
.bar-in{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{color:#fff;text-decoration:none;font-weight:700;font-size:18px;
  display:flex;align-items:center;gap:9px}
.logo img{height:30px;width:auto;display:block}
/* ссылки и кнопка-лупа в один ряд строго по центру: без baseline-перекоса иконки */
.topnav{display:flex;align-items:center}
.topnav a{color:#dbe6f5;text-decoration:none;margin-left:18px}
.topnav a:hover{color:#fff}
/* кнопка-лупа в шапке открывает шторку поиска */
.nav-search{display:inline-flex;align-items:center;gap:6px;border:0;background:none;cursor:pointer;
  color:#dbe6f5;font:inherit;margin-left:18px;padding:0}
.nav-search:hover{color:#fff}

/* --- Шторка поиска (механика как у Мианд: выезд сверху, карет в пустом поле, теги) --- */
.smov{position:fixed;inset:0;background:rgba(15,26,45,.42);opacity:0;pointer-events:none;transition:.2s;z-index:70}
.smov.open{opacity:1;pointer-events:auto}
.smodal{position:fixed;top:0;left:0;right:0;background:#fff;z-index:71;transform:translateY(-100%);
  transition:transform .28s cubic-bezier(.2,.7,.2,1);padding:14px 18px 18px;box-shadow:0 10px 40px rgba(23,42,75,.18)}
.smodal.open{transform:none}
body.search-open{overflow:hidden} /* фон не прокручивается под шторкой */
.smbar{display:flex;align-items:center;gap:12px;max-width:760px;margin:0 auto;--smh:46px}
/* весь ряд одной высоты: низ «Найти» совпадает с линией-подчёркиванием поля */
.smback,.smx,.smgo,.smbar input{height:var(--smh)}
.smback{border:0;background:none;font-size:32px;line-height:1;color:var(--text);cursor:pointer;padding:0 4px;flex:none;
  display:inline-flex;align-items:center;justify-content:center}
.qwrap{position:relative;flex:1;min-width:0;display:flex}
.smbar input{flex:1;min-width:0;border:0;border-bottom:1.5px solid var(--line);background:none;outline:none;
  font:inherit;font-size:16px;color:var(--text);padding:0 2px}
.smbar input:focus{border-bottom-color:var(--blue)}
.fcaret{position:absolute;left:2px;top:50%;transform:translateY(-50%);width:1.6px;height:22px;background:var(--blue);
  display:none;pointer-events:none;animation:caretblink 1.05s steps(1) infinite}
.smbar.focused .fcaret{display:block}
.smbar.focused.hasval .fcaret{display:none}
@keyframes caretblink{50%{opacity:0}}
.smx{border:0;background:none;font-size:28px;line-height:1;color:var(--mut);cursor:pointer;padding:0 4px;flex:none;display:none;
  align-items:center;justify-content:center}
.smx.show{display:flex}
.smgo{border:0;background:var(--accent);color:#fff;border-radius:12px;padding:0 22px;font-size:15px;
  font-weight:700;cursor:pointer;flex:none;display:inline-flex;align-items:center}
.smgo:hover{background:var(--accent-d)}
/* живые подсказки городов под полем */
.sq-sug{max-width:760px;margin:6px auto 0;display:none}
.sq-sug.open{display:block}
.sq-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;
  padding:10px 8px;font-size:15px;color:var(--text);cursor:pointer;border-radius:8px}
.sq-item:hover{background:var(--blue-l)}
.sq-item b{color:var(--blue-d)}
.sq-item .sq-price{margin-left:auto;font-size:13px;color:var(--mut);white-space:nowrap}
/* чипы популярных направлений */
.smtags{display:flex;flex-wrap:wrap;gap:8px;max-width:760px;margin:12px auto 0}
.stag{border:1px solid var(--line);background:#fff;border-radius:100px;padding:8px 15px;font-size:14px;
  cursor:pointer;color:var(--text)}
.stag:hover{border-color:var(--accent);color:var(--accent-d)}

/* Плавные появления секций */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.on{opacity:1;transform:none}

/* Поиск */
.hero{padding:34px 0 10px;text-align:center}
.hero p{color:var(--mut);margin:.3em 0 0}
/* Баннер на всю ширину окна, от края до края (внутри центрированного .wrap) */
.hero-banner{display:block;width:100vw;max-width:100vw;height:min(420px,52vw);object-fit:cover;
  object-position:center;margin:0;margin-left:calc((100% - 100vw)/2)}
html{overflow-x:hidden}
.search-card{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 2px 10px rgba(23,42,75,.06)}
.f{flex:1 1 170px;display:flex;flex-direction:column;gap:4px;min-width:150px}
.f span{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.f input{padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:16px;background:#fff}
.f input:focus{outline:2px solid var(--blue-l);border-color:var(--blue)}
.swap{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:9px;width:42px;height:42px;
  font-size:17px;cursor:pointer;color:var(--blue)}
.btn-cta{flex:1 1 160px;min-width:150px;padding:12px 18px;border:0;border-radius:10px;background:var(--accent);
  color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.btn-cta:hover{background:var(--accent-d)}

/* Популярные направления */
.pop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.pop-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer}
.pop-card:hover{border-color:var(--blue)}
.pop-card b{display:block}
.pop-card span{color:var(--mut);font-size:14px}

/* Список рейсов */
.trip-card{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:16px;margin:12px 0}
.trip-time{font-size:20px;font-weight:700}
.trip-time small{color:var(--mut);font-weight:400}
.trip-mid{flex:1 1 220px;min-width:200px}
.trip-mid .dur{color:var(--mut);font-size:14px}
.trip-mid .crr{font-size:14px}
.trip-price{font-size:19px;font-weight:700;white-space:nowrap}
.trip-price small{display:block;font-weight:400;color:var(--mut);font-size:12px}
.btn-sec{padding:11px 16px;border:1px solid var(--blue);background:#fff;color:var(--blue);border-radius:10px;
  font-size:15px;font-weight:600;cursor:pointer}
.btn-sec:hover{background:var(--blue-l)}
.tag{display:inline-block;font-size:12px;color:var(--blue-d);background:var(--blue-l);border-radius:20px;padding:2px 10px}

/* Схема автобуса */
.trip-head{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0}
.book-grid{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
.bus-box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.bus-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mut);margin-bottom:14px}
.bus-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:5px}
.seat-row{display:flex;gap:8px;justify-content:center;margin:7px 0}
.seat{width:44px;height:44px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-size:12px;color:var(--mut);display:flex;align-items:center;justify-content:center}
.seat.gap{margin-right:26px}
.seat.occ{background:#e8ecf2;border-color:#d5dce6;cursor:not-allowed;color:#a4aebc}
.seat.free:hover{border-color:var(--blue)}
.seat.sel{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.seat.wheel{border-bottom:3px solid var(--blue-l)}
.bus-hood{text-align:center;color:var(--mut);font-size:13px;border:1px dashed var(--line);
  border-radius:10px;padding:6px;margin-bottom:12px}

/* Панель заказа */
.order-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;position:sticky;top:12px}
.order-panel h3{margin:0 0 10px;font-size:17px}
.sel-seats{min-height:24px;font-size:14px}
.order-total{font-size:20px;font-weight:700;margin:12px 0}
.note{font-size:13px;color:var(--mut);background:var(--bg);border-radius:8px;padding:10px}
.form-err{color:#b3261e;font-size:13px;min-height:18px}

/* Успех */
.success-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px;margin:20px 0;text-align:center}
.success-box .num{font-size:26px;font-weight:700;color:var(--ok)}

/* Заказы (мини-карточки) */
.order-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0}

/* Личный кабинет */
.cab-card{max-width:460px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:18px;display:flex;flex-direction:column;gap:12px}
.cab-card .btn-sec{width:100%}
.cab-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 0}
.cab-num{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.cab-bottom{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.btn-warn{padding:9px 14px;border:1px solid #b3261e;background:#fff;color:#b3261e;border-radius:10px;
  font-size:14px;font-weight:600;cursor:pointer;margin-left:auto}
.btn-warn:hover{background:#fdf1f0}
@media (max-width:760px){
  .btn-warn{width:100%;margin-left:0}   /* на телефоне кнопка возврата — на своей строке */
}

/* Хлебные крошки */
.crumbs{margin:18px 0 4px}

/* Футер */
.foot{background:var(--blue-d);color:#dbe6f5;margin-top:48px;padding:26px 0;font-size:14px}
.foot a{color:#fff}
.foot-note{opacity:.8;max-width:760px}

/* Телефон */
@media (max-width:760px){
  h1{font-size:21px}
  .hero{padding:14px 0 4px}
  .hero-banner{height:44vw}
  .logo{font-size:16px}
  .topnav a{margin-left:10px;font-size:14px}
  .nav-search{font-size:14px;padding:8px 0} /* слово «Поиск» как у ссылок; padding — тап-зона выше */
  /* форма поиска — в одну колонку: откуда → куда → дата → кнопка */
  .search-card{flex-direction:column;align-items:stretch;gap:8px;padding:14px}
  .f{min-width:0}
  /* flex-basis из настольной раскладки в столбике становился «запасом высоты»
     и раздувал пустоты под полями — сбрасываем */
  .search-card .f, .search-card .btn-cta{flex:0 0 auto}
  /* ⇄ маленьким кружком между полями, без отдельной строки с воздухом */
  .swap{width:36px;height:36px;border-radius:50%;align-self:center;margin:-3px 0;
    transform:rotate(90deg);font-size:15px}
  .chk{padding-bottom:0;margin-top:2px}
  .btn-cta{width:100%;margin-top:4px}
  .btn-sec{width:100%;text-align:center}
  .book-grid{grid-template-columns:1fr}
  .order-panel{position:static;padding:14px}
  .bus-box{padding:14px}
  .seat{width:38px;height:38px}
  /* шторка поиска на телефоне: ряд одной высоты 48px, всё ровно */
  .smbar{gap:8px;--smh:48px}
  .smback{font-size:26px;padding:0 2px}
  .smx{font-size:24px;padding:0 2px}
  .smgo{padding:0 14px;font-size:14px;border-radius:10px}
  /* шторка целиком в экране: длинные списки скроллятся внутри, низ — над «шторкой» телефона */
  .smodal{padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px));
    max-height:100vh;max-height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .sq-sug{margin-top:4px}
  .sq-item{padding:12px 8px} /* тап крупнее под палец */
  .smtags{gap:6px;margin-top:10px}
  .stag{padding:7px 12px;font-size:13px}
  .trip-card{padding:13px}
  .trip-price{width:100%}
  .crumbs{margin-top:14px}
  .foot{padding:20px 0}
  /* пассажиры: чип места, имя и дата — каждый на своей строке */
  .pax-item{gap:6px}
  .pax-item .f{flex:1 1 100%!important;min-width:0} /* !important против inline-флексов */
}
/* Узкий телефон: в шапке остаётся значок, чтобы ссылки не срезались */
@media (max-width:430px){
  .logo span{display:none}
  .topnav a{margin-left:9px;font-size:13px}
  .nav-search{margin-left:9px;font-size:13px}
  .nav-search span{display:none} /* остаётся лупа, чтобы шапка не сжималась */
  .smbar{--smh:46px} /* ряд чуть ниже, но по-прежнему весь одной высотой */
  .smgo{padding:0 11px;font-size:13.5px} /* «Найти» ещё чуть уже на самых узких */
  .stag{padding:6px 10px;font-size:12.5px}
}

/* --- Довооружение после сравнения с Туту --- */
/* календарь открывается кликом в любое место поля: значок растянут на всё поле и невидим */
input[type="date"]{position:relative}
input[type="date"]::-webkit-calendar-picker-indicator{
  position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}
input[type="date"]::-webkit-datetime-edit{margin-left:auto;margin-right:auto}
.pill:hover{color:var(--blue);border-color:var(--blue)}
.chk{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--mut);
  padding-bottom:11px;white-space:nowrap;cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--blue)}

/* Преимущества */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.feat-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.feat-card b{display:block;margin-bottom:4px}
.feat-card span{color:var(--mut);font-size:14px}
.pop-price{display:block;margin-top:3px;font-weight:700;color:var(--blue-d)}

/* Сортировка выдачи */
.sort-bar{display:flex;gap:8px;margin:4px 0 4px}
.sort-btn{border:1px solid var(--line);background:#fff;border-radius:20px;padding:5px 14px;
  font-size:13px;cursor:pointer;color:var(--mut)}
.sort-btn.on{background:var(--blue-l);border-color:var(--blue);color:var(--blue-d);font-weight:600}

/* Пассажиры по местам */
.pax-item{display:flex;gap:8px;align-items:flex-end;margin:8px 0;flex-wrap:wrap}
.pax-seat{font-weight:700;background:var(--blue-l);color:var(--blue-d);border-radius:8px;
  padding:10px 12px;white-space:nowrap;font-size:14px}
.back-sel{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  font-size:16px;background:#fff} /* 16px — иначе iPhone приближает поле при тапе */

/* «Как купить» — раскрывающиеся ответы (как у БилетАвто) */
.howto{margin:26px 0 10px}
.howto h2{margin-bottom:12px}
.howto details{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:0 16px;margin-bottom:8px}
.howto summary{cursor:pointer;padding:13px 0;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.howto summary::-webkit-details-marker{display:none}
.howto summary::after{content:'+';color:var(--accent);font-size:20px;font-weight:700;
  transition:transform .2s}
.howto details[open] summary::after{transform:rotate(45deg)}
.howto details p{color:var(--mut);font-size:14.5px;margin:0 0 14px;line-height:1.55}
.howto details a{color:var(--blue-d)}