    <style>
        :root {
            --main-color: <?php echo $main_color; ?>;
            --border-color: <?php echo $border_color; ?>;
        }

        .weather-card {
            background-color: #ffffff; /* Zmieniono na biały */
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-bottom: 25px;
        }
        .location-header {
            font-size: 2.2rem;
            font-weight: 500;
            color: #343a40;
            text-transform: capitalize; /* Automatycznie zamieni np. "szczecin" na "Szczecin" */
        }
        .location-header-pow {
			margin-top: -18px;
            font-size: 1rem;
            font-weight: 100;
            color: #343a40;
        }
        .map-container {
            height: 650px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        .forecast-card {
            background-color: #f0f0f0; /* Pozostawiono jasny szary */
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 20px;
            text-align: center;
        }
        .forecast-card h5 {
            color: var(--main-color);
            font-weight: bold;
        }
        .forecast-card .temp {
            font-size: 1.8rem;
            font-weight: bold;
            color: #343a40;
        }
        .forecast-card .desc {
            color: #6c757d;
            font-size: 0.9rem;
        }
        .additional-info .progress {
            height: 10px;
        }
        .progress-bar-primary {
            background-color: var(--main-color);
        }
        .progress-bar-success {
            background-color: #28a745;
        }
        .progress-bar-warning {
            background-color: #ffc107;
        }

        /* Styl dla koła temperatury */
        .temp-circle-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .temp-circle {
            width: 180px;
            height: 180px;
            border: 4px solid var(--border-color); /* Kolor ramki koła */
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            font-weight: bold;
            color: var(--main-color);
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Delikatny cień */
        }
        .temp-circle .high-low {
            position: absolute;
            top: 15px;
            font-size: 1.1rem;
            color: #6c757d;
        }
        .temp-circle .high-low span:first-child {
            margin-right: 5px;
            padding-right: 5px;
            border-right: 1px solid #ccc;
        }
        .temp-circle .current-temp-large {
            font-size: 3.5rem; /* Duży rozmiar dla samej liczby */
            line-height: 1;
            color: var(--main-color); /* Kolor głównej temperatury */
            font-weight: bold; /* Pogrubienie liczby */
            white-space: nowrap; /* Zapobiega zawijaniu wiersza między liczbą a °C */
        }
        .temp-circle .current-temp-large .celsius-symbol {
            font-size: 0.5em; /* Mały rozmiar dla °C (np. 0.5x rozmiaru głównej liczby) */
            font-weight: normal; /* Bez pogrubienia */
            vertical-align: super; /* Przesunięcie nieco w górę */
            margin-left: 2px; /* Domyślny odstęp, zwiększony o 2px */
        }
        .temp-circle .feels-like-small {
            position: absolute;
            bottom: 15px;
            font-size: 0.9rem;
            color: #6c757d;
        }

        /* Kontener dla ikony pogody i wiatru */
        .weather-info-right {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-left: 20px;
            height: 200px; /* Dopasowanie wysokości do koła temperatury */
            justify-content: center; /* Wyśrodkowanie pionowe, aby równomiernie rozłożyć ikonę i wiatr */
            text-align: center;
        }
        .weather-icon-only-container {
            margin-bottom: -25px; /* Zmniejszony odstęp między ikoną a wiatrem */
        }
        .weather-icon-svg {
            width: 120px;
            height: 120px;
            object-fit: contain;
        }
        .weather-icon-svgg {
            width: 120px;
            height: 120px;
            margin-bottom: -30px;
            object-fit: contain;
        }

        /* Styl dla koła wiatru */
        .wind-info-circle {
            width: 75px;
            height: 75px;
            border: 2px solid #ced4da;
            border-radius: 50%;
            display: flex;
            flex-direction: column; /* Ułożenie elementów pionowo */
            justify-content: center; /* Wyśrodkowanie pionowe */
            align-items: center; /* Wyśrodkowanie poziome */
            position: relative;
            font-weight: bold;
            color: #495057;
            font-size: 0.9em;
            overflow: hidden; /* Ukryj ewentualne wyjście strzałki poza okrąg */
            padding: 5px 0; /* Dodatkowy padding dla lepszego rozłożenia w pionie */
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); /* Delikatny cień */
        }
        .wind-info-circle .wind-arrow-in-circle {
            font-size: 1.9em; /* Większy grot */
            line-height: 1;
            color: #495057;
            transition: transform 0.5s ease-out;
            margin-bottom: 2px; /* Przesunięcie strzałki nieco w górę, aby zrobić miejsce dla tekstu */
            /* Zmienna CSS --wind-direction jest ustawiana w PHP i używana w JS */
            /* Transformacja CSS będzie sterowana przez JS w app.js dla popupów, a tutaj dla głównej strzałki */
            transform: rotate(calc(var(--wind-direction) * 1deg));
        }
        .wind-info-circle .wind-speed-text {
            font-size: 1.2em;
            line-height: 1;
        }

        .weather-details-current {
            text-align: left;
            padding-left: 20px;
            margin-top: 20px;
        }
        .weather-details-current p {
            margin-bottom: 5px;
            font-size: 1.1rem;
            color: #343a40;
        }
        .current-weather-main-display {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
    </style>