/* =========================
   SWE – Alap változók
   ========================= */
.swe_wrap {
	/* Befoglaló: 800px széles, container–queries engedélyezése */
	max-width: 800px;
	margin: 0 auto;
	padding: 8px;
	container-type: inline-size;
	container-name: swew;
	--swe-bg: #345b8e;           /* világosabb kék háttér */
	--swe-bg-2: #2f527f;         /* sötétebb árnyalat a gradiensekhez */
	--swe-card: #3c6192;         /* kártyák */
	--swe-text: #ffffff;         /* fő szöveg */
	--swe-text-dim: #e8effa;     /* halvány szöveg */
	--swe-accent: #f06a45;       /* narancs pötty */
	--swe-border: rgba(255,255,255,.15);
	--swe-shadow: 0 2px 10px rgba(0,0,0,.18);
}

/* --- SÖTÉT TÉMA (JS-sel kapcsolható) --- */
.swe_wrap[data-theme="dark"]{
	--swe-bg: #1e2b44;
	--swe-bg-2: #162238;
	--swe-card: #1f3556;
	--swe-text: #e9f0ff;
	--swe-text-dim: #c9d6ee;
	--swe-accent: #ff7a57;
	--swe-border: rgba(233,240,255,.12);
}

/* --- Ha inkább fix, kikommentezhető sötétebb paletta ---
:root{
  --swe-bg:#1e2b44; --swe-bg-2:#162238; --swe-card:#1f3556;
  --swe-text:#e9f0ff; --swe-text-dim:#c9d6ee; --swe-accent:#ff7a57; --swe-border:rgba(233,240,255,.12);
}
*/

/* =========================
   Általános megjelenés
   ========================= */
.swe_wrap, .swe_wrap * {
	box-sizing: border-box;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.swe_wrap {
	background: linear-gradient(135deg, var(--swe-bg), var(--swe-bg-2));
	border-radius: 14px;
	color: var(--swe-text);
	position: relative;
}

/* Téma gomb */
.swe_theme_toggle{
	appearance: none;
	border: 1px solid var(--swe-border);
	background: transparent;
	color: var(--swe-text);
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	float: right;
	cursor: pointer;
}

/* =========================
   CURRENT – fő panel
   ========================= */
.swe_current{
	border: 1px solid var(--swe-border);
	border-radius: 16px;
	padding: 18px 20px;
	background: rgba(255,255,255,.03);
	box-shadow: var(--swe-shadow);
}
.swe_current_head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.swe_loc .swe_city{
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
}
.swe_loc .swe_meta{
	font-size: 13px;
	color: var(--swe-text-dim);
}
.swe_cond_dot{
	width: 48px;
	height: 48px;
	background: var(--swe-accent);
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(240,106,69,.18);
}
.swe_temp_line{
	display: flex;
	align-items: center;
	gap: 20px;
}
.swe_now_temp{
	font-size: 56px;
	font-weight: 600;
}
.swe_now_facts{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--swe-text-dim);
	font-size: 14px;
}

/* =========================
   HOURLY + DAILY rács
   ========================= */
.swe_grid{
	margin-top: 12px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

/* @container: nagyobb szélességnél 2 oszlopra vált */
@container swew (min-width: 600px){
	.swe_grid{
		grid-template-columns: 1fr 1fr;
	}
	.swe_now_temp{ font-size: 64px; }
}

.swe_card{
	border: 1px solid var(--swe-border);
	border-radius: 14px;
	background: rgba(255,255,255,.04);
	padding: 10px;
	box-shadow: var(--swe-shadow);
}
.swe_card_title{
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--swe-text-dim);
	margin: 6px 4px 10px;
}
.swe_list{
	list-style: none;
	margin: 0;
	padding: 0;
}
.swe_row{
	display: grid;
	grid-template-columns: 18px 70px 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 8px 6px;
	border-radius: 10px;
}
.swe_row + .swe_row{ border-top: 1px dashed var(--swe-border); }

.swe_row_dot{
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--swe-accent);
	display: inline-block;
}
.swe_row_time{
	font-weight: 600;
	color: var(--swe-text);
	font-size: 14px;
}
.swe_row_desc{
	color: var(--swe-text-dim);
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.swe_row_temp{
	font-weight: 600;
}
.swe_min{ opacity: .75; }

/* egyszerű “felhő” helyőrző az ikon mezőben */
.swe_row_icon{
	width: 18px; height: 18px; display: inline-grid; place-items:center;
}
.swe_row_cloud{
	width: 14px; height: 10px; border-radius: 999px;
	background: rgba(255,255,255,.85);
	box-shadow: 8px 0 0 rgba(255,255,255,.85), 4px -5px 0 rgba(255,255,255,.85);
}