/* ====== kubwx temperature bars (component styles only) ====== */
.kubwx-bars { --barW: 40px; --gap: 10px; margin-top: 16px; }
.kubwx-bars-day { --posMax: 25; --negMax: 8; }
.kubwx-bars-night { --posMax: 17; --negMax: 15; }

.kubwx-legend { display: flex; gap: 16px; align-items: center; margin-bottom: 36px; }
.kubwx-key { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #333; }
.kubwx-swatch { width: 12px; height: 12px; border-radius: 2px; }

.kubwx-plot { position: relative; height: 260px; }
.kubwx-cols { position: absolute; inset: 0; bottom: 0; display: flex; gap: var(--gap); padding: 0 4px; z-index: 1; }
.kubwx-col { flex: 1 0 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }

.kubwx-pos { height: calc(100% * var(--posMax) / (var(--posMax) + var(--negMax))); display: flex; align-items: flex-end; justify-content: center; gap: var(--gap); }
.kubwx-neg { height: calc(100% * var(--negMax) / (var(--posMax) + var(--negMax))); display: flex; align-items: flex-start; justify-content: center; gap: var(--gap); }

.kubwx-bar { width: var(--barW); position: relative; background: #ddd; }
.kubwx-bar.kubwx-day { background: #f1c40f; }
.kubwx-bar.kubwx-night { background: #3498db; }
.kubwx-bar.kubwx-pos { border-radius: 6px 6px 0 0; height: calc(var(--h) / var(--posMax) * 100%); }
.kubwx-bar.kubwx-neg { border-radius: 0 0 6px 6px; height: calc(var(--h) / var(--negMax) * 100%); }

/* Labels: temperature (bold) & month (regular) */
.kubwx-bar::after { content: attr(data-label); position: absolute; left: 50%; transform: translateX(-50%); font-weight: 700; font-size: 16px; color: #111; white-space: nowrap; }
.kubwx-bar.kubwx-pos::after { bottom: 100%; margin-bottom: 2px; }
.kubwx-bar.kubwx-neg::after { top: 100%; margin-top: 2px; }

.kubwx-bar::before { content: attr(data-month); position: absolute; left: 50%; transform: translateX(-50%); font-weight: 400; font-size: 16px; color: #333; white-space: nowrap; }
/* If t >= 0: month below bar; if t < 0: month above bar */
.kubwx-bar.kubwx-pos::before { top: 100%; margin-top: 2px; }
.kubwx-bar.kubwx-neg::before { bottom: 100%; margin-bottom: 2px; }

/* Zero-height bars show labels but don't take vertical space */
.kubwx-bar[style*="--h:0"] { height: 0 !important; }

/* Responsive visibility around September as the center */
.kubwx-cols .kubwx-col { display: flex; } /* base: >=720px shows all 12 */

@media (max-width: 360px) { /* <=360px: show Jul–Nov (5 months: 7–11) */
    .kubwx-bars { --barW: 24px; --gap: 6px; }
    .kubwx-cols .kubwx-col:nth-child(1),
    .kubwx-cols .kubwx-col:nth-child(2),
    .kubwx-cols .kubwx-col:nth-child(3),
    .kubwx-cols .kubwx-col:nth-child(4),
    .kubwx-cols .kubwx-col:nth-child(5),
    .kubwx-cols .kubwx-col:nth-child(6),
    .kubwx-cols .kubwx-col:nth-child(12) { display: none; }
}

@media (min-width: 361px) and (max-width: 480px) { /* 361–480px: show Jun–Dec (7 months: 6–12) */
    .kubwx-bars { --barW: 22px; --gap: 6px; }
    .kubwx-cols .kubwx-col:nth-child(1),
    .kubwx-cols .kubwx-col:nth-child(2),
    .kubwx-cols .kubwx-col:nth-child(3),
    .kubwx-cols .kubwx-col:nth-child(4),
    .kubwx-cols .kubwx-col:nth-child(5) { display: none; }
}

@media (min-width: 481px) and (max-width: 640px) { /* 481–640px: show May–Dec + Jan (9 months) */
    .kubwx-bars { --barW: 20px; --gap: 8px; }
    .kubwx-cols .kubwx-col:nth-child(2),
    .kubwx-cols .kubwx-col:nth-child(3),
    .kubwx-cols .kubwx-col:nth-child(4) { display: none; }
}

@media (min-width: 641px) and (max-width: 719px) { /* 641–719px: show 11 months (hide only Apr) */
    .kubwx-bars { --barW: 18px; --gap: 8px; }
    .kubwx-cols .kubwx-col:nth-child(4) { display: none; }
}

/* Spacer under the night chart */
.kubwx-spacer-40 { height: 40px; }

.kubwx-table th{
    text-align: left;
    padding: 5px;
}
.kubwx-table{
    font-size: 15px;
    width:100%;
}
.kubwx_td_data{
    text-align: center;
}
.kubwx-current {
    background-color: #4da6ff; /* светло-синий цвет для текущего месяца */
}
.kubwx-sea{
    background-color:#6fc5ff;
}