html, body, #map { height: 100%; margin: 0; }
#map { position: absolute; inset: 0; }
/* Hide desktop UI panel - now using unified top bar */
#ui {
  display: none !important;
}
#layer-list > .row {
  display: grid; grid-template-columns: auto auto auto 1fr; gap: 6px; align-items: center;
  margin-bottom: 6px;
}
#layer-list .swatch {
  width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25);
}
#status { margin-top: 6px; font-size: 12px; color: #444; }
button { cursor: pointer; }


/* Unified top bar for all screen sizes */
#mobile-top-bar {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  z-index: 1500 !important;
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 10px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

/* Collapsed state styling */
#mobile-top-bar.collapsed {
  padding: 8px 10px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.1);
}

#mobile-top-bar.collapsed #mode-toggle-row {
  margin-bottom: 0 !important;
}

/* Toggle switch styles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #4169E1;
  transition: .3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #FF8C00;
}

input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

/* Address search in top bar */
#address-search {
  display: flex !important;
  gap: 6px;
  align-items: stretch;
}

#address-search input {
  flex: 1;
  font-size: 14px !important;
  padding: 8px 10px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px;
  min-height: 36px;
}

#address-search button {
  padding: 8px 12px !important;
  min-height: 36px !important;
  border-radius: 6px;
  background: #3B82F6;
  color: white;
  border: none;
  font-weight: 500;
  font-size: 13px !important;
}

/* Current location button - inline with search */
#address-search #current-location-btn {
  min-width: 36px !important;
  width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #8B5CF6 !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer;
  font-size: 13px !important;
}

#address-search #current-location-btn svg {
  width: 18px;
  height: 18px;
}

/* Search status message */
#search-status {
  font-size: 11px !important;
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.9);
  border-radius: 4px;
}

/* For larger screens, center the top bar */
@media (min-width: 769px) {
  #mobile-top-bar {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* Panel header with swipe handle - applies to all screen sizes */
.panel-header {
  padding: 6px 16px 8px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-handle {
  width: 36px;
  height: 3px;
  background: #d1d5db;
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.panel-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  padding-top: 8px;
}

.panel-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
}

.minimize-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0,0,0,0.05);
  border-radius: 6px;
  font-size: 20px;
  color: #6b7280;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.minimize-btn:hover {
  background: rgba(0,0,0,0.1);
}

.share-btn {
  padding: 6px 12px;
  border: none;
  background: #3b82f6;
  color: white;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.2s;
}

.share-btn:hover {
  background: #2563eb;
}

/* Panel content */
.panel-content {
  padding: 16px;
  padding-bottom: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  height: calc(60vh - 70px);
  max-height: calc(60vh - 70px);
  overscroll-behavior: contain;
}

/* District change alert */
.district-change-alert {
  background: #fee2e2;
  border-left: 4px solid #ef4444;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}

.district-change-alert h4 {
  margin: 0 0 8px 0;
  font-size: 15px;
  color: #dc2626;
}

.district-change-alert .change-text {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 8px 0;
}

.district-change-alert small {
  color: #6b7280;
  font-size: 12px;
}

/* District comparison grid */
.district-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.district-card {
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.district-card h4 {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 600;
}

.district-card .stat {
  font-size: 12px;
  color: #6b7280;
  margin: 4px 0;
}

/* Action buttons */
.action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
  padding: 0 16px 16px;
}

.action-buttons button {
  padding: 10px !important;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px !important;
  min-height: 40px !important;
}

/* Hide desktop UI panel */
#ui {
  display: none !important;
}

/* Navigation controls position */
.maplibregl-ctrl-top-right {
  top: 130px !important;
  right: 10px !important;
}

/* Marker adjustments */
.maplibregl-marker {
  z-index: 1400 !important;
}

/* Touch-friendly elements */
input[type="checkbox"] {
  min-width: 20px;
  min-height: 20px;
}

/* Loading indicator */
.loading {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3B82F6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 6px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes slideUp {
  from {
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  to {
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
  }
}

/* Legend bar with layer toggles */
#legend-bar {
  transition: top 0.3s ease;
}

#legend-bar label {
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

#legend-bar input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
}

/* Legend color boxes */
.legend-color-box {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}

@media (max-width: 400px) {
  #legend-bar {
    font-size: 12px !important;
    padding: 6px 10px !important;
    gap: 15px !important;
  }
  
  #legend-bar .legend-color-box {
    width: 12px !important;
    height: 12px !important;
  }
}

