body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.navbar {
    background-color: #ffffff;
}

.search-input-Div {
    display: flex;
    align-items: center;
}

.search-input {
    margin-right: 10px;
}

/* 🔹 Stisnuta sekcija s manjim razmakom prema gore */
.topSection {
    margin-top: 10px;  /* ✅ Smanjuje razmak od vrha */
    padding-top: 5px;  /* ✅ Smanjuje unutarnji razmak prema vrhu */
    padding-bottom: 10px;  /* ✅ Lagano smanjuje donji padding */
}

/* 🔹 Opcionalno: smanjenje visine razmaka između elemenata */
.topSection .row {
    margin-bottom: 5px;  /* ✅ Manji razmak između redova */
}

/* 🔹 Manji naslov (H2) za bolju estetiku */
#currentDate {
    font-size: 20px;  /* ✅ Lagano smanjen font naslova */
    margin-bottom: 8px;  /* ✅ Smanjen donji razmak naslova */
}

.countryDiv {
    align-items: center;
    margin-bottom: 20px;
}

.countryDiv img {
    width: 50px;
    height: 30px;
    margin-right: 15px;
}

.weatherMap {
    height: 400px;
}

/* 🔹 Stisnuta sekcija s manjim razmakom prema gore */
.weeklyCharts {
    margin-top: 10px;  /* ✅ Smanjuje razmak od vrha */
    padding-top: 5px;  /* ✅ Smanjuje unutarnji razmak prema vrhu */
    padding-bottom: 10px;  /* ✅ Lagano smanjuje donji padding */
}

/* 🔹 Opcionalno: smanjenje visine razmaka između elemenata */
.weeklyCharts .row {
    margin-bottom: 5px;  /* ✅ Manji razmak između redova */
}

.highcharts-figure {
    margin: 0;
}

footer {
    background: #ffffff;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
    border-top: 1px solid #ddd;
}
.custom-airplane-icon {
    font-size: 24px; /* Increase or decrease size */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* Optional shadow */
}
.air-quality-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.chart-container {
    width: 48%; /* Two charts side by side */
    height: 400px;
    margin-top: 20px;
}

.location-box {
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.location-box {
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.custom-map-marker {
    font-size: 20px;
    font-weight: bold;
    color: red;
}

/* Ensure the Meteo section stays left and is nicely aligned */
.DailyWeather {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    height: 100%;
    min-height: 600px; /* Ensures it's tall enough */
}

/* Increase Map Height */
.weatherMapContainer {
    height: 600px; /* Adjust as needed */
}

/* Make the Map Itself Taller */
#weatherMap {
    width: 100%;
    height: 100%; /* Fills the container */
    border-radius: 8px;
}

/* Improve Location Box Visibility */
.location-box {
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 8px;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.leaflet-control-custom {
    background: white;
    color: black;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}


.weather-forecast-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

/* 🔹 Povećane ikonice vremena u prognozi */
.weather-forecast-item img {
    width: 60px;  /* ✅ Povećana širina ikonice */
    height: 60px; /* ✅ Povećana visina ikonice */
    background: rgba(250, 250, 250, 0.85); /* ✅ Neutralna pozadina */
    border-radius: 10px; /* ✅ Zaobljeni rubovi */
    padding: 8px; /* ✅ Malo veći padding oko ikonice */
    display: block;
    margin: auto;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); /* ✅ Suptilna sjena */
}

/* 🔹 Lagano povećanje na hover efekt */
.weather-forecast-item:hover {
    transform: scale(1.08); /* ✅ Još malo povećanje na hover */
    transition: transform 0.2s ease-in-out;
}

}

/* 🔹 Gornji dio (Meteo Info & METAR) */
#meteo-top {
    background: rgba(245, 245, 245, 0.8);  /* ✅ Svjetlija, neutralna pozadina */
    padding: 18px;
    border-radius: 14px;  /* ✅ Suptilno zaobljeni rubovi */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);  /* ✅ Mekša sjena */
    margin-bottom: 20px;  /* ✅ Malo veći razmak */
}

