/* Карти маршрутів — оформлення під now.lviv.ua
   Усі кольори зібрані вгорі. Треба інший відтінок — правите тільки тут. */

.rt {
  --rt-brand:  #583309;   /* основний колір сайту */
  --rt-panel:  #4a2b07;   /* фон панелей, трохи темніший */
  --rt-ink:    #f4e9dc;   /* текст на панелях */
  --rt-mute:   #c8ac8b;   /* другорядний текст */
  --rt-line:   #6d431a;   /* межі */
  --rt-a:      #e8871e;   /* напрямок «туди» + акценти */
  --rt-b:      #1f6f8b;   /* напрямок «назад» */
  --rt-c:      #7048e8;   /* траса сусіднього маршруту при пересадці */
  --rt-r:      12px;

  margin: 22px 0 26px;
  font: inherit;
  line-height: 1.5;
}

/* перемикач напрямків */
.rt-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.rt-tabs button {
  flex: 1 1 200px; padding: 10px 15px; font: inherit; font-size: 15px;
  text-align: left; color: var(--rt-ink); background: var(--rt-panel);
  border: 1px solid var(--rt-line); border-radius: var(--rt-r);
  cursor: pointer; transition: .14s;
}
.rt-tabs button:hover { border-color: var(--rt-a); }
.rt-tabs button b {
  display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--rt-mute);
}
.rt-tabs button[aria-pressed=true] {
  background: var(--rt-a); border-color: var(--rt-a); color: #2c1803;
}
.rt-tabs button[aria-pressed=true] b { color: rgba(44,24,3,.68); }

/* карта */
.rt-map {
  position: relative; z-index: 0;      /* щоб не лізла поверх меню сайту */
  height: 430px; width: 100%;
  border: 1px solid var(--rt-line); border-radius: var(--rt-r);
  overflow: hidden; background: #e8e2d8;
}
.rt-hint {
  position: absolute; inset: 0; z-index: 500;
  display: none; align-items: center; justify-content: center;
  padding: 20px; text-align: center; font-size: 15px; color: #fff;
  background: rgba(44,24,3,.6); pointer-events: none;
  opacity: 0; transition: opacity .18s;
}
.rt-hint.on { display: flex; opacity: 1; }

/* калькулятор */
.rt-calc {
  margin-top: 12px; padding: 15px; display: flex; gap: 12px; flex-wrap: wrap;
  background: var(--rt-panel); border-radius: var(--rt-r);
}
.rt-calc label {
  display: flex; flex-direction: column; gap: 5px; flex: 1 1 210px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--rt-mute);
}
.rt-calc select {
  padding: 9px 11px; font: inherit; font-size: 15px; max-width: 100%;
  color: var(--rt-ink); background: var(--rt-brand);
  border: 1px solid var(--rt-line); border-radius: 9px;
}
.rt-out { flex: 1 1 100%; padding-top: 3px; font-size: 14px; color: var(--rt-mute); }
.rt-out b {
  display: inline-block; margin-right: 8px; padding: 3px 13px;
  font-size: 17px; color: #2c1803; background: var(--rt-a); border-radius: 999px;
}
.rt-out i { font-style: normal; font-size: 13px; }

/* список зупинок */
.rt-stops {
  margin-top: 0; padding: 16px 16px 16px 3.1em;
  background: var(--rt-panel); border-radius: var(--rt-r);
  columns: 2; column-gap: 34px; color: var(--rt-ink);
}
.rt-h {
  margin: 26px 0 12px; padding: 0; font-size: 22px; line-height: 1.3;
  color: var(--rt-brand); font-weight: 700;
}
.rt-stops.is-off { display: none; }
.rt-stops li { margin: 0 0 10px; padding-left: 4px; break-inside: avoid; }
.rt-stops li.is-live { cursor: pointer; }   /* курсор тільки коли клік уже працює */
.rt-stops li::marker { color: var(--rt-mute); font-size: 13px; }
.rt-stops li:hover, .rt-stops li[aria-current=true] { color: var(--rt-a); }
.rt-stops .rt-ad { display: block; font-size: 12px; color: var(--rt-mute); }