/* Hamburger menu button */
#hamburger-menu {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border: none;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 3001; /* Higher than menu overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

#hamburger-menu:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

#hamburger-menu svg {
  width: 24px;
  height: 24px;
  color: #333;
}

/* Menu overlay - full page */
#menu-dropdown {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  z-index: 3000; /* Higher than bottom drawer (2000) */
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#menu-dropdown.active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 1;
}

.menu-item {
  padding: 20px 40px;
  cursor: pointer;
  display: inline-flex; /* Use inline-flex for compact width */
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 20px;
  color: #ffffff;
  transition: all 0.3s ease;
  margin: 15px 20px; /* Space between items */
  border-radius: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.menu-item span {
  font-size: 24px;
}

/* Close button for menu */
#menu-dropdown::before {
  content: "✕";
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 32px;
  color: #ffffff;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s;
}

#menu-dropdown:hover::before {
  background: rgba(255, 255, 255, 0.2);
}

/* Mobile responsive design */
@media (max-width: 768px) {
  #mobile-top-bar {
    left: 10px !important;
    right: 60px !important; /* Make room for hamburger menu */
    max-width: none !important;
    transform: none !important;
  }
  
  /* Make address search responsive on mobile */
  #address-search {
    flex-wrap: wrap !important;
  }
  
  #address-search input {
    flex: 1 1 100% !important;
    margin-bottom: 6px !important;
  }
  
  #address-search button {
    flex: 1 !important;
  }
  
  #address-search #current-location-btn {
    flex: 0 0 auto !important;
    min-width: 36px !important;
  }
}

/* Bottom panel for all screen sizes - sheet style */
#comparison-panel, #mobile-status-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(calc(100% - 85px)) !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 60vh;
  max-height: 500px;
  border-radius: 20px 20px 0 0;
  padding: 0 !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2000;
  background: white;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#comparison-panel.active, #mobile-status-bar.active {
  transform: translateY(0) !important;
}

#comparison-panel.minimized, #mobile-status-bar.minimized {
  transform: translateY(calc(100% - 85px)) !important;
}

/* Intro modal styles */
.intro-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 1;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(8px);
}

.intro-modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.intro-content {
  background: white;
  border-radius: 24px;
  padding: 40px 32px 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
}

.intro-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 50%;
  font-size: 22px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.intro-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #374151;
}

.intro-header {
  margin-bottom: 32px;
}

.intro-content h1 {
  font-size: 26px;
  margin: 0 0 12px 0;
  color: #111827;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.intro-subhead {
  font-size: 15px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
  max-width: 380px;
  margin: 0 auto;
}


.intro-actions {
  margin-bottom: 28px;
}

.intro-primary-action {
  margin-bottom: 20px;
}

.intro-btn {
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  width: 100%;
}

.intro-btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}

.intro-btn-primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
}

.recommended-text {
  font-size: 11px;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
  text-transform: uppercase;
  margin-left: auto;
  letter-spacing: 0.05em;
}

.intro-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0;
  position: relative;
}

.intro-divider span {
  background: white;
  padding: 0 16px;
  color: #9ca3af;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.intro-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #e5e7eb;
  top: 50%;
}

.intro-secondary-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}

.intro-district-select {
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 15px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  font-weight: 500;
  color: #374151;
}

.intro-district-select:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.intro-district-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.intro-explore-btn {
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  background: white;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

.intro-explore-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #eff6ff;
}

.intro-footer {
  padding-top: 24px;
  border-top: 1px solid #f3f4f6;
  margin-top: 28px;
}

.intro-privacy {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.intro-privacy svg {
  flex-shrink: 0;
  color: #9ca3af;
}

.intro-learn-more {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
  text-decoration: none;
}

.intro-learn-more:hover {
  color: #3b82f6;
}

/* Redistricting explainer overlay */
.redistricting-explainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 12px;
  padding: 20px;
  max-width: 350px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  z-index: 5001;
  transition: opacity 0.3s, visibility 0.3s;
}

.redistricting-explainer.hidden {
  opacity: 0;
  visibility: hidden;
}

.explainer-content h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #1f2937;
}

.explainer-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
}

.explainer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  font-size: 20px;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.explainer-close:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Privacy Warning Modal */
.privacy-warning-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.privacy-warning-modal.hidden {
  display: none;
  opacity: 0;
}

.privacy-warning-content {
  background: white;
  border-radius: 16px;
  padding: 32px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  position: relative;
}

