/* Leaflet controls — Modus card styling */

.leaflet-control-zoom {
  border: 1px solid var(--color-border, #cbcdd6) !important;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(23, 26, 28, 0.12)) !important;
  border-radius: var(--radius-md, 8px) !important;
  overflow: hidden;
  background: var(--color-surface, #fff) !important;
}

.leaflet-top.leaflet-right .leaflet-control-zoom {
  margin-top: var(--space-2, 16px);
  margin-right: var(--space-2, 16px);
}

.leaflet-bar {
  border: none !important;
  box-shadow: none !important;
}

.leaflet-bar a,
.leaflet-bar a:hover {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 2.25rem !important;
  font-family: var(--modus-wc-font-family, "Open Sans", sans-serif) !important;
  font-size: var(--modus-wc-font-size-xl, 1.25rem) !important;
  font-weight: 600 !important;
  text-align: center !important;
  text-decoration: none !important;
  color: var(--color-muted, #6a7075) !important;
  background: var(--color-surface, #fff) !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border, #cbcdd6) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.leaflet-bar a:last-child {
  border-bottom: none !important;
}

.leaflet-bar a:hover:not(.leaflet-disabled) {
  background: var(--color-surface-2, #f1f1f6) !important;
  color: var(--color-primary, #c76b3c) !important;
}

.leaflet-bar a.leaflet-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.leaflet-control-attribution {
  font-family: var(--modus-wc-font-family, "Open Sans", sans-serif) !important;
  font-size: var(--modus-wc-font-size-xs, 0.75rem) !important;
  background: var(--color-attribution-bg, rgba(255, 255, 255, 0.88)) !important;
  color: var(--color-muted, #6a7075) !important;
  border-radius: var(--radius-sm, 4px) 0 0 0 !important;
  padding: 2px 6px !important;
  backdrop-filter: blur(4px);
}

/* Basemap switcher — vertical card matching Leaflet zoom controls */

.map-layer-control {
  position: absolute;
  top: var(--space-2, 16px);
  left: var(--space-2, 16px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  min-width: 5.5rem;
  border: 1px solid var(--color-border, #cbcdd6);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(23, 26, 28, 0.12));
  overflow: hidden;
}

.map-layer-option {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-family: var(--modus-wc-font-family, "Open Sans", sans-serif);
  font-size: var(--modus-wc-font-size-sm, 0.875rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-muted, #6a7075);
  cursor: pointer;
  white-space: nowrap;
  text-shadow: none;
  background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--color-border, #cbcdd6);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.map-layer-option:last-child {
  border-bottom: none;
}

.map-layer-option:hover {
  background: var(--color-surface-2, #f1f1f6);
  color: var(--color-text, #171a1c);
}

.map-layer-option input[type="radio"] {
  display: none;
}

.map-layer-option:has(input:checked) {
  color: var(--color-primary, #c76b3c);
  background: var(--color-surface-2, #f1f1f6);
}

.map-layer-option:has(input:focus-visible) {
  outline: 2px solid var(--color-primary, #c76b3c);
  outline-offset: -2px;
}

.map-layer-option span {
  user-select: none;
}

[data-theme="open-bolt-dark"] .map-layer-control,
[data-theme="open-bolt-dark"] .map-layer-option {
  background: var(--color-surface, #252a2e);
}

[data-theme="open-bolt-dark"] .map-layer-option:hover,
[data-theme="open-bolt-dark"] .map-layer-option:has(input:checked) {
  background: var(--color-surface-2, #353a40);
}