.direction-toggle {
  position: absolute;                    /* 📌 în loc de fixed */
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10002;
  background: white;
  padding: 4px 12px;                     /* 🪶 mai puțin padding */
  border-radius: 25px;                   /* colțuri puțin mai drepte */
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);  /* 🪶 umbră redusă */
  font-family: 'Poppins', sans-serif;
  min-width: 140px;                      /* puțin mai mic */
  justify-content: center;
}



.direction-toggle label {
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.25s ease;
}

.direction-toggle label.inactive {
  color: #999;
}

.direction-toggle label.active {
  color: #000;
}
.direction-toggle .switch {
  position: relative;
  width: 52px;
  height: 28px;
  background: #222;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.direction-toggle .switch .circle {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #FFD700;
  border-radius: 50%;
  transition: left 0.3s ease;
}
.direction-toggle .switch .circle {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #FFD700;
  border-radius: 50%;
  transition: left 0.3s cubic-bezier(.34,1.56,.64,1);
}

.direction-toggle.retur .switch .circle {
  left: 27px; /* 🟢 mutăm bila la dreapta */
}
.direction-toggle .dir-btn {
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.25); /* 🔸 puțin mai opac */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #003366;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Starea TUR */
.direction-toggle .dir-btn.tur-active {
  background: rgba(255, 215, 0, 0.3);
  border-color: rgba(255, 215, 0, 0.6);
}

/* Starea RETUR */
.direction-toggle .dir-btn.retur-active {
  background: rgba(0, 128, 0, 0.3);
  border-color: rgba(0, 128, 0, 0.6);
}

 /* === Toolbar doar pe mobil === */
@media (max-width: 1023px) {
  .map-toolbar-mobile {
    position: fixed;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10000;
    background: linear-gradient(160deg, rgba(8,14,42,0.96) 0%, rgba(3,8,24,0.98) 100%);
    padding: 6px 10px;
    border-radius: 24px;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.11);
    box-shadow: 0 8px 32px rgba(0,0,0,0.52), 0 2px 8px rgba(0,0,0,0.26);
  }

  .topbar,
  .linie-left,
  .linie-selector,
  .linie-wrapper h2,
  .linie-tabel,
  #station-title {
    display: none !important;
  }
}


  .map-toolbar-mobile button {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    padding: 4px;
    cursor: pointer;
    transition: all 0.22s ease;
  }

  .map-toolbar-mobile button img {
    width: 28px;
    height: 28px;
  }

  .map-toolbar-mobile button:hover {
    background: #FFD700;
    border-color: rgba(255,215,0,0.55);
    box-shadow: 0 0 14px rgba(255,215,0,0.38), 0 2px 6px rgba(0,0,0,0.22);
  }

  .map-toolbar-mobile button.active {
    background: rgba(255,215,0,0.18);
    border-color: rgba(255,215,0,0.50);
    box-shadow: 0 0 0 1.5px rgba(255,215,0,0.40), 0 2px 8px rgba(0,0,0,0.28);
  }

.toolbar-dropdown-mobile {
  position: fixed;
  z-index: 10001;

  /* 📍 Centrare pe mijloc */
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* aliniere pe centru */
  gap: 8px;
  min-width: 220px;
  max-width: 90vw; /* ca să nu iasă în afara ecranului */
  padding: 12px 14px;

  background: linear-gradient(160deg, rgba(8,14,42,0.97) 0%, rgba(3,8,24,0.99) 100%);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.25);
  animation: dropdownFade 0.25s ease-out;
}


.toolbar-dropdown-mobile .dropdown-item {
  position: relative;
  display: inline-block;
  padding: 8px 14px;
  font-size: 1rem;
  font-weight: 600;

  /* ✨ Culoare text nouă */
  color: #ffffff;

  text-decoration: none;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  transition: all 0.25s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

.toolbar-dropdown-mobile .dropdown-item:hover {
  background: rgba(255, 215, 0, 0.18);
  color: #ffffff;
  border-color: rgba(255, 215, 0, 0.52);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.28);
}

/* ✨ Bara animată de selecție */
.toolbar-dropdown-mobile .dropdown-item.selected::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 3px;
  background: linear-gradient(90deg, #FFD700, #FFC400);
  border-radius: 2px;
  animation: underlineGrow 0.25s ease forwards;
}
  @keyframes underlineGrow {
  from { transform: translateX(-50%) scaleX(0); opacity: 0; }
  to { transform: translateX(-50%) scaleX(1); opacity: 1; }
}

/* 🔔 Animație apariție dropdown */
@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 📺 Ascundem pe tabletă & desktop */
@media (min-width: 1024px) {
  .map-toolbar-mobile,
  .toolbar-dropdown-mobile {
    display: none !important;
    pointer-events: none;
  }
}



.leaflet-tooltip.station-label-tur,
.leaflet-tooltip.station-label-retur {
  font-family: 'Poppins', sans-serif;
  font-size: 0.80rem;
  line-height: 1.3;
  color: #333;
  background: #ffffff;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  pointer-events: auto;
  max-width: 260px;
  transition: opacity 0.25s ease, transform 0.2s ease;
  max-width: 320px;              /* 🔹 caseta poate fi un pic mai lată */
  white-space: normal;           /* permite rânduri multiple */
  overflow-wrap: anywhere;       /* rupe cuvintele foarte lungi, dacă e nevoie */
  word-wrap: break-word;         /* fallback pentru browsere mai vechi */
  box-sizing: border-box;        /* ca paddingul să nu forțeze lățimea */
}

.tooltip-title,
.tooltip-line {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

.leaflet-tooltip {
  transition: opacity 0.2s ease-in-out, transform 0.15s ease-in-out;
  white-space: normal;
  z-index: 9999 !important;
}

.leaflet-tooltip.station-label-tur,
.leaflet-tooltip.station-label-retur {
  font-size: 0.9rem;
  line-height: 1.4;
}
.leaflet-tooltip.station-label-tur:before,
.leaflet-tooltip.station-label-retur:before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.tooltip-title {
  font-size: 0.9rem;
  font-weight: 400;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tooltip-title span.icon {
  font-size: 1.2rem;
}

.tooltip-line {
  font-size: 0.85rem;
  padding: 5px 0;
  border-top: 1px solid #eee;
  color: #333;
}

.tooltip-line:first-of-type {
  border-top: none;
}
.tooltip-line strong {
  color: #000;
}
.leaflet-tooltip.station-label-tur {
  border-top: 4px solid #FFD700; /* Galben Tur */
}
.leaflet-tooltip.station-label-retur {
  border-top: 4px solid #228B22; /* Verde Retur */
}
.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top: 3px solid #222;
  border-radius: 50%;
  margin: 10px auto 0;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.station-dot { animation: st-pulse 3s ease-out infinite; }
@keyframes st-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.25); }
  70% { box-shadow: 0 0 0 12px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
  .map-legend {
      background: white;
      padding: 10px 14px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.15);
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      color: #222;
      line-height: 1.6;
    }
    .map-legend .legend-title {
      font-weight: 600;
      margin-bottom: 6px;
      font-size: 14px;
      text-align: center;
      border-bottom: 1px solid #eee;
      padding-bottom: 4px;
    }
    .map-legend .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 3px 0;
    }
    .map-legend .legend-item img {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }

@media (max-width: 600px) {
  .direction-toggle {
    bottom: 20px;  /* îl urcăm deasupra footer-ului și a legendei */
    margin-left: -100px;
  }
}
/* 📱 Ajustare poziție legendă pe mobil (să nu stea sub footer) */
@media (max-width: 600px) {
  .leaflet-bottom.leaflet-left .map-legend,
  .leaflet-bottom.leaflet-right .map-legend {
    margin-bottom: 170px !important;  /* ridică legenda cu ~70px */

  }
}


@media (max-width: 1023px) {

  .map-toolbar-mobile {
    flex-direction: row;
    flex-wrap: wrap;          /* 🔹 permite rând nou */
    justify-content: center;
    gap: 6px;
  }

  .direction-toggle {
    position: relative;
    transform: none;
    bottom: auto;
    left: auto;

    order: 99;                /* 🔹 forțează sub pictograme */
    width: 90%;
    max-width: 280px;
    margin-top: 6px;

    justify-content: center;
  }

}

@media (max-width: 1023px) {

  .direction-toggle {
    margin: 8px auto 0 auto;
    display: flex;
    justify-content: center;
    align-self: center;
  }

}

@media (max-width: 1023px) {

  .toolbar-dropdown-mobile {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 6px;
    width: 100%;
    justify-content: center;
  }

}


@media (max-width: 1023px) {

  .map-toolbar-mobile {
    width: calc(100% - 24px);   /* 🔹 respectă paddingul hărții */
    max-width: none;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
  }

}


@media (max-width: 1023px) {

  .map-toolbar-mobile {
    overflow: hidden;   /* 🔹 nu mai scapă nimic în afară */
  }

}

@media (max-width: 1023px) {

  .map-toolbar-mobile {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 420px;
  }

}


/* 📱 Linia curentă overlay pe hartă */
@media (max-width: 600px) {

  .linie-header {
    display: flex !important;
    position: absolute;
    bottom: 20px;
    left: 10px;
    z-index: 10000;

    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 6px 12px;

    width: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  }

  .linie-header h2 {
    display: none !important;
  }

  .linie-header #station-title {
    display: none !important;
  }

  .linie-header .linie-curenta span {
    font-size: 0.8rem;
  }

  .linie-header .linie-curenta .linie-id {
    font-size: 0.9rem;
    padding: 4px 10px;
    min-width: auto;
  }

}
.line-link {
  cursor: pointer;
  color: #007bff;
}

.line-link:hover {
  text-decoration: underline;
}


.line-link strong {
  background: rgba(255,215,0,0.2);
  padding: 2px 6px;
  border-radius: 6px;
}
.leaflet-popup-content-wrapper {
  border-radius: 12px;
  padding: 6px;
}

.leaflet-popup-content {
  margin: 8px;
}
.line-link {
  cursor: pointer;
  color: #1e73be; /* albastru elegant */
  text-decoration: none;
  font-weight: 600;
}

