/*!
 * frontend.css - استایل فرم خرید بیمه مسافرتی سامان در سایت
 */

.sti-form-wrapper {
	direction: rtl;
	font-family: -apple-system, "Vazirmatn", Tahoma, sans-serif;
	max-width: 720px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 28px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.sti-form-title {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 700;
	color: #1a2b4c;
	text-align: center;
}

/* --- گام‌ها --- */
.sti-steps {
	display: flex;
	justify-content: space-between;
	margin-bottom: 28px;
	position: relative;
}

.sti-steps::before {
	content: "";
	position: absolute;
	top: 14px;
	right: 5%;
	left: 5%;
	height: 2px;
	background: #e5e7eb;
	z-index: 0;
}

.sti-step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1;
	font-size: 12px;
	color: #9aa2b1;
}

.sti-step::before {
	content: "";
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #e5e7eb;
	display: block;
}

.sti-step.is-active,
.sti-step.is-done {
	color: #1a56db;
	font-weight: 600;
}

.sti-step.is-active::before,
.sti-step.is-done::before {
	background: #1a56db;
}

.sti-step-panel.is-active {
	animation: sti-fade-in 0.25s ease;
}

@keyframes sti-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* --- فیلدها --- */
.sti-field-row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 14px;
	margin-bottom: 14px;
	align-items: center;
}

.sti-field-row.sti-single-col {
	grid-template-columns: 1fr;
}

.sti-field-hint {
	grid-column: 1 / -1;
	font-size: 11px;
	color: #6b7280;
	margin-top: -6px;
}

/* --- انتخاب نوع بیمه --- */
.sti-policy-type-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sti-radio-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sti-radio-option:hover {
	border-color: #1a56db;
	background: #f5f8ff;
}

.sti-radio-option input[type="radio"] {
	margin: 0;
	accent-color: #1a56db;
}

/* --- سوییچ «خرید گروهی» --- */
.sti-checkbox-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
}

.sti-checkbox-option:hover {
	border-color: #1a56db;
	background: #f5f8ff;
}

.sti-checkbox-option input[type="checkbox"] {
	margin: 0;
	accent-color: #1a56db;
	flex: 0 0 auto;
}

/* --- لیست مسافران افزوده‌شده به گروه (مرحله ۳، حالت گروهی) --- */
.sti-group-members-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 14px 0;
	padding: 10px 12px;
	border: 1px dashed #d1d5db;
	border-radius: 6px;
	background: #f9fafb;
}

.sti-group-member-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid #eef0f3;
	font-size: 13px;
}

.sti-group-member-row:last-child {
	border-bottom: none;
}

.sti-group-member-row span {
	overflow-wrap: break-word;
	min-width: 0;
}

.sti-group-member-remove {
	flex: 0 0 auto;
	font-size: 12px;
	padding: 4px 10px;
}

/* --- ردیف تاریخ تولد شمسی یا میلادی (روز/ماه/سال) --- */
.sti-jalali-date-row,
.sti-gregorian-date-row {
	display: grid;
	grid-template-columns: 1fr 1.4fr 1fr;
	gap: 8px;
}

