/* «Крым Попутчик» — дизайн мини-приложения.
   Палитра: морская синь #0d47a1 + солнечное золото #f5a300 + тёплый песок.
   Стиль по скиллу UI UX Pro Max (Soft UI + Accessible): радиусы 12-16,
   мягкие тени, тап-цели 44px+, текст 16px+, контраст 4.5:1, фокус-кольца. */

:root {
  --brand:#0d47a1; --brand-2:#1565c0; --brand-ink:#0a3578;
  --gold:#f5a300; --gold-soft:#ffe3a3; --gold-ink:#5a4200;
  --sand:#f4eede; --card:#ffffff; --ink:#1a2634; --muted:#6c7a89;
  --line:#e9e0cf; --field:#ffffff; --field-line:#d9d0be;
  --ok:#1e8e3e; --danger:#c62828; --ring:rgba(13,71,161,.18);
  --shadow-sm:0 1px 2px rgba(20,40,80,.05);
  --shadow-md:0 4px 14px rgba(20,40,80,.08);
  --shadow-cta:0 8px 20px rgba(13,71,161,.30);
  --r-field:12px; --r-btn:14px; --r-card:16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand:#2b6fd6; --brand-2:#1f5fc0; --brand-ink:#1a4a9c;
    --gold:#ffc247; --gold-soft:#4a3a17; --gold-ink:#ffd98a;
    --sand:#0e1621; --card:#182433; --ink:#e9eff6; --muted:#93a1b2;
    --line:#26323f; --field:#101b27; --field-line:#33404e;
    --ok:#4caf68; --danger:#ef6a6a; --ring:rgba(90,150,240,.30);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 6px 18px rgba(0,0,0,.40);
    --shadow-cta:0 8px 20px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* атрибут hidden должен реально прятать: .screen/.badge задают display:flex и
   иначе перебивают штатный [hidden]{display:none} — экраны слипались в один */
[hidden] { display: none !important; }
body {
  margin: 0; color: var(--ink); font-size: 16px; line-height: 1.5;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(700px 320px at 50% -8%, rgba(13,71,161,.10), transparent 60%),
    var(--sand);
}

/* --------------------------------------------------------- шапка */
#hdr {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center;
  gap: 11px; padding: 12px 16px; background: var(--card);
  border-bottom: 1px solid var(--line);
}
#hdr .logo {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 18px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow: var(--shadow-sm);
}
#hdr .titles { display: flex; flex-direction: column; line-height: 1.15; }
#hdr .titles b { font-size: 16px; font-weight: 850; letter-spacing: -.01em; }
#hdr .titles small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
#backBtn {
  margin-left: auto; font-size: 13px; font-weight: 700; color: var(--brand);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 13px; cursor: pointer; min-height: 36px;
}
#backBtn:active { background: var(--sand); }

#app { padding: 16px; max-width: 640px; margin: 0 auto; }
.screen { display: flex; flex-direction: column; gap: 14px; }
h2 { font-size: 20px; font-weight: 850; margin: 2px 0; letter-spacing: -.01em; }
.subhead { font-size: 13px; color: var(--muted); font-weight: 700; margin: 6px 0 -4px; }

/* --------------------------------------------------------- герой (главная) */
.hero {
  color: #fff; border-radius: var(--r-card); padding: 18px;
  background:
    radial-gradient(120px 120px at 88% 12%, rgba(245,163,0,.55), transparent 60%),
    linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow: var(--shadow-md);
}
.hero h2 { margin: 0 0 6px; font-size: 19px; font-weight: 850; color: #fff; }
.hero p { margin: 0; font-size: 13.5px; opacity: .92; }
.hero .free {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25);
  padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
}