.line-link:hover {
  color: #155a94;
  text-decoration: none;
}

.line-link strong {
  color: inherit;
}
.leaflet-popup-content a,
.leaflet-popup-content span {
  background: none !important;
  text-decoration: none !important;
}

.line-link {
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.line-link:hover {
  background: rgba(30, 115, 190, 0.1);
}


.user-location-dot {
  width: 14px;
  height: 14px;
  background: #00ff6a;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(0,255,106, 0.7);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0,255,106, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(0,255,106, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0,255,106, 0);
  }
}

@media (max-width: 600px) {

  .linie-header {
    display: flex !important;
    position: absolute;
    bottom: 20px;
    left: 10px;
    z-index: 10000;

    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 6px 12px;

    width: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  }

  .linie-header h2 {
    display: none !important;
  }

  .linie-header #station-title {
    display: none !important;
  }
}

@media (max-width: 600px) {

  .linie-header {
    flex-direction: column;
    align-items: stretch;
  }

  .linie-header button {
    margin-bottom: 6px;
  }
}


.locate-btn {
  width: 100%;
  margin-bottom: 6px;
  background: linear-gradient(135deg,#FFD43B,#FFC40C);
  color: #222;
  border: none;
  padding: 9px 12px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.2px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.locate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.locate-btn.active {
  background: #54595F;
  color: #FFC40C;
}



.user-popup {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 6px 10px;
  text-align: center;
  color: #222;
}

.leaflet-popup-content-wrapper {
  border-radius: 12px;
  backdrop-filter: blur(6px);
}

.leaflet-popup-tip {
  background: white;
}
.user-popup {
  font-family: 'Poppins', sans-serif;
  padding: 10px 14px;
  text-align: center;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.55);
  border-radius: 14px;
  animation: popupFade 0.25s ease-out;
}

.popup-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.popup-accuracy {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* glass popup */
.leaflet-popup-content-wrapper {
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 8px 25px rgba(0,0,0,0.18);
}

.leaflet-popup-tip {
  background: rgba(255,255,255,0.45);
}

/* animație */
@keyframes popupFade {
  from {
    transform: translateY(6px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0px) scale(1);
    opacity: 1;
  }
}


.dir-badge{
  display:inline-block;
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  margin-left:8px;
  font-weight:600;
}
.dir-badge.tur{ background: rgba(255,215,0,.18); border:1px solid rgba(255,215,0,.5); }
.dir-badge.retur{ background: rgba(34,139,34,.18); border:1px solid rgba(34,139,34,.5); }
.near-row{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-top:1px solid #eee; }
.near-row:first-child{ border-top:none; }
.near-line{ text-decoration:none; color:#1e73be; font-weight:600; }

.popup-accuracy {
  transition: opacity 0.25s ease;
}
.popup-accuracy.updating {
  opacity: 0.3;
}

.map-legend.accordion {
  background: var(--panel-bg);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-legend);
  padding: 0;
  overflow: hidden;
  color: var(--legend-text);
  font-size: 13px;
}

.legend-header {
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: transparent;
  transition: filter 0.2s ease;
}
.legend-header:hover {
  filter: brightness(1.08);
}

.legend-header::after {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--legend-arrow) no-repeat center / contain;
  opacity: 0.88;
  display: inline-block;
  transition: transform 0.25s ease;
}

.map-legend.open .legend-header::after {
  transform: rotate(180deg);
}

.legend-content {
  padding: 10px 14px;
  border-top: 1px solid var(--legend-sep);
}

/* 🔽 Coborâm containerul Leaflet */
.leaflet-bottom.leaflet-right {
  bottom: 50px !important;
}

/* Scoatem marginile default */
.leaflet-bottom.leaflet-right .leaflet-control {
  margin-bottom: 0 !important;
}

@media (max-width: 600px) {

  .leaflet-bottom.leaflet-right {
    bottom: 120px !important;
    right: 10px !important;
  }

}

.leaflet-bottom.leaflet-right {
  bottom: 0 !important;
  right: 0 !important;
}

.map-legend.accordion {
  position: absolute !important;
  bottom: 120px;
  right: 10px;
  margin: 0 !important;
  z-index: 10000;
}

@media (max-width: 600px) {

  .map-legend.accordion {
    bottom: 30px !important;
    right: 10px !important;
  }

}

.dir-badge.destinatie {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  color: #fff;
}

.near-destination {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  transition: 0.2s;
}

.near-destination:hover {
  background: rgba(255,255,255,0.3);
}

.near-stop-group {
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,0.15);
}

.near-stop-title {
  font-size:13px;
  font-weight:600;
  margin-bottom:4px;
}

.near-stop-id {
  opacity:0.6;
  font-size:11px;
}
.near-active-line {
  background: rgba(255,196,12,0.15);
  border-radius:6px;
  padding:3px 5px;
}
/* HEADER FIXED */
.near-title {
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight:600;
}

/* CONTAINER DESTINAȚIE */
.near-destination {
  display:block;
  max-width: 180px;
  overflow:hidden;
  position:relative;
}

/* TEXT CARE SE DERULEAZĂ */
.near-destination strong {
  display:inline-block;
  white-space:nowrap;
  animation: scrollText 6s linear infinite;
}

/* animație */
@keyframes scrollText {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.scroll-if-needed {
  display:inline-block;
  white-space:nowrap;
}

.scroll-if-needed:after {
  content:"";
  padding-left:20px;
}

.near-destination:hover .scroll-if-needed {
  animation: scrollText 6s linear infinite;
}
/* container general */
.near-dest-wrap {
  display:flex;
  align-items:center;
  width:100%;
  gap:6px;
}

.near-dest-label {
  flex:0 0 auto;
  min-width:52px;
  text-align:left;
  font-weight:500;
  white-space:nowrap;
}

.near-dest-scroll {
  flex:1;
  overflow:hidden;
  position:relative;
}


/* text */
.near-dest-text {
  display:inline-block;
  white-space:nowrap;
  transform:translateX(0);
}

/* scroll doar dacă e lung */
.near-dest-text.long {
  animation: metroScroll 8s linear infinite;
}

@keyframes metroScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* IZOLARE: doar în popup Leaflet */
.leaflet-popup .near-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:6px 0;
  border-top:1px solid #eee;
}
.leaflet-popup .near-row:first-child{ border-top:none; }

.leaflet-popup .near-line-label{
  flex:0 0 auto;
  white-space:nowrap;
}

.leaflet-popup .near-destination{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  max-width:none;
  overflow:hidden;
}

.leaflet-popup .near-dest-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  min-width:0;
}

.leaflet-popup .near-dest-label{
  flex:0 0 auto;
  text-align:left;
  white-space:nowrap;
}

.leaflet-popup .near-dest-scroll{
  flex:1 1 auto;
  overflow:hidden;
  min-width:0;
}

.leaflet-popup .near-dest-text{
  display:inline-block;
  white-space:nowrap;
}

/* IMPORTANT: nu mai animăm strong vechi */
.leaflet-popup .near-destination strong,
.leaflet-popup .near-destination .scroll-if-needed{
  animation:none !important;
}

/* === UI SCALE (fără să rupă translateX) === */
:root { --ui-scale: 1; }

/* tel mic (ex: 720x1600) */
@media (max-width: 380px) {
  :root { --ui-scale: 0.85; }

}

/* tel mediu (ex: 1080x2400, dar viewport mic) */
@media (min-width: 381px) and (max-width: 420px) {
  :root { --ui-scale: 0.92; }
}

/* === TOP TOOLBAR (are deja translateX) === */
@media (max-width: 1023px) {
  .map-toolbar-mobile{
    transform: translateX(-50%) scale(var(--ui-scale)) !important;
    transform-origin: top center;
  }
}

/* === TOGGLE TUR/RETUR === */

/* desktop (ai transform: translateX(-50%)) */
.direction-toggle{
  transform: translateX(-50%) scale(var(--ui-scale));
  transform-origin: bottom center;
}

/* mobil (tu îi dai transform:none în media query, deci îl scalăm separat) */
@media (max-width: 1023px){
  .direction-toggle{
    transform: scale(var(--ui-scale)) !important;
    transform-origin: top center;
  }

}

/* === LEGENDA (dreapta-jos) === */
.map-legend.accordion{
  transform: scale(var(--ui-scale));
  transform-origin: bottom right;
  bottom: 30px !important;
    right: 10px !important;
}


/* === LINIA CURENTĂ + LOCALIZARE (stânga-jos) === */
@media (max-width: 600px){
  .linie-header{
    transform: scale(var(--ui-scale));
    transform-origin: bottom left;
  }
}
.near-popup {
  display: inline-block;
  min-width: 220px;   /* să nu devină prea mic */
  max-width: 320px;   /* să nu explodeze la nume lungi */
  width: auto;
}
.near-scroll { max-height: 260px; overflow-y: auto; padding-right: 6px; width: 100%;}
.near-stop-title { display:flex; gap:8px; align-items:center; flex-wrap:wrap; white-space: normal; white-space: normal; white-space: nowrap; }
.near-stop-dir { font-size:12px; padding:2px 6px; border-radius:10px; background:#eee; }

.tooltip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 14px;
}

/* LINE PILL */
.line-pill {
  background: #1f73be;
  color: white;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 13px;
  min-width: 26px;
  text-align: center;
}

/* text */
.arrival-text {
  color: #666;
  font-weight: 400;
}

/* TIME BADGE */
.time-badge {
  background: #f1f3f5;
  color: #222;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
}

/* ===== TOOLTIP PREMIUM LAYOUT ===== */
.leaflet-popup .tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
}

/* LINE PILL */
.leaflet-popup .line-pill {
  background: #1f73be;
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  min-width: 28px;
  text-align: center;
  letter-spacing: 0.3px;
}

/* TEXT */
.leaflet-popup .arrival-text {
  color: #777;
  font-size: 13px;
}

/* TIME BADGE */
.leaflet-popup .time-badge {
  background: #f1f3f5;
  color: #222;
  padding: 3px 7px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  min-width: 48px;
  text-align: center;
}

.nearby-pin {
  position: relative;
}

.nearby-pin div {
  position: relative;
  width: 22px;
  height: 22px;
}

