/* =========================================================
   Ararat Tools — Hero Section Widget
   ========================================================= */

.ararat-hero-section {
	position: relative;
	display: flex;
	direction: ltr; /* physical left→right ordering of the two columns, independent of site language */
	align-items: stretch;
	width: 100%;
	min-height: 480px;
	overflow: hidden;
	background: #ffffff;
	box-sizing: border-box;
}

.ararat-hero-section * {
	box-sizing: border-box;
}

/* ---------- image column ---------- */
.ararat-hero-image {
	position: relative;
	flex: 1 1 50%;
	max-width: 50%;
	overflow: hidden;
	order: 1;
}

.ararat-hero-section--image-end .ararat-hero-image {
	order: 2;
}

.ararat-hero-section--image-end .ararat-hero-content {
	order: 1;
}

.ararat-hero-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
}

.ararat-hero-image::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* seams the photo into the content column's background colour instead of
	   cutting off hard at the boundary; mostly transparent over the photo,
	   thickening to an almost-opaque tint right at the shared edge. Uses the
	   same custom properties as the "همپوشانی تصویر" (Image Overlay) Elementor
	   control below, so setting that control from the panel replaces this
	   default entirely. */
	background: linear-gradient(
		to right,
		rgba(234, 243, 250, 0) 0%,
		rgba(234, 243, 250, 0) var(--ararat-seam-start, 58%),
		rgba(238, 244, 249, 0.55) 82%,
		var(--ararat-seam-color, rgba(238, 244, 249, 0.95)) 100%
	);
}

/* image on the right ("سمت راست") — the seam is on the image's LEFT edge instead */
.ararat-hero-section--image-end .ararat-hero-image::after {
	background: linear-gradient(
		to left,
		rgba(234, 243, 250, 0) 0%,
		rgba(234, 243, 250, 0) var(--ararat-seam-start, 58%),
		rgba(238, 244, 249, 0.55) 82%,
		var(--ararat-seam-color, rgba(238, 244, 249, 0.95)) 100%
	);
}

