/* ===================================================================
   PidvezU — спільний компонент маршруту (виїзд → зупинки → прибуття).
   Розмітку генерує renderRoute() з core/functions/common.php.
   Використовується на публічній головній і на сторінках залогіненого юзера.
   Тема — CSS-змінні з main-page.css.
   =================================================================== */

.route { display: flex; flex-direction: column; }

.route-row {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

/* Лінія, що зʼєднує точки маршруту */
.route-row::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  height: 100%;
  width: 2px;
  background: var(--border-strong);
}
.route-row:last-child::before { display: none; }

/* Лінія від старту до першої зупинки — акцентна */
.route-row.is-start::before {
  background: linear-gradient(var(--accent), var(--border-strong));
}

.route-marker {
  justify-self: center;
  border-radius: 50%;
  flex: none;
}

.is-start > .route-marker,
.is-end > .route-marker {
  width: 12px; height: 12px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--glow);
}
.is-end > .route-marker { background: var(--accent-2); }

.is-stop > .route-marker {
  width: 7px; height: 7px;
  background: var(--surface-solid);
  border: 2px solid var(--border-strong);
}

.route-label { min-width: 0; overflow-wrap: anywhere; }

/* Підсвітка збігу пошуку в маршруті. Раніше це була залита плашка-піл —
   виглядало важко. Тепер просто акцентний колір і тонке підкреслення:
   око бачить збіг, але картка лишається спокійною. */
.rt-hl {
  color: var(--accent);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--accent-2);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.is-stop > .route-label .rt-hl { font-weight: 700; }

.is-start > .route-label,
.is-end > .route-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.is-stop > .route-label {
  font-size: 13px;
  color: var(--text-muted);
}

/* ===================================================================
   Приглушені (поза відрізком пошуку пасажира) частини маршруту — модель
   BlaBlaCar. Напр.: маршрут Харків → Полтава → Київ → Житомир, пошук
   «Полтава → Київ». Харків і Житомир (та лінії до/після них) гаснуть у сірий,
   Полтава → Київ лишається темним текстом з акцентною лінією між ними.
   Класи додає renderRoute():
     .is-muted     — точка ПОЗА відрізком: сірий текст, сірий маркер, сіра лінія вниз;
     .is-match-end — точка-фініш пошуку: текст темний, але лінія ВНИЗ сіра.
   =================================================================== */
.route-row.is-muted { color: var(--text-muted); }
.route-row.is-muted > .route-label { color: var(--text-muted); opacity: .6; }
/* збіг пошуку в приглушеній точці не має світитися акцентом */
.route-row.is-muted > .route-label .rt-hl {
  color: inherit;
  text-decoration-color: var(--border-strong);
}

/* Маркери приглушених точок — сірі, без сяйва. Порожнистим (зупинки) сіримо
   обводку, залитим (старт/фініш) — саму заливку. */
.route-row.is-muted > .route-marker { border-color: var(--border); box-shadow: none; }
.is-start.is-muted > .route-marker,
.is-end.is-muted   > .route-marker {
  background: var(--border-strong);
  box-shadow: none;
}

/* Лінія ВНИЗ від приглушеної точки — сіра. Окремий селектор для .is-start
   перебиває акцентний градієнт старту. */
.route-row.is-muted::before          { background: var(--border); }
.route-row.is-start.is-muted::before { background: var(--border); }

/* КРИТИЧНО: лінія ВНИЗ від точки-фінішу пошуку до решти (немаркованого)
   маршруту — сіра, хоча сам текст фінішу лишається темним. */
.route-row.is-match-end::before          { background: var(--border); }
.route-row.is-start.is-match-end::before { background: var(--border); }

/* Активний відрізок [старт; фініш] пошуку — акцентна лінія (як у BlaBlaCar):
   у маршруті з приглушенням усі НЕсірі рядки дають акцентну лінію вниз. */
.route.is-muted-route .route-row:not(.is-muted):not(.is-match-end)::before {
  background: var(--accent);
}

/* Текст активного відрізка [старт; фініш] — темний, навіть у проміжних зупинок
   (які поза пошуком лишаються сірими). Точку-фініш пошуку сюди теж включено
   (.is-match-end не є .is-muted), тож знайдений пункт призначення читається
   темним. Приглушені точки (.is-muted) лишаються сірими. */
.route.is-muted-route .route-row:not(.is-muted) > .route-label {
  color: var(--text);
  opacity: 1;
}