.nearby-pin div::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: #ff8a00;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow:
    0 0 0 2px #fff,
    0 0 8px rgba(255,138,0,0.6);
}

.nearby-pin div::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
}

.route-flow-line {
  stroke-dasharray: 12 18;
  animation: flowMove 1.2s linear infinite;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.25));
  stroke-linecap: round;

}

@keyframes flowMove {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -30; }
}

.station-popup {
  background: #2776F5;
  color: #ffffff;
  border-radius: 12px;
  padding: 10px;
  font-family: Poppins, sans-serif;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
  min-width: 200px;
  font-size: 13px;
}

.sp-header {
  margin-bottom: 8px;
  padding-right: 20px; /* clearance for .near-close */
}

.sp-name {
  font-weight: 500;
  font-size: 13px;
}

.sp-id {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin-top: 1px;
}

.sp-loading {
  padding: 6px 0;
}

.sp-empty {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  padding-top: 4px;
}

.sp-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.sp-line {
  background: rgba(255,255,255,0.2);
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
}

.sp-time {
  color: #ffffff;
  font-weight: 500;
}

.sp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.sp-row:last-child {
  border-bottom: none;
}

/* ── tooltip-line / line-link inside blue station popup ─────────────── */
.station-popup .tooltip-line {
  color: #ffffff;
  border-top-color: rgba(255,255,255,0.15);
  padding: 5px 0;
}

.station-popup .tooltip-line:first-of-type {
  border-top: none;
}

.station-popup .tooltip-line strong {
  color: #ffffff;
}

.station-popup .line-link {
  color: #ffffff;
  font-weight: 600;
}

.station-popup .line-link:hover {
  color: rgba(255,255,255,0.8);
}

.sp-arrives {
  color: rgba(255,255,255,0.75);
}

.leaflet-control-gps-modern{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#0053a5;
  bottom: 115px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px;

  cursor:pointer;

  box-shadow:
    0 6px 16px rgba(0,0,0,0.18),
    0 2px 6px rgba(0,0,0,0.08);

  transition: transform .2s ease, box-shadow .2s ease;

  border:none !important;
}

/* Hide GPS center button on desktop */
@media (min-width: 601px) {
  .leaflet-control-gps-modern {
    display: none !important;
  }
}

/* Align GPS center button with legend on mobile */
@media (max-width: 600px) {
  .leaflet-control-gps-modern {
    margin-bottom: 30px !important;
  }
}

.leaflet-control-gps-modern:hover{
  transform:scale(1.05);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.22),
    0 3px 8px rgba(0,0,0,0.10);
}

.leaflet-control-gps-modern:active{
  transform:scale(0.94);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform .1s ease, box-shadow .1s ease;
}

.gps-btn-inner{
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

/* ICON TARGET */

.gps-btn-inner svg{
  width:20px;
  height:20px;
  stroke:#ffffff;
  fill:#ffffff;
}

/* cerc mare */
.gps-btn-inner circle:first-child{
  fill:none;
  stroke:#ffffff;
  stroke-width:2;
}

/* punct centru */
.gps-btn-inner circle:last-child{
  fill:#ffffff;
}

/* linii target */
.gps-btn-inner svg::before,
.gps-btn-inner svg::after{
  content:"";
}

/* shadow subtil icon */
.gps-btn-inner svg{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.custom-pin-wrapper{
  background:transparent !important;
  border:none !important;
}

/* pin leaflet */

.custom-pin{
  position:absolute;
  width:24px;
  height:24px;
  background:rgba(58,133,211,0.75);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  border:1.5px solid rgba(255,255,255,0.75);
  box-shadow:
  0 3px 8px rgba(0,0,0,0.25),
  inset 0 1px 2px rgba(255,255,255,0.3);
  left:8px;
  top:6px;
}

.custom-pin::after{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  top:7px;
  left:7px;
  background:white;
  border-radius:50%;
}

/* green gps dot */

.user-location-dot{
  position:absolute;
  width:10px;
  height:10px;
  background:#00ff6a;
  border-radius:50%;
  left:15px;
  top:14px;
  box-shadow:0 0 8px #00ff6a;

  animation:gpsPulse 2s infinite;z
}

@keyframes gpsPulse{

  0%{
    transform:scale(1);
    opacity:1;
  }

  70%{
    transform:scale(4);
    opacity:0;
  }

  100%{
    opacity:0;
  }

}

/* ── Phase 3: Vehicle markers ───────────────────────────────────────────── */
.vehicle-marker {
  width: 36px;
  height: 36px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform-origin: center center;
  cursor: pointer;
  /* Circle border + white fill matching the old SVGIcon style */
  border-radius: 50%;
  border: 2.5px solid #1f73be;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

.vehicle-lf-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
/* Vehicle popup */
.vehicle-popup {
  position: absolute;
  background: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  font-family: Poppins, sans-serif;
  font-size: 13px;
  z-index: 3000;
  pointer-events: none;
  white-space: nowrap;
  min-width: 120px;
}

.vehicle-popup::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom: 0;
  border-top-color: #fff;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.15));
}

.veh-popup {
  font-family: system-ui, -apple-system, sans-serif;
  background: #ffffff;
  color: #222;
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 160px;
}
.veh-header {
  font-weight: 700;
  font-size: 14px;
  color: #111;
  margin-bottom: 2px;
}
.veh-id {
  font-weight: 400;
  color: #555;
  font-size: 12px;
}
.veh-sub {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}
.veh-row {
  font-size: 13px;
  color: #222;
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 3px;
}
.veh-icon {
  font-size: 14px;
  line-height: 1;
}

/* ── End Phase 3 ─────────────────────────────────────────────────────────── */

/* ── Phase 2: GPS locate button (mobile browser only) ───────────────────── */
.locate-btn {
  position: absolute;
  left: 12px;
  bottom: 80px;
  z-index: 1000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--locate-bg);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border: 1px solid var(--locate-border);
  box-shadow: var(--shadow-locate);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.18s ease, transform 0.18s ease;
}

.locate-btn svg {
  stroke: var(--locate-icon);
}
.locate-btn svg circle:last-child {
  fill: var(--locate-icon);
}

.locate-btn:hover {
  filter: brightness(1.15);
}

.locate-btn:active {
  transform: scale(0.90);
  filter: brightness(0.85);
}

/* GPS-following active state */
.locate-btn.active {
  background: linear-gradient(180deg, rgba(0,90,200,0.95) 0%, rgba(0,55,140,0.99) 100%);
  border-color: rgba(100,180,255,0.30);
  box-shadow: 0 4px 16px rgba(0,100,255,0.40), 0 1px 4px rgba(0,0,0,0.25);
}

/* ── CSS safety: always hide in native app wrappers ─────────────────────── */
body.apk-mode .locate-btn,
body.app .locate-btn {
  display: none !important;
}

/* ── Phase 2: MapLibre user-location marker ─────────────────────────────── */
.user-marker {
  width: 18px;
  height: 18px;
  background: #007AFF;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(0,122,255,.35), 0 2px 6px rgba(0,0,0,.3);
  cursor: pointer;
  animation: userMarkerPulse 2.4s ease-out infinite;
}

@keyframes userMarkerPulse {
  0%   { box-shadow: 0 0 0 2px rgba(0,122,255,.35), 0 2px 6px rgba(0,0,0,.3); }
  60%  { box-shadow: 0 0 0 10px rgba(0,122,255,0),  0 2px 6px rgba(0,0,0,.3); }
  100% { box-shadow: 0 0 0 2px rgba(0,122,255,.35), 0 2px 6px rgba(0,0,0,.3); }
}
/* ── End Phase 2 ─────────────────────────────────────────────────────────── */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
  will-change: transform;
  transform: translate3d(0,0,0);
}
.leaflet-container {
  backface-visibility: hidden;
}

/* ── Favorites button ──────────────────────────────────────────────────── */
.sp-fav {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.2);
  text-align: center;
}

.sp-fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
  color: #ffffff;
  font-size: 12px;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.sp-fav-btn:hover,
.sp-fav-btn:active {
  background: rgba(255,255,255,0.3);
  color: #fff;
}

/* ── Favorites toast ───────────────────────────────────────────────────── */
.fav-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 30, 30, 0.88);
  color: #fff;
  font-size: 13px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: 8px 18px;
  border-radius: 20px;
  z-index: 99999;
  pointer-events: none;
  white-space: nowrap;
  animation: fav-toast-in 0.18s ease, fav-toast-out 0.3s ease 1.9s forwards;
}

@keyframes fav-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);   }
}

@keyframes fav-toast-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
/* ── Hide favorites on web (visible only in .app / .apk-mode) ─────────── */
body:not(.app):not(.apk-mode) .sp-fav,
body:not(.app):not(.apk-mode) .sp-fav-btn,
body:not(.app):not(.apk-mode) .fav-toast {
  display: none !important;
}
/* ── End Favorites ─────────────────────────────────────────────────────── */
.map-legend.accordion {
  position: absolute !important;
  right: 10px !important;
  z-index: 10000;
  margin: 0 !important;

  bottom: 70px !important; /* fallback general */
}

/* desktop */
@media (min-width: 1024px) {
  .map-legend.accordion {
    bottom: 30px !important;
  }
}

body.apk-mode .map-legend.accordion {
  bottom: 80px !important;
}

body.app .map-legend.accordion {
  bottom: 80px !important;
}

.leaflet-control-gps-modern {
  margin-bottom: 10px !important;
}

/* Hide JS GPS button in APK/WebView — native button handles this */
body.apk-mode .leaflet-control-gps-modern,
body.app .leaflet-control-gps-modern {
  display: none !important;
}

.near-popup {
  background: #2776F5;
  color: #ffffff;
  border-radius: 12px;
  padding: 10px;
  font-family: Poppins, sans-serif;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
  max-width: 260px;
}

.near-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.near-stop-title {
  font-size: 13px;
  margin-bottom: 6px;
}

.near-row {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
}

.near-line-label {
  color: #FFFFFF;
}

.near-destination {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 500;
}