/* --------------------------------------------------------- действия (главная) */
.action {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 15px 16px; cursor: pointer; box-shadow: var(--shadow-sm);
  color: var(--ink); font: inherit; min-height: 74px;
}
.action:active { transform: translateY(1px); }
.action .ico {
  width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid;
  place-items: center; font-size: 22px; background: var(--sand);
}
.action.primary .ico { background: linear-gradient(135deg, var(--brand-2), var(--brand)); }
.action.gold .ico { background: linear-gradient(135deg, #ffce5a, var(--gold)); }
.action .t { display: flex; flex-direction: column; }
.action .t b { font-size: 15.5px; font-weight: 800; }
.action .t small { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.action .chev { margin-left: auto; color: var(--muted); font-size: 22px; line-height: 1; }

/* --------------------------------------------------------- бейдж тест-режима */
.badge {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--gold-soft); color: var(--gold-ink); border-radius: 12px;
  padding: 10px; font-size: 13px; font-weight: 700; margin: 0;
}

/* --------------------------------------------------------- поля формы */
label {
  display: flex; flex-direction: column; gap: 6px; font-size: 13px;
  color: var(--muted); font-weight: 600;
}
label > span {
  font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
label .req { color: var(--gold-ink); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input, select, textarea {
  font: inherit; font-size: 16px; width: 100%; color: var(--ink);
  background: var(--field); border: 1.5px solid var(--field-line);
  border-radius: var(--r-field); padding: 12px 13px;
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c7a89' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring);
}
.other { margin-top: 2px; }
.hint {
  font-size: 12.5px; color: var(--muted); margin: -2px 0 2px; white-space: pre-line;
}
.hint b { color: var(--gold-ink); }

/* --------------------------------------------------------- кнопки */
button {
  font: inherit; font-size: 16px; font-weight: 800; color: #fff; border: none;
  border-radius: var(--r-btn); padding: 15px 16px; cursor: pointer;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow: var(--shadow-cta); min-height: 52px; letter-spacing: .01em;
}
button:active { transform: translateY(1px); box-shadow: var(--shadow-md); }
button:disabled { opacity: .55; box-shadow: none; cursor: default; }
button.big, .screen > button { width: 100%; }
button.ghost {
  background: transparent; color: var(--brand); border: 1.5px solid var(--line);
  box-shadow: none;
}
button.small { width: auto; align-self: flex-start; padding: 11px 16px; font-size: 14px; min-height: 44px; }
/* «Отменить …» — приглушённая красная, чтобы не спорить с основными действиями */
button.small.danger {
  background: transparent; color: #c0341d; border: 1.5px solid rgba(192,52,29,.4);
  box-shadow: none; margin-top: 8px;
}
button.small.danger.loading::after { border-color: rgba(192,52,29,.3); border-top-color: #c0341d; }
/* индикатор загрузки на кнопке (класс .loading вешает app.js на время запроса) */
button.loading { position: relative; color: transparent !important; }
button.loading::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
button.ghost.loading::after, button.small.loading::after {
  border-color: rgba(13,71,161,.3); border-top-color: var(--brand);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------- карточка поездки */
#f_results, #mine_list { display: flex; flex-direction: column; gap: 12px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 15px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
}
.card .route {
  font-size: 16px; font-weight: 850; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.card .route .arr { color: var(--brand); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
  font-weight: 600; background: var(--sand); color: var(--ink);
  border: 1px solid var(--line); padding: 5px 10px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.chip.price {
  background: var(--gold-soft); color: var(--gold-ink); border-color: transparent;
  font-weight: 800;
}
.card .cmt { font-size: 13.5px; color: var(--muted); }
.card .cmt .pin { color: var(--brand); font-weight: 600; }

/* --------------------------------------------------------- тост / пусто */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: #12213a; color: #fff; padding: 12px 18px; border-radius: 12px;
  font-size: 15px; font-weight: 600; max-width: 90%; text-align: center;
  z-index: 20; box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.empty { color: var(--muted); text-align: center; padding: 26px 0; font-size: 14px; }

/* подводка под заголовком новых экранов (заявка / пассажиры) */
.lead { font-size: 13.5px; color: var(--muted); margin: -6px 0 2px; }

/* «пассажир твой» — итоговый блок в карточке после отклика */
.taken {
  background: var(--gold-soft); color: var(--gold-ink); border-radius: 12px;
  padding: 11px 12px; font-size: 13.5px; font-weight: 700; line-height: 1.4;
}
.taken b { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- экран авторизации */
#authGate {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 46px 20px;
}
#authGate .lock {
  width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center;
  font-size: 34px; background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
#authGate h2 { margin: 2px 0 0; }
#authGate p { margin: 0; color: var(--muted); font-size: 14px; max-width: 340px; }

/* --------------------------------------------------------- модальное окно (bottom-sheet) */
.modal {
  position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.45);
}
.modal .sheet {
  width: 100%; max-width: 640px; background: var(--card); color: var(--ink);
  border-radius: 20px 20px 0 0; padding: 18px 16px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 34px rgba(0,0,0,.30);
  display: flex; flex-direction: column; gap: 14px;
  animation: sheetUp .22s ease;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal .sheet h3 { margin: 0; font-size: 18px; font-weight: 850; letter-spacing: -.01em; }
#m_body { display: flex; flex-direction: column; gap: 14px; }
.m_err { margin: 0; color: var(--danger); font-size: 13px; font-weight: 600; }
.m_err:empty { display: none; }
.m_actions { display: flex; gap: 10px; }
.m_actions button { flex: 1; }

/* спрос водителю на главной (баннер «тебя ждут попутчики») */
.demand {
  background: var(--gold-soft); color: var(--gold-ink); border-radius: var(--r-card);
  padding: 13px 15px; font-size: 14px; line-height: 1.55; cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.demand:active { transform: translateY(1px); }
.demand b { font-weight: 800; }
.demand .demand-cta { display: inline-block; margin-top: 6px; font-weight: 700; font-size: 12.5px; }
/* чип рейтинга водителя в карточке */
.chip.star { background: var(--gold-soft); color: var(--gold-ink); border-color: transparent; font-weight: 700; }
/* текст-сообщение в модалке (обратный рейс и т.п.) */
.m_msg { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }