:root {
  --bg: #0f172a; 
  --panel: #1e293b;
  --us: #3b82f6;  
  --us-hover: #60a5fa;
  --ca: #ef4444;  
  --ca-hover: #f87171;
  --active: #f59e0b;
  --stroke: #0f172a; 
  --text: #e2e8f0; 
  --muted: #94a3b8; 
  --inset: hsl(215, 25%, 27%);
  --unavailable: #FFFDD0;
}

#us-map-tooltip {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #0f172a;
  background: #f8fafc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  transform: translate(-50%, -140%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .08s ease;
}

#us-map-tooltip.show {
  opacity: 1
}

.us-map-wrap {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); 
  color: var(--text); 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  padding: 24px 16px;
  width: 100%; 
  max-width: 1000px;
  margin: 0 auto 36px;
  border-radius: 14px;
}

.us-map-wrap *, .us-map-wrap *::before, .us-map-wrap *::after {
  box-sizing: inherit;
}

.us-map-wrap h1 {
  font-size: 22px; 
  font-weight: 600; 
  margin: 0 0 4px;
  color: var(--text);
}

.us-map-wrap p.sub {
  margin: 0 0 14px; 
  color: var(--muted); 
  font-size: 14px;
}

.us-map-legend {
  display: flex; 
  gap: 18px; 
  margin: 0 0 12px; 
  font-size: 13px; 
  color: var(--muted); 
  flex-wrap: wrap;
}

.us-map-legend span {
  display: inline-flex; 
  align-items: center; 
  gap: 7px;
}

.us-map-legend .swatch {
  width: 14px; 
  height: 14px; 
  border-radius: 4px; 
  display: inline-block;
}

.us-map-card {
  background: var(--panel); 
  border-radius: 14px; 
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  width: 100%;
}

.us-map-card canvas {
  width: 100%; 
  height: auto; 
  display: block; 
  border-radius: 10px; 
  cursor: pointer;
}

#us-map-readout {
  margin-top: 16px; 
  display: flex; 
  align-items: center; 
  gap: 16px;
  background: var(--panel); 
  border-radius: 14px; 
  padding: 16px 20px; 
  min-height: 78px;
  width: 100%;
}

#us-map-abbr {
  font-size: 36px; 
  font-weight: 800; 
  letter-spacing: 1px;
  background: var(--active); 
  color: #1a1200; 
  border-radius: 12px;
  width: 96px; 
  height: 64px; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  flex: 0 0 auto;
}

#us-map-abbr.empty {
  background: #334155; 
  color: var(--muted); 
  font-size: 22px; 
  font-weight: 600;
}

#us-map-info .name {
  font-size: 20px; 
  font-weight: 600;
}

#us-map-info .hint {
  font-size: 13px; 
  color: var(--muted); 
  margin-top: 2px;
}

.distributors-wrapper [data-location]:not(.active-distributor) { display: none; }

.distributors-output {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

@media screen and (max-width: 900px) {
  .distributors-output { flex-direction: column; }
}

 .distributors-filter { width: 100%; }

.distributors-output .us-map-wrap { 
  width: calc(50% - 12px);
  margin: 0;
}

.distributors-output .distributors-wrapper { width: calc(50% - 12px); }

@media screen and (max-width: 900px) {
  .distributors-output .us-map-wrap { display: none; }
}

@media screen and (max-width: 900px) {
  .distributors-output .distributors-wrapper { width: 100%; }
}

.distributors-filter { display: none; }

@media screen and (max-width: 900px) {
  .distributors-filter { display: block; }
}