.warning-icon {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.privacy-warning-content h2 {
  font-size: 24px;
  color: #dc2626;
  margin: 0 0 16px 0;
  font-weight: 700;
}

.warning-message {
  font-size: 16px;
  color: #374151;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.warning-message strong {
  color: #dc2626;
  font-weight: 600;
}

.warning-details {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 28px;
  text-align: left;
}

.warning-details p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #7f1d1d;
  line-height: 1.5;
}

.warning-details p:nth-child(3) {
  color: #1e40af;
  background: #eff6ff;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid #3b82f6;
}

.warning-details p:last-child {
  margin-bottom: 0;
  color: #166534;
}

.warning-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.warning-btn-proceed {
  padding: 14px 24px;
  background: #dc2626;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.warning-btn-proceed:hover {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.warning-btn-cancel {
  padding: 14px 24px;
  background: white;
  color: #6b7280;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.warning-btn-cancel:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #374151;
}

@media (max-width: 480px) {
  .privacy-warning-content {
    padding: 24px 20px;
  }
  
  .privacy-warning-content h2 {
    font-size: 20px;
  }
  
  .warning-message {
    font-size: 15px;
  }
  
  .warning-details {
    padding: 16px;
  }
  
  .warning-details p {
    font-size: 13px;
  }
}

/* Mobile adjustments for intro */
@media (max-width: 480px) {
  .intro-content {
    padding: 32px 20px 24px;
  }
  
  .intro-content h1 {
    font-size: 22px;
  }
  
  .intro-subhead {
    font-size: 14px;
  }
  
  .intro-btn {
    padding: 14px 20px;
    font-size: 15px;
  }
  
  .recommended-text {
    font-size: 10px;
  }
  
  .intro-divider {
    margin: 20px 0;
  }
  
  .intro-district-select,
  .intro-explore-btn {
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* Desktop/tablet specific adjustments */
@media (min-width: 769px) {
  #comparison-panel, #mobile-status-bar {
    max-width: 700px !important;
    left: 50% !important;
    right: auto !important;
    width: 700px !important;
    margin: 0 auto !important;
    bottom: 20px !important; /* Lift panel off bottom edge on desktop */
    transform: translateX(-50%) translateY(calc(100% - 85px)) !important;
    border-radius: 20px !important; /* Full rounded corners since lifted */
    padding: 0 20px !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2) !important; /* Enhanced shadow */
  }
  
  #comparison-panel.active, #mobile-status-bar.active {
    transform: translateX(-50%) translateY(0) !important;
  }
  
  #comparison-panel.minimized, #mobile-status-bar.minimized {
    transform: translateX(-50%) translateY(calc(100% - 85px)) !important;
  }
  
  /* Add padding to the panel content on desktop */
  #comparison-panel .panel-content {
    padding: 20px 30px 40px 30px !important; /* Added extra bottom padding */
  }
  
  /* Make the header more spacious on desktop */
  #comparison-panel .panel-header {
    padding: 10px 30px 12px !important;
  }
}

/* ======================= */
/* THEME SYSTEM */
/* ======================= */

/* Theme Toggle in Menu */
.theme-switcher-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.theme-header {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-options {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 280px;
}

.theme-btn {
  flex: 1;
  padding: 10px 15px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  white-space: nowrap;
}

.theme-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.theme-btn.active {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.theme-btn-normal.active {
  background: #6B5B93;
  border-color: #8B7DB8;
}

.theme-btn-calimerica {
  background: linear-gradient(135deg, 
    rgba(255, 0, 0, 0.2),
    rgba(0, 82, 204, 0.2));
}

.theme-btn-calimerica.active {
  background: linear-gradient(135deg, 
    rgba(255, 0, 0, 0.5),
    rgba(0, 82, 204, 0.5));
  border-color: #FFD700;
  animation: patrioticPulse 2s ease-in-out infinite;
}

/* ======================= */
/* CALIMERICA!! THEME */
/* ======================= */

/* Modal bear styling */
.modal-bear {
  width: 250px;
  height: 250px;
  display: block;
  margin: -180px auto 10px;
  position: relative;
  z-index: 10;
}

/* Mobile responsive bear sizing */
@media (max-width: 768px) {
  .modal-bear {
    width: 120px;
    height: 120px;
    margin: -60px auto 5px;
  }
  
  /* Add some top padding to intro modal on mobile to ensure bear is visible */
  .intro-modal {
    padding-top: 80px;
  }
}

/* Very small phones */
@media (max-width: 400px) {
  .modal-bear {
    width: 100px;
    height: 100px;
    margin: -50px auto 5px;
  }
  
  .intro-modal {
    padding-top: 60px;
  }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .modal-bear {
    width: 80px;
    height: 80px;
    margin: -40px auto 5px;
  }
  
  .intro-modal {
    padding-top: 50px;
  }
}

.intro-content {
  position: relative;
  overflow: visible !important;
}

.intro-modal {
  overflow: visible !important;
}

/* Add animation to bear in CaliMerica theme */
.theme-calimerica .modal-bear {
  animation: bearBounce 4s ease-in-out infinite;
}

.theme-calimerica .shared-link-content:before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background: url('./CaliMericaBear.png') center/contain no-repeat;
  margin: 20px auto;
  animation: bearBounce 4s ease-in-out infinite;
}

.theme-calimerica .privacy-warning-content .warning-icon:before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background: url('./CaliMericaBear.png') center/contain no-repeat;
  margin: 0 auto 10px;
  animation: bearBounce 4s ease-in-out infinite;
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
}

