/* Basic Layout */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

#map {
  width: 100%;
  height: 100vh; /* Fill screen */
}


/* Centered Floating Country Select */
#countrySelect {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  max-width: 200px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 5px;
  font-size: 1rem;
}

#countrySelect:hover {
  background-color: #f8f8f8;
  cursor: pointer;
}

/* Preloader Fullscreen Overlay */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 2000;
}


/* Airport cluster bubble */
.custom-airport-cluster-icon {
  background-color: #007bff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: centre;
  justify-content: centre;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

/* Optional: size and color for the plane icon */
.custom-airport-cluster-icon .airport-icon {
  color: white;
  font-size: 16px;
}


/* Layer Controls Position */
.leaflet-control-layers {
  margin-top: 60px;
}

/*  Footer Styling if you use one */
footer {
  background-color: #2c3e50;
  color: white;
  padding: 10px;
  text-align: center;
}
.navbar {
  background: linear-gradient(90deg, #0f2027, #203a43, #2c5364);
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.navbar .navbar-brand {
  font-size: 1.5rem;
  letter-spacing: 2px;
  color: #fff !important;
}
.image {
  max-width:200px;
  margin:auto;
  display:block;
}

.country-image {
  max-width: 200px;
  border-radius: 0.25rem;
}

#weatherForecast {
  display: flex;
  flex-direction: column;       /* Stack items vertically */
  overflow-y: auto;             /* Enable vertical scrolling */
  max-height: 300px;            /* Adjust height to trigger scroll */
  gap: 1rem;
  padding: 1rem;
  align-items: center;          /* Center cards horizontally */
}

#weatherForecast .card {
  width: 100%;
  flex: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border: none;
}
#weatherModal .modal-dialog {
  max-width: 400px;
}
#imageGallery img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.leaflet-control .legend i {
  width: 20px;
  text-align: center;
}

.holiday-main-div:nth-child(odd) {
  background-color: #f9f9f9;
  box-shadow: 0 0 5px rgba(3, 3, 3, 0.2);
}
.holiday-main-div {
  padding: 15px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
}
.modal-body-holidy {
  max-height: 500px;
  overflow: scroll;
}

/* Styling the scrollbar width for both elements */
.modal-body-image::-webkit-scrollbar,.modal-body-holidy::-webkit-scrollbar,
.news-modal-div::-webkit-scrollbar {
  width: 8px;
}

/* Styling the scrollbar thumb for both elements */
.modal-body-image::-webkit-scrollbar-thumb,.modal-body-holidy::-webkit-scrollbar-thumb,
.news-modal-div::-webkit-scrollbar-thumb {
  background-color: green;
  border-radius: 4px;
}

/* Styling the scrollbar track for both elements */
.modal-body-image::-webkit-scrollbar-track, .modal-body-holidy::-webkit-scrollbar-track,
.news-modal-div::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 4px;
}

.news-main-div {
  padding: 25px;
  margin-bottom: 5px;
  box-shadow: 0 0 5px rgba(3, 3, 3, 0.2);
  margin-bottom: 15px;
  text-align: right;
}
.modal-body-image {
  max-height: 600px;
  overflow: scroll;
  margin-bottom: 5px;
  margin-top: 5px;
}

/* =========== */
.weather-item,
.weather-item .weather-content .temp {
  display: flex;
  flex-direction: column;
  border-radius: 0 !important;
}

.weather-item .weather-content {
  display: flex;
  align-items: center;
}

.weather-item .weather-content>* {
  flex: 1;
  text-align: center;
}
.weather-item .weather-content .temp {
  display: flex;
  flex-direction: column;
}

.weather-item .weather-content 
span.temp-min {
  font-size: 24px;
}
.weather-item .weather-content span.temp-max {
  font-size: 20px;
  color: #6c757d;
}
.weather-item + .weather-item {
  flex: 0 0 calc(50% - 10px) !important;
  max-width: calc(50% - 10px);
  border-top-width: 1px;
}

.weather-group {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}
.weather-item:first-child {
  flex: 100%;
}
#weatherModal .modal-dialog {
  max-width: 500px;
}
.news-main-div {
  box-shadow: none;
  margin-bottom: 0px;
  text-align: left;
  border-bottom: 1px solid #00000014;
}
.news-main-div a{
  color: #000;
}
.result-ammount, .ammount-group {
  padding: 26px 12px 12px;
  border: 1px solid #ced4da;
  position: relative;
  border-radius: 6px;
}
.result-ammount{
  background: #e9ecef;
}      
.result-ammount span, .ammount-group span {
  position: absolute;
  top: 4px;
  opacity: 0.65;
  font-size: 14px;
}
 .legend-item {
      padding: 5px 10px;
      border-radius: 5px;
      background-color: #e0e0e0; /* deselected bg */
      transition: background-color 0.3s;
    }
    .legend-item.active {
      background-color: #0f9858; /* green when active (like bootstrap success) */
      color: white;
    }
    .legend-item i {
      background-color: transparent;
      padding: 5px;
      border-radius: 3px;
    }


    /*new cs*/
    .news-main-div img {
    height: 115px;
    min-width: 200px !important;
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
    max-width: 200px
}
.marker-cluster-custom {
  background-color: #28a745; /* Green background */
  color: white;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  line-height: 40px;
}

/* Show the full list when hovering over the control */
/* Hide the list by default */
.leaflet-control-layers .leaflet-control-layers-list {
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Show the list on hover */
.leaflet-control-layers:hover .leaflet-control-layers-list {
  display: block !important;
  opacity: 1;
  pointer-events: auto;
}

/* Make sure the toggle icon shows a pointer */
.leaflet-control-layers-toggle {
  cursor: pointer;
}
select#countrySelect1 {
  border: none;
  outline: none;
  box-shadow: none;
}
.news-text {
    color: #000000;
}
@media only screen and (max-width: 768px) {
  .news-main-div img {
    height: 300px;
    min-width: 100% !important;
    width: 100%;
    max-width: 100%;
}
.news-main-div {
    flex-wrap: wrap;
}

}