/* 🔹 Donji dio (Prognoza s ikonama) */
#meteo-bottom {
    background: rgba(245, 245, 245, 0.8);  /* ✅ Neutralna, nenametljiva boja */
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
}

/* 🔹 Gornji dio (Meteo Info & METAR) */
#meteo-top {
    background: rgba(245, 245, 245, 0.85);  /* ✅ Lagano siva, neutralna pozadina */
    padding: 18px;
    border-radius: 14px;  /* ✅ Suptilno zaobljeni rubovi */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);  /* ✅ Mekša sjena */
    margin-bottom: 20px;  /* ✅ Malo veći razmak */
}

/* 🔹 Donji dio (Prognoza s ikonama) */
#meteo-bottom {
    background: rgba(245, 245, 245, 0.85);  /* ✅ Neutralna, nenametljiva boja */
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
}

/* 🔹 Stilizacija pojedinih informacija (Temp, Vjetar, Oborina, itd.) */
#meteo-info div {
    padding: 10px;
    margin: 6px 0;
    font-size: 15px;  /* ✅ Nešto manji font za bolju čitljivost */
    font-weight: 500;  /* ✅ Manje naglašen font */
    background: rgba(235, 235, 235, 0.5);  /* ✅ Lagano siva, nenametljiva pozadina */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* ✅ PORAVNANJE LIJEVO */
    color: #2C3E50;  /* ✅ Tamnosiva boja teksta */
    padding-left: 12px; /* ✅ Dodatni razmak lijevo */
}

/* 🔹 Gornji dio (Meteo Info & METAR) */
#meteo-top {
    background: rgba(245, 245, 245, 0.85);  /* ✅ Suptilna svijetla pozadina */
    padding: 18px;
    border-radius: 14px;  /* ✅ Lagano zaobljeni rubovi */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);  /* ✅ Suptilna sjena */
    margin-bottom: 20px;  /* ✅ Više razmaka ispod */
}

/* 🔹 Donji dio (Prognoza s ikonama) */
#meteo-bottom {
    background: rgba(245, 245, 245, 0.85);  /* ✅ Neutralna, moderna pozadina */
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
}

/* 🔹 Stilizacija podataka (Temp, Vjetar, Oborina itd.) */
#meteo-info div {
    padding: 12px;
    margin: 6px 0;
    font-size: 16px;  /* ✅ Umjereno velik font */
    font-weight: 500;  /* ✅ Nema previše boldanja */
    background: rgba(230, 230, 230, 0.5);  /* ✅ Lagana siva, nenametljiva pozadina */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* ✅ PORAVNANJE LIJEVO */
    color: #2C3E50;  /* ✅ Tamnosivi ton za tekst */
    padding-left: 14px; /* ✅ Više razmaka lijevo */
}

/* 🔹 Vrijednosti podataka poravnate desno */
#meteo-info span {
    margin-left: auto; /* ✅ Vrijednosti poravnate desno */
    font-weight: bold;
}

/* 🔹 Stilizacija ikona */
#meteo-info i {
    font-size: 16px;  /* ✅ Umjereno velike ikone */
    margin-right: 10px; /* ✅ Više razmaka između ikona i teksta */
    color: #34495E;  /* ✅ Tamnija, ozbiljna nijansa plave */
}

/* 🔹 METAR podaci – PORAVNANJE DESNO */
#metar-container {
    text-align: right; /* ✅ METAR sada poravnat desno */
    font-size: 14px;
    padding: 10px;
    background: rgba(240, 240, 240, 0.8); /* ✅ Lagana, profesionalna pozadina */
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

/* 🔹 Stilizacija vremenske prognoze (ikonice) */
.weather-forecast-item {
    display: inline-block;
    text-align: center;
    padding: 10px;
    margin: 5px;
    background: rgba(250, 250, 250, 0.9);  /* ✅ Blaga svijetla pozadina */
    border-radius: 12px;  /* ✅ Mekani rubovi */
    color: #2C3E50;  /* ✅ Profesionalni ton teksta */
    width: 85px; /* ✅ Lagano proširen okvir */
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); /* ✅ Suptilna sjena */
    transition: transform 0.2s ease-in-out;
}