.maplibregl-popup-content {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.maplibregl-popup-tip {
  display: none !important;
}

/* ── Hide default close buttons (replaced by .near-close) ───────────── */
.maplibregl-popup-close-button,
.leaflet-popup-close-button {
  display: none !important;
}

/* ── Strip Leaflet popup wrapper so .near-popup / .station-popup show clean ── */
.leaflet-popup-content-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.leaflet-popup-tip-container {
  display: none !important;
}

/* ── Custom close button ─────────────────────────────────────────────── */
.near-popup,
.station-popup,
.veh-popup {
  position: relative;
}

.near-close {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: #555;
  opacity: 0.8;
  transition: opacity 0.2s, transform 0.2s;
  user-select: none;
}

.near-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

.near-popup .near-close {
  color: white;
}

@media (max-width: 900px) {
  .maplibregl-ctrl-top-right {
    top: auto !important;
    bottom: 120px !important;
  }
}

/* ── Mobile browser bottom chrome — all bottom controls track --mobile-browser-bottom-offset
   calc(62px + offset): 62 = linie-header fixed content height (46px) + 16px clearance gap.
   At offset=18px (floor): 80px total → matches APK legend position exactly.
   body.mobile-browser is JS-gated; never fires on APK, iOS WKWebView, or desktop. ── */
@media (max-width: 1023px) {
  body.mobile-browser .map-legend.accordion {
    bottom: calc(90px + var(--mobile-browser-bottom-offset, 18px)) !important;
  }

  body.mobile-browser .locate-btn {
    bottom: calc(100px + var(--mobile-browser-bottom-offset, 18px));
  }
}
/* Desktop narrow viewport: pointer:fine / hover:hover = mouse = desktop Chrome.
   body.mobile-browser incorrectly fires here; reset both controls to their base
   positions. Real mobile has pointer:coarse so this block never matches there. */
@media (max-width: 1023px) and (hover: hover) and (pointer: fine) {
  body.mobile-browser .map-legend.accordion {
    bottom: 70px !important;
  }
  body.mobile-browser .locate-btn {
    bottom: 80px;
  }
}

/* ── Mobile visual surface: direction-toggle premium upgrade ───────────────
   Scoped to ≤1023px so the desktop appearance is completely unaffected.    */
@media (max-width: 1023px) {

  .direction-toggle {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow: 0 4px 22px rgba(0,0,0,0.45), 0 1px 5px rgba(0,0,0,0.18);
  }

  .direction-toggle .switch {
    background: rgba(18, 24, 55, 0.88);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.48);
  }

  .direction-toggle .switch .circle {
    box-shadow: 0 2px 8px rgba(0,0,0,0.38), 0 1px 3px rgba(0,0,0,0.14);
  }

  .direction-toggle label.active {
    color: #111;
  }

  .direction-toggle label.inactive {
    color: rgba(0,0,0,0.40);
  }

}

/* ── Mobile station popup: navy/glass redesign ───────────────────────────────
   Scoped to ≤1023px — desktop blue card is completely unaffected.            */
@media (max-width: 1023px) {

  .station-popup {
    background: linear-gradient(160deg, rgba(8,14,42,0.97) 0%, rgba(3,8,24,0.99) 100%);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.58), 0 2px 8px rgba(0,0,0,0.28);
  }

  /* Close button: base rule uses #555 (designed for light cards) — override to white */
  .station-popup .near-close {
    color: rgba(255,255,255,0.50);
  }

  /* Station ID: slightly more muted on dark surface */
  .station-popup .sp-id {
    color: rgba(255,255,255,0.45);
  }

  /* "No arrivals" state: yellow accent instead of plain white */
  .station-popup .sp-empty {
    color: rgba(255,215,0,0.82);
  }

  /* Favorites divider: match darker border language */
  .station-popup .sp-fav {
    border-top-color: rgba(255,255,255,0.10);
  }

  /* Spinner: base rule uses dark colors designed for bright blue bg — invert for navy */
  .station-popup .spinner {
    border-color: rgba(255,255,255,0.15);
    border-top-color: rgba(255,255,255,0.82);
  }

  /* Vehicle info card — base is white; override for dark-default mobile/tablet */
  .veh-popup {
    background: linear-gradient(160deg, rgba(8,14,42,0.97) 0%, rgba(3,8,24,0.99) 100%);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.58), 0 2px 8px rgba(0,0,0,0.28);
    color: rgba(255,255,255,0.92);
  }
  .veh-popup .near-close {
    color: rgba(255,255,255,0.50);
  }
  .veh-popup .veh-header {
    color: rgba(255,255,255,0.90);
    border-bottom-color: rgba(255,255,255,0.10);
  }
  .veh-popup .veh-id {
    color: rgba(255,255,255,0.45);
  }
  .veh-popup .veh-sub {
    color: rgba(255,255,255,0.55);
  }
  .veh-popup .veh-row {
    color: rgba(255,255,255,0.80);
    border-top-color: rgba(255,255,255,0.07);
  }

  /* Vehicle label tooltip — base is white; override for dark-default mobile/tablet */
  .vehicle-popup {
    background: linear-gradient(160deg, rgba(8,14,42,0.97) 0%, rgba(3,8,24,0.99) 100%);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.92);
  }
  .vehicle-popup::after {
    border-top-color: rgba(3,8,24,0.99);
  }

}

