/* Reset to default spacing */
html, body {
    margin: 0;
    padding: 0;
}

/* loading spinner styles */
#loader {
  z-index: 2000;
}

/* Map should take up the whole screen */
#map {
    width: 100%;
    height: 100vh; /* viewport height */
    margin: 0;
    padding: 0;
}

/* Styling for country dropdown container  
(needs to be fixed at the top) */
#selectContainer {
    position: fixed;
    top: 0;
    z-index: 1000; /* keeps dropdown above map*/
    width: 100%;
    padding: 11px 0;
}

/* Size and center the country select dropdown */
#countrySelect {
  width: 200px;
  margin: 0 auto;
}

/* Make Pixabay images uniform size */  
.country-image {
  width: 100%;
  height: 180px;      /* consistent height */  
  object-fit: cover;  /* crops without distortion */ 
  border-radius: 6px;
}

/* Make news images uniform size */
.news-image {
  width: 100%;
  height: 110px;      
  object-fit: cover;  /* crops without distortion */
  border-radius: 6px;
}

/* move the leaflet controls down so that the toast does not cover them */
.leaflet-top.leaflet-left,
.leaflet-top.leaflet-right {
    top: 80px;
}

/* Keeps the map and modal interactive while a modal is open */
.modal { pointer-events: none; }
.modal .modal-content { pointer-events: auto; }

/* Reduce inside padding of Leaflet popups */
.leaflet-popup-content {
  margin: 7px 14px;
}

/* Reduce outer padding of leaflet popups and add shadow */
.leaflet-popup-content-wrapper {
  margin: 4px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Weather modal layout */
#weatherModal .modal-body {
  background-color: rgba(0, 0, 0, 0.05);   /* light grey behind the inner TODAY block */
}

#weatherModal .border { /* inner TODAY block*/
  background-color: #ffffff;
  border-color: #e5e5e5;
}

.weather-description {
  white-space: nowrap;
}

.weather-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
}

/* weather and news pre-loader */
#weather-pre-load,
#news-pre-load {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#weather-pre-load:before,
#news-pre-load:before {
    content: "";
    position: fixed;
    width: 60px;
    height: 60px;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #f2f2f2;
    border-top: 6px solid #7a1f75;
    border-radius: 50%;
    -webkit-animation: animate-preloader 1s linear infinite;
    animation: animate-preloader 1s linear infinite;
}

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

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