/**
 * چیدمان + ظاهر پیش‌فرض.
 *
 * انتخاب‌کننده‌ها عمداً تک‌کلاسی‌اند. المنتور برای هر ویجت
 * `.elementor-element-XXXX .nb-…` تولید می‌کند که وزنش بالاتر است،
 * پس هر چیزی که در پنل تنظیم کنی همیشه بر اینها غالب می‌شود.
 * اینها فقط تضمین می‌کنند ویجت از همان لحظه‌ی اول درست دیده شود.
 */

.nb-product-subtitle {
	margin: 2px 0 10px;
	line-height: 1.7;
	color: #8b93a7;
}

.nb-product-note {
	margin: 0 0 18px;
	padding: 14px 16px;
	line-height: 2;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 10px;
	background: rgba(0, 0, 0, .32);
}

/* ---- حالتِ ستونی: آیکن یک ستون، متن ستونِ دیگر ----
   همه‌ی خط‌های متن هم‌تراز می‌مانند و زیرِ آیکن نمی‌روند. */

.nb-product-note--column {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

/* در RTL آیکن را می‌برد سمت چپ، در LTR سمت راست */
.nb-product-note--column.nb-product-note--icon-end {
	flex-direction: row-reverse;
}

.nb-product-note--column .nb-product-note__icon {
	flex: none;
	margin-top: 5px;
}

.nb-product-note--column .nb-product-note__text {
	flex: 1;
	min-width: 0;
}

/* ---- حالتِ پیچیده: آیکن شناور داخلِ متن ----
   خط اول کنارِ آیکن می‌نشیند، خط‌های بعدی از زیرِ آیکن شروع می‌شوند.

   float: right پیش از inline-start عمدی است — مرورگرِ قدیمی که مقدارِ
   منطقی را نمی‌شناسد، دستِ کم روی سایتِ راست‌به‌چپ درست می‌افتد. */

.nb-product-note--wrap .nb-product-note__icon {
	float: right;
	float: inline-start;
	margin-inline-end: 11px;
	position: relative;
	top: 5px;
}

.nb-product-note--wrap.nb-product-note--icon-end .nb-product-note__icon {
	float: left;
	float: inline-end;
	margin-inline-end: 0;
	margin-inline-start: 10px;
}

/* لایه‌ی متن فقط جهت را حمل می‌کند؛ نباید بلوکِ جدیدی بسازد وگرنه
   خط‌ها دیگر دورِ آیکنِ شناور نمی‌پیچند. */
.nb-product-note__body {
	display: block;
	/* همراهِ تراز دوطرفه؛ بدونش فاصله‌ی بین کلمه‌ها گشاد می‌شود */
	hyphens: auto;
	overflow-wrap: break-word;
}

/* پاراگرافِ اولِ متنِ تگ‌دار نباید فاصله‌ی بالا بگیرد، وگرنه آیکن
   نسبت به خط اول بالاتر می‌افتد. */
.nb-product-note__body > :first-child {
	margin-top: 0;
}

.nb-product-note__body > :last-child {
	margin-bottom: 0;
}

.nb-product-note__icon {
	display: inline-flex;
	font-size: 19px;
	line-height: 1;
	color: #e5484d;
}

.nb-product-note__icon svg {
	display: block;
	width: 1em;
	height: 1em;
}