/* ── Desktop visual style: theme-aware (colours via CSS variables) ──────────
   Visual properties only — zero layout, size, or spacing changes.
   All tokens defined in theme.css; dark = :root defaults, light = overrides.
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {

  /* Direction toggle pill */
  .direction-toggle {
    background: var(--dtoggle-bg);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
    border: 1px solid var(--border-mid);
    box-shadow: var(--shadow-panel);
  }
  .direction-toggle label.active {
    color: var(--dtoggle-active);
  }
  .direction-toggle label.inactive {
    color: var(--dtoggle-inactive);
  }
  .direction-toggle .switch {
    background: var(--dtoggle-track);
    box-shadow: var(--dtoggle-inset);
  }
  .direction-toggle .switch .circle {
    box-shadow: 0 2px 8px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.16);
  }

  /* Station stop popup */
  .station-popup {
    background: var(--panel-overlay);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
    border: 1px solid var(--border-mid);
    box-shadow: var(--shadow-popup-lg);
  }
  .station-popup .near-close {
    color: var(--popup-close);
  }
  .station-popup .sp-id {
    color: var(--popup-id);
  }
  .station-popup .sp-empty {
    color: var(--popup-empty);
  }
  .station-popup .sp-fav {
    border-top-color: var(--popup-sep);
  }
  .station-popup .spinner {
    border-color: var(--spinner-track);
    border-top-color: var(--spinner-head);
  }

  /* Station popup: Desktop Light Theme text overrides (background already white via --panel-overlay) */
  [data-theme="light"] .station-popup                           { color: #1D2433 !important; }
  [data-theme="light"] .station-popup .sp-name                  { color: #1D2433 !important; }
  [data-theme="light"] .station-popup .sp-time                  { color: #1D2433 !important; }
  [data-theme="light"] .station-popup .sp-arrives               { color: rgba(29,36,51,0.65) !important; }
  [data-theme="light"] .station-popup .sp-row                   { border-bottom-color: rgba(0,0,0,0.07) !important; }
  [data-theme="light"] .station-popup .sp-line                  { background: rgba(0,0,0,0.07) !important; color: #1D2433 !important; }
  [data-theme="light"] .station-popup .tooltip-line             { color: #1D2433 !important; border-top-color: rgba(0,0,0,0.07) !important; }
  [data-theme="light"] .station-popup .tooltip-line strong      { color: #1D2433 !important; }
  [data-theme="light"] .station-popup .line-link                { color: #1D2433 !important; }
  [data-theme="light"] .station-popup .line-link:hover          { color: rgba(29,36,51,0.70) !important; }

  /* User GPS location popup */
  .user-popup {
    background: var(--panel-overlay);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
    border: 1px solid var(--border-mid);
    box-shadow: var(--shadow-popup);
    color: var(--text-primary);
  }

  /* Leaflet zoom controls */
  .leaflet-control-zoom.leaflet-bar {
    background: var(--zoom-bg) !important;
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
    border: 1px solid var(--zoom-border) !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: var(--shadow-zoom) !important;
  }
  .leaflet-control-zoom.leaflet-bar a,
  .leaflet-control-zoom.leaflet-bar a:hover {
    background: transparent !important;
    color: var(--zoom-color) !important;
    border-bottom-color: var(--zoom-sep) !important;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .leaflet-control-zoom.leaflet-bar a:hover {
    background: var(--zoom-hover-bg) !important;
    color: var(--accent) !important;
  }
  .leaflet-control-zoom.leaflet-bar a.leaflet-disabled {
    background: transparent !important;
    color: var(--zoom-disabled) !important;
  }

  /* Vehicle markers — premium shadow + subtle blue glow */
  .vehicle-marker {
    border-color: rgba(31,115,190,0.88);
    box-shadow: 0 3px 10px rgba(0,0,0,0.55),
                0 0 0 1.5px rgba(255,255,255,0.18),
                0 0 10px rgba(31,115,190,0.25);
  }

  /* Vehicle info popup */
  .veh-popup {
    background: var(--panel-overlay);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
    border: 1px solid var(--border-mid);
    box-shadow: var(--shadow-popup);
    color: var(--text-primary);
  }
  .veh-popup .veh-header {
    border-bottom-color: var(--popup-sep);
    color: var(--text-heading);
  }
  .veh-popup .veh-id {
    color: var(--popup-veh-id);
  }
  .veh-popup .veh-sub {
    color: var(--popup-veh-sub);
  }
  .veh-popup .veh-row {
    border-top-color: var(--popup-row-border);
    color: var(--popup-row-color);
  }

  /* Leaflet tooltip vehicle popup */
  .vehicle-popup {
    background: var(--panel-overlay);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
    border: 1px solid var(--border-mid) !important;
    box-shadow: var(--shadow-popup) !important;
    color: var(--text-primary);
  }
  .vehicle-popup::before {
    border-top-color: var(--vehicle-popup-arrow) !important;
  }

  /* Nearby arrivals popup */
  .near-popup {
    background: var(--panel-overlay);
    backdrop-filter: var(--glass);
    -webkit-backdrop-filter: var(--glass);
    border: 1px solid var(--border-mid);
    box-shadow: var(--shadow-popup);
    color: var(--text-primary);
  }
  .near-popup .near-row {
    border-top-color: var(--popup-row-border);
  }
  .near-popup .near-line {
    color: var(--text-primary);
  }

  /* Map tile softening for light theme */
  [data-theme="light"] .maplibregl-canvas {
    filter: brightness(0.97) contrast(0.95) saturate(0.90);
  }
  [data-theme="light"] .leaflet-tile-pane {
    filter: brightness(0.97) contrast(0.95) saturate(0.90);
  }

}

/* ── Mobile/tablet Light Theme: floating overlays match Desktop Light Theme ──
   Scoped to max-width:1023px + [data-theme="light"].
   Desktop light theme (@media min-width:1024px above) is completely unaffected.
   Dark theme is completely unaffected.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {

  /* ── Toolbar pill ── */
  [data-theme="light"] .map-toolbar-mobile {
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    border-color: rgba(0,0,0,0.09) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.05) !important;
  }
  [data-theme="light"] .map-toolbar-mobile button {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.09) !important;
  }
  [data-theme="light"] .map-toolbar-mobile button:hover {
    background: #FFD700 !important;
    border-color: rgba(255,215,0,0.55) !important;
    box-shadow: 0 0 12px rgba(255,215,0,0.28), 0 2px 6px rgba(0,0,0,0.10) !important;
  }
  [data-theme="light"] .map-toolbar-mobile button.active {
    background: rgba(255,215,0,0.22) !important;
    border-color: rgba(255,215,0,0.50) !important;
    box-shadow: 0 0 0 1.5px rgba(255,215,0,0.40), 0 2px 8px rgba(0,0,0,0.10) !important;
  }

  /* ── Toolbar line-selector dropdown ── */
  [data-theme="light"] .toolbar-dropdown-mobile {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(0,0,0,0.09) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.11), 0 2px 8px rgba(0,0,0,0.05) !important;
  }
  [data-theme="light"] .toolbar-dropdown-mobile .dropdown-item {
    color: #1D2433 !important;
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.09) !important;
  }
  [data-theme="light"] .toolbar-dropdown-mobile .dropdown-item:hover {
    background: rgba(255,193,7,0.12) !important;
    color: #1D2433 !important;
    border-color: rgba(255,193,7,0.40) !important;
    box-shadow: 0 3px 10px rgba(255,193,7,0.18) !important;
  }

  /* ── Tur/Retur direction toggle ── */
  [data-theme="light"] .direction-toggle {
    background: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.05) !important;
  }
  [data-theme="light"] .direction-toggle label.active {
    color: #1D2433 !important;
  }
  [data-theme="light"] .direction-toggle label.inactive {
    color: rgba(29,36,51,0.40) !important;
  }
  [data-theme="light"] .direction-toggle .switch {
    background: rgba(0,0,0,0.12) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.12) !important;
  }

  /* ── Station stop popup — base blue/dark-navy on mobile → light ── */
  [data-theme="light"] .station-popup {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0,0,0,0.09) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06) !important;
    color: #1D2433 !important;
  }
  [data-theme="light"] .station-popup .sp-name,
  [data-theme="light"] .station-popup .sp-time  { color: #1D2433 !important; }
  [data-theme="light"] .station-popup .sp-id    { color: rgba(29,36,51,0.45) !important; }
  [data-theme="light"] .station-popup .sp-empty { color: #A07820 !important; }
  [data-theme="light"] .station-popup .sp-arrives { color: rgba(29,36,51,0.65) !important; }
  [data-theme="light"] .station-popup .sp-row { border-bottom-color: rgba(0,0,0,0.07) !important; }
  [data-theme="light"] .station-popup .sp-line {
    background: rgba(0,0,0,0.07) !important;
    color: #1D2433 !important;
  }
  [data-theme="light"] .station-popup .sp-fav { border-top-color: rgba(0,0,0,0.08) !important; }
  [data-theme="light"] .station-popup .sp-fav-btn {
    background: rgba(0,0,0,0.06) !important;
    border-color: rgba(0,0,0,0.14) !important;
    color: #1D2433 !important;
  }
  [data-theme="light"] .station-popup .near-close { color: rgba(29,36,51,0.45) !important; }
  [data-theme="light"] .station-popup .spinner {
    border-color: rgba(0,0,0,0.10) !important;
    border-top-color: rgba(29,36,51,0.70) !important;
  }
  [data-theme="light"] .station-popup .tooltip-line {
    color: #1D2433 !important;
    border-top-color: rgba(0,0,0,0.08) !important;
  }
  [data-theme="light"] .station-popup .tooltip-line strong { color: #1D2433 !important; }
  [data-theme="light"] .station-popup .line-link { color: #1D2433 !important; }

  /* ── Vehicle label tooltip (Leaflet) — base is white, restore/confirm ── */
  [data-theme="light"] .vehicle-popup {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.05) !important;
    color: #1D2433 !important;
  }
  [data-theme="light"] .vehicle-popup::after { border-top-color: #FFFFFF !important; }

  /* ── Vehicle info card — base is white, restore/confirm ── */
  [data-theme="light"] .veh-popup {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0,0,0,0.09) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.11), 0 2px 6px rgba(0,0,0,0.05) !important;
    color: #1D2433 !important;
  }
  [data-theme="light"] .veh-popup .veh-header {
    color: #1D2433 !important;
    border-bottom-color: rgba(0,0,0,0.07) !important;
  }
  [data-theme="light"] .veh-popup .veh-id  { color: rgba(29,36,51,0.45) !important; }
  [data-theme="light"] .veh-popup .veh-sub { color: rgba(29,36,51,0.55) !important; }
  [data-theme="light"] .veh-popup .veh-row {
    color: rgba(29,36,51,0.80) !important;
    border-top-color: rgba(0,0,0,0.06) !important;
  }

  /* ── User GPS location popup — restore/confirm white ── */
  [data-theme="light"] .user-popup {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0,0,0,0.09) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.11), 0 2px 6px rgba(0,0,0,0.05) !important;
    color: #1D2433 !important;
  }

  /* ── Nearby arrivals popup — base is blue (#2776F5) → light ── */
  [data-theme="light"] .near-popup {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0,0,0,0.09) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.05) !important;
    color: #1D2433 !important;
  }
  [data-theme="light"] .near-popup .near-row,
  [data-theme="light"] .leaflet-popup .near-popup .near-row {
    border-top-color: rgba(0,0,0,0.07) !important;
  }
  [data-theme="light"] .near-popup .near-line,
  [data-theme="light"] .near-popup .near-line-label { color: #1D2433 !important; }
  [data-theme="light"] .near-popup .near-title       { color: #1D2433 !important; }
  [data-theme="light"] .near-popup .near-stop-title  { color: #1D2433 !important; }
  [data-theme="light"] .near-popup .near-stop-id     { color: rgba(29,36,51,0.45) !important; }
  [data-theme="light"] .near-popup .near-close       { color: rgba(29,36,51,0.45) !important; }
  [data-theme="light"] .near-popup .near-stop-group  { border-bottom-color: rgba(0,0,0,0.07) !important; }
  [data-theme="light"] .near-popup .near-destination { color: #1D2433 !important; }

} /* END mobile/tablet light theme — light overlays */

/* ── Mobile/tablet floating theme toggle button ───────────────────────── */
.map-theme-btn {
  position: absolute;
  top: 120px;
  right: 10px;
  z-index: 10001;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--locate-bg, rgba(18,24,48,0.82));
  border: 1px solid var(--locate-border, rgba(255,255,255,0.14));
  box-shadow: var(--shadow-locate, 0 4px 16px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.30));
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.map-theme-btn:active {
  transform: scale(0.92);
}
.map-theme-btn svg {
  display: block;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .map-theme-btn {
    display: none !important;
  }
}

/* ── Mobile/tablet theme toggle — premium icon colours, glow & interactions */
/* Button is display:none on desktop (rule above); all rules here are mobile/tablet only. */
@media (max-width: 1023px) {

  /* Sun disc and rays — warm golden yellow */
  .map-theme-btn svg circle,
  .map-theme-btn svg line {
    stroke: #FFC40C;
  }

  /* Crescent moon — premium violet */
  .map-theme-btn svg path {
    stroke: #A855F7;
  }

  /* Smooth transitions for all interactive properties */
  .map-theme-btn {
    transition: background  0.25s ease,
                box-shadow  0.25s ease,
                border-color 0.25s ease,
                transform   0.15s ease;
  }

  .map-theme-btn svg {
    transition: filter 0.25s ease;
  }

  /* Hover: subtle lift — pointer devices and tablets */
  .map-theme-btn:hover {
    transform: translateY(-1px);
  }

  /* Tap / active — overrides hover in source order so scale wins on press */
  .map-theme-btn:active {
    transform: scale(0.94);
  }

  /* ── Dark mode / default (SUN is shown) ──────────────────────────────── */
  .map-theme-btn,
  [data-theme="dark"] .map-theme-btn {
    border-color: rgba(255, 196, 12, 0.35);
    box-shadow:
      0 0 0 1.5px rgba(255, 196, 12, 0.12),   /* fine outer ring */
      0 6px 20px  rgba(0, 0, 0, 0.52),          /* depth */
      0 2px 6px   rgba(0, 0, 0, 0.34),
      0 0 24px    rgba(255, 196, 12, 0.22);     /* warm ambient glow */
  }

  /* Sun icon drop-shadow */
  .map-theme-btn svg,
  [data-theme="dark"] .map-theme-btn svg {
    filter: drop-shadow(0 0 6px rgba(255, 196, 12, 0.78));
  }

  /* ── Light mode (MOON is shown) ──────────────────────────────────────── */
  [data-theme="light"] .map-theme-btn {
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow:
      0 0 0 1.5px rgba(139, 92, 246, 0.16),   /* fine outer ring */
      0 6px 20px  rgba(0, 0, 0, 0.13),          /* soft depth */
      0 2px 6px   rgba(0, 0, 0, 0.08),
      0 0 24px    rgba(139, 92, 246, 0.22);    /* violet ambient glow */
  }

  /* Moon icon drop-shadow */
  [data-theme="light"] .map-theme-btn svg {
    filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.72));
  }

}

