/* Full screen map */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}

/* Dropdown container */
#selectContainer {
    position: fixed;
    top: 10px;
    z-index: 1000;
    width: 200px;
    margin: 0 auto;
    left: 0;
    right: 0;
}

/* Button container */
#buttonContainer {
    position: fixed;
    top: 100px;
    left: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

/* Icon buttons */
.icon-btn {
    background-color: #fff;
    border: none;
    padding: 10px;
    margin: 5px;
    cursor: pointer;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    width: 50px;
    text-align: center;
}

.icon-btn i {
    font-size: 20px;
    color: #333;
}

/* Hover effect */
.icon-btn:hover {
    background-color: #e0e0e0;
}
/* Ensure the entire label, including text and input, is aligned */
.leaflet-control-layers label {
    display: flex;
    align-items: center;
    gap: 8px;  /* Adjust spacing between checkbox/radio and text */
    font-size: 14px;  /* Adjust text size */
    cursor: pointer;  /* Ensures clickability */
}

/* Fix checkbox and radio button alignment */
.leaflet-control-layers input[type="radio"],
.leaflet-control-layers input[type="checkbox"] {
    appearance: auto; /* Resets default styles */
    width: 14px; /* Standardized size */
    height: 14px;
    margin: 0; /* Removes any browser-added margins */
    vertical-align: middle; /* Ensures proper alignment */
    flex-shrink: 0; /* Prevents it from resizing */
}

/* Make radio buttons circular */
.leaflet-control-layers input[type="radio"] {
    border-radius: 50%;
}


/* Pre-loader styling */
#preloader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    /* Dark background */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spinner Animation */
.spinner {
    border: 6px solid rgba(0, 0, 0, 0.1);
    border-top: 6px solid #007bff;
    /* Change color if needed */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.news-article {
    display: block;
    /* Stack items vertically */
    text-align: left;
    margin-bottom: 15px;
}

.news-image {
    width: 100%;
    /* Make image take full width */
    max-width: 400px;
    /* Keep images at a reasonable size */
    height: auto;
    border-radius: 5px;
    display: block;
    margin: 10px auto;
    /* Center image */
}

.news-image {
    width: 100px;
    height: 70px;
    object-fit: cover;
    border-radius: 5px;
}

#touristAttractionsModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

.forecast-container {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.forecast-item {
    text-align: center;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    width: 18%;
}
.forecast-container {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-top: 10px;
}
.forecast-item {
    min-width: 120px;
    background-color: #f8f9fa;
}

.forecast-item img {
    width: 50px;
    height: 50px;
}
#newsModal .modal-content {
    border-radius: 10px;
}

#newsModal .modal-body {
    max-height: 500px;
    overflow-y: auto;
}

#newsContent img {
    object-fit: cover;
}
/* Make the news modal scrollable */
#newsModal .modal-body {
    max-height: 400px;
    overflow-y: auto;
}
/* Reduce text size inside the Population modal */
#populationInfoModal .modal-body {
    font-size: 12px; /* Make the text smaller */
}

#populationInfoModal h5 {
    font-size: 16px; /* Reduce title size slightly */
}

#populationInfoModal p {
    font-size: 12px; /* Ensure paragraph text is smaller */
}

/* Reduce icon size if needed */
#populationInfoModal i {
    font-size: 14px; /* Adjust icon size to match text */
}
/* Capital Info Modal Styles */
.info-modal-modern {
    padding: 20px;
}

.info-header {
    display: flex;
    align-items: center;
}

.info-icon {
    font-size: 2em;
    margin-right: 10px;
}

.info-title {
    margin: 0;
}

.info-divider {
    margin: 15px 0;
}

.info-details p {
    margin-bottom: 10px;
}
/* Weather Modal Styles */
.weather-icon {
    width: 60px;
}

.forecast-card {
    min-width: 120px;
}

.forecast-card img {
    width: 50px;
    height: 50px;
}
/* Population Modal Styles */
.population-info-modern {
    padding: 20px;
}

.population-header {
    display: flex;
    align-items: center;
}

.population-icon {
    font-size: 2em;
    margin-right: 10px;
}

.population-title {
    margin: 0;
}

.population-divider {
    margin: 15px 0;
}

.population-details p {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.population-details p i {
    margin-right: 10px;
}
/* News Modal Styles */
.news-thumbnail {
    width: 100px;
    height: auto;
}

.news-description {
    font-size: 0.95em;
}
/* Tourist Attractions Modal Styles */
.attraction-thumbnail {
    width: 80px;
    height: auto;
}

/* (Ensure this exists for error messages) */
.info-modal-modern {
    padding: 20px;
}
/* Utility to hide elements via class instead of inline styles */
.d-none {
    display: none !important;
}
/* News Modal scroll area */
#newsContentWrapper {
    max-height: 400px;
    overflow-y: auto;
}