/* ==========================================================================
   شمارنده‌ی مشترک — .nb-cd
   ==========================================================================
   کارتِ محصول، «تخفیفات ویژه» و «شمارش معکوس تخفیف» همه همین را
   می‌گیرند. کنترل‌ها: inc/class-nb-theme-countdown.php.

   هر عددِ ظاهری از یک متغیر می‌آید تا کنترلِ المنتور (که روی ریشه
   متغیر می‌نویسد) و قاعده‌ی پیش‌فرضِ همین فایل با هم نجنگند.
   ========================================================================== */

.nb-cd {
	--nb-cd-gap: 6px;
	--nb-cd-lg: 2px;
	--nb-cd-ld: column;
	--nb-cd-sep: ":";
	--nb-cd-sep-y: 50%;
}

/*
 * grid و نه flex: `grid-auto-columns: 1fr` روی یک گریدِ هم‌اندازه‌ی محتوا
 * همه‌ی ستون‌ها را هم‌پهنای بزرگ‌ترینشان می‌کند. با flex پهنای هر خانه را
 * برچسبش تعیین می‌کرد — «دقیقه» پهن‌تر از «روز» — و همین ایرادِ مالک بود.
 *
 * direction: ltr یعنی ترتیبِ ساعت: روز چپ، ثانیه راست، مثلِ ۰۰:۰۰:۰۰.
 */
.nb-cd__units {
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var( --nb-cd-gap );
	direction: ltr;
	vertical-align: middle;
}

.nb-cd--rtl .nb-cd__units {
	direction: rtl;
}

.nb-cd__units[hidden],
.nb-cd__u[hidden] {
	display: none;
}

.nb-cd__u {
	position: relative;
	display: flex;
	flex-direction: var( --nb-cd-ld );
	align-items: center;
	justify-content: center;
	gap: var( --nb-cd-lg );
	min-width: 0;

	/* محتوای خانه دوباره راست‌به‌چپ: «۰۶ ساعت» وقتی برچسب کنارِ عدد است. */
	direction: rtl;
	line-height: 1.2;
	white-space: nowrap;
}

/*
 * عرضِ ثابتِ ارقام.
 *
 * tabular-nums به‌تنها کافی نیست: قلمِ سایت (IRANYekannum) برای ارقامِ فارسی
 * جدولِ هم‌عرض ندارد. اندازه‌گیری روی سایتِ زنده، در ۱۰۰px: «۱» ۲۸، «۰» ۴۹،
 * «۳» ۶۶؛ پهن‌ترین دو رقم «۳۳» = ۱.۳۲۶em و کم‌عرض‌ترین «۱۱» = ۰.۵۶۷em.
 * پس min-width باید دست‌کم ۱.۳۳em باشد — با ۱.۲۵em (۰.۶۷.۰) عددهایی مثلِ
 * «۳۴» هنوز خانه را پهن می‌کردند و نشان با هر ثانیه چپ و راست می‌شد.
 * هیچ‌جا این عدد کوچک‌تر نشود؛ برای جمع‌وجور کردن، font-size را کم کن.
 *
 * وزن ارث می‌رسد (نه 700 ثابت) تا «وزنِ متن»ِ المنتور روی عدد هم اثر
 * کند. ویجت‌هایی که عددِ درشت می‌خواهند خودشان 700 می‌دهند.
 */
.nb-cd__n {
	display: inline-block;
	min-width: 1.34em;
	font-weight: inherit;
	font-style: normal;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	text-align: center;
}

.nb-cdw .nb-cd__n {
	font-weight: 700;
}

/* تا اولین تیکِ موتور، خانه‌ها جا می‌گیرند ولی دیده نمی‌شوند — «۰۰:۰۰:۰۰»
   چند ثانیه‌ای که جاوااسکریپت هنوز نرسیده هم غلط است و هم پهنای دیگری دارد. */
[data-nb-cd]:not( .is-live ) .nb-cd__units {
	visibility: hidden;
}

.nb-cd__l {
	font-size: 0.72em;
	font-style: normal;
	line-height: 1.3;
	opacity: 0.72;
}

/* ---- جداکننده ----
   روی خودِ خانه و نه یک عنصرِ جدا: عنصرِ جدا در گرید یک ستونِ ۱fr دیگر
   می‌شد و هم‌اندازه بودنِ خانه‌ها را می‌شکست. وسطِ فاصله‌ی دو خانه
   می‌نشیند. */
.nb-cd--sep .nb-cd__u:not( .is-lead )::before {
	content: var( --nb-cd-sep );
	position: absolute;
	top: var( --nb-cd-sep-y );
	left: calc( var( --nb-cd-gap ) / -2 );
	transform: translate( -50%, -50% );

	font-weight: 700;
	line-height: 1;
	opacity: 0.55;
	pointer-events: none;
}

.nb-cd--rtl.nb-cd--sep .nb-cd__u:not( .is-lead )::before {
	right: calc( var( --nb-cd-gap ) / -2 );
	left: auto;
	transform: translate( 50%, -50% );
}

/* ---- ظاهرها ---- */

/* بدونِ پس‌زمینه و کادرِ پیش‌فرض — مالک خودش از «خانه‌ها» در المنتور می‌دهد.
   فقط فاصله و گردی، تا وقتی پس‌زمینه داده شد خانه شکل داشته باشد. */
.nb-cd--boxes .nb-cd__u {
	padding: 0.5em 0.45em;
	border-radius: var( --nb-radius-sm, 10px );
}

.nb-cd--boxes.nb-cd--sep {
	--nb-cd-gap: 14px;
}

/* ساعتِ دیجیتال: بی‌کادر و فشرده. */
.nb-cd--plain {
	--nb-cd-gap: 0.55em;
	--nb-cd-ld: row;
	--nb-cd-lg: 0.2em;
}

.nb-cd--plain .nb-cd__u {
	padding: 0;
}

/* ---- پایان ---- */

.nb-cd__done {
	display: inline-block;
	font-weight: 600;
	opacity: 0.75;
}

/* ==========================================================================
   ویجتِ «شمارش معکوس تخفیف» — .nb-cdw
   ==========================================================================
   ریشه همیشه یک flex-wrap افقی است. «عنوان بالای شمارنده» یعنی سرآیند
   flex-basis:100% بگیرد و شمارنده به خطِ بعد برود؛ «کنارِ شمارنده» یعنی
   auto. پس «تراز» در هر دو چیدمان همان یک justify-content است. */

.nb-cdw {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var( --nb-cdw-jc, flex-start );
	gap: var( --nb-cdw-gap, 10px ) 16px;
	text-align: var( --nb-cdw-ta, right );
}

.nb-cdw__head {
	display: flex;
	flex: 0 1 var( --nb-cdw-head, 100% );
	flex-wrap: wrap;
	align-items: baseline;
	/* جدا از ریشه: در «دو سر» ریشه space-between است ولی عنوان و
	   زیرعنوان باید کنارِ هم بمانند، نه در دو سرِ سرآیند. */
	justify-content: var( --nb-cdw-hjc, flex-start );
	order: var( --nb-cdw-order, 0 );
	gap: 4px 10px;
	min-width: 0;
}

.nb-cdw__head:only-child {
	flex-basis: 100%;
}

.nb-cdw > .nb-cd__units {
	order: 1;
}

.nb-cdw__title {
	margin: 0;
	font-weight: 700;
	line-height: 1.5;
}

.nb-cdw__sub {
	flex: 0 1 var( --nb-cdw-sub, auto );
	color: #e5484d;
	font-size: 0.85em;
	line-height: 1.6;
}