/* Map tile theming is handled via MapLibre style switching (style-light.json / style-dark.json).
   No CSS filter on .maplibregl-canvas — that would affect routes, stations, and vehicles too. */

/* ── Route Variant Selector ─────────────────────────────────────────────── */
.route-variant-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.route-variant-modal {
  position: relative;
  background: var(--panel-bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 460px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow-lg);
  animation: variant-modal-in 0.2s ease;
}

@keyframes variant-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.route-variant-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--text-secondary);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.route-variant-close:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-color);
}

.route-variant-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 6px;
  padding-right: 32px;
  font-family: 'Poppins', sans-serif;
}

.route-variant-subtitle {
  font-size: 0.83rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
  font-family: 'Poppins', sans-serif;
}

.route-variant-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.route-variant-btn {
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--btn-color);
  border-radius: 10px;
  padding: 13px 16px;
  text-align: left;
  font-size: 0.90rem;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  line-height: 1.45;
}

.route-variant-btn:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-color);
  box-shadow: var(--btn-hover-shadow);
}

.route-variant-btn.selected {
  background: var(--btn-active-bg);
  border-color: var(--btn-active-border);
  color: #000;
  box-shadow: var(--btn-active-shadow);
}

/* Mobile: slide up from bottom */
@media (max-width: 768px) {
  .route-variant-overlay {
    align-items: flex-end;
  }

  .route-variant-modal {
    max-width: 100%;
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    animation: variant-sheet-in 0.25s ease;
  }

  @keyframes variant-sheet-in {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Variant label shown below the line badge in the sidebar header */
.variant-label-badge {
  font-size: 0.70rem;
  color: var(--text-secondary);
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  display: none;
}

/* Branch-aware auto-resolution transparency badge (see
   updateBranchTransparencyBadge() in map.js) -- read-only, shown only when a
   route's active direction is a genuine multi-destination branch. Same visual
   language as .variant-label-badge, just accented so it reads as "info", not
   as an editable control. */
.branch-destination-badge {
  font-size: 0.70rem;
  color: var(--btn-active-bg, #FFC107);
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Journey Planner entry point (Production Journey Planner UI — Step A)
   Additive only. Visual language copied from .locate-btn / .map-theme-btn
   (same 44px glass circle, same theme tokens) and .route-variant-overlay /
   .route-variant-modal (same overlay -> centered card -> mobile bottom sheet
   shell), under new class names so neither existing component is touched.
   ══════════════════════════════════════════════════════════════════════════ */

/* Single place to reposition the button — change these two values only.
   Chosen empirically from real rendered screenshots at desktop and mobile
   widths, not guessed from reading CSS: top:12/left:12 collided with
   .map-toolbar-mobile (near-full-width, top:12, on every width <=1023px).
   bottom-right is .map-legend.accordion (z-index 10000, all widths).
   bottom-left is .locate-btn (mobile widths only). top-right is the
   MapLibre zoom control (all widths) and .map-theme-btn (mobile only, at
   top:120/right:10). top:120/left:12 mirrors .map-theme-btn onto the left
   side, in the one vertical band that's already proven clear of the
   toolbar above it and the legend/locate-btn below it, on every width. */
/* Redesign (2026-07-05): every other floating map control (.locate-btn,
   .map-theme-btn) is a translucent "glass" circle using the same
   theme-neutral tokens -- correct for them, since they're secondary utility
   controls. This is the entry point to a whole feature, so it gets its own
   distinct, theme-specific solid fill instead of reusing --locate-bg/
   --locate-icon, via two variables scoped the same way theme.css itself
   scopes color: dark (:root, default) vs. light ([data-theme="light"]).
   Purple is not an invented brand color -- it's the exact Troleibuz line
   color already used in this app's own line legend (_LINE_COLOR_MAP in
   map.js, '#6f2095'); gold is the site's one existing accent
   (--btn-active-bg). A subtle 2-stop vertical shade (not a diagonal
   multi-stop gradient) gives it a touch of dimensionality without reading
   as flashy. */
:root {
  --journey-btn-top: 120px;
  --journey-btn-left: 12px;
}

/* Dark (default) — amber glow, mirrors .map-theme-btn dark state */
.journey-planner-btn {
  position: absolute;
  top: var(--journey-btn-top);
  left: var(--journey-btn-left);
  z-index: 1000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--locate-bg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,196,12,0.35);
  box-shadow:
    0 0 0 1.5px rgba(255,196,12,0.12),
    0 6px 20px rgba(0,0,0,0.52),
    0 2px 6px rgba(0,0,0,0.34),
    0 0 24px rgba(255,196,12,0.22);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Light — violet glow, mirrors .map-theme-btn light state */
[data-theme="light"] .journey-planner-btn {
  border-color: rgba(139,92,246,0.35);
  box-shadow:
    0 0 0 1.5px rgba(139,92,246,0.16),
    0 6px 20px rgba(0,0,0,0.13),
    0 2px 6px rgba(0,0,0,0.08),
    0 0 24px rgba(139,92,246,0.22);
}

.journey-planner-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1.5px rgba(255,196,12,0.18),
    0 10px 28px rgba(0,0,0,0.60),
    0 0 30px rgba(255,196,12,0.32);
}

[data-theme="light"] .journey-planner-btn:hover {
  box-shadow:
    0 0 0 1.5px rgba(139,92,246,0.24),
    0 10px 28px rgba(0,0,0,0.16),
    0 0 30px rgba(139,92,246,0.30);
}

.journey-planner-btn:active {
  transform: scale(.95);
}

.journey-planner-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.route-icon {
  width: 30px;
  height: 30px;
  display: block;
}

/* Icon colours — dark (default): warm amber */
.jp-route   { stroke: rgba(255,255,255,0.18); }
.jp-origin  { fill: #FFC40C; }
.jp-dest    { fill: #FFC40C; }

/* Icon colours — light: premium violet */
[data-theme="light"] .jp-route  { stroke: rgba(0,0,0,0.12); }
[data-theme="light"] .jp-origin { fill: #A855F7; }
[data-theme="light"] .jp-dest   { fill: #A855F7; }

/* ── Journey Planner: boarding/alighting labels ("Aici urci"/"Aici cobori")
   Built as maplibregl.Marker DOM elements (see JourneyRenderer._renderStopLabels
   in map.js) so readability/contrast/theming all come from these same tokens
   used everywhere else, rather than depending on vector-tile text glyphs.
   pointer-events:none so the label itself never blocks a click meant for the
   boarding/exit marker underneath it. Deliberately small/sparse -- one pair
   per transit leg, not shown on intermediate stops -- to avoid map clutter. */
.jp-stop-label {
  pointer-events: none;
  font-family: 'Poppins', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--panel-bg-deep);
  color: var(--text-primary);
  border: 1.5px solid var(--border-strong);
  box-shadow: var(--shadow-panel);
}

.jp-stop-label-board { border-color: #3b82f6; }
.jp-stop-label-exit  { border-color: #f97316; }

@media (max-width: 480px) {
  .jp-stop-label {
    font-size: 0.62rem;
    padding: 2.5px 8px;
  }
}

.journey-planner-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.journey-planner-modal {
  position: relative;
  background: var(--panel-bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 460px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow-lg);
  animation: journey-modal-in 0.2s ease;
}

@keyframes journey-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.journey-planner-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--text-secondary);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.journey-planner-close:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-color);
}

/* ── Selected-itinerary collapse ──────────────────────────────────────────
   Once a card is selected, the route is drawn on the map -- but the
   full-screen dim+blur backdrop and the large centered/bottom-sheet modal
   were exactly what blocked the user from seeing it. Collapsing shrinks the
   modal to a small floating summary and makes the backdrop transparent and
   click-through, without touching the modal's own visual language (same
   background/border/radius/shadow tokens, same .jp-itinerary-card.selected
   markup reused as the summary's content -- no new formatting logic). ───── */

.journey-planner-overlay.jp-collapsed {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none; /* clicks/pans reach the map everywhere except the compact card itself */
  align-items: flex-start;
  justify-content: flex-end;
  padding: 96px 16px 0 0;
}

.journey-planner-overlay.jp-collapsed .journey-planner-modal {
  pointer-events: auto;
  width: 300px;
  max-width: calc(100% - 32px);
  /* 46px top (was 14px): the close (X) and expand (chevron) buttons are
     absolutely positioned at top:14/right:14 and top:14/right:52, 30px each
     -- with only 14px of top padding they sat directly on top of the reused
     itinerary card's own time/duration text (which is right-aligned via
     margin-left:auto, landing in the exact same corner). This reserves a
     dedicated header strip so the card content always starts below them. */
  padding: 46px 16px 16px;
}

.journey-planner-overlay.jp-collapsed .journey-planner-title,
.journey-planner-overlay.jp-collapsed .journey-planner-subtitle,
.journey-planner-overlay.jp-collapsed .jp-fields,
.journey-planner-overlay.jp-collapsed .jp-chips,
.journey-planner-overlay.jp-collapsed #journey-planner-footer {
  display: none;
}

.journey-planner-overlay.jp-collapsed .jp-itinerary-card:not(.selected) {
  display: none;
}

.journey-planner-overlay.jp-collapsed .jp-itinerary-sequence {
  display: none;
}

/* Same idiom as .journey-planner-close (same tokens, same size, same hover
   swap) -- sits just to its left, only shown while collapsed. */
.jp-collapsed-expand {
  display: none;
  position: absolute;
  top: 14px;
  right: 52px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--text-secondary);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.jp-collapsed-expand:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-color);
}

.journey-planner-overlay.jp-collapsed .jp-collapsed-expand {
  display: flex;
}

/* Both buttons used --btn-bg (rgba(255,255,255,0.07) dark / rgba(0,0,0,0.04)
   light) -- only 4-7% opaque, so any content behind them showed straight
   through ("transparent" look). Solid background here, scoped to the
   collapsed state only so the normal full-panel close button is unaffected. */
.journey-planner-overlay.jp-collapsed .journey-planner-close,
.journey-planner-overlay.jp-collapsed .jp-collapsed-expand {
  background: var(--panel-bg-deep);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.journey-planner-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 6px;
  padding-right: 32px;
  font-family: 'Poppins', sans-serif;
}

.journey-planner-subtitle {
  font-size: 0.83rem;
  color: var(--text-secondary);
  /* 22px, not 18px — a bit more breathing room now that the Step B polish
     pass removed the "coming soon" banner that used to sit between this
     subtitle and the fields below it. */
  margin-bottom: 22px;
  font-family: 'Poppins', sans-serif;
}

/* Stable shell for future milestones: Step B (origin/destination form),
   Step C (itinerary list) populate #journey-planner-body in place — no
   restructuring of the modal itself. */
.journey-planner-body {
  min-height: 120px;
}

/* Reserved for Step C/D's "Plan Journey" action button — empty today. */
.journey-planner-footer:empty {
  display: none;
}

/* Spacing fix: the itinerary results list (#jp-results, inside
   #journey-planner-body) and this footer's Plan Journey button had zero gap
   between them -- the last card butted directly against the button. This is
   the only change for that issue; the footer's own internal layout/button are
   untouched. */
.journey-planner-footer {
  margin-top: 16px;
}

/* ── Step B: final visual layout, all controls disabled ─────────────────────
   (Step A's .journey-planner-placeholder* rules were removed here during the
   production-readiness pass, 2026-07-05 — confirmed unreferenced by any
   markup map.js still generates.) The Step B polish pass below fully
   replaces the original .jp-notice/.jp-quick-* rules rather than leaving
   them dead, since the user explicitly asked for the banner to be removed
   "completely" and for the quick actions to become a different component,
   not a restyle of the same one. */

.jp-fields {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  /* No overflow:hidden here (Step B had it, for the rounded-corner clip) --
     Step C1's suggestions dropdown needs to render below its field without
     being clipped by this card. Corner rounding moved to the two edge
     fields individually (#jp-field-origin/#jp-field-dest below) instead. */
  margin-bottom: 16px;
  box-shadow: var(--shadow-panel);
}

.jp-field {
  position: relative; /* anchors this field's .jp-suggestions dropdown */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 58px 14px 16px; /* right padding reserves room for the 44px swap button */
  background: var(--btn-bg);
}

#jp-field-origin {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

#jp-field-dest {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

.jp-field-divider {
  height: 1px;
  background: var(--border-strong);
  margin: 0 16px;
}

.jp-field-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2.5px solid #4ade80;
  box-sizing: border-box;
}

.jp-field-marker-dest {
  border-radius: 3px;
  background: #f87171;
  border-color: #f87171;
}

.jp-field-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.jp-field-label {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-family: 'Poppins', sans-serif;
}

.jp-input {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0;
  /* Graceful truncation on narrow phones instead of an abrupt hard clip
     against the swap button — found via a real 340px-wide screenshot. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jp-input::placeholder {
  color: var(--text-secondary);
  font-weight: 500;
}

.jp-input:disabled {
  cursor: not-allowed;
}

/* 44px — meets the standard mobile touch-target minimum, since this is a
   real interactive control in a later step, not permanent decoration. */
.jp-swap-btn {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel-bg-deep);
  border: 1px solid var(--btn-border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: not-allowed;
  padding: 0;
}

/* Compact chips (Google/Apple Maps style) — auto-width, pill-shaped, not
   stretched full-row like the earlier quick-action buttons. */
.jp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.jp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text-secondary);
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: not-allowed;
}