/* посилання на Google Карти */
.rt-gm { color: var(--rt-a); font-size: 13px; text-decoration: none;
  border-bottom: 1px dotted currentColor; }
.rt-gmaps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rt-gmaps-l { flex: 1 1 100%; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: #8a7358; }
.rt-gmaps a { flex: 1 1 260px; padding: 10px 14px; font-size: 14px; text-decoration: none;
  color: var(--rt-ink); background: var(--rt-panel); border: 1px solid var(--rt-line);
  border-radius: var(--rt-r); transition: .14s; }
.rt-gmaps a:hover { border-color: var(--rt-a); color: var(--rt-a); }

/* пересадки в підказці — згорнуті, щоб не займали пів екрана */
.rt-pop-tr { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rt-line); }
.rt-pop-tr > summary { cursor: pointer; font-size: 13px; color: var(--rt-a);
  list-style: none; user-select: none; }
.rt-pop-tr > summary::-webkit-details-marker { display: none; }
.rt-pop-tr > summary::before { content: "\25B8\00A0"; }
.rt-pop-tr[open] > summary::before { content: "\25BE\00A0"; }
.rt-pop-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px;
  max-height: 168px; overflow-y: auto; }
.rt-pop-b { padding: 5px 9px; font: inherit; font-size: 13px; white-space: nowrap;
  color: #2c1803; background: var(--rt-a); border: 0; border-radius: 7px; cursor: pointer; }
.rt-pop-b:hover { background: #f2a04d; }
.rt-pop-m { align-self: center; font-size: 12px; color: var(--rt-mute); }
@media (max-width: 700px) { .rt-pop-list { max-height: 132px; } }

/* смужка під картою: який маршрут зараз показано поверх */
.rt-bar { display: none; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 11px 15px; font-size: 14px;
  color: #fff; background: var(--rt-c); border-radius: var(--rt-r); }
.rt-bar.on { display: flex; }
.rt-bar-n { flex: 1 1 auto; font-weight: 600; }
.rt-bar-a { color: #fff; text-decoration: underline; }
.rt-bar-x { margin-left: auto; padding: 1px 10px; font-size: 19px; line-height: 1.3;
  color: #fff; background: rgba(255,255,255,.2); border: 0; border-radius: 7px; cursor: pointer; }

/* джерело */
.rt-src { margin: 10px 2px 0; font-size: 12px; color: #8a7358; }
.rt-src a { color: inherit; text-decoration: underline; }

/* мобільна */
@media (max-width: 700px) {
  .rt-map { height: 340px; }
  .rt-gmaps a { flex: 1 1 100%; }
  .rt-stops { columns: 1; }
  .rt-tabs button { flex: 1 1 100%; }
  .rt-calc label { flex: 1 1 100%; }
}

/* Точка зупинки: видима крапка маленька, зона натискання — 22px.
   Інакше на телефоні в неї неможливо влучити. */
.rt-pin { display: flex; align-items: center; justify-content: center; background: none; border: 0; }
.rt-pin i {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}
.rt-pin-end i { width: 14px; height: 14px; }

/* Leaflet у тому ж стилі */
.rt .leaflet-popup-content-wrapper {
  background: var(--rt-panel); color: var(--rt-ink); border-radius: 10px;
}
.rt .leaflet-popup-content { margin: 11px 14px; font-size: 14px; line-height: 1.45; }
.rt .leaflet-popup-content b { color: var(--rt-a); }
.rt .leaflet-popup-tip { background: var(--rt-panel); }
.rt .leaflet-container a.leaflet-popup-close-button { color: var(--rt-mute); }
.rt .leaflet-bar a {
  background: var(--rt-panel); color: var(--rt-ink); border-bottom-color: var(--rt-line);
}
.rt .leaflet-bar a:hover { background: var(--rt-brand); color: #fff; }