@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    --primary-color: #e63946;
    --bg-light: #f4f6f8;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    --panel-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    --border-radius: 20px;
    --circle-size: 46px;
}

body {
    background-color: var(--bg-light);
    font-family: 'Plus Jakarta Sans', sans-serif;
    scroll-behavior: smooth;
}

/* ==========================================================================
   MENU MODELI I DROPDOWN 
   ========================================================================== */
.nav-menu-container {
    position: relative;
    z-index: 1001;
    background: #ffffff;
    padding: 12px 24px;
    border-radius: 40px;
    box-shadow: var(--panel-shadow);
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 25px auto;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.nav-menu-container .btn-danger.dropdown-toggle {
    background: #ffffff !important;
    color: #2d3748 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 25px !important;
    font-weight: 600;
    padding: 10px 20px;
    font-size: 0.88rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-menu-container .btn-danger.dropdown-toggle:hover {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(230, 57, 70, 0.3);
}

.nav-menu-container .dropdown-menu {
    z-index: 2000 !important;
}

/* ==========================================================================
   PASEK Z DNIAMI (Sticky)
   ========================================================================== */
.sticky-days-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 15px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 12px 20px;
    border-radius: 40px;
    box-shadow: var(--panel-shadow);
    margin: 20px auto 40px auto;
    max-width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.days-scroll-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
}

.days-scroll-container::-webkit-scrollbar { display: none; }
.days-scroll-container { -ms-overflow-style: none; scrollbar-width: none; }

.day-nav-item {
    text-decoration: none;
    color: #4a5568;
    background: rgba(0, 0, 0, 0.04);
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.day-nav-item:hover {
    background: #ffffff;
    color: var(--primary-color);
    border-color: rgba(230, 57, 70, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* ==========================================================================
   STRUKTURA KARTY I OPTYMALIZACJA LAZY LOADING
   ========================================================================== */
.weather-card {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    padding: 16px;
    margin-bottom: 30px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(0,0,0,0.02);
}

.weather-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Optymalizacja wydajności: gdy karta jest poza ekranem, nie obciążaj układu */
.lazy-card .map-body-container {
    background: #eaedf0; /* Lekki szary placeholder zamiast pustki */
    min-height: 250px;   /* Bezpieczna wysokość rezerwująca przestrzeń mapy */
}

/* ==========================================================================
   NOWY TRÓJWIERSZOWY NAGŁÓWEK KARTY
   ========================================================================== */
/* ==========================================================================
   NOWY TRÓJWIERSZOWY NAGŁÓWEK KARTY (WYŚRODKOWANY PARAMETR I MODEL)
   ========================================================================== */
.card-header-vertical {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 1px;
    padding: 0 4px;
}


/* Wiersz 1: Dzień, data i godzina (zostaje rozstrzelony na boki dla balansu) */
.header-row-datetime {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.3rem;
    color: #4a5568;
    border-bottom: 1px solid #edf2f7; /* Subtelna kreska oddzielająca czas od reszty */
    padding-bottom: 4px;
}

.card-day-name {
    font-weight: 500;
}

.card-date-short {
    color: #718096;
}

.card-time-main {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-left: auto; /* Godzina wyrównana do prawej */
}

/* Wiersz 2: Nazwa parametru (WYŚRODKOWANA) */
.header-row-param {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    margin-top: 2px;
}

/* Wiersz 3: Model w nawiasie (WYŚRODKOWANY) */
.header-row-model {
    font-size: 0.78rem;
    color: #a0aec0;
    font-weight: 500;
    text-align: center;
}

.map-body-container {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #f7fafc;
}

.map-bg-img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

/* Efekt płynnego pojawiania się grafiki */
.lazy-img[src] {
    animation: fadeInImg 0.3s forwards;
}
@keyframes fadeInImg { from { opacity: 0.5; } to { opacity: 1; } }

/* ==========================================================================
   MARKERY KLIENTA (Rozmiar 32px | Przesunięcie Left +3%, Top +5%)
   ========================================================================== */
.weather-city-marker {
    position: absolute;
    z-index: 10;
}

.modern-circle {
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.0rem;
    font-weight: 500;
    border: 1px solid #000000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    background-clip: padding-box;
    transition: background-color 0.2s ease;
}

/* Schowaj tekst i tło markera dopóki nie wejdzie w obszar widzenia */
.lazy-marker {
    background-color: transparent !important;
    color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.choszczno      { left: calc(45% - 16px); top: calc(65% - 16px); }
.stargard       { left: calc(35% - 16px); top: calc(58% - 16px); }
.gryfice        { left: calc(14% - 16px); top: calc(64% - 16px); }
.szczecin       { left: calc(20% - 16px); top: calc(54% - 16px); }
.darlowo        { left: calc(73% - 16px); top: calc(9% - 16px); }
.slawno         { left: calc(81% - 16px); top: calc(16% - 16px); }
.bialogard      { left: calc(62% - 16px); top: calc(32% - 16px); }
.bobolice       { left: calc(80% - 16px); top: calc(34% - 16px); }
.koszalin       { left: calc(70% - 16px); top: calc(24% - 16px); }
.kolobrzeg      { left: calc(48% - 16px); top: calc(21% - 16px); }
.pyrzyce        { left: calc(27% - 16px); top: calc(68% - 16px); }
.debno          { left: calc(17% - 16px); top: calc(79% - 16px); }
.mysliborz      { left: calc(30% - 16px); top: calc(78% - 16px); }
.swidwin        { left: calc(59% - 16px); top: calc(42% - 16px); }
.kamienpomorski { left: calc(28% - 16px); top: calc(29% - 16px); }
.swinoujscie    { left: calc(14% - 14px); top: calc(29% - 16px); }
.walcz          { left: calc(71% - 16px); top: calc(69% - 16px); }
.szczecinek     { left: calc(82% - 16px); top: calc(44% - 16px); }
.goleniow       { left: calc(28% - 16px); top: calc(46% - 16px); }
.lobez          { left: calc(45% - 16px); top: calc(48% - 16px); }
.resko          { left: calc(40% - 16px); top: calc(39% - 16px); }
.drawsko        { left: calc(65% - 16px); top: calc(55% - 16px); }

/* ==========================================================================
   SEKCJA EKSTREMÓW ORAZ DODATKI
   ========================================================================== */
.map-extremes-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #edf2f7;
    font-size: 1.2rem;
    color: #4a5568;
}

.extreme-min b { color: #3182ce; font-weight: 600; }
.extreme-max b { color: #e53e3e; font-weight: 600; }
.extreme-min small, .extreme-max small { color: #718096; }
.extreme-divider { color: #e2e8f0; }

.btn-download-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0,0,0,0.1);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}
.weather-card:hover .btn-download-overlay { opacity: 1; }
.btn-download-overlay:hover { background: #fff; color: var(--primary-color); }
.watermark-text { position: absolute; bottom: 4px; right: 6px; font-size: 7px; color: rgba(0, 0, 0, 0.25); pointer-events: none; }

.modern-day-divider { position: relative; text-align: center; margin: 40px 0 20px 0; }
.modern-day-divider::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06) 20%, rgba(0,0,0,0.06) 80%, transparent); z-index: 1;
}
.modern-day-divider span {
    position: relative; z-index: 2; background: var(--bg-light); padding: 6px 24px;
    font-size: 1.05rem; font-weight: 600; color: #4a5568; border-radius: 30px; border: 1px solid rgba(0,0,0,0.04);
}