/* Base theme overrides */
.theme-calimerica {
  position: relative;
  overflow-x: hidden;
}

/* Animated patriotic background - solid with subtle gradient */
.theme-calimerica:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 0, 0, 0.02) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 82, 204, 0.02) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* CaliMerica Bear Watermark */
.calimerica-bear {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 150px;
  height: 150px;
  background: url('./CaliMericaBear.png') center/contain no-repeat;
  opacity: 0.15;
  pointer-events: none;
  z-index: 100;
  animation: bearBounce 4s ease-in-out infinite;
}

/* Flying Eagles */
.eagle-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 99;
  overflow: hidden;
}

.flying-eagle {
  position: absolute;
  font-size: 60px;
  animation: flyAcross 15s linear infinite;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.3));
}

.eagle-1 {
  top: 10%;
  animation-delay: 0s;
}

.eagle-2 {
  top: 25%;
  animation-delay: 7s;
  animation-duration: 18s;
}

/* Fireworks */
.fireworks-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 98;
}

.firework {
  position: absolute;
  font-size: 50px;
  animation: fireworkBurst 3s ease-out forwards;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
}

/* Patriotic UI Enhancements */
.theme-calimerica #top-controls {
  background: repeating-linear-gradient(
    90deg,
    #FF0000 0px,
    #FF0000 40px,
    #FFFFFF 40px,
    #FFFFFF 80px,
    #0052CC 80px,
    #0052CC 120px
  );
  box-shadow: 0 4px 30px rgba(255, 0, 0, 0.6), 
              0 8px 40px rgba(0, 82, 204, 0.6),
              inset 0 0 100px rgba(255, 255, 255, 0.3);
  animation: patrioticShimmer 3s ease-in-out infinite;
  border: 3px solid #FFD700;
  position: relative;
}

.theme-calimerica #top-controls:before {
  content: "⭐";
  position: absolute;
  font-size: 20px;
  animation: starSpin 3s linear infinite;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.theme-calimerica #top-controls > * {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.85)
  ) !important;
  border: 2px solid #0052CC !important;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3) !important;
}

.theme-calimerica .toggle-switch {
  background: repeating-linear-gradient(
    45deg,
    #FF0000,
    #FF0000 5px,
    #FFFFFF 5px,
    #FFFFFF 10px,
    #0052CC 10px,
    #0052CC 15px
  ) !important;
  border: 2px solid #FFD700 !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5) !important;
}

.theme-calimerica .toggle-switch.active {
  background: repeating-linear-gradient(
    -45deg,
    #0052CC,
    #0052CC 5px,
    #FFFFFF 5px,
    #FFFFFF 10px,
    #FF0000 10px,
    #FF0000 15px
  ) !important;
  animation: patrioticRotate 10s linear infinite !important;
}

.theme-calimerica #comparison-panel {
  border: 5px solid #FFD700;
  background: #FFFFFF !important;
  box-shadow: 0 0 50px rgba(255, 0, 0, 0.3),
              0 0 100px rgba(0, 82, 204, 0.3) !important;
  position: relative;
  overflow: hidden;
}

.theme-calimerica #comparison-panel:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    #FF0000 0px,
    #FF0000 10px,
    #FFFFFF 10px,
    #FFFFFF 20px,
    #0052CC 20px,
    #0052CC 30px,
    #FFD700 30px,
    #FFD700 40px
  );
  z-index: -2;
  animation: patrioticRotate 10s linear infinite;
}

.theme-calimerica .panel-content {
  background: #FFFFFF !important;
  position: relative;
  z-index: 1;
}

