.lojic-bikeway-control {
  margin: 14px !important;
  width: 184px;
  border: 1px solid rgba(23,24,22,.2);
  background: rgba(242,239,232,.94);
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  color: #171816;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.lojic-bikeway-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.lojic-bikeway-toggle:hover { background: rgba(255,255,255,.45); }
.lojic-bikeway-toggle:focus-visible { outline: 2px solid #171816; outline-offset: 2px; }
.lojic-bikeway-toggle strong { display:block; font-size: 11px; line-height: 1.15; }
.lojic-bikeway-toggle small { display:block; margin-top:2px; color:#6d6d65; font-size:9px; line-height:1.2; letter-spacing:.02em; }
.lojic-bikeway-icon { position:relative; width:27px; height:18px; opacity:.9; }
.lojic-bikeway-icon::before,
.lojic-bikeway-icon::after { content:""; position:absolute; top:7px; width:8px; height:8px; border:2px solid #2e8178; border-radius:50%; }
.lojic-bikeway-icon::before { left:0; }
.lojic-bikeway-icon::after { right:0; }
.lojic-bikeway-icon { background:linear-gradient(145deg, transparent 45%, #2e8178 46% 54%, transparent 55%) center/15px 12px no-repeat; }
.lojic-bikeway-toggle.is-off { opacity:.58; }
.lojic-bikeway-toggle.is-off .lojic-bikeway-icon { filter:grayscale(1); }
.lojic-bikeway-legend { display:grid; gap:6px; padding:8px 10px 10px; border-top:1px solid rgba(23,24,22,.14); font-size:9px; color:#575a55; }
.lojic-bikeway-legend[hidden] { display:none; }
.lojic-bikeway-legend span { display:grid; grid-template-columns:30px 1fr; gap:7px; align-items:center; }
.lojic-bikeway-legend a { margin-top:3px; color:#575a55; text-decoration:none; font-weight:700; }
.lojic-bikeway-legend a:hover { color:#171816; text-decoration:underline; }
.lojic-legend-line { display:block; height:0; border-top-style:solid; }
.lojic-legend-protected { border-top-width:4px; border-color:#2e8178; }
.lojic-legend-lane { border-top-width:3px; border-color:#497c9d; }
.lojic-legend-shared { border-top-width:2px; border-color:#8a7655; border-top-style:dashed; }
.lojic-legend-other { border-top-width:2px; border-color:#65716d; border-top-style:dotted; }
.lojic-bikeway-tooltip { border:1px solid rgba(23,24,22,.2) !important; background:rgba(242,239,232,.96) !important; color:#171816 !important; box-shadow:0 4px 14px rgba(0,0,0,.12) !important; font-size:10px !important; line-height:1.35 !important; }
.lojic-bikeway-tooltip::before { display:none; }
.lojic-bikeway-control.has-error { border-color:rgba(169,52,33,.35); }
.lojic-bikeway-control.has-error .lojic-bikeway-toggle small { color:#a93421; }

@media (max-width:760px) {
  .lojic-bikeway-control { margin:12px !important; width:158px; }
  .lojic-bikeway-legend { display:none; }
  .lojic-bikeway-toggle { grid-template-columns:24px 1fr; padding:8px 9px; }
  .lojic-bikeway-icon { transform:scale(.85); transform-origin:left center; }
}