/* ==========================================================================
   Limo Counter Widget - assets/css/limo-counter.css
   پشتیبانی کامل از RTL / چیدمان بر اساس موقعیت آیکن / ۴ اسکین آماده
   ========================================================================== */

/* ==========================================================================
   اجبار به کشیده‌شدن ویجت در کل ارتفاع ستون
   بدون این بخش، وقتی ستون‌های المنتور هم‌ارتفاع (Equal Height) بشن و
   Vertical Align ستون روی "وسط" باشه، کل ویجت (نه فقط توضیحات) به‌صورت
   یک بلوک واحد وسط‌چین عمودی می‌شه؛ در نتیجه باکسی که توضیحاتش کوتاه‌تره
   کل محتواش (از جمله آیکن و عدد) پایین‌تر یا بالاتر از بقیه می‌افته.
   با این قانون، ویجت همیشه کل ارتفاع در دسترس رو می‌گیره و flex-start
   داخل limo-counter تضمین می‌کنه آیکن و عدد همیشه از بالا شروع بشن.
   ========================================================================== */
.elementor-widget-limo_counter {
	height: 100%;
}

.elementor-widget-limo_counter > .elementor-widget-container {
	height: 100%;
	display: flex;
}

.elementor-widget-limo_counter > .elementor-widget-container > .limo-counter {
	width: 100%;
	flex: 1 1 auto;
}

.limo-counter {
	position: relative;
	display: flex;
	align-items: center;
	/* عمداً از بالا شروع می‌شه، نه وسط: این‌طوری آیکن و عدد همیشه در یک خط ثابت
	   قرار می‌گیرن و طول متغیر توضیحات فقط ارتفاع پایین باکس رو تغییر می‌ده،
	   نه موقعیت آیکن/عدد رو. مهم برای وقتی چند باکس کنار هم با ارتفاع برابر باشن. */
	justify-content: flex-start;
	flex-direction: column;
	background-color: transparent;
	direction: rtl;
	box-sizing: border-box;
	height: 100%;
}

.limo-counter * {
	box-sizing: border-box;
}

/* -------------------------------------------------
   چیدمان بر اساس موقعیت آیکن نسبت به محتوا
------------------------------------------------- */
.limo-counter--icon-pos-top {
	flex-direction: column;
}

.limo-counter--icon-pos-bottom {
	flex-direction: column-reverse;
}

.limo-counter--icon-pos-start {
	flex-direction: row;
}

.limo-counter--icon-pos-end {
	flex-direction: row-reverse;
}

/* در حالت افقی (start/end) محتوا نباید تمام عرض را بگیرد */
.limo-counter--icon-pos-start,
.limo-counter--icon-pos-end {
	text-align: start;
}

.limo-counter__icon-wrap {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.limo-counter__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.limo-counter__icon i {
	display: block;
}

.limo-counter__image img {
	display: block;
	max-width: 100%;
	height: auto;
}

.limo-counter__content {
	/* عمداً flex نیست: چون اگر flex باشه، فرزندهاش (عدد/عنوان/توضیحات) کشیده و
	   خاصیت text-align روی چیدمانشون بی‌اثر می‌شه. با یک بلوک ساده،
	   text-align به‌درستی روی همه‌ی محتوای داخلی (حتی عدد inline-flex) اثر می‌کنه. */
	flex: 1 1 0%;
	min-width: 0;
}

.limo-counter__number-wrap {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	line-height: 1.1;
}

.limo-counter__number {
	font-size: 42px;
	font-weight: 700;
	color: #222222;
	display: inline-block;
	direction: ltr;
	unicode-bidi: bidi-override;
}

.limo-counter__prefix,
.limo-counter__suffix {
	font-size: 20px;
	font-weight: 600;
}

.limo-counter__title {
	margin: 10px 0 0 0;
	font-size: 18px;
	font-weight: 600;
	color: #333333;
}

.limo-counter__description {
	margin: 8px 0 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
}

/* ==========================================================================
   اسکین ۱: کلاسیک — بدون قاب اضافه، شبیه پیش‌فرض تمیز
   ========================================================================== */
.limo-counter--skin-classic {
	background-color: transparent;
}

.limo-counter--skin-classic .limo-counter__icon {
	background: transparent;
	color: inherit;
}

/* ==========================================================================
   اسکین ۲: باکس‌دار — کارت با سایه و پس‌زمینه سفید
   ========================================================================== */
.limo-counter--skin-boxed {
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
	padding: 32px 24px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.limo-counter--skin-boxed:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.limo-counter--skin-boxed .limo-counter__icon {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	background-color: #f2f4f7;
	color: #333333;
	font-size: 28px;
}

/* ==========================================================================
   اسکین ۳: دایره‌ای — آیکن داخل دایره رنگی
   ========================================================================== */
.limo-counter--skin-circle .limo-counter__icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #eef1ff;
	color: #4b5bfa;
	font-size: 30px;
}

.limo-counter--skin-circle .limo-counter__number {
	color: #4b5bfa;
}

/* ==========================================================================
   اسکین ۴: مینیمال — بسیار ساده، بدون بک‌گراند و بدون قاب دور آیکن
   ========================================================================== */
.limo-counter--skin-minimal .limo-counter__icon {
	background: transparent !important;
	width: auto !important;
	height: auto !important;
	font-size: 30px;
	color: #999999;
}

.limo-counter--skin-minimal .limo-counter__number {
	font-weight: 300;
}

.limo-counter--skin-minimal .limo-counter__title {
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;
}

/* ==========================================================================
   واکنش‌گرا (Responsive) - حالت پیش‌فرض برای موبایل
   ========================================================================== */
@media (max-width: 767px) {
	.limo-counter__number {
		font-size: 32px;
	}

	.limo-counter--icon-pos-start,
	.limo-counter--icon-pos-end {
		flex-direction: column;
		text-align: center;
	}
}