/* =================================================================
   Balatoni Időjárás Widget  –  assets/widget.css  v1.1.0
   Prefix: balaton-weather-widget
   ================================================================= */

/* ── Alap kártya ─────────────────────────────────────────────── */

.balaton-weather-widget {
	width: 100%;
	max-width: 520px;
	height: 380px;
	border-radius: 24px;
	overflow: hidden;
	background: linear-gradient(150deg, #ddf3fc 0%, #eef8fd 50%, #fef9f0 100%);
	box-shadow: 0 16px 48px rgba(15, 23, 42, 0.13), 0 2px 8px rgba(15,23,42,0.06);
	border: 1px solid rgba(255, 255, 255, 0.8);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #0f172a;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	position: relative;
	cursor: pointer;
}

.balaton-weather-widget--stale {
	opacity: 0.74;
}

.balaton-weather-widget--error,
.balaton-weather-widget__notice {
	padding: 16px 20px;
	font-size: 14px;
	color: #64748b;
}

/* ── Teljes widget kattintható overlay ──────────────────────── */

.balaton-weather-widget__full-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
}

/* ── 1. Viharjelzés sáv ──────────────────────────────────────── */

.balaton-weather-widget__alert {
	padding: 13px 16px 12px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.balaton-weather-widget__alert--level-0 {
	background: rgba(22, 163, 74, 0.09);
}

.balaton-weather-widget__alert--level-1 {
	background: rgba(202, 138, 4, 0.12);
}

.balaton-weather-widget__alert--level-2 {
	background: rgba(234, 88, 12, 0.12);
}

.balaton-weather-widget__alert--level-3 {
	background: rgba(220, 38, 38, 0.11);
}

/* ── Nincs riasztás: pajzs | szöveg | checkmark ─────────────────  */

.balaton-weather-widget__alert-main {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 6px;
}

.balaton-weather-widget__alert--level-0 .balaton-weather-widget__alert-main {
	margin-bottom: 5px;
}

.balaton-weather-widget__alert-shield,
.balaton-weather-widget__alert-warning-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.balaton-weather-widget__alert-text {
	flex: 1;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.25;
}

.balaton-weather-widget__alert--level-0 .balaton-weather-widget__alert-text { color: #14532d; }
.balaton-weather-widget__alert--level-1 .balaton-weather-widget__alert-text { color: #92400e; }
.balaton-weather-widget__alert--level-2 .balaton-weather-widget__alert-text { color: #7c2d12; }
.balaton-weather-widget__alert--level-3 .balaton-weather-widget__alert-text { color: #7f1d1d; }

.balaton-weather-widget__alert-check {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	margin-left: auto;
}

/* Zónák összefoglaló (nincs riasztás) */

.balaton-weather-widget__alert-zones {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
	padding-left: 39px;
}

.balaton-weather-widget__alert-summary {
	font-size: 12.5px;
	font-weight: 500;
	color: #166534;
	opacity: 0.88;
}

/* ── Van riasztás: figyelmeztető szöveg blokk ────────────────────  */

.balaton-weather-widget__alert-texts {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.balaton-weather-widget__alert-sub {
	font-size: 12.5px;
	font-weight: 500;
	opacity: 0.82;
}

.balaton-weather-widget__alert--level-1 .balaton-weather-widget__alert-sub { color: #92400e; }
.balaton-weather-widget__alert--level-2 .balaton-weather-widget__alert-sub { color: #7c2d12; }
.balaton-weather-widget__alert--level-3 .balaton-weather-widget__alert-sub { color: #7f1d1d; }

/* ── Kompakt inline zóna (riasztás sávon belül) ─────────────────  */

.balaton-weather-widget__zones-inline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1px 0;
	margin-top: 5px;
	font-size: 13.5px;
}

.biw-zone-inline-item {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	white-space: nowrap;
}

.biw-zone-inline-name {
	color: #475569;
	font-weight: 500;
}

.balaton-weather-widget__alert--level-1 .biw-zone-inline-name,
.balaton-weather-widget__alert--level-2 .biw-zone-inline-name,
.balaton-weather-widget__alert--level-3 .biw-zone-inline-name {
	color: #78350f;
	opacity: 0.85;
}

.biw-zone-inline-sep {
	color: #94a3b8;
	font-weight: 400;
	margin: 0 2px;
}

.biw-zone-inline-num {
	font-weight: 800;
	font-size: 15px;
}

.biw-zone-inline-num--0 { color: #16a34a; }
.biw-zone-inline-num--1 { color: #d97706; }
.biw-zone-inline-num--2 { color: #dc2626; }
.biw-zone-inline-num--3 { color: #991b1b; }

/* ── 2. Időjárás törzs (tavi háttér) ────────────────────────── */

.balaton-weather-widget__body {
	position: relative;
	flex: 1;
	min-height: 0;
	padding: 20px 20px 18px;
	background-image: url('lake-bg.svg');
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Bal oldali átlátszó overlay a szöveg olvashatóságáért */
.balaton-weather-widget__body::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(224, 244, 253, 0.88) 0%,
		rgba(224, 244, 253, 0.70) 40%,
		rgba(224, 244, 253, 0.28) 68%,
		transparent 86%
	);
	pointer-events: none;
}

.balaton-weather-widget__main {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 18px;
}

/* Időjárás ikon doboz */

.balaton-weather-widget__icon {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 2px 12px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(255,255,255,0.9);
	font-size: 40px;
	overflow: hidden;
}

.balaton-weather-widget__icon img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	display: block;
}

/* Szöveges blokk */

.balaton-weather-widget__current {
	min-width: 0;
	flex: 1;
}

.balaton-weather-widget__city-link {
	text-decoration: none;
	color: inherit;
}

.balaton-weather-widget__city-link:hover .balaton-weather-widget__city {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.balaton-weather-widget__city {
	display: block;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	color: #0f172a;
	margin-bottom: 3px;
}

.balaton-weather-widget__temp {
	font-size: 42px;
	line-height: 1;
	font-weight: 900;
	color: #0284c7;
	letter-spacing: -1.5px;
	margin-bottom: 5px;
}

.balaton-weather-widget__temp-unit {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0;
}

.balaton-weather-widget__temp-na {
	font-size: 15px;
	font-weight: 600;
	color: #94a3b8;
}

.balaton-weather-widget__desc {
	font-size: 14px;
	color: #334155;
	font-weight: 600;
}

/* ── 3. Szél + UV kártyák (Layout 2-ben látható, egymás mellett) ── */

.balaton-weather-widget__extras {
	display: none;
}

/* Layout 2: display:contents → a wrapper eltűnik, kártyák közvetlen body-gyerekek lesznek.
   Így a justify-content: space-evenly mind a 4 elemet (main, wind, uv, water) kezeli. */
.balaton-weather-widget--layout-2 .balaton-weather-widget__extras {
	display: contents;
}

/* Szél / UV kártya Layout 2-ben: egyforma méret és fehér háttér */
.balaton-weather-widget--layout-2 .biw-extra-card {
	flex: 0 0 150px;
	width: 150px;
	align-self: stretch;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 5px;
	padding: 10px 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.80);
	box-shadow: none;
	position: relative;
	z-index: 1;
}

.biw-extra-card__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.biw-extra-card__label {
	font-size: 10px;
	font-weight: 500;
	color: #075985;
	line-height: 1.3;
}

.biw-extra-card__value {
	font-size: 14px;
	font-weight: 900;
	color: #0f172a;
	white-space: nowrap;
	line-height: 1.2;
}

/* ── 4. Vízhőmérséklet kapszula ──────────────────────────────── */

.balaton-weather-widget__water {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 11px 15px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(4px);
	box-shadow: 0 1px 6px rgba(15,23,42,0.07);
	border: 1px solid rgba(255,255,255,0.85);
}

.balaton-weather-widget__water-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.balaton-weather-widget__water-label {
	font-size: 13px;
	font-weight: 700;
	color: #075985;
	flex: 1;
}

.balaton-weather-widget__water-value {
	font-size: 19px;
	font-weight: 900;
	color: #ea580c;
	white-space: nowrap;
	letter-spacing: -0.5px;
}

/* ── 5. Brand lábléc ─────────────────────────────────────────── */

.balaton-weather-widget__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 18px 14px;
	border-top: 1px solid rgba(148, 163, 184, 0.16);
	position: relative;
	z-index: 2;
}

.balaton-weather-widget__brand {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	color: #64748b;
	transition: color 0.15s;
}

.balaton-weather-widget__brand:hover {
	color: #0284c7;
	text-decoration: none;
}

.balaton-weather-widget__brand-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.balaton-weather-widget__brand-text {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.balaton-weather-widget__updated {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 500;
	color: #94a3b8;
	white-space: nowrap;
}

.balaton-weather-widget__updated-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* ── Loading skeleton (AJAX betöltés közben) ─────────────────── */

@keyframes biw-shimmer {
	0%   { background-position: -800px 0; }
	100% { background-position:  800px 0; }
}

.biw-loading {
	pointer-events: none;
}

.biw-skel-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.biw-skel {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.12) 25%,
		rgba(255, 255, 255, 0.38) 50%,
		rgba(255, 255, 255, 0.12) 75%
	);
	background-size: 1600px 100%;
	animation: biw-shimmer 1.6s infinite linear;
	border-radius: 8px;
}

.biw-skel--header {
	height: 56px;
	border-radius: 0;
	flex-shrink: 0;
}

.biw-skel-body {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 20px 16px;
}

.biw-skel--icon {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 20px;
}

.biw-skel-lines {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.biw-skel--city  { height: 14px; width: 55%; }
.biw-skel--temp  { height: 38px; width: 42%; }
.biw-skel--desc  { height: 12px; width: 65%; }

.biw-skel--water {
	height: 48px;
	margin: 0 20px 18px;
	border-radius: 16px;
}

.biw-skel--footer {
	height: 44px;
	border-radius: 0 0 24px 24px;
	flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   Layout 2 – Széles vízszintes banner
   Struktúra: [viharjelzés] | [ikon + hőm.] | [vízhőm. kártya] | [lábléc]
   Ajánlott: 800–1100 px szélességű tartalomba.
   ══════════════════════════════════════════════════════════════ */

.balaton-weather-widget--layout-2 {
	max-width: 100%;
	height: auto;
	min-height: 110px;
	flex-direction: row;
	align-items: stretch;
	border-radius: 16px;
}

/* ── Alert: bal panel ─────────────────────────────────────── */

/* Nincs-riasztás zóna-összefoglaló rejtve layout 2-ben (csak riasztásnál releváns). */
.balaton-weather-widget--layout-2 .balaton-weather-widget__alert-zones {
	display: none;
}

/* Zóna számok layout 2 – rövidített nevek, egy sor, nagyobb méret */
.balaton-weather-widget--layout-2 .balaton-weather-widget__zones-inline {
	font-size: 12.5px;
	margin-top: 4px;
	flex-wrap: nowrap;
	overflow: hidden;
}

.balaton-weather-widget--layout-2 .biw-zone-inline-num {
	font-size: 14px;
}

.balaton-weather-widget--layout-2 .biw-zone-inline-sep {
	margin: 0 2px;
	flex-shrink: 0;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__alert {
	flex: 0 0 auto;
	min-width: 210px;
	max-width: 270px;
	border-bottom: none;
	border-right: 1px solid rgba(15, 23, 42, 0.07);
	display: flex;
	align-items: center;
	padding: 14px 18px;
	position: relative;
	overflow: hidden;
}

/* Háttér hullám vízjel */
.balaton-weather-widget--layout-2 .balaton-weather-widget__alert::after {
	content: '';
	position: absolute;
	right: -6px;
	bottom: -6px;
	width: 76px;
	height: 76px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32' fill='none'%3E%3Cpath d='M2 14c4-8 8-8 12 0s8 8 12 0 8-8 12 0' stroke='%230284c7' stroke-width='3.5' stroke-linecap='round' fill='none' opacity='0.5'/%3E%3Cpath d='M2 26c4-8 8-8 12 0s8 8 12 0 8-8 12 0' stroke='%230284c7' stroke-width='2.5' stroke-linecap='round' fill='none' opacity='0.3'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.2;
	pointer-events: none;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__alert-texts {
	flex-direction: column;
	gap: 0;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__alert-text {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__alert-shield svg,
.balaton-weather-widget--layout-2 .balaton-weather-widget__alert-warning-icon svg {
	width: 24px;
	height: 24px;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__alert-check svg {
	width: 17px;
	height: 17px;
}

/* ── Body: 4 elem egyenletesen elosztva ────────────────────── */

.balaton-weather-widget--layout-2 .balaton-weather-widget__body {
	flex: 1;
	padding: 10px 20px;
	background-position: right center;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	gap: 0;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__main {
	flex: 0 0 auto;
	gap: 14px;
	padding: 8px 0;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__current {
	flex: 0 0 auto;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__icon {
	flex-basis: 64px;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	font-size: 34px;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__icon img {
	width: 56px;
	height: 56px;
}

/* Város és hőmérséklet */
.balaton-weather-widget--layout-2 .balaton-weather-widget__city {
	font-size: 18px;
	font-weight: 800;
	margin-bottom: 2px;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__temp {
	font-size: 38px;
	margin-bottom: 3px;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__temp-unit {
	font-size: 25px;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__desc {
	font-size: 13px;
}

/* Vízhőmérséklet Layout 2-ben: azonos méret és stílus, mint a szél/UV kártyák */
.balaton-weather-widget--layout-2 .balaton-weather-widget__water {
	flex: 0 0 150px;
	width: 150px;
	align-self: stretch;
	box-sizing: border-box;
	margin-top: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10px 16px;
	gap: 5px;
	min-width: auto;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.80);
	box-shadow: none;
	backdrop-filter: none;
	border: none;
	position: relative;
	z-index: 1;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__water-icon {
	flex-shrink: 0;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__water-label {
	font-size: 10px;
	font-weight: 500;
	color: #075985;
	line-height: 1.3;
}

.balaton-weather-widget--layout-2 .balaton-weather-widget__water-value {
	font-size: 22px;
	font-weight: 900;
}

/* ── Footer: jobb panel ──────────────────────────────────── */

.balaton-weather-widget--layout-2 .balaton-weather-widget__footer {
	flex: 0 0 auto;
	min-width: 145px;
	border-top: none;
	border-left: 1px solid rgba(148, 163, 184, 0.16);
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 5px;
	padding: 12px 15px;
}

/* ══════════════════════════════════════════════════════════════
   Layout 3 – Oldalsáv  (max 150 px széles, portrait / álló)
   Ajánlott: WordPress oldalsávba (sidebar widget area).
   ══════════════════════════════════════════════════════════════ */

.balaton-weather-widget--layout-3 {
	max-width: 150px;
	width: 150px;
	height: auto;
	border-radius: 20px;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__alert {
	padding: 8px 10px 7px;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__alert-zones {
	display: none;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__alert-text {
	font-size: 10px;
	font-weight: 700;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__alert-shield svg,
.balaton-weather-widget--layout-3 .balaton-weather-widget__alert-warning-icon svg {
	width: 18px;
	height: 18px;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__alert-check svg {
	width: 14px;
	height: 14px;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__zones-inline {
	font-size: 9.5px;
	flex-wrap: wrap;
	gap: 1px 0;
	margin-top: 3px;
}

.balaton-weather-widget--layout-3 .biw-zone-inline-num {
	font-size: 10.5px;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__body {
	padding: 12px 10px 10px;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__main {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 5px;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__icon {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 13px;
	font-size: 28px;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__icon img {
	width: 44px;
	height: 44px;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__city {
	font-size: 11.5px;
	font-weight: 800;
	white-space: normal;
	overflow-wrap: break-word;
	text-align: center;
	margin-bottom: 1px;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__temp {
	font-size: 28px;
	letter-spacing: -1px;
	margin-bottom: 3px;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__temp-unit {
	font-size: 18px;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__desc {
	font-size: 10.5px;
	text-align: center;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__water {
	margin-top: 10px;
	padding: 8px 10px;
	border-radius: 12px;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__water-label {
	font-size: 10.5px;
	line-height: 1.3;
	text-align: center;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__water-value {
	font-size: 18px;
	margin-left: 0;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__footer {
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 7px 10px 9px;
}

/* Oldalsávban a hullám ikon elrejtve, hogy a link egy sorba férjen */
.balaton-weather-widget--layout-3 .balaton-weather-widget__brand-icon {
	display: none;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__brand-text {
	font-size: 9px;
	letter-spacing: 0.02em;
}

.balaton-weather-widget--layout-3 .balaton-weather-widget__updated {
	font-size: 9px;
	justify-content: center;
	text-align: center;
	flex-wrap: wrap;
}

/* ── Reszponzív ──────────────────────────────────────────────── */

@media (max-width: 480px) {
	.balaton-weather-widget {
		border-radius: 20px;
		height: auto;
	}

	.balaton-weather-widget__body {
		padding: 16px 16px 15px;
	}

	.balaton-weather-widget__main {
		gap: 14px;
	}

	.balaton-weather-widget__icon {
		flex-basis: 62px;
		width: 62px;
		height: 62px;
		border-radius: 16px;
		font-size: 34px;
	}

	.balaton-weather-widget__icon img {
		width: 56px;
		height: 56px;
	}

	.balaton-weather-widget__city {
		font-size: 18px;
	}

	.balaton-weather-widget__temp {
		font-size: 36px;
	}

	.balaton-weather-widget__temp-unit {
		font-size: 24px;
	}

	.balaton-weather-widget__water {
		flex-wrap: wrap;
		gap: 6px;
	}

	.balaton-weather-widget__water-value {
		margin-left: auto;
	}

	.balaton-weather-widget__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 10px 16px 13px;
	}

	.balaton-weather-widget__alert-zones {
		padding-left: 0;
	}

	.balaton-weather-widget__zones-inline {
		flex-wrap: wrap;
	}
}