.sti-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sti-field label {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

.sti-input,
.sti-select {
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 14px;
	background: #fff;
	width: 100%;
	box-sizing: border-box;
}

.sti-input:focus,
.sti-select:focus {
	outline: none;
	border-color: #1a56db;
	box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}

/* select واقعی زیر combobox کشور همیشه باید مخفی بماند، حتی اگر یک قالب
   (Theme)/افزونهٔ دیگر قانون سراسری select{display:...} تعریف کرده باشد. */
select.sti-select[hidden] {
	display: none !important;
}

.sti-locked-value {
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #f9fafb;
	font-size: 14px;
	font-weight: 600;
	color: #1a2b4c;
}

/* --- کشور مقصد/مبدا جستجوپذیر (Combobox سبک، بدون کتابخانه خارجی) ---
   select واقعی (منبع اصلی مقدار) مخفی است؛ input متن جستجو و لیست
   فیلترشده جایگزین بصری آن هستند. */
.sti-combobox {
	position: relative;
}

.sti-combobox-list {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	right: 0;
	left: 0;
	max-height: 240px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.sti-combobox-option {
	padding: 9px 12px;
	font-size: 14px;
	cursor: pointer;
}

.sti-combobox-option:hover,
.sti-combobox-option.is-active {
	background: #f5f8ff;
	color: #1a56db;
}

.sti-combobox-empty {
	padding: 9px 12px;
	font-size: 13px;
	color: #9aa2b1;
}

/* توجه: نمایش/پنهان‌سازی ردیف‌های .sti-passport-row و .sti-domestic-row اکنون
   مستقیماً توسط jQuery show()/hide() (استایل درون‌خطی) در frontend.js انجام
   می‌شود، نه با کلاس‌های is-visible/is-hidden. اینجا هیچ قانون display از
   پیش‌فرضی برای آن‌ها گذاشته نمی‌شود تا همان چیدمان grid یکسانِ .sti-field-row
   (که در ردیف کد ملی هم اعمال می‌شود) به‌طور طبیعی حفظ شود. */

/* --- دکمه‌ها --- */
.sti-actions {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 20px;
}

/* در مرحله ۱ فقط یک دکمه («جستجوی طرح‌ها») وجود دارد؛ طبق درخواست باید
   سمت چپ (flex-end در چیدمان راست‌به‌چپ) قرار گیرد، نه لبهٔ شروع. علاوه بر
   justify-content روی کانتینر، margin-inline-start:auto مستقیماً روی خود
   دکمه هم گذاشته شده تا مستقل از هر قانون دیگری که ممکن است این کانتینر را
   تحت تأثیر قرار دهد، دکمه قطعاً به انتهای ردیف (سمت چپ) رانده شود. */
.sti-step1-details .sti-actions {
	justify-content: flex-end;
}

.sti-step1-details .sti-actions [data-action="search-plans"] {
	margin-inline-start: auto;
}

.sti-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 22px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.sti-btn-primary {
	background: #1a56db;
	color: #fff;
}

.sti-btn-primary:hover { background: #1544ab; }
.sti-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.sti-btn-secondary {
	background: #f3f4f6;
	color: #374151;
}

.sti-btn-secondary:hover { background: #e5e7eb; }

/* --- شرایط و ضوابط بیمه مسافرتی (زیر فیلد ایمیل، مرحله اطلاعات بیمه‌شده) --- */
.sti-terms-toggle {
	margin-bottom: 10px;
}

.sti-terms-box {
	max-height: 320px;
	overflow-y: auto;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	padding: 14px 16px;
	background: #f9fafb;
	font-size: 13px;
	line-height: 1.9;
	margin-bottom: 12px;
}

.sti-terms-box h3 {
	margin: 0 0 8px;
	font-size: 15px;
}

.sti-terms-box p {
	margin: 0 0 10px;
}

.sti-terms-list {
	margin: 0;
	padding-inline-start: 20px;
}

.sti-terms-list li {
	margin-bottom: 10px;
}

.sti-terms-list a {
	color: #1a56db;
	text-decoration: none;
}

.sti-terms-list a:hover {
	text-decoration: underline;
}

.sti-terms-checkbox-label {
	margin-top: 2px;
}

/* --- لیست طرح‌ها --- */
.sti-plans-list {
	display: grid;
	gap: 12px;
	margin: 16px 0;
}

.sti-plan-card {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sti-plan-card:hover {
	border-color: #1a56db;
	background: #f5f8ff;
}

.sti-plan-card.is-selected {
	border-color: #1a56db;
	background: #eef3ff;
	box-shadow: 0 0 0 2px rgba(26, 86, 219, 0.15);
}

/* عنوان طرح: مشخص و قابل تشخیص از طرح‌های دیگر، با برچسب نوع/زیررشته بیمه. */
.sti-plan-header {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sti-plan-badge {
	align-self: flex-start;
	background: #eef3ff;
	color: #1a56db;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 99px;
}

.sti-plan-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #1a2b4c;
	overflow-wrap: break-word;
}

.sti-plan-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.sti-plan-price {
	margin: 0;
	font-weight: 700;
	color: #1a56db;
	white-space: nowrap;
}

.sti-plan-covers-toggle {
	font-size: 13px;
	padding: 6px 12px;
}

/* --- جدول پوشش‌های بیمه (داخل پاپ‌آپ؛ فقط با کلیک ساخته می‌شود) --- */
.sti-plan-covers-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.sti-plan-covers-table th,
.sti-plan-covers-table td {
	text-align: right;
	padding: 8px 6px;
	border-bottom: 1px solid #f3f4f6;
	overflow-wrap: break-word;
}

.sti-plan-covers-table th {
	color: #6b7280;
	font-weight: 600;
	font-size: 12px;
}

.sti-plan-covers-table tr:last-child td {
	border-bottom: none;
}

.sti-plan-covers-table th:last-child,
.sti-plan-covers-table td:last-child {
	text-align: left;
	white-space: nowrap;
}

/* در موبایل، به‌جای اسکرول افقی جدول، هر ردیف به‌صورت یک بلوک عمودی
   (شرح پوشش/سقف پوشش زیر هم با برچسب) نمایش داده می‌شود -- مرتب و خوانا،
   بدون سرریز افقی. */
@media (max-width: 480px) {
	.sti-plan-covers-table thead {
		display: none;
	}
	.sti-plan-covers-table,
	.sti-plan-covers-table tbody,
	.sti-plan-covers-table tr,
	.sti-plan-covers-table td {
		display: block;
		width: 100%;
	}
	.sti-plan-covers-table tr {
		padding: 6px 0;
		border-bottom: 1px solid #f3f4f6;
	}
	.sti-plan-covers-table tr:last-child {
		border-bottom: none;
	}
	.sti-plan-covers-table td {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 10px;
		padding: 3px 0;
		border-bottom: none;
		white-space: normal;
		text-align: right;
	}
	.sti-plan-covers-table td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: #6b7280;
		font-weight: 600;
		font-size: 12px;
	}
}

/* --- جدول پوشش‌های بیمه، دقیقاً زیر همان طرح (بدون پاپ‌آپ) --- */
.sti-plan-covers {
	border-top: 1px dashed #e5e7eb;
	margin-top: 4px;
	padding-top: 10px;
	max-width: 100%;
	overflow-x: auto;
}

.sti-plan-footer {
	display: flex;
	justify-content: flex-end;
}

/* دکمه/عنصری که هنگام چاپ صفحه (Ctrl+P) نباید در خروجی چاپ ظاهر شود. */
@media print {
	.sti-no-print {
		display: none !important;
	}
}

.sti-selected-plan-summary {
	background: #f5f8ff;
	border: 1px dashed #1a56db;
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 14px;
	font-size: 13px;
}

/* --- پیام‌های هشدار/خطا/موفقیت --- */
.sti-alert {
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 13px;
	margin-bottom: 14px;
	line-height: 1.8;
}

.sti-alert-warning {
	background: #fffbeb;
	border: 1px solid #f5d68a;
	color: #8a5a00;
}

.sti-alert-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #a91b1b;
}

.sti-alert-success {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #15803d;
}

.sti-result-box {
	text-align: center;
	padding: 24px 16px;
}

.sti-result-box .sti-btn {
	margin-top: 14px;
}

/* --- لودینگ --- */
.sti-loading-overlay {
	position: relative;
	min-height: 60px;
}

.sti-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid #e5e7eb;
	border-top-color: #1a56db;
	border-radius: 50%;
	animation: sti-spin 0.8s linear infinite;
	margin: 20px auto;
}

@keyframes sti-spin {
	to { transform: rotate(360deg); }
}

/* --- ریسپانسیو --- */
@media (max-width: 600px) {
	.sti-form-wrapper {
		padding: 18px;
		border-radius: 0;
	}
	.sti-field-row {
		grid-template-columns: 1fr;
	}
	.sti-steps span {
		display: none;
	}
	.sti-actions {
		flex-direction: column-reverse;
	}
	.sti-btn {
		width: 100%;
	}
}