/* Make page take full height */
html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Map container must have a fixed height */
#map {
  position: relative;
  height: 100vh;           /* changed from 90% viewport height */
  width: 100%;
}

/* Loading overlay (centered box over map) */
.loading-overlay{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  z-index: 2000;
}

/* Spinner size */
.loading-spinner {
  width: 4rem;
  height: 4rem;
}

/* Small FA icons inside EasyButtons */
.btn-icon-small {
  font-size: 14px;
}

/* Weather icon in modal */
.weather-icon {
  width: 80px;
}

/* Float dropdown over the map, top-middle */
#selectContainer {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1040;     /* above leaflet + loader */
  width: auto;
  padding: 0;
  background: transparent;
}

#countrySelect {
  width: 240px;
}

/* News layout: keep title aligned with image top */
#news-list td {
  vertical-align: top;
}

/* Consistent thumbnail sizing (BBC-style) */
#news-list img.news-thumb {
  width: 100%;
  height: 120px;      /* tweak to 140px if you want larger */
  object-fit: cover;
  display: block;
}

/* Weather modal pre-loader (scoped) */
.weather-body {
  position: relative;
  overflow: hidden;
}

#weather-preload {
  position: absolute;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#weather-preload:before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #f2f2f2;
  border-top: 6px solid #56829e;
  border-radius: 50%;
  animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.6s, opacity 0.6s linear;
}

.myBtn {
  width: 70px;
}

/* Demographics modal pre-loader */
.demo-body {
  position: relative;
  overflow: hidden;
}

#demo-preload {
  position: absolute;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#demo-preload:before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #f2f2f2;
  border-top: 6px solid #2D8E5D;
  border-radius: 50%;
  animation: animate-preloader 1s linear infinite;
}

/* --- Mobile: prevent dropdown overlapping Leaflet layer control --- */
@media (max-width: 576px) {

  /* Leave space on the RIGHT for the Leaflet layers control */
  #selectContainer {
    left: 100px;
    right: 150px;          
    transform: none;       
    display: flex;
    justify-content: center;
  }

  /* Let select shrink if needed */
  #countrySelect {
    width: 175%;
    max-width: 240px;      
}
}