.bv-bus-stops {
  --gap: 12px;
  --radius: 14px;
}
.bv-title {
  margin: 0 0 8px;
  font-size: 1.4rem;
}

/* Toolbar with a single toggle */
.bv-toolbar {
  display: flex;
  gap: var(--gap);
  align-items: center;
  justify-content: flex-start;
  margin-bottom: var(--gap);
}

/* Switch-style button */
.bv-map-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e7ecf5;
  border-radius: 999px;
  padding: 6px 10px 6px 8px;
  background: #fff;
  box-shadow: --shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  font-weight: 600;
}
.bv-map-toggle .bv-label { user-select: none; }
.bv-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: #e5e7eb;
  border-radius: 999px;
  transition: background .2s ease;
}
.bv-switch-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: transform .2s ease;
}
.bv-map-toggle.is-on .bv-switch { background: #000; }
.bv-map-toggle.is-on .bv-switch-thumb { transform: translateX(20px); }

/* Layout */
.bv-views {
  display: grid;
  grid-template-columns: 1fr; /* mobile/tablet: stacked */
  gap: var(--gap);
}

/* Desktop: two columns with a wider map (tweak ratios as you like) */
@media (min-width: 1024px) {
  .bv-views {
    /* Map : List = 2 : 1 (adjust with CSS vars if desired) */
    grid-template-columns: var(--map-col, 2fr) var(--list-col, 1fr);
    align-items: start;
  }
  .bv-map { height: 520px; } /* optional slightly taller map on desktop */
}

/* When the map is hidden, make the list span full width */
@media (min-width: 1024px) {
  .bv-bus-stops.bv-map-hidden .bv-views {
    grid-template-columns: 1fr;
  }
}

/* (optional) Keep long lists contained on desktop with scroll */
@media (min-width: 1024px) {
  .bv-list {
    /* Uncomment if you want a fixed list column height with scrolling */
    max-height: 520px;
    overflow: auto;
    
  }
}
.bv-map {
  height: 500px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: #ffffff;
}

/* LIST */
.bv-list {
  display: grid;
  gap: var(--gap);
}
.bv-card {
  border: 1px solid #e7ecf5;
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  background: #fff;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}
.bv-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
.bv-bullet {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 3px;
  background: var(--primary-color);
}
.bv-city {
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
}
.bv-stopname {
  color: #334155;
  font-size: 1.3rem;
  line-height: 1.35;
  margin-top: 2px;
}
.bv-timebox { text-align: right; }
.bv-chip {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 600;
  border: 1px solid #d9dfeb;
  background: #fff;
}
.bv-pickup { border-color: #000; }

/* Print: hide map and controls, keep list tidy */
@media print {
  .bv-map, .bv-toolbar { display: none !important; }
}

/* Bigger text inside Leaflet popups (scoped to our block only) */
.bv-bus-stops .leaflet-popup-content { font-size: 1.05rem; line-height: 1.4; }
.bv-bus-stops .leaflet-popup-content strong { font-size: 1.15rem; }

/* Extra specificity (in case theme overrides) */
.bv-bus-stops .bv-city   { font-size: 1.3rem; font-weight: 700; }
.bv-bus-stops .bv-stopname { font-size: 1.1rem; }
.bv-bus-stops .bv-chip   { font-size: 1.05rem; font-weight: 600; padding: 6px 10px; }