/* ---------- content column ---------- */
.ararat-hero-content {
	position: relative;
	flex: 1 1 50%;
	max-width: 50%;
	order: 2;
	direction: rtl;
	text-align: right;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 60px 70px;
	background: linear-gradient(135deg, #ffffff 0%, #f4f8fc 55%, #eaf3fa 100%);
	overflow: hidden;
}

/* ---------- middle divider — the seam between the image column and the content column ---------- */
.ararat-hero-content::before {
	content: "";
	position: absolute;
	top: var(--ararat-divider-inset, 0px);
	bottom: var(--ararat-divider-inset, 0px);
	left: 0;
	width: var(--ararat-divider-width, 2px);
	background: var(--ararat-divider-color, #d9e4ec);
	opacity: 0; /* hidden by default = "غیرفعال" until a wrapper modifier below turns it on */
	pointer-events: none;
	z-index: 2;
	transition: opacity 0.25s ease;
}

/* image on the right ("سمت راست") flips which edge of the content column touches the image */
.ararat-hero-section--image-end .ararat-hero-content::before {
	left: auto;
	right: 0;
}

/* حالت "خط ساده" — full-opacity solid line */
.ararat-hero-section--divider-solid .ararat-hero-content::before {
	opacity: 1;
}

/* حالت "خط محو" — same solid line, dimmed */
.ararat-hero-section--divider-muted .ararat-hero-content::before {
	opacity: var(--ararat-divider-muted-opacity, 0.35);
}

/* حالت "فید" — gradient that fades out at both ends */
.ararat-hero-section--divider-fade .ararat-hero-content::before {
	opacity: 1;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		var(--ararat-divider-color, #d9e4ec) var(--ararat-divider-fade-stop, 30%),
		var(--ararat-divider-color, #d9e4ec) calc(100% - var(--ararat-divider-fade-stop, 30%)),
		transparent 100%
	);
}
/* حالت پیش‌فرض "غیرفعال" نیازی به قانون جدا ندارد — opacity همان 0 پایه باقی می‌ماند */

/* decorative dotted pattern, top corner (RTL: nearest to page edge) */
.ararat-hero-dots {
	position: absolute;
	top: 24px;
	left: 24px;
	width: 120px;
	height: 120px;
	background-image: radial-gradient(#d7e4ef 1.6px, transparent 1.6px);
	background-size: 15px 15px;
	opacity: 0.7;
	pointer-events: none;
}

/* ---------- top row: badge + title/description ---------- */
.ararat-hero-top {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	padding-bottom: 26px;
	margin-bottom: 26px;
	border-bottom: 1px solid #e5edf3;
}

.ararat-hero-badge-col {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding-inline-end: 22px;
	border-inline-end: 2px solid #e2e8f0;
	align-self: stretch;
}

.ararat-hero-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	font-size: 18px;
	line-height: 1;
	color: #ffffff;
	background: linear-gradient(135deg, #22c1dc, #2dd4bf);
	box-shadow: 0 8px 18px rgba(34, 193, 220, 0.32);
}

/* Covers every icon source Elementor can output here: an inline <svg>
   (icon library set to "SVG"/font-awesome svg mode), an <img> (a custom
   uploaded SVG/PNG, rendered by Elementor via wp_get_attachment_image()),
   and a font-icon <i>/<span> tag. Without the img rule, an uploaded logo
   renders at its own native size instead of the badge's icon size, so it
   overflows the circle and sits off-centre instead of inside it. */
.ararat-hero-badge-icon svg,
.ararat-hero-badge-icon img {
	display: block;
	width: 1em;
	height: 1em;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	fill: currentColor;
}

.ararat-hero-badge-icon i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ararat-hero-badge-text {
	font-weight: 700;
	font-size: 17px;
	color: #f5a623;
	white-space: nowrap;
}

.ararat-hero-title-col {
	flex: 1 1 auto;
	min-width: 0;
}

.ararat-hero-title {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5;
	color: #1b2a41;
}

.ararat-hero-description {
	margin: 0;
	font-size: 15px;
	line-height: 1.9;
	color: #4a6c8c;
}

/* ---------- intro paragraph ---------- */
.ararat-hero-intro {
	font-size: 14px;
	line-height: 2;
	color: #5b7690;
}

.ararat-hero-intro p {
	margin: 0 0 14px;
}

.ararat-hero-intro p:last-child {
	margin-bottom: 0;
}

/* ---------- button ---------- */
.ararat-hero-button-wrap {
	margin-top: 30px;
}

.ararat-hero-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 15px;
	color: #ffffff;
	background: linear-gradient(135deg, #F5A623, #F97316);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	box-shadow: 0 10px 24px rgba(249, 115, 22, 0.28);
}

.ararat-hero-button:hover {
	transform: translateY(-2px);
	opacity: 0.95;
	color: #ffffff;
}

/* ---------- phone capture form ---------- */
.ararat-hero-phone-form-wrap {
	margin-top: 30px;
	max-width: 420px;
}

.ararat-hero-phone-label {
	display: block;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
	color: #33475b;
}

.ararat-hero-phone-form {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ararat-hero-phone-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 50px;
	padding: 0 18px;
	font-size: 15px;
	font-family: inherit;
	color: #1b2a41;
	background-color: #ffffff;
	border: 1px solid #d9e4ec;
	border-radius: 10px;
	direction: ltr;
	text-align: right;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ararat-hero-phone-input::placeholder {
	color: #9fb1c1;
}

.ararat-hero-phone-input:focus {
	border-color: #F5A623;
	box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
}

.ararat-hero-phone-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 50px;
	padding: 0 26px;
	border: none;
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	background: linear-gradient(135deg, #F5A623, #F97316);
	box-shadow: 0 10px 22px rgba(249, 115, 22, 0.3);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.ararat-hero-phone-submit:hover {
	transform: translateY(-2px);
	opacity: 0.95;
	color: #ffffff;
}

.ararat-hero-phone-submit:disabled,
.ararat-hero-phone-submit.is-loading {
	cursor: default;
	opacity: 0.7;
	transform: none;
}

.ararat-hero-phone-submit-icon {
	transform: scaleX(-1); /* point the send icon toward the input, works for both text directions */
}

.ararat-hero-phone-message {
	min-height: 0;
	margin-top: 0;
	font-size: 13px;
	line-height: 1.7;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease, margin-top 0.2s ease;
}

.ararat-hero-phone-message.is-visible {
	margin-top: 12px;
	opacity: 1;
	transform: translateY(0);
}

.ararat-hero-phone-message.is-success {
	color: #1a9d6c;
}

.ararat-hero-phone-message.is-error {
	color: #e14b4b;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
	/* در حالت تبلت، ستون تصویر و متن دیگر ۵۰/۵۰ کنار هم فشرده نمی‌شوند؛
	   محتوا به زیر تصویر منتقل می‌شود تا متن‌ها فضای کامل عرض صفحه را داشته باشند. */
	.ararat-hero-section,
	.ararat-hero-section--image-end {
		flex-direction: column;
	}

	.ararat-hero-image,
	.ararat-hero-content {
		max-width: 100% !important;
		flex-basis: auto !important;
		order: initial !important;
	}

	.ararat-hero-image img {
		min-height: 280px;
	}

	.ararat-hero-content {
		padding: 44px 40px;
	}

	/* the seam divider only makes sense side-by-side; hide it once columns stack */
	.ararat-hero-content::before {
		display: none;
	}

	.ararat-hero-top {
		flex-wrap: wrap;
	}

	.ararat-hero-badge-col {
		padding-inline-end: 0;
		border-inline-end: none;
		padding-bottom: 14px;
		margin-bottom: 6px;
		border-bottom: 1px solid #e5edf3;
		flex-basis: 100%;
	}

	.ararat-hero-title {
		font-size: 23px;
	}

	.ararat-hero-description {
		font-size: 14.5px;
	}
}

@media (max-width: 767px) {
	.ararat-hero-image img {
		min-height: 240px;
	}

	.ararat-hero-content {
		padding: 36px 24px;
	}

	.ararat-hero-title {
		font-size: 20px;
	}
}

@media (max-width: 420px) {
	.ararat-hero-phone-form {
		flex-direction: column;
	}

	.ararat-hero-phone-submit {
		width: 100%;
	}
}

/* =========================================================
   Standalone Shortcode Form
   ========================================================= */
.ararat-shortcode-form {
	direction: rtl;
	text-align: right;
	max-width: 460px;
}

/* =========================================================
   Phone Form Widget — ویجت مستقل فرم دریافت شماره
   ========================================================= */
.ararat-pf-outer {
	direction: rtl;
	width: 100%;
}

.ararat-pf-wrap {
	width: 100%;
	max-width: 480px;
}

.ararat-pf-label {
	display: block;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
	color: #33475b;
	text-align: right;
}

.ararat-pf-form {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ararat-pf-input {
	display: block !important;
	box-sizing: border-box !important;
	flex: 1 1 auto;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: 50px !important;
	min-height: 50px !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 18px;
	font-size: 15px;
	font-family: inherit;
	color: #1b2a41;
	background-color: #ffffff;
	border: 1px solid #d9e4ec;
	border-radius: 10px;
	direction: ltr;
	text-align: right;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ararat-pf-input::placeholder {
	color: #9fb1c1;
}

.ararat-pf-input:focus {
	border-color: #F5A623;
	box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
}

.ararat-pf-submit {
	box-sizing: border-box !important;
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 50px !important;
	min-height: 50px !important;
	float: none !important;
	margin: 0 !important;
	padding-inline: 26px;
	border: none;
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	background: linear-gradient(135deg, #F5A623, #F97316);
	box-shadow: 0 10px 22px rgba(249, 115, 22, 0.30);
	cursor: pointer;
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.ararat-pf-submit:hover {
	transform: translateY(-2px);
	opacity: 0.95;
	color: #ffffff;
}

.ararat-pf-submit:disabled,
.ararat-pf-submit.is-loading {
	cursor: default;
	opacity: 0.7;
	transform: none;
}

.ararat-pf-submit-icon {
	transform: scaleX(-1);
}

.ararat-pf-message {
	min-height: 0;
	margin-top: 0;
	font-size: 13px;
	line-height: 1.7;
	text-align: right;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease, margin-top 0.2s ease;
}

.ararat-pf-message.is-visible {
	margin-top: 10px;
	opacity: 1;
	transform: translateY(0);
}

.ararat-pf-message.is-success {
	color: #1a9d6c;
}

.ararat-pf-message.is-error {
	color: #e14b4b;
}

@media (max-width: 420px) {
	.ararat-pf-form {
		flex-direction: column;
	}
	.ararat-pf-submit {
		width: 100%;
	}
}

/* =========================================================
   Phone Form Widget — نوع «اطلاعات کامل» (نام، شرکت، شناسه قبض، شماره)
   ========================================================= */
.ararat-pf-wrap--full {
	max-width: 560px;
}

.ararat-pf-form--full {
	display: block;
}

.ararat-pf-fields-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	gap: 12px;
	margin-bottom: 12px;
}

.ararat-pf-field {
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

/* عرض هر فیلد قابل تنظیم است: «نیمی از عرض» یا «تمام عرض» — از تب محتوای ویجت. */
.ararat-pf-field--half {
	grid-column: span 1;
}

.ararat-pf-field--full {
	grid-column: 1 / -1;
}

.ararat-pf-form--full .ararat-pf-input {
	width: 100%;
}

.ararat-pf-textarea {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	height: auto;
	min-height: 96px;
	padding-top: 12px;
	padding-bottom: 12px;
	font-family: inherit;
	resize: vertical;
}

.ararat-pf-submit--full {
	width: 100%;
}

@media (max-width: 600px) {
	.ararat-pf-fields-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ===========================================================================
   محافظ در برابر استایل‌های قالب
   بعضی قالب‌های وردپرس یک قانون بسیار اختصاصی (گاهی با !important) روی
   همهٔ input/button سایت اعمال می‌کنند که باعث می‌شود فیلدهای این فرم به
   مربع‌های ریز تبدیل شوند. این بخش با افزایش عمدیِ specificity (زنجیرهٔ
   کامل کلاس‌های اجدادی + !important) تضمین می‌کند اندازهٔ فیلدها همیشه
   درست باشد، صرف‌نظر از استایل قالب یا سایر افزونه‌ها.
   =========================================================================== */
html body .ararat-pf-outer .ararat-pf-wrap .ararat-pf-fields-grid .ararat-pf-field input.ararat-pf-input,
html body .ararat-pf-outer .ararat-pf-wrap .ararat-pf-fields-grid .ararat-pf-field textarea.ararat-pf-input.ararat-pf-textarea {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}
html body .ararat-pf-outer .ararat-pf-wrap .ararat-pf-fields-grid .ararat-pf-field input.ararat-pf-input {
	height: 50px !important;
	min-height: 50px !important;
}
html body .ararat-pf-outer .ararat-pf-wrap .ararat-pf-fields-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
html body .ararat-pf-outer .ararat-pf-wrap .ararat-pf-fields-grid .ararat-pf-field {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	float: none !important;
	display: block !important;
}
html body .ararat-pf-outer .ararat-pf-wrap form.ararat-pf-form button.ararat-pf-submit {
	display: inline-flex !important;
	box-sizing: border-box !important;
	height: 50px !important;
	min-height: 50px !important;
	float: none !important;
	margin: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}
@media (max-width: 600px) {
	html body .ararat-pf-outer .ararat-pf-wrap .ararat-pf-fields-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}