/* ==========================================================================
   جهان‌گشت — استایل مدرن و افکت‌های اسکرول
   راهنما: کلاس‌های jg-reveal* را در Divi در فیلد «CSS Class» هر ماژول/ردیف/سکشن
   وارد کنید تا هنگام اسکرول با افکت ظاهر شوند.
   ========================================================================== */

:root {
	--jg-primary: #00457A;      /* آبی برند (از گرادیان هدر سایت) */
	--jg-accent: #f0a500;       /* رنگ تأکید */
	--jg-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--jg-radius: 16px;
}

/* --------------------------------------------------------------------------
   فونت فارسی مدرن (Vazirmatn) روی کل سایت — متن‌ها راست‌چین می‌مانند.
   آیکن‌های Divi دست‌نخورده می‌مانند چون فونت اختصاصی خودشان را دارند.
   -------------------------------------------------------------------------- */
body.jg-modern,
body.jg-modern p,
body.jg-modern a,
body.jg-modern li,
body.jg-modern h1, body.jg-modern h2, body.jg-modern h3,
body.jg-modern h4, body.jg-modern h5, body.jg-modern h6,
body.jg-modern .et_pb_text,
body.jg-modern .et_pb_module,
body.jg-modern input,
body.jg-modern textarea,
body.jg-modern button,
body.jg-modern select {
	font-family: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif !important;
}

/* --------------------------------------------------------------------------
   جلوگیری از اسکرول افقی و جابه‌جایی صفحه ناشی از هیروی تمام‌عرض.
   از clip استفاده می‌شود (نه hidden) تا افکت چسبانِ (sticky) ماک‌آپ گوشی نشکند.
   -------------------------------------------------------------------------- */
html { overflow-x: clip; }
body.jg-modern { overflow-x: clip; }

/* احترام به ترجیح کاربر برای کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
	.jg-reveal,
	.jg-reveal-left,
	.jg-reveal-right,
	.jg-reveal-scale {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   ۱) افکت‌های ریویل اسکرول (ظاهر شدن هنگام اسکرول)
   -------------------------------------------------------------------------- */
.jg-reveal,
.jg-reveal-left,
.jg-reveal-right,
.jg-reveal-scale {
	opacity: 0;
	will-change: opacity, transform;
	transition:
		opacity 0.8s var(--jg-ease),
		transform 0.8s var(--jg-ease);
}

.jg-reveal        { transform: translateY(40px); }
.jg-reveal-left   { transform: translateX(-48px); }   /* ورود از راست در RTL */
.jg-reveal-right  { transform: translateX(48px); }
.jg-reveal-scale  { transform: scale(0.92); }

/* وقتی اسکریپت کلاس in-view را اضافه کند */
.jg-reveal.in-view,
.jg-reveal-left.in-view,
.jg-reveal-right.in-view,
.jg-reveal-scale.in-view {
	opacity: 1;
	transform: none;
}

/* تأخیر پلکانی برای ظاهر شدن آیتم‌های پشت‌سرهم (روی هر آیتم بگذارید) */
.jg-delay-1.in-view { transition-delay: 0.12s; }
.jg-delay-2.in-view { transition-delay: 0.24s; }
.jg-delay-3.in-view { transition-delay: 0.36s; }
.jg-delay-4.in-view { transition-delay: 0.48s; }

/* --------------------------------------------------------------------------
   ۲) نوار پیشرفت اسکرول بالای صفحه
   -------------------------------------------------------------------------- */
#jg-scroll-progress {
	position: fixed;
	top: 0;
	right: 0;            /* RTL: از راست شروع شود */
	height: 3px;
	width: 0%;
	background: linear-gradient(90deg, var(--jg-primary), var(--jg-accent));
	z-index: 100000;
	transition: width 0.1s linear;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   ۳) دکمه بازگشت به بالا
   -------------------------------------------------------------------------- */
#jg-back-to-top {
	position: fixed;
	bottom: 24px;
	left: 24px;          /* سمت چپ تا با ویجت چت (سمت راست) تداخل نکند */
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 50%;
	background: var(--jg-primary);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.3s var(--jg-ease), transform 0.3s var(--jg-ease), background 0.2s;
	box-shadow: 0 6px 18px rgba(0, 69, 122, 0.35);
	z-index: 99990;
}
#jg-back-to-top.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#jg-back-to-top:hover { background: #003a66; }

/* --------------------------------------------------------------------------
   ۴) چند بهبود ظاهری مدرن و سراسری (ملایم و کم‌ریسک)
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

/* رنگ یکدست پس‌زمینه‌ی دکمه‌های Divi در کل سایت: تیل برند (رنگ متن دست‌نخورده) */
.jg-modern .et_pb_button,
.jg-modern .et_pb_button.et_pb_button {
	background-color: #2a9d8f !important;
	border-color: #2a9d8f !important;
	transition: transform 0.25s var(--jg-ease), box-shadow 0.25s var(--jg-ease), background-color 0.2s !important;
}
.jg-modern .et_pb_button:hover {
	background-color: #21897d !important;
	border-color: #21897d !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

/* بالا آمدن کارت‌های Blurb هنگام هاور (افکت ظریف) */
.jg-modern .jg-card-hover {
	transition: transform 0.3s var(--jg-ease), box-shadow 0.3s var(--jg-ease);
}
.jg-modern .jg-card-hover:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

/* تصاویر: بزرگ‌نمایی نرم داخل قاب هنگام هاور */
.jg-modern .jg-zoom-img img,
.jg-modern .jg-zoom-img .et_pb_image_wrap img {
	transition: transform 0.5s var(--jg-ease);
}
.jg-modern .jg-zoom-img:hover img { transform: scale(1.06); }