.weather-forecast-item:hover {
    transform: scale(1.05); /* ✅ Lagano povećanje na hover */
}

/* 🔹 Ikonice vremena */
.weather-forecast-item img {
    background: rgba(250, 250, 250, 0.85); /* ✅ Neutralna, ne previše svijetla pozadina */
    border-radius: 10px; /* ✅ Mekši rubovi */
    padding: 7px;
    display: block;
    margin: auto;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05); /* ✅ Lagana sjena na ikonama */
}

/* 🔹 Prilagodba teksta unutar prognoze */
.weather-forecast-item p {
    font-size: 13px;
    font-weight: 500; /* ✅ Uklonjen bold */
    margin-top: 5px;
    color: #34495E;  /* ✅ Profesionalnija boja teksta */
}

/* 🔹 Poboljšano poravnanje teksta u meteoinfo */
#meteo-info {
    display: flex;
    flex-direction: column;
    gap: 6px; /* ✅ Jednaki razmaci između sekcija */
}

/* 🔹 Rješava problem širine elemenata u meteoinfo */
#meteo-info > div {
    width: 100%;
    display: flex;
}
/* Ensure weather forecast icons stay properly spaced */
#meteo-bottom {
    padding: 15px 10px;  /* ✅ Padding ensures enough spacing */
    min-height: 100px;  /* ✅ Prevents icons from moving up unexpectedly */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* ✅ Centers icons nicely */
    align-items: center;
}

/* Prevent Leaflet map from overlapping weather icons */
.weatherMapContainer {
    position: relative;
    z-index: 1; /* ✅ Ensures it does not overlap elements */
}

/* Weather forecast container to stay on top */
#meteo-bottom {
    z-index: 2; /* ✅ Ensures weather icons stay above the map */
    position: relative;
}

/* 🔹 Pop-up za vremensku prognozu */
.weather-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    width: 320px;
    text-align: center;
}

.weather-popup-content h3 {
    margin-top: 0;
    font-size: 18px;
    color: #2C3E50;
}

.weather-popup-content img {
    width: 80px;
    height: 80px;
    margin: 10px 0;
}

.weather-popup-content p {
    font-size: 14px;
    color: #34495E;
}

.weather-popup-content button {
    margin-top: 10px;
    padding: 8px 12px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.weather-popup-content button:hover {
    background: #2980b9;
}

.leaflet-top.leaflet-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.leaflet-control-custom {
    margin-bottom: 5px; /* Razmak između gumbića */
    background-color: white;
    padding: 5px 10px;
    border: 1px solid gray;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.leaflet-control-custom:hover {
    background-color: #f0f0f0;
}

.leaflet-control.legend {
    background: rgba(255, 255, 255, 0.8);
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}


/* --- Klimatologija panel --- */
.climatology-panel {
    margin-top: 20px;
    background: rgba(245, 245, 245, 0.92);
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
}

.climatology-header {
    margin-bottom: 10px;
}

.climatology-header h4 {
    margin: 0 0 6px 0;
    font-size: 18px;
    color: #2C3E50;
}

.climatology-location,
.climatology-grid-meta,
.climatology-note,
.climatology-loading,
.climatology-error {
    font-size: 14px;
    color: #34495E;
}

.climatology-grid-meta {
    margin: 10px 0 14px 0;
    font-weight: 600;
}

.climatology-note {
    margin-bottom: 10px;
}

.climatology-tables {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.climatology-table-block h5 {
    font-size: 15px;
    margin-bottom: 8px;
    color: #2C3E50;
}

.climatology-table {
    margin-bottom: 0;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.climatology-table thead th {
    background: #eef3f7;
    font-size: 13px;
}

.climatology-table td,
.climatology-table th {
    vertical-align: middle;
    text-align: right;
}

.climatology-table td:first-child,
.climatology-table th:first-child {
    text-align: left;
}

@media (min-width: 992px) {
    .climatology-tables {
        grid-template-columns: 1fr 1fr;
    }
}