.jp-chip svg {
  flex-shrink: 0;
}

/* Redesign (2026-07-05, v2): the first pass (a diagonal 3-stop gradient +
   colored glow) read as closer to "flashy" than "premium," and per this
   round's brief the button must look like Google/Apple Maps' or
   Citymapper's primary CTA -- which are flat-color, not gradient-filled.
   Switched to a flat brand fill with layered neutral elevation shadows
   (Material-style: a tight low-blur layer + a soft wide layer) for depth
   instead of color. No gradient, no backdrop-filter/translucency, no
   bouncy/oversized motion -- hover/active are a 1px lift and a slight
   scale-down, nothing more. Kept as plain text -- NOT a text+icon composite
   -- because onPlanJourney()'s loading state (`planBtn.textContent = 'Se
   caută trasee...'`, restored the same way afterward) mutates this button's
   textContent directly; any child element would be silently destroyed the
   first time a search runs. Only 4 selectors total (base + 3 states), same
   as before -- no new/duplicate rules. */
.jp-plan-btn {
  width: 100%;
  min-height: 52px; /* up from 48px -- a firmer mobile touch target */
  padding: 14px 20px;
  border: none;
  border-radius: 16px;
  background: var(--btn-active-bg);
  color: #000;
  opacity: 0.45;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.01em;
  cursor: not-allowed;
  box-shadow: none; /* disabled reads as flat/resting, not raised -- part of "beautiful disabled state" */
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease, filter 0.2s ease;
}

/* ── Step C1: stop search dropdown ───────────────────────────────────────────
   Reuses the same tokens as the modal/route-variant shell (--panel-bg-deep,
   --border-strong, --shadow-lg, --btn-hover-bg) -- no new visual style
   introduced, per this milestone's explicit "no new visual style" scope. */

.jp-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 6px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--panel-bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
}

.jp-suggestion-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

.jp-suggestion-item:hover,
.jp-suggestion-item:focus {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-color);
}

/* ── Grouped stop suggestions: a second, muted line listing every route
   serving the merged location -- same two-tier "primary label + secondary
   meta line" pattern .jp-itinerary-meta already uses for itinerary cards,
   not a new visual language. --btn-hover-bg is a light amber; --text-secondary/
   --text-muted are semi-transparent white in dark theme, which would read as
   low-contrast against it, so the hover/focus rule below darkens both to the
   same --btn-hover-color the row's own name text switches to -- the same
   fix .jp-itinerary-card.selected already applies to .jp-itinerary-meta. ─── */

.jp-suggestion-routes {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.jp-suggestion-disambig {
  font-weight: 400;
  color: var(--text-muted);
}

.jp-suggestion-item:hover .jp-suggestion-routes,
.jp-suggestion-item:focus .jp-suggestion-routes,
.jp-suggestion-item:hover .jp-suggestion-disambig,
.jp-suggestion-item:focus .jp-suggestion-disambig {
  color: var(--btn-hover-color);
  opacity: 0.75;
}

/* ── Step C2: enabled-state feedback for controls Step B already designed
   for interactivity but left permanently disabled. Not a redesign -- the
   hover/opacity states below use the exact tokens sibling controls already
   use (.jp-suggestion-item, .route-variant-btn); this just turns them on
   now that the controls actually do something. ────────────────────────── */

.jp-swap-btn:not(:disabled) {
  cursor: pointer;
}
.jp-swap-btn:not(:disabled):hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-color);
}
.jp-swap-btn:not(:disabled):active {
  transform: translateY(-50%) scale(0.92);
}

.jp-chip:not(:disabled) {
  cursor: pointer;
}
.jp-chip:not(:disabled):hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-color);
}

/* "Resetează traseul" (2026-07-09) -- full-width like .jp-plan-btn below it
   (same visual rhythm/footprint), but built from the same secondary-action
   tokens as .jp-chip/.jp-pin-confirm-cancel/.journey-planner-close
   (--btn-bg/--btn-border/--text-secondary) instead of the primary amber
   fill, so it reads as clearly secondary/less prominent than "Planifică
   traseul". No disabled state -- unlike Plan Journey, resetting is always a
   valid action regardless of what's currently selected. */
.jp-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--btn-border);
  border-radius: 14px;
  background: var(--btn-bg);
  color: var(--text-secondary);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.jp-reset-btn:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-color);
}
.jp-reset-btn:active {
  transform: scale(0.985);
}

.jp-plan-btn:not(:disabled) {
  opacity: 1;
  cursor: pointer;
  /* Two-layer neutral elevation (tight+soft), not a colored glow -- reads as
     "raised surface", the same visual grammar as .jp-fields'
     --shadow-panel, just stronger since this is the primary action. */
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 6px 16px rgba(0,0,0,0.18);
}
.jp-plan-btn:not(:disabled):hover {
  filter: brightness(1.05);
  box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 10px 22px rgba(0,0,0,0.22);
  transform: translateY(-1px);
}
.jp-plan-btn:not(:disabled):active {
  filter: brightness(0.96);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transform: translateY(0) scale(0.985);
  transition-duration: 0.08s;
}

/* ── Step C2: toast for friendly, non-blocking messages (geolocation denied,
   no nearby stop found, "connected in a future milestone"). Same visual
   language as the existing .fav-toast component, but that one is
   display:none outside the native apps -- this needs to work on all four
   target surfaces, so it's its own element rather than a reuse. ────────── */
.jp-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  background: rgba(30, 30, 30, 0.92);
  color: #fff;
  font-size: 13px;
  font-family: 'Poppins', sans-serif;
  padding: 10px 18px;
  border-radius: 20px;
  z-index: 10200; /* above .journey-planner-overlay (10100) */
  text-align: center;
  pointer-events: none;
  animation: jp-toast-in 0.18s ease, jp-toast-out 0.3s ease 2.7s forwards;
}

@keyframes jp-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes jp-toast-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Map-pin destination marker ("Alege destinația pe hartă") ────────────
   A maplibregl.Marker DOM element (see JourneyRenderer._updateDestinationMarker
   in map.js), not a GL circle layer -- same technique already used for the
   GPS-origin ".user-marker". Deliberately red (matches the site's existing
   green-origin/red-destination convention already used in .jp-field-marker),
   which is distinct from both the boarding marker (blue ring) and the exit
   marker (orange teardrop) -- no color collision with either. pointer-events:
   none since it's purely visual and must never intercept a map click meant
   for something underneath it. */
.jp-map-pin-marker {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45));
  pointer-events: none;
}

