/* ═══════════════════════════════════════════════════════════════════════
   FastFixCell.com — Coverage Map v3.0
   Glass Map Container + Carrier Glow Toggles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Map Container ──────────────────────────────────────────── */
.coverage-map-wrapper {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--border-default);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  position: relative;
}
#coverageMap {
  width: 100%;
  height: 450px;
  z-index: 1;
}

/* ── Map Controls ───────────────────────────────────────────── */
.map-controls {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-4);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: var(--border-subtle);
}
.map-control-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: var(--border-default);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.map-control-btn:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}
.map-control-btn.active {
  color: white;
  box-shadow: var(--shadow-md);
}

/* ── Carrier-Specific Active States ─────────────────────────── */
.map-control-btn.verizon.active { background: #cd040b; border-color: #cd040b; }
.map-control-btn.att.active { background: #0097dc; border-color: #0097dc; }
.map-control-btn.tmobile.active { background: #e20074; border-color: #e20074; }
.map-control-btn.cricket.active { background: #05a35e; border-color: #05a35e; }
.map-control-btn.ultra.active { background: #ff6b00; border-color: #ff6b00; }

/* ── Map Popup Styling ──────────────────────────────────────── */
.leaflet-popup-content-wrapper {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--border-default) !important;
  border-radius: var(--radius-xl) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-xl) !important;
}
.leaflet-popup-tip { background: var(--surface-2) !important; }
.leaflet-popup-content {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
}
.leaflet-popup-content b {
  color: var(--primary-300);
}
.leaflet-popup-content a {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 6px 10px;
  background: var(--primary-500);
  color: white !important;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: var(--font-bold);
  font-size: var(--text-xs);
  transition: all var(--transition-fast);
}
.leaflet-popup-content a:hover {
  background: var(--primary-400);
  box-shadow: var(--primary-glow);
}

/* ── Map Loading ────────────────────────────────────────────── */
.map-loading {
  position: absolute;
  inset: 0;
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.map-loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--surface-4);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  #coverageMap { height: 300px; }
  .map-controls { gap: var(--space-1); }
  .map-control-btn { padding: var(--space-1) var(--space-3); font-size: 11px; }
}