/**
 * کارت آب‌وهوا — چیدمان فشرده
 *
 * اندازه‌ی پایه برای جا شدن در قابی حدود ۳۰۰×۲۰۰ پیکسل انتخاب شده است: ارتفاع
 * کارت با محتوای کامل به‌صورت `--vw-height` کنترل می‌شود و همه‌ی اندازه‌های
 * داخلی با em نسبت به فونت پایه تعریف شده‌اند، بنابراین با تغییر یک متغیر
 * کل کارت به‌طور یکنواخت کوچک یا بزرگ می‌شود.
 *
 * همه‌ی رنگ‌ها متغیر هستند تا با پوسته‌ی سایت هماهنگ شوند، و رنگ غالب کارت از
 * روی وضعیت هوا با کلاس‌های .vw-card--tone-* عوض می‌شود.
 */

.vw-card {
	--vw-size: 13px;
	--vw-width: 300px;

	--vw-bg: #ffffff;
	--vw-fg: #1c2430;
	--vw-muted: #8b95a3;
	--vw-line: rgba(28, 36, 48, 0.08);
	--vw-tint: #f7f9fb;
	--vw-tone: #5b8bb5;
	--vw-tone-soft: rgba(91, 139, 181, 0.09);
	--vw-warn-bg: #fffaf0;
	--vw-warn-line: rgba(180, 140, 40, 0.28);
	--vw-warn-fg: #8a6a12;
	--vw-radius: 14px;
	--vw-gap: 0.4em;

	box-sizing: border-box;
	direction: rtl;
	display: flex;
	flex-direction: column;
	gap: var(--vw-gap);
	inline-size: min(100%, var(--vw-width));
	margin: 0;
	padding: 0.72em 0.8em;
	background: var(--vw-bg);
	color: var(--vw-fg);
	border: 1px solid var(--vw-line);
	border-radius: var(--vw-radius);
	font-size: var(--vw-size);
	line-height: 1.32;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}

.vw-card *,
.vw-card *::before,
.vw-card *::after {
	box-sizing: border-box;
}

/* رنگ غالب بر پایه‌ی وضعیت هوا؛ همه‌ی رنگ‌ها کم‌اشباع‌اند تا ظریف بمانند. */