.jp-map-pin-inner {
  width: 100%;
  height: 100%;
  animation: jpMapPinDrop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes jpMapPinDrop {
  0%   { transform: translateY(-18px) scale(0.6); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ── "Center pin" picker, origin + destination (2026-07-05, unified for both
   targets 2026-07-09) ────────────────────────────────────────────────────
   Same hollow-pin glyph as .jp-map-pin-marker above -- for destination this
   IS that same marker, mid-placement (visual continuity); origin never had
   a static post-pick equivalent, so its green pin here is the same shape in
   its own color, not a continuity match to another element. Color itself is
   set inline per-target via the SVG `fill` (see JP_PIN_PICKER_CONFIG in
   map.js), not here. A gentle breathing pulse is added on top -- a
   lightweight cue that this pin is still adjustable/not yet confirmed,
   distinct from the static marker shown once a journey is actually drawn.
   pointer-events left enabled (unlike .jp-map-pin-marker) since this one
   must itself be draggable.

   IMPORTANT: the pulse animation is on .jp-pin-picker-inner (a CHILD of the
   actual marker element), never on .jp-pin-picker-marker itself. MapLibre
   positions the marker root via its own inline `transform` -- an `infinite`
   animation that also sets `transform` on that same element would fight it
   forever and visibly mis-place the pin (confirmed live: it rendered stuck
   near the map's top-left corner instead of at center). Animating a child
   avoids touching the element MapLibre controls at all. */
.jp-pin-picker-marker {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45));
  cursor: grab;
}
.jp-pin-picker-marker:active { cursor: grabbing; }

.jp-pin-picker-inner {
  width: 100%;
  height: 100%;
  animation: jpPinPickerPulse 1.6s ease-in-out infinite;
}

@keyframes jpPinPickerPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Floating confirm/cancel control for the center-pin picker, shared by both
   origin and destination (only the label/button text differs, set inline --
   see JP_PIN_PICKER_CONFIG in map.js). Bottom-anchored -- keeps it
   thumb-reachable on mobile and clear of the pin sitting at screen center.
   Bottom offset clears whatever bottom chrome is on screen: the in-flow
   .main-footer on desktop (>=1024px, see styleindex.css), or the fixed
   .linie-header bottom sheet on mobile/tablet (<=1023px, overridden below). */
.jp-pin-confirm-bar {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10050;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  background: var(--panel-bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 14px 16px;
  font-family: 'Poppins', sans-serif;
}

@media (max-width: 1023px) {
  /* Clear the fixed .linie-header bottom sheet (styleindex.css) instead of the
     hidden footer. --mobile-browser-bottom-offset is the same chrome-aware
     offset .linie-header itself uses -- falls back to 0 outside real mobile
     browsers (APK/iOS app), where the sheet sits flush at bottom:0.
     --jp-linie-header-height approximates the sheet's own rendered height. */
  .jp-pin-confirm-bar {
    bottom: calc(var(--mobile-browser-bottom-offset, 0px) + var(--jp-linie-header-height, 96px) + 16px);
  }
}

.jp-pin-confirm-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
}

.jp-pin-confirm-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.jp-pin-confirm-cancel,
.jp-pin-confirm-set {
  flex: 1;
  border-radius: 999px;
  padding: 12px 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px; /* real mobile touch target */
  white-space: nowrap;
}

.jp-pin-confirm-cancel {
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text-secondary);
}
.jp-pin-confirm-cancel:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-color);
}

.jp-pin-confirm-set {
  border: 1px solid var(--btn-active-border);
  background: var(--btn-active-bg);
  color: #000;
  box-shadow: 0 2px 8px rgba(255,193,7,0.35);
}
.jp-pin-confirm-set:hover {
  filter: brightness(1.05);
}
.jp-pin-confirm-set:active {
  transform: scale(0.97);
}

/* ── Step C3: itinerary results -- same card/scroll conventions already used
   by .jp-suggestions (max-height + overflow-y:auto, panel-bg/border/shadow
   tokens), no new visual language introduced. ──────────────────────────── */

.jp-results {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.jp-itinerary-card {
  background: var(--btn-bg);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
}

.jp-itinerary-card:hover {
  border-color: var(--btn-hover-border);
}

/* Step D: same selected-state tokens as .route-variant-btn.selected -- this
   is the same "pick one of several options" pattern already established for
   the M22 branch selector, reused for consistency rather than inventing a
   new "selected" visual language. */
.jp-itinerary-card.selected {
  background: var(--btn-active-bg);
  border-color: var(--btn-active-border);
  color: #000;
  box-shadow: var(--btn-active-shadow);
}

.jp-itinerary-card.selected .jp-itinerary-duration,
.jp-itinerary-card.selected .jp-itinerary-meta,
.jp-itinerary-card.selected .jp-itinerary-sequence,
.jp-itinerary-card.selected .jp-itinerary-arrow {
  color: #04121f;
}

.jp-itinerary-times {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.jp-itinerary-time {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.jp-itinerary-arrow {
  color: var(--text-muted);
}

.jp-itinerary-duration {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.jp-itinerary-lines {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.jp-line-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--btn-active-bg);
  color: #000;
}

.jp-line-badge-walk {
  background: var(--btn-bg-alt);
  color: var(--text-secondary);
  font-weight: 500;
}

.jp-itinerary-accessible {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ok, #4ade80);
}

.jp-itinerary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.jp-itinerary-sequence {
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* Journey Planner UX refinement (2026-07-05): a plain explanation for why an
   itinerary ends with a long walk -- presentation only, see
   _jpComputeWalkProfile() in map.js. Deliberately no scoring/tiering exists
   in this layer; this is the only extra thing shown, and only when the final
   walk is long enough to need explaining. Fully neutral tone throughout --
   no red, no amber, nothing that reads as a warning or a judgment. */
.jp-itinerary-info {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.jp-itinerary-info-icon {
  color: var(--text-muted);
}

.jp-itinerary-card.selected .jp-itinerary-info,
.jp-itinerary-card.selected .jp-itinerary-info-icon {
  color: #04121f;
}

.jp-itinerary-message {
  padding: 14px 4px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Mobile: slide up from bottom — same convention as .route-variant-overlay. */
@media (max-width: 768px) {
  .journey-planner-overlay {
    align-items: flex-end;
  }

  .journey-planner-modal {
    max-width: 100%;
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    animation: journey-sheet-in 0.25s ease;
  }

  @keyframes journey-sheet-in {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: none; }
  }

  /* Collapsed on mobile: shrink the bottom sheet to a compact handle/card
     instead of floating it in a corner (no room for that on a narrow
     screen) -- same bottom-anchored position, just far shorter, with the
     map visible above it. */
  .journey-planner-overlay.jp-collapsed {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  .journey-planner-overlay.jp-collapsed .journey-planner-modal {
    width: 100%;
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* Same 46px top-clearance fix as the desktop rule above. */
    padding: 46px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Desktop: Journey Planner docked permanently open, in place of
   journey-planner-btn (2026-07-08; flush-with-top refinement 2026-07-09) ──
   >=1024px matches this app's own existing desktop breakpoint (see the
   .map-toolbar-mobile / topbar switch earlier in this file) -- reused as-is,
   per explicit instruction not to introduce a new one. Below this width
   (mobile + tablet) nothing here applies; .journey-planner-btn and the
   floating/bottom-sheet overlay behave exactly as before.

   .jp-desktop-docked is only ever added by openJourneyPlanner() in map.js
   when it runs at a desktop width (isDesktopJourneyLayout()), and only when
   the overlay is built -- so this class and the width query always agree in
   practice; the width query is kept as the actual gate (matching the
   convention everywhere else in this file) with the class adding the extra
   specificity needed to override the base overlay/modal rules above. */
@media (min-width: 1024px) {
  .journey-planner-btn {
    display: none;
  }

  /* Same container the button used to live in (map.getContainer(), see
     map.js). Left inset still reuses --journey-btn-left (the button's own
     horizontal anchor, unchanged) -- but the top inset is 0, not
     --journey-btn-top: the button's floating position (120px down, clear of
     the toolbar above it) doesn't apply to a panel meant to read as part of
     the map itself, per explicit request to remove that gap and sit flush
     with the map's top-left corner instead. inset:0 + flex + padding
     (instead of top/left on the modal itself) keeps the modal's own
     width/height auto-sizing untouched. No dark backdrop, no click-through
     blocking -- pointer-events:none here lets every map interaction outside
     the panel's own box reach the map exactly as if the overlay weren't
     there. */
  .journey-planner-overlay.jp-desktop-docked {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 0 0 var(--journey-btn-left);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
  }

  .journey-planner-overlay.jp-desktop-docked .journey-planner-modal {
    pointer-events: auto;
    width: 380px;
    max-width: calc(100% - var(--journey-btn-left) * 2);
    /* The map card (.linie-transport) this is nested in clips overflow at
       its own rounded corners (same rule that clips the map tiles) -- rather
       than fight that, size to it explicitly: 100% here is .linie-transport's
       own height, so this always leaves 16px of clearance below (the panel
       now starts flush with the top, so no top term here anymore) on any
       window size, with the existing .jp-results scroll (map-style.css
       above) handling long itinerary lists first and this as a second,
       whole-panel safety net for short/tall windows. */
    max-height: calc(100% - 16px);
    overflow-y: auto;
    /* Already visible on first paint, not opened on demand -- the pop-in
       used by the on-demand modal (journey-modal-in) would just be a
       pointless flash here. */
    animation: none;
  }

  /* No journey-planner-btn exists to reopen a closed panel with on desktop --
     closing would be a dead end, so the affordance is removed. The
     itinerary-selected collapse below is a distinct, self-reversing
     interaction (its own re-expand chevron) and is left fully intact. */
  .journey-planner-overlay.jp-desktop-docked .journey-planner-close {
    display: none;
  }

  /* Collapsed (an itinerary is selected and drawn on the map) reuses the
     exact same compact-card markup/rules as mobile/tablet (see the base
     .jp-collapsed rules above) -- only the anchor corner changes here, to
     match the docked panel's own flush top-left position instead of the
     floating modal's default top-right collapse corner. Same top:0/left
     inset as the expanded state above, so collapsing never shifts the
     panel's anchor point, only its size. */
  .journey-planner-overlay.jp-desktop-docked.jp-collapsed {
    justify-content: flex-start;
    padding: 0 0 0 var(--journey-btn-left);
  }
}