.theme-calimerica .panel-header {
  background: rgba(255, 255, 255, 0.98) !important;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid #FFD700 !important;
  text-shadow: 2px 2px 4px rgba(0, 82, 204, 0.5),
               -2px -2px 4px rgba(255, 0, 0, 0.5) !important;
}

.theme-calimerica .panel-header:after {
  content: "🇺🇸 🦅 🇺🇸";
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  animation: flagWave 2s ease-in-out infinite;
}

/* Button animations */
.theme-calimerica button {
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 0, 0, 0.1) 0px,
    rgba(255, 255, 255, 0.1) 5px,
    rgba(0, 82, 204, 0.1) 10px,
    rgba(255, 255, 255, 0.1) 15px
  ) !important;
  border: 2px solid #0052CC !important;
  color: #0052CC !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  position: relative !important;
}

.theme-calimerica button:not(.toggle-switch):hover {
  animation: starBurst 0.5s ease;
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.8),
              0 0 60px rgba(0, 82, 204, 0.8),
              inset 0 0 20px rgba(255, 215, 0, 0.3) !important;
  transform: scale(1.05) !important;
  border-color: #FFD700 !important;
}

/* Keep menu button in top right corner in CaliMerica theme */
.theme-calimerica #hamburger-menu {
  position: fixed !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 10000 !important;
}

/* Animations */
@keyframes patrioticWave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes patrioticShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.1); }
}

@keyframes patrioticPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

@keyframes bearBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(-5deg); }
  75% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes flyAcross {
  0% {
    left: -100px;
    transform: translateY(0) scaleX(-1);
  }
  45% {
    transform: translateY(-20px) scaleX(-1);
  }
  50% {
    left: 100%;
    transform: translateY(0) scaleX(-1);
  }
  51% {
    left: 100%;
    transform: translateY(0) scaleX(1);
  }
  95% {
    transform: translateY(-20px) scaleX(1);
  }
  100% {
    left: -100px;
    transform: translateY(0) scaleX(1);
  }
}

@keyframes fireworkBurst {
  0% {
    bottom: 0;
    opacity: 1;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    bottom: 70%;
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes flagWave {
  0%, 100% { transform: translateY(-50%) rotate(-5deg); }
  50% { transform: translateY(-50%) rotate(5deg); }
}

@keyframes starSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes starBurst {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes starSparkle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}

@keyframes borderRotate {
  0% { border-image-slice: 1; }
  100% { border-image-slice: 1; border-image-source: linear-gradient(405deg, #FF0000, #FFFFFF, #0052CC, #FFFFFF, #FF0000); }
}

@keyframes patrioticRotate {
  0% { background-position: 0 0; }
  100% { background-position: 30px 30px; }
}

@keyframes patrioticTextShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes starTwinkle {
  0%, 100% { 
    opacity: 0.3;
    transform: scale(1) rotate(0deg);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1.2) rotate(180deg);
  }
}

/* Special Effects for Headers */
.theme-calimerica h1,
.theme-calimerica h2,
.theme-calimerica h3 {
  position: relative;
  text-shadow: 2px 2px 4px rgba(0, 82, 204, 0.3),
               -2px -2px 4px rgba(255, 0, 0, 0.3);
}

/* District colors override for CaliMerica theme */
.theme-calimerica .district-info.current {
  background: rgba(255, 240, 240, 0.5) !important;
  border-left: 5px solid #FF0000 !important;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.2) !important;
}

.theme-calimerica .district-info.ab604 {
  background: rgba(240, 240, 255, 0.5) !important;
  border-left: 5px solid #0052CC !important;
  box-shadow: 0 0 10px rgba(0, 82, 204, 0.2) !important;
}

/* More patriotic text */
.theme-calimerica .district-label {
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  background: linear-gradient(
    90deg,
    #FF0000,
    #0052CC,
    #FF0000
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: patrioticTextShimmer 3s linear infinite;
}

.theme-calimerica #address-input,
.theme-calimerica #district-select {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 20px,
    rgba(0, 82, 204, 0.05) 40px
  ) !important;
  border: 2px solid #0052CC !important;
  color: #0052CC !important;
  font-weight: 600 !important;
}

.theme-calimerica #address-input::placeholder {
  color: rgba(0, 82, 204, 0.6) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .calimerica-bear {
    width: 100px;
    height: 100px;
    opacity: 0.1;
  }
  
  .flying-eagle {
    font-size: 40px;
  }
  
  .theme-calimerica .panel-header:after {
    font-size: 18px;
    right: 40px;
  }
}