html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.logo-img {
  height: 50px;
}

.section p {
  margin-bottom: 15px;
  text-align: justify
}

.section {
  width: 72%;
  padding: 40px 50px;
}

.section h2 {
  margin-bottom: 10px;
}

.section p:last-child {
  margin-bottom: 0;
}

.section ul li {
  list-style-type: none;
}

@media only screen and (max-width: 1200px) {
  .section {
    width: 100%;
    padding: 10px 30px;
  }
}

:root {
  --scrollbar-width: 5px;
  --scrollbar-track-color-light: transparent;
  --scrollbar-thumb-color-light: rgba(0, 0, 0, 0.2);
  --scrollbar-track-color-dark: transparent;
  --scrollbar-thumb-color-dark: rgba(255, 255, 255, 0.18);
}

@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18);
  }
}

@media (prefers-color-scheme: light) {
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.18);
  }
}

::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

@media only screen and (max-width: 900px) {
  .maplibregl-ctrl-top-right {
    top: 72px !important;
    right: calc(clamp(10px, 3vw, 16px) + (clamp(42px, 11vw, 46px) - 31px) / 2) !important;
  }

  .maplibregl-ctrl-top-right .maplibregl-ctrl {
    margin-right: 0 !important;
  }
}

.app-loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #000 !important;
  z-index: 99999;
}

.app-loader-image {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

/* ========================================================
   MapLibre Map Controls - Dark Mode Theming
   ======================================================== */
@media (prefers-color-scheme: dark) {
  body:not(.theme-light) .maplibregl-ctrl-group {
    background-color: #121212 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
    border-radius: 8px !important;
    overflow: hidden;
  }

  body:not(.theme-light) .maplibregl-ctrl-group button {
    background-color: transparent !important;
  }

  body:not(.theme-light) .maplibregl-ctrl-group button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
  }

  body:not(.theme-light) .maplibregl-ctrl-group button + button {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  body:not(.theme-light) .maplibregl-ctrl-icon,
  body:not(.theme-light) .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
  body:not(.theme-light) .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
  body:not(.theme-light) .maplibregl-ctrl-compass .maplibregl-ctrl-icon,
  body:not(.theme-light) .maplibregl-style-switcher,
  body:not(.theme-light) .maplibre-ctrl-notification-off,
  body:not(.theme-light) .maplibregl-ctrl-geolocate .maplibregl-ctrl-icon,
  body:not(.theme-light) .maplibregl-ctrl button span {
    filter: invert(1) brightness(1.8) !important;
  }

  body:not(.theme-light) .maplibregl-ctrl-geocoder {
    background-color: #121212 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
    color: #fff !important;
    border-radius: 8px !important;
  }

  body:not(.theme-light) .maplibregl-ctrl-geocoder input[type='text'] {
    color: #fff !important;
  }

  body:not(.theme-light) .maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--icon {
    filter: invert(1) brightness(1.8) !important;
  }

  body:not(.theme-light) .maplibregl-style-list {
    background: #121212 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
  }

  body:not(.theme-light) .maplibregl-ctrl-group .maplibregl-style-list button {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  body:not(.theme-light) .maplibregl-ctrl-group .maplibregl-style-list button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
  }

  body:not(.theme-light) .maplibregl-style-list button + button {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
}

/* Fallback for body.theme-dark regardless of media query */
body.theme-dark .maplibregl-ctrl-group {
  background-color: #121212 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  border-radius: 8px !important;
  overflow: hidden;
}

body.theme-dark .maplibregl-ctrl-group button {
  background-color: transparent !important;
}

body.theme-dark .maplibregl-ctrl-group button:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark .maplibregl-ctrl-group button + button {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark .maplibregl-ctrl-icon,
body.theme-dark .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
body.theme-dark .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
body.theme-dark .maplibregl-ctrl-compass .maplibregl-ctrl-icon,
body.theme-dark .maplibregl-style-switcher,
body.theme-dark .maplibre-ctrl-notification-off,
body.theme-dark .maplibregl-ctrl-geolocate .maplibregl-ctrl-icon,
body.theme-dark .maplibregl-ctrl button span {
  filter: invert(1) brightness(1.8) !important;
}

body.theme-dark .maplibregl-ctrl-geocoder {
  background-color: #121212 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

body.theme-dark .maplibregl-ctrl-geocoder input[type='text'] {
  color: #fff !important;
}

body.theme-dark .maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--icon {
  filter: invert(1) brightness(1.8) !important;
}

body.theme-dark .maplibregl-style-list {
  background: #121212 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  border-radius: 8px !important;
}

body.theme-dark .maplibregl-ctrl-group .maplibregl-style-list button {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.theme-dark .maplibregl-ctrl-group .maplibregl-style-list button:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

body.theme-dark .maplibregl-style-list button + button {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}