.main-header {
  z-index: 1000;
  background: transparent;
}

.main-navbar {
  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(0,0,0,0.1));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.3);
}

.map-container {
  height: 100vh;
}

/* ========== LEAFLET CONTROLS ========== */
.leaflet-top.leaflet-left { top: 60px !important; left: 0.75rem !important; }
.leaflet-top.leaflet-right { top: 60px !important; right: 1rem !important; }

.leaflet-bar .easy-button-button {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
  margin: 0.3125rem !important;
  width: 2.65625rem !important;
  height: 2.65625rem !important;
}

.leaflet-bar .easy-button-button:hover {
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-0.0625rem) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
}

.leaflet-bar .easy-button-button i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */
@media (min-width: 992px) {
  .leaflet-bar .easy-button-button {
    width: 3.4375rem !important;
    height: 3.4375rem !important;
    margin: 0.46875rem !important;
  }
  .leaflet-bar .easy-button-button i { font-size: 1.40625rem !important; }
}

@media (min-width: 1200px) {
  .leaflet-bar .easy-button-button {
    width: 3.75rem !important;
    height: 3.75rem !important;
    margin: 0.625rem !important;
  }
  .leaflet-bar .easy-button-button i { font-size: 1.5625rem !important; }
}

@media (max-width: 767px) {
  .leaflet-bar .easy-button-button {
    width: 2.34375rem !important;
    height: 2.34375rem !important;
    margin: 0.234375rem !important;
  }
  .leaflet-bar .easy-button-button i { font-size: 1.09375rem !important; }
  .leaflet-bottom.leaflet-right { bottom: 3.75rem !important; }
}

@media (max-width: 480px) {
  .leaflet-bar .easy-button-button {
    width: 2.03125rem !important;
    height: 2.03125rem !important;
    margin: 0.15625rem !important;
  }
  .leaflet-bar .easy-button-button i { font-size: 0.9375rem !important; }
}

/* ========== NAVIGATION STYLING ========== */
/* Country select styling */
.country-select {
  width: 150px !important;
  background: #ffffff !important; /* Solid white background */
  border: 1px solid #ced4da !important; /* Standard Bootstrap border */
  border-radius: 6px !important;
  color: #495057 !important; /* Standard text color */
}

.country-select:focus {
  border-color: #80bdff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* ========== BOOTSTRAP THEME OVERRIDES ========== */
/* Dark theme overrides using Bootstrap's data-bs-theme */
[data-bs-theme="dark"] .main-navbar {
  background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(33,33,33,0.9)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

[data-bs-theme="dark"] .country-label,
[data-bs-theme="dark"] .country-icon {
  color: #ffffff !important;
}

[data-bs-theme="dark"] .country-select {
  background: rgba(33,33,33,0.95) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .country-select option {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
}

/* ========== LEAFLET CONTROLS THEMING ========== */
[data-bs-theme="dark"] .leaflet-control-layers {
  background: rgba(33,33,33,0.95) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}


/* Dark theme layer control states */
[data-bs-theme="dark"] .layer-loading { opacity: 0.6 !important; color: #adb5bd !important; background: transparent !important; }
[data-bs-theme="dark"] .layer-loaded { opacity: 1 !important; color: #ffffff !important; background: transparent !important; } /* White text when loaded in dark theme */
[data-bs-theme="dark"] .layer-error { opacity: 0.7 !important; color: #adb5bd !important; background: transparent !important; }
[data-bs-theme="dark"] .layer-empty { opacity: 0.5 !important; color: #adb5bd !important; background: transparent !important; }
[data-bs-theme="dark"] .layer-disabled { opacity: 0.5 !important; color: #adb5bd !important; background: transparent !important; } /* Light gray when disabled in dark theme */

/* Layer control states - simple approach */
.layer-loading { opacity: 0.6 !important; color: #6c757d !important; background: transparent !important; }
.layer-loaded { opacity: 1 !important; color: #000000 !important; background: transparent !important; } /* Normal black text when loaded */
.layer-error { opacity: 0.7 !important; color: #6c757d !important; background: transparent !important; }
.layer-empty { opacity: 0.5 !important; color: #6c757d !important; background: transparent !important; }
.layer-disabled { opacity: 0.5 !important; color: #6c757d !important; background: transparent !important; } /* Gray when disabled */
.overlays-visible { display: block !important; visibility: visible !important; }

/* Enhanced layer control styling */
.leaflet-control-layers label {
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
}

.leaflet-control-layers label span {
  background: transparent !important;
}

.leaflet-control-layers label:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  border-radius: 4px !important;
}

/* Dark theme hover effect for layer control */
[data-bs-theme="dark"] .leaflet-control-layers label:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
}

/* ========== WEATHER MODAL ========== */
#weather-preload {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#weather-preload.fadeOut {
  visibility: hidden;
  opacity: 0;
}

.weather-icon {
  max-width: 80px;
  height: auto;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
  transition: transform 0.2s ease;
}

.weather-icon:hover {
  transform: scale(1.1);
}

.weather-forecast-icon {
  max-width: 60px;
  height: auto;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.1));
  transition: transform 0.2s ease;
}

.weather-forecast-icon:hover {
  transform: scale(1.05);
}

/* ========== ANIMATIONS ========== */
.load-anim1, .load-anim2 {
  width: 12.5rem;
  height: 12.5rem;
  border-radius: 50%;
  border: 0.3125rem solid;
  border-left-color: #10ac84;
  border-top-color: #ff9f43;
  border-right-color: #0984e3;
  border-bottom-color: #d63031;
  animation: loadAnim 6s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
}

.load-anim2 { animation: loadAnim2 3s linear infinite; }

@keyframes loadAnim {
  0% { transform: rotate3d(1,1,1,0deg); }
  100% { transform: rotate3d(1,1,1,360deg); }
}

@keyframes loadAnim2 {
  0% { transform: rotate3d(1,1,1,0deg); }
  100% { transform: rotate3d(1,1,1,-360deg); }
}