.vw-card--tone-clear   { --vw-tone: #c9902a; --vw-tone-soft: rgba(201, 144, 42, 0.10); }
.vw-card--tone-cloud   { --vw-tone: #6b7785; --vw-tone-soft: rgba(107, 119, 133, 0.09); }
.vw-card--tone-fog     { --vw-tone: #7b8794; --vw-tone-soft: rgba(123, 135, 148, 0.09); }
.vw-card--tone-rain    { --vw-tone: #4a7fa5; --vw-tone-soft: rgba(74, 127, 165, 0.10); }
.vw-card--tone-snow    { --vw-tone: #6f95b8; --vw-tone-soft: rgba(111, 149, 184, 0.10); }
.vw-card--tone-storm   { --vw-tone: #7d68a3; --vw-tone-soft: rgba(125, 104, 163, 0.10); }
.vw-card--tone-neutral { --vw-tone: #5b8bb5; --vw-tone-soft: rgba(91, 139, 181, 0.09); }

/* --- کارت بیرونی: فقط دما و وضعیت آسمان --- */

.vw-card--compact {
	padding: 0;
	gap: 0;
	/* پاپ‌آپ بیرون از کارت باز می‌شود و نباید بریده یا پس‌زمینه بگیرد. */
	overflow: visible;
	background: var(--vw-bg);
}

.vw-trigger {
	display: flex;
	align-items: center;
	gap: 0.55em;
	inline-size: 100%;
	margin: 0;
	padding: 0.6em 0.72em;
	font: inherit;
	color: inherit;
	text-align: start;
	background: none;
	border: 0;
	border-radius: var(--vw-radius);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.vw-trigger:hover {
	background: var(--vw-tone-soft);
}

.vw-trigger:focus {
	outline: none;
}

.vw-trigger:focus-visible {
	outline: 2px solid var(--vw-tone);
	outline-offset: -3px;
}

.vw-trigger__text {
	display: flex;
	flex-direction: column;
	gap: 0.05em;
	min-inline-size: 0;
}

/* نشان زرد وی‌پی‌ان کنار دما؛ متنش داخل پاپ‌آپ توضیح داده می‌شود. */
.vw-trigger__vpn {
	display: inline-flex;
	align-items: center;
	color: var(--vw-warn-fg, #c9902a);
	flex: 0 0 auto;
}

.vw-trigger__vpn-icon {
	inline-size: 1.15em;
	block-size: 1.15em;
}

.vw-trigger__more {
	margin-inline-start: auto;
	padding-inline-start: 0.2em;
	color: var(--vw-muted);
	opacity: 0.55;
	flex: 0 0 auto;
	transition: opacity 0.15s ease;
}

.vw-trigger__more-icon {
	inline-size: 0.95em;
	block-size: 0.95em;
}

.vw-trigger:hover .vw-trigger__more {
	opacity: 0.9;
}

.vw-card--wide .vw-trigger {
	padding: 0.35em 0.7em;
}

.vw-screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- پاپ‌آپ جزئیات: پرده‌ی سیاه، پنل و کلید بستن --- */

html.vw-dialog-open {
	overflow: hidden;
}

.vw-dialog {
	--vw-dialog-w: 620px;

	inline-size: min(100% - 2em, var(--vw-dialog-w));
	max-inline-size: none;
	max-block-size: min(100% - 2em, 46em);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: var(--vw-bg);
	color: var(--vw-fg);
	font-size: 14px;
	line-height: 1.55;
	overflow: hidden;
}

/* سایه‌ی ۱۰۰vmax همان پرده‌ی سیاه را در مرورگرهای بدون ::backdrop هم می‌سازد. */
.vw-dialog[open] {
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.82), 0 22px 64px rgba(0, 0, 0, 0.45);
}

.vw-dialog::backdrop {
	background: rgba(0, 0, 0, 0.82);
}

.vw-dialog:not([open]) {
	display: none;
}

.vw-dialog__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	max-block-size: min(100% - 2em, 46em);
}

.vw-dialog__body {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	padding: 1.1em 1.1em 1.2em;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.vw-dialog__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em;
	padding-inline-end: 2.4em;
}

.vw-dialog__title {
	margin: 0;
	font-size: 1.16em;
	font-weight: 700;
	color: var(--vw-fg);
}

.vw-dialog__meta {
	font-size: 0.85em;
	color: var(--vw-muted);
}

.vw-dialog__feels {
	margin: 0;
	font-size: 0.9em;
	color: var(--vw-muted);
}

.vw-dialog__close {
	position: absolute;
	inset-block-start: 0.6em;
	inset-inline-end: 0.6em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.1em;
	block-size: 2.1em;
	padding: 0;
	color: var(--vw-muted);
	background: var(--vw-tint);
	border: 1px solid var(--vw-line);
	border-radius: 50%;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.15s ease, background 0.15s ease;
}

.vw-dialog__close:hover {
	color: var(--vw-fg);
	background: var(--vw-tone-soft);
}

.vw-dialog__close:focus-visible {
	outline: 2px solid var(--vw-tone);
	outline-offset: 2px;
}

.vw-dialog__close-icon {
	inline-size: 0.9em;
	block-size: 0.9em;
}

/* داخل پاپ‌آپ، بخش‌ها دیگر نیازی به چیدمان فشرده‌ی کارت بیرونی ندارند. */

.vw-dialog .vw-body {
	display: contents;
}

.vw-dialog .vw-forecast {
	margin-block-start: 0.2em;
}

/* آیکون‌ها اندازه‌ی خود را از فونت پایه می‌گیرند تا با کارت هم‌مقیاس بمانند. */

.vw-icon {
	display: block;
	inline-size: 1.15em;
	block-size: 1.15em;
	flex: 0 0 auto;
}


.vw-notice {
	display: grid;
	gap: 0.15em;
	padding: 0.5em 0.7em;
	border-radius: 9px;
	border: 1px solid var(--vw-warn-line);
	background: var(--vw-warn-bg);
	color: var(--vw-warn-fg);
	font-size: 0.72em;
	line-height: 1.45;
	flex: 0 0 auto;
}

.vw-notice strong {
	font-weight: 600;
}

.vw-notice__meta {
	opacity: 0.75;
	word-break: break-word;
}

/* ------------------------------------------------------- وضعیت هم‌اکنون */

.vw-now {
	display: flex;
	align-items: center;
	gap: 0.6em;
	min-inline-size: 0;
	flex: 0 0 auto;
}

.vw-now__icon {
	color: var(--vw-tone);
	line-height: 0;
	flex: 0 0 auto;
}

.vw-now__glyph {
	inline-size: 2.35em;
	block-size: 2.35em;
}

.vw-now__text {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-inline-size: 0;
}

.vw-now__temp {
	display: flex;
	align-items: baseline;
	gap: 0.08em;
	margin: 0;
	line-height: 1;
}

.vw-now__value {
	font-size: 1.85em;
	font-weight: 600;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--vw-tone);
}

.vw-now__unit {
	font-size: 0.68em;
	font-weight: 500;
	color: var(--vw-muted);
}

/* وضعیت آسمان زیر دما؛ دمای محسوس دیگر این‌جا نیست و در پاپ‌آپ می‌آید. */

.vw-now__label {
	font-size: 0.82em;
	font-weight: 500;
	color: var(--vw-fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* در چیدمان نواری کارت فقط یک دکمه‌ی کوچک است، پس کل چیدمان را همان دکمه می‌برد. */

.vw-card--wide {
	--vw-gap: 0.7em;

	inline-size: min(100%, 100%);
	max-inline-size: none;
	padding: 0;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.vw-card--wide .vw-trigger {
	inline-size: auto;
	min-inline-size: 11em;
}

/* پنل‌های کیفیت هوا و بارش، با همان زبان بصری جزئیات. */

.vw-panel--air,
.vw-panel--rain {
	display: flex;
	align-items: center;
	gap: 0.3em;
	flex: 0 0 auto;
	padding: 0.3em 0.6em;
	background: var(--vw-tone-soft);
	border-radius: 9px;
}

.vw-panel--air-good,
.vw-panel--air-moderate {
	--vw-tone-soft: rgba(46, 158, 91, 0.10);
}

.vw-panel--air-sensitive,
.vw-panel--air-unhealthy {
	--vw-tone-soft: rgba(224, 123, 40, 0.12);
}

.vw-panel--air-very-unhealthy,
.vw-panel--air-hazardous {
	--vw-tone-soft: rgba(168, 52, 47, 0.12);
}

.vw-panel--air .vw-detail__icon,
.vw-panel--rain .vw-detail__icon {
	inline-size: 1.1em;
	block-size: 1.1em;
	opacity: 1;
}

.vw-panel--air-pm,
.vw-panel--rain-total {
	padding-inline-start: 0.5em;
	border-inline-start: 1px solid var(--vw-line);
}

/* ------------------------------------------------------------- جزئیات */

.vw-details {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.1em 0.8em;
	padding-top: 0.5em;
	border-top: 1px solid var(--vw-line);
	flex: 0 0 auto;
}

.vw-detail {
	display: flex;
	align-items: center;
	gap: 0.25em;
	min-inline-size: 0;
	color: var(--vw-muted);
}

.vw-detail__icon {
	color: var(--vw-tone);
	opacity: 0.7;
	line-height: 0;
}

.vw-detail__icon .vw-icon {
	inline-size: 0.95em;
	block-size: 0.95em;
}

.vw-detail__value {
	display: inline-flex;
	align-items: baseline;
	gap: 0.25em;
	font-size: 0.76em;
	font-weight: 600;
	color: var(--vw-fg);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vw-detail__value bdi {
	unicode-bidi: isolate;
}

.vw-detail__note {
	font-weight: 400;
	font-size: 0.9em;
	color: var(--vw-muted);
}

/* رنگ فقط برای شاخص‌های هشداردهنده، آن هم ملایم. */

.vw-detail--high .vw-detail__icon,
.vw-detail--very-high .vw-detail__icon,
.vw-detail--extreme .vw-detail__icon {
	color: #c07a3a;
	opacity: 1;
}

.vw-detail--extreme .vw-detail__icon {
	color: #a4557a;
}

/* ------------------------------------------------------------- پیش‌بینی */

.vw-forecast {
	list-style: none;
	margin: 0;
	padding: 0.5em 0 0;
	border-top: 1px solid var(--vw-line);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 0.1em;
	flex: 0 0 auto;
}

.vw-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.12em;
	min-inline-size: 0;
	text-align: center;
}

.vw-day__date {
	margin: 0;
	font-size: 0.66em;
	font-weight: 500;
	color: var(--vw-muted);
	white-space: nowrap;
}

.vw-day__icon {
	color: var(--vw-tone);
	line-height: 0;
}

.vw-day__icon .vw-icon {
	inline-size: 1.55em;
	block-size: 1.55em;
}

.vw-day__nums {
	display: flex;
	align-items: baseline;
	gap: 0.14em;
	margin: 0;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
	unicode-bidi: isolate;
}

.vw-day__max {
	font-size: 0.82em;
	font-weight: 600;
}

.vw-day__slash {
	font-size: 0.72em;
	color: var(--vw-muted);
	opacity: 0.55;
}

.vw-day__min {
	font-size: 0.76em;
	color: var(--vw-muted);
}

.vw-day__pop {
	font-size: 0.64em;
	font-weight: 600;
	color: #4a7fa5;
	font-variant-numeric: tabular-nums;
}

.vw-day__pop--none {
	color: transparent;
}

/* ------------------------------------------------- انتخابگر شهر و خطا */

/* در چیدمان نواری، جست‌وجوگر به‌صورت جمع‌شونده در همان سطر می‌ماند تا ارتفاع
   نوار بالا نرود. */

.vw-card--wide .vw-picker {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	order: 6;
}

.vw-card--wide .vw-picker__body {
	position: absolute;
	z-index: 20;
	inset-block-start: calc(100% + 8px);
	inset-inline-end: 0;
	inline-size: 300px;
	max-inline-size: 86vw;
	padding: 12px;
	background: var(--vw-bg);
	border: 1px solid var(--vw-line);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}

.vw-card--wide {
	position: relative;
}

/* جست‌وجوگر جمع‌شونده است تا ارتفاع پیش‌فرض کارت جمع بماند؛ فقط در حالتی که
   کاربر باید شهر را انتخاب کند باز می‌شود. */

.vw-picker {
	padding-top: 0.45em;
	border-top: 1px solid var(--vw-line);
	flex: 0 0 auto;
}

.vw-picker__summary {
	display: block;
	margin: 0;
	color: var(--vw-muted);
	font-size: 0.72em;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	list-style: none;
	transition: color 0.15s ease;
}

.vw-picker__summary::-webkit-details-marker {
	display: none;
}

.vw-picker__summary:hover {
	color: var(--vw-tone);
}

.vw-picker__summary::after {
	content: ' ‹';
	opacity: 0.6;
}

.vw-picker[open] .vw-picker__summary::after {
	content: ' ⌃';
}

.vw-picker__body {
	padding-top: 0.4em;
}

.vw-picker__label {
	display: block;
	margin-bottom: 0.25em;
	font-size: 0.7em;
	font-weight: 500;
	color: var(--vw-muted);
}

.vw-picker__row {
	display: flex;
	gap: 0.35em;
}

.vw-picker__search {
	position: relative;
	flex: 1 1 auto;
	min-inline-size: 0;
	display: flex;
	align-items: center;
}

.vw-picker__search-icon {
	position: absolute;
	inset-inline-start: 0.5em;
	inline-size: 0.85em;
	block-size: 0.85em;
	color: var(--vw-muted);
	pointer-events: none;
}

.vw-picker__input {
	inline-size: 100%;
	padding: 0.3em 1.9em 0.3em 0.5em;
	border: 1px solid var(--vw-line);
	border-radius: 7px;
	background: var(--vw-tint);
	color: var(--vw-fg);
	font: inherit;
	font-size: 0.74em;
	transition: border-color 0.15s ease;
}

.vw-picker__input::placeholder {
	color: var(--vw-muted);
}

.vw-picker__input:focus {
	outline: none;
	border-color: var(--vw-tone);
}

.vw-picker__clear {
	flex: 0 0 auto;
	padding: 0.3em 0.6em;
	border: 1px solid var(--vw-line);
	border-radius: 7px;
	background: var(--vw-bg);
	color: var(--vw-muted);
	font: inherit;
	font-size: 0.7em;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.vw-picker__clear:hover {
	color: var(--vw-fg);
	border-color: var(--vw-tone);
}

.vw-picker__results {
	list-style: none;
	margin: 0.35em 0 0;
	padding: 0;
	border: 1px solid var(--vw-line);
	border-radius: 8px;
	background: var(--vw-bg);
	max-block-size: 9em;
	overflow-y: auto;
}

.vw-picker__results[hidden] {
	display: none;
}

.vw-picker__option {
	margin: 0;
	border-bottom: 1px solid var(--vw-line);
}

.vw-picker__option:last-child {
	border-bottom: 0;
}

.vw-picker__button {
	display: block;
	inline-size: 100%;
	padding: 0.35em 0.6em;
	border: 0;
	background: none;
	color: var(--vw-fg);
	font: inherit;
	font-size: 0.74em;
	text-align: start;
	cursor: pointer;
}

.vw-picker__button:hover,
.vw-picker__button:focus {
	background: var(--vw-tint);
	outline: none;
}

.vw-picker__button small {
	display: block;
	color: var(--vw-muted);
	font-size: 0.86em;
}

.vw-picker__status,
.vw-picker__saved {
	margin: 0.3em 0 0;
	font-size: 0.68em;
	color: var(--vw-muted);
	min-block-size: 1em;
}

.vw-error,
.vw-empty {
	margin: 0;
	padding: 0.6em 0.7em;
	border-radius: 9px;
	background: var(--vw-tint);
	color: var(--vw-muted);
	font-size: 0.74em;
	line-height: 1.45;
	flex: 1 1 auto;
}

/* ------------------------------------------------------------------ پاورقی */

.vw-card__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15em 0.8em;
	font-size: 0.64em;
	color: var(--vw-muted);
	flex: 0 0 auto;
}

/* ------------------------------------------------------------ حالت بلوک */

/* در ویرایشگر و در نمایش بلوک، کارت نباید قاب داخلی داشته باشد چون قاب را
   خود ویرایشگر می‌کشد. */

.vw-card--block {
	border: 0;
	padding: 0;
	background: none;
	overflow: visible;
}

/* حالت فشرده فقط در قاب کوچک استفاده می‌شود و پیش‌بینی را جمع‌تر می‌کند. */

.vw-card--dense .vw-details {
	gap: 0.1em 0.7em;
}

.vw-card--dense .vw-day__icon .vw-icon {
	inline-size: 1.25em;
	block-size: 1.25em;
}

/* ------------------------------------------------------------------ واکنش‌گرا */

@media (max-width: 340px) {
	.vw-card {
		--vw-size: 14px;
	}

	.vw-now__glyph {
		inline-size: 2.4em;
		block-size: 2.4em;
	}

	.vw-details {
		gap: 0.1em 0.7em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vw-card *,
	.vw-card *::before,
	.vw-card *::after {
		transition: none !important;
	}
}