/* ======= Root Variables ======= */
:root {
  --color-bg: #f8f9fa;
  --color-text: #333;
  --color-heading: #2c3e50;
  --color-form-bg: #fff;
  --color-form-border: #ced4da;
  --color-form-focus: #495057;
  --color-button-bg: #6c757d;
  --color-button-text: #fff;
  --color-button-hover: #5a6268;
  --color-map-shadow: rgba(0, 0, 0, 0.1);
  --color-popup-bg: #fff;
  --color-popup-text: #000;
}

/* ======= Dark Mode Overrides ======= */
body.dark-mode {
  --color-bg: #121212;
  --color-text: #f1f1f1;
  --color-heading: #e0e0e0;
  --color-form-bg: #2c2c2c;
  --color-form-border: #555;
  --color-form-focus: #ccc;
  --color-button-bg: #343a40;
  --color-button-text: #f1f1f1;
  --color-button-hover: #23272b;
  --color-map-shadow: rgba(255, 255, 255, 0.05);
  --color-popup-bg: #2c2c2c;
  --color-popup-text: #f1f1f1;
}

/* ======= Base Styles ======= */
body {
  font-family: "Poppins", sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h2 {
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 20px;
}

/* ======= Map ======= */
#map {
  height: 500px;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--color-map-shadow);
  margin-bottom: 20px;
  transition: background-color 0.3s ease;
}

/* ======= Form Controls ======= */
.form-control {
  border-radius: 10px;
  padding: 0.6rem 1rem;
  background-color: var(--color-form-bg);
  color: var(--color-text);
  border: 1px solid var(--color-form-border);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.form-control:focus {
  border-color: var(--color-form-focus);
  box-shadow: 0 0 0 0.2rem rgba(33, 37, 41, 0.1);
}

/* ======= Buttons ======= */
.btn {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn:hover {
  opacity: 0.9;
}

#modeToggle {
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
  font-weight: 500;
}

#modeToggle:hover {
  background-color: var(--color-button-hover);
}

/* ======= Modal ======= */
.modal-content {
  border-radius: 15px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  background-color: var(--color-form-bg);
  color: var(--color-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.modal-header {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

/* ======= Carousel ======= */
.carousel-inner img {
  border-radius: 12px;
  max-height: 400px;
  object-fit: cover;
}

.carousel-indicators [data-bs-target] {
  background-color: var(--color-text);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
}

/* ======= Lightbox ======= */
#lightboxImage {
  border-radius: 10px;
  max-height: 80vh;
  background-color: var(--color-form-bg);
  border: 2px solid var(--color-form-border);
}

/* ======= Leaflet Popups (Dark mode fix) ======= */
.leaflet-popup-content-wrapper {
  background-color: var(--color-popup-bg) !important;
  color: var(--color-popup-text) !important;
  border-color: var(--color-form-border) !important;
}

.leaflet-popup-tip {
  background-color: var(--color-popup-bg) !important;
}

/* ======= Responsiveness ======= */
@media (max-width: 768px) {
  #map {
    height: 350px;
  }

  .modal-lg {
    max-width: 90%;
  }
}

/* ======= Smooth Transitions ======= */
input,
select,
button,
.modal-content,
#map {
  transition: all 0.3s ease-in-out;
}