/* Компактний варіант */
.route.compact .route-row { padding: 3px 0; }
.route.compact .is-start > .route-label,
.route.compact .is-end > .route-label { font-size: 15px; }
.route.compact .is-stop > .route-label { font-size: 12.5px; }

@media (max-width: 480px) {
  .is-start > .route-label,
  .is-end > .route-label { font-size: 15px; }
}

/* ===================================================================
   Згорнутий маршрут (renderRoute з collapsible => true, коли зупинок 2+).
   Зупинки ховаються за вузлом-кнопкою «N зупинок» ПРЯМО В ЛІНІЇ маршруту,
   між початком і кінцем. Розкриття показує їх на своєму місці.
   Лінію малюємо ПОСЕГМЕНТНО (кожен .route-row — свій ::before), як і у
   звичайному таймлайні, щоб приглушення пошуку фарбувало кожен відрізок
   окремо (акцент усередині знайденого відрізка, сірий — поза ним). Суцільної
   лінії через контейнер більше немає: вона не вміла фарбувати сегменти.
   Побудовано на нативному <details>, без JS.
   =================================================================== */
.route-foldable { position: relative; }

/* Сегментна лінія і всередині <details>: кожен рядок малює власний відрізок
   вниз. За замовчуванням — акцентний (мʼякший, як була суцільна лінія). */
.route-foldable .route-row::before {
  background: var(--accent);
  opacity: .55;
}
/* Приглушені / фінішні рядки — сіра лінія вниз (перебиваємо акцент вищою
   специфічністю, щоб не залежати від порядку правил). */
.route-foldable .route-row.is-muted::before,
.route-foldable .route-row.is-start.is-muted::before,
.route-foldable .route-row.is-match-end::before,
.route-foldable .route-row.is-start.is-match-end::before {
  background: var(--border);
  opacity: 1;
}
/* <details> розриває ланцюжок :last-child — остання зупинка розкритого списку
   вважається «last-child» і гасить свою лінію. Повертаємо її: вона МУСИТЬ
   тягнутися вниз до кінцевої точки маршруту. */
.route-foldable .route-fold-list .route-row:last-child::before { display: block; }

/* Маркери мають лежати ПОВЕРХ лінії */
.route-foldable .route-marker { position: relative; z-index: 1; }

/* Рядок-кнопка «N зупинок» */
.route-fold { width: 100%; }
.route-fold > .is-fold {
  cursor: pointer;
  list-style: none;
  padding: 5px 0;
}
.route-fold > .is-fold::-webkit-details-marker { display: none; }
.route-fold > .is-fold::marker { content: ""; }

/* Вузол-маркер кнопки — трохи помітніший за звичайну зупинку */
.route-marker-fold {
  justify-self: center;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--surface-solid);
  border: 2px solid var(--accent);
  flex: none;
}

.route-fold-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color .16s, color .16s, background .16s;
}
.route-fold > .is-fold:hover .route-fold-btn {
  border-color: var(--border-strong);
  color: var(--text);
}
.route-fold-btn .fa-route { color: var(--accent); font-size: 12px; }
.route-fold-chev { font-size: 10px; transition: transform .2s ease; }
.route-fold[open] .route-fold-chev { transform: rotate(180deg); }

/* Список зупинок при розкритті */
.route-fold[open] > .route-fold-list { animation: routeFoldIn .22s ease; }
@keyframes routeFoldIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ===================================================================
   ФІКС ДЛЯ BLA-BLA-CAR ВІДОБРАЖЕННЯ (ФІНІШ ПОШУКУ ТА АКТИВНІ ЗУПИНКИ)
   =================================================================== */

/* 1. Робимо фініш пошуку (Житомир) жирним і з великим залитим маркером (як кінцева точка) */
.route-row.is-match-end > .route-label {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  opacity: 1 !important;
}
.route-row.is-match-end > .route-marker {
  width: 12px !important;
  height: 12px !important;
  background: var(--accent) !important;
  border: none !important;
  box-shadow: 0 0 0 4px var(--glow) !important;
}

/* 2. Робимо активні проміжні зупинки (Рівне) темними, а їхні кільця — фіолетовими */
.route.is-muted-route .route-row.is-stop:not(.is-muted):not(.is-match-end) > .route-marker {
  border-color: var(--accent) !important;
}
.route.is-muted-route .route-row.is-stop:not(.is-muted):not(.is-match-end) > .route-label {
  color: var(--text) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* 3. Гарантуємо, що лінія ДО Житомира (від активних зупинок) — акцентна */
.route-foldable .route-row:not(.is-muted):not(.is-match-end)::before {
  background: var(--accent) !important;
  opacity: .55 !important;
}