/* service.css */

.details
{
	max-width: 1100px;
	margin: 0 auto;
	/* padding: 1.6rem 1.25rem 4rem; */
	display: grid;
	/* grid-template-columns: 1.6fr 0.9fr; */
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr); /* minmax(0, ...) کلید حل مشکل است */
	gap: 1.2rem;
}

@media (max-width: 900px)
{
	.details
	{
		/* grid-template-columns: 1fr; */
		grid-template-columns: minmax(0, 1fr);
	}
}

.card
{
	background: var(--white);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	min-width: 0; /* اضافه شود */
	overflow: hidden; /* اضافه شود */
}

.card-body
{
	padding: 1.2rem;
}

.service-head
{
	margin-bottom: 1rem;
}

.service-badge
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--primary-light);
	color: #92400e;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 800;
	margin-bottom: 0.8rem;
}

.service-title
{
	font-size: 1.5rem;
	font-weight: 900;
	margin-bottom: 0.5rem;
	color: var(--dark);
}

.service-short
{
	color: var(--slate);
	font-size: 0.95rem;
	padding-bottom: 1rem;
	border-bottom: 1px dashed var(--card-border);
}

.section-title
{
	font-size: 1rem;
	font-weight: 900;
	color: var(--dark);
	margin-bottom: 0.8rem;
}

.form-grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem;
}

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

.field label
{
	font-size: 0.86rem;
	color: var(--dark);
	font-weight: 800;
}

.help
{
	font-size: 0.78rem;
	color: var(--muted);
}

.input,
.select,
.textarea
{
	width: 100%;
	border: 1px solid #cbd5e1;
	border-radius: 12px;
	padding: 0.85rem 0.9rem;
	outline: none;
	font-size: 0.95rem;
	background: var(--white);
	transition: all 0.2s ease;
}

.textarea
{
	min-height: 110px;
	resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus
{
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

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

.checkbox-row
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0.85rem 0.9rem;
	border: 1px solid #cbd5e1;
	border-radius: 12px;
	background: #fff;
}

.file-box
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: 1px dashed #cbd5e1;
	border-radius: 12px;
	padding: 0.85rem 0.9rem;
	background: #fff;
}

.file-box input[type="file"]
{
	width: 100%;
}

.side-sticky
{
	position: sticky;
	top: 88px;
	align-self: start;
}

.price-row
{
	/* display: flex; */
	/* align-items: center; */
	/* justify-content: space-between; */
	/* gap: 12px; */
	/* padding: 0.9rem 1rem; */
	border-radius: 14px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	margin-bottom: 0.9rem;
}

.price_pack
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0.9rem 1rem;
	/* padding: 0.9rem 1rem; */
	/* margin-bottom: 0.9rem; */
}

.price-row strong
{
	font-size: 1.05rem;
}

.price-row span
{
	color: #92400e;
	font-weight: 900;
}

.meta
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin-bottom: 0.9rem;
}

.meta-item
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--slate);
	font-size: 0.9rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--card-border);
	border-radius: 12px;
	background: #fff;
}

.btn-primary
{
	width: 100%;
	border: none;
	border-radius: 14px;
	background: var(--primary);
	color: var(--white);
	font-weight: 900;
	padding: 0.95rem 1rem;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 1rem;
}

.btn-primary:hover
{
	background: var(--primary-hover);
	box-shadow: var(--shadow-lg);
}

.notice
{
	margin-top: 0.9rem;
	font-size: 0.82rem;
	color: var(--slate);
	line-height: 1.8;
}

.faq details
{
	border: 1px solid var(--card-border);
	border-radius: 14px;
	background: #fff;
	padding: 0.8rem 0.9rem;
	margin-bottom: 0.7rem;
	transition: all 0.2s ease;
}

.faq details[open]
{
	border-color: #cbd5e1;
	box-shadow: var(--shadow-sm);
}

.faq summary
{
	cursor: pointer;
	font-weight: 900;
	color: var(--dark);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	user-select: none;
}

.faq summary::-webkit-details-marker
{
	display: none;
}

.faq summary span
{
	font-size: 0.9rem;
}

/* آیکون فونت‌آسام در حالت بسته: اشاره به سمت چپ */
.faq-icon
{
	font-size: 0.85rem;
	color: var(--slate);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
	flex-shrink: 0;
}

/* تغییر وضعیت و چرخش انیمیشنی به سمت پایین در حالت باز */
.faq details[open] .faq-icon
{
	transform: rotate(-90deg);
	color: var(--primary);
}

.faq p
{
	margin-top: 0.75rem;
	padding-top: 0.65rem;
	border-top: 1px dashed var(--card-border);
	color: var(--slate);
	font-size: 0.92rem;
	line-height: 1.8;
}

/* توضیحات اختصاصی خدمت */

.service-notes-card
{
	border-color: #e2e8f0;
	background: #f8fafc;
	transition: all 0.2s ease;
}

.service-notes-main
{
	margin-top: 1.2rem;
}

.service-notes-card .section-title
{
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--dark);
	margin-bottom: 0.6rem;
}

.note-title-icon
{
	color: var(--primary);
	font-size: 1rem;
}

.service-notes-content
{
	color: var(--slate);
	font-size: 0.92rem;
	line-height: 1.9;
	text-align: justify;
}



@media (max-width: 600px)
{
	.form-grid
	{
		grid-template-columns: 1fr;
	}
	
	.price-row strong
	{
		font-size: 0.9rem;
	}

	.price-row span
	{
		font-size: 0.9rem;
	}
	
	.service-title
	{
		font-size: 1rem;
	}
}

/* بنر راهنمای بالای فرم */
.form-trust-banner
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0.8rem 1rem;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #166534;
	border-radius: 12px;
	font-size: 0.84rem;
	margin-bottom: 1.5rem;
}

.form-trust-banner i
{
	font-size: 1.1rem;
	color: #15803d;
	flex-shrink: 0;
}

/* گروه‌بندی بخش‌های فرم (Steps) */
.form-section-group
{
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #f1f5f9;
}

.form-section-group:last-child
{
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.group-title
{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 1.2rem;
}

.group-title .step-num
{
	width: 32px;
	height: 32px;
	background: #fef3c7;
	color: #b45309;
	border: 1.5px solid #fde68a;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 0.95rem;
	flex-shrink: 0;
}

.group-title h4
{
	font-size: 1.02rem;
	font-weight: 900;
	color: var(--dark);
	margin: 0;
}

.group-title small
{
	display: block;
	font-size: 0.78rem;
	color: #64748b;
	margin-top: 2px;
}

/* برچسب الزامی شیک */
.req-tag
{
	display: inline-block;
	background: #fee2e2;
	color: #b91c1c;
	font-size: 0.68rem;
	font-weight: 800;
	padding: 1px 6px;
	border-radius: 6px;
	margin-right: 4px;
}

/* فیلدها و اینپوت‌ها */
.field label
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.88rem;
	color: #1e293b;
	font-weight: 800;
	margin-bottom: 2px;
}

.input,
.select,
.textarea
{
	border: 1.5px solid #e2e8f0;
	background: #f8fafc;
	border-radius: 10px;
	padding: 0.75rem 0.9rem;
	font-family: inherit;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.input:focus,
.select:focus,
.textarea:focus
{
	background: #fff;
	border-color: #f59e0b;
	box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
}

.help
{
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.78rem;
	color: #64748b;
	margin-top: 4px;
}

.help i
{
	color: #94a3b8;
}

/* بخش اختصاصی آپلود فایل (کارت‌های مدرن) */
.files-grid
{
	display: grid;
	/* grid-template-columns: 1fr; */
	grid-template-columns: minmax(0, 1fr); /* اضافه شود */
	gap: 1rem;
	width: 100%;
}

.upload-card
{
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 0.9rem 1rem;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
	transition: border-color 0.2s;
	min-width: 0; /* اضافه شود */
	overflow: hidden; /* اضافه شود */
}

.upload-card:hover
{
	border-color: #cbd5e1;
}

.upload-card-header
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.6rem;
}

.upload-card-header strong
{
	font-size: 0.9rem;
	color: #1e293b;
}

.upload-dropzone
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0.8rem 1rem;
	border: 1.5px dashed #cbd5e1;
	border-radius: 12px;
	background: #f8fafc;
	cursor: pointer;
	transition: all 0.2s ease;
	
	width: 100%;
	max-width: 100%;
	min-width: 0;          /* جلوگیری از پهن شدن فلکس */

	max-width: 100%;       /* اضافه شود: جلوگیری از بیرون زدن باکس از کانتینر */
	overflow: hidden;        /* اضافه شود */
}

.upload-dropzone:hover
{
	background: #fffbeb;
	border-color: #f59e0b;
}

.upload-icon
{
	font-size: 1.4rem;
	color: #f59e0b;
	flex-shrink: 0;
}

.upload-text
{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow: hidden;
	
	min-width: 0;           /* بسیار مهم: مانع از بزرگ شدن بیش از حد آیتم فلکس می‌شود */
}

.upload-title
{
	font-size: 0.84rem;
	font-weight: 700;
	color: #334155;
}

.upload-filename
{
	font-size: 0.76rem;
	color: #94a3b8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	
	direction: ltr;          /* اختیاری اما پیشنهادی: نمایش درست‌تر انتهای نام فایل و حجم */
	text-align: right;
	max-width: 100%;
}

.upload-dropzone.has-file
{
	background: #f0fdf4;
	border-color: #22c55e;
	border-style: solid;
}

.upload-dropzone.has-file .upload-icon
{
	color: #16a34a;
}

.upload-dropzone.has-file .upload-filename
{
	color: #15803d;
	font-weight: 800;
}

.upload-browse-btn
{
	background: #fff;
	border: 1px solid #cbd5e1;
	color: #475569;
	font-size: 0.78rem;
	font-weight: 800;
	padding: 6px 14px;
	border-radius: 8px;
	cursor: pointer;
	flex-shrink: 0;
	pointer-events: none;
}

.hidden-file-input
{
	display: none;
}

/* چک‌باکس سفارشی مدرن */
.custom-checkbox
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0.85rem 1rem;
	background: #f8fafc;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	cursor: pointer;
	user-select: none;
	transition: all 0.2s ease;
}

.custom-checkbox input[type="checkbox"]
{
	display: none;
}

.checkbox-box
{
	width: 20px;
	height: 20px;
	border: 2px solid #94a3b8;
	border-radius: 6px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.custom-checkbox input:checked + .checkbox-box
{
	background: #f59e0b;
	border-color: #f59e0b;
}

.custom-checkbox input:checked + .checkbox-box::after
{
	content: "✓";
	color: #fff;
	font-size: 13px;
	font-weight: 900;
}

.checkbox-label
{
	font-size: 0.88rem;
	color: #334155;
	font-weight: 700;
}

/* استایل هنگام کشیدن فایل روی باکس (Drag Over) */
.upload-dropzone.dragover
{
	background: #fffbeb;
	border-color: #f59e0b;
	border-style: solid;
	transform: scale(1.01);
}

/* بخش ضبط صدا */
.voice-card
{
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 1.1rem;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.voice-controls
{
	display: flex;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
}

.btn-voice-record
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fffbeb;
	color: #b45309;
	border: 1.5px solid #fde68a;
	padding: 0.75rem 1.2rem;
	border-radius: 12px;
	font-weight: 800;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}

.btn-voice-record:hover
{
	background: #fef3c7;
	border-color: #f59e0b;
}

.btn-voice-record.is-recording
{
	background: #fee2e2;
	color: #b91c1c;
	border-color: #fca5a5;
	animation: pulseRecord 1.5s infinite;
}

@keyframes pulseRecord
{
	0%
	{
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
	}
	70%
	{
		box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
	}
	100%
	{
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
	}
}

.voice-status
{
	display: none;
	align-items: center;
	gap: 8px;
}

.voice-status.active
{
	display: flex;
}

.recording-pulse
{
	width: 10px;
	height: 10px;
	background: #ef4444;
	border-radius: 50%;
	display: inline-block;
	animation: blinkDot 1s infinite alternate;
}

@keyframes blinkDot
{
	from
	{
		opacity: 1;
	}
	to
	{
		opacity: 0.2;
	}
}

.voice-timer
{
	font-weight: 800;
	font-size: 0.95rem;
	color: #ef4444;
	font-family: monospace;
	direction: ltr;
}

.voice-preview
{
	margin-top: 0.4rem;
	padding-top: 0.4rem;
	border-top: 1px dashed #e2e8f0;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.voice-preview audio
{
	/* flex: 1; */
	/* min-width: 220px; */
	/* height: 42px; */
	
	flex: 1 1 200px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: 42px;
}

.btn-voice-delete
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f8fafc;
	color: #64748b;
	border: 1px solid #cbd5e1;
	padding: 0.55rem 0.9rem;
	border-radius: 8px;
	font-size: 0.8rem;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}

.btn-voice-delete:hover
{
	background: #fee2e2;
	color: #b91c1c;
	border-color: #fca5a5;
}

/* استایل چک‌لیست اقلام مورد نیاز */
.checklist-card
{
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 1rem 1.1rem;
	margin-bottom: 1.2rem;
}

.checklist-title
{
	display: flex;
	align-items: center;
	gap: 8px;
	color: #0f172a;
	font-size: 0.92rem;
	font-weight: 800;
	margin-bottom: 0.6rem;
}

.checklist-title i
{
	color: #f59e0b;
}

.checklist-items
{
	margin: 0;
	padding-right: 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.checklist-items li
{
	color: #334155;
	font-size: 0.88rem;
	line-height: 1.6;
}

.checklist-items .item-name
{
	font-weight: 700;
}

.checklist-items .item-help
{
	color: #64748b;
	font-size: 0.8rem;
	margin-right: 4px;
}

.checklist-hint
{
	margin-top: 0.75rem;
	padding-top: 0.65rem;
	border-top: 1px dashed #cbd5e1;
	display: flex;
	align-items: center;
	gap: 6px;
	color: #15803d;
	font-size: 0.82rem;
	font-weight: 700;
}

.sub-label
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.88rem;
	font-weight: 800;
	color: #1e293b;
	margin-bottom: 6px;
}

.badge-optional,
.optional-tag
{
	font-size: 0.72rem;
	font-weight: 800;
	background: #f1f5f9;
	color: #64748b;
	padding: 2px 8px;
	border-radius: 6px;
}

.input-card-group
{
	margin-top: 1.5rem;
}

.voice-tip-text
{
	color: #64748b;
	font-size: 0.8rem;
}

@media (max-width: 600px)
{
	.voice-controls
	{
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.btn-voice-record
	{
		width: 100%;
		justify-content: center;
	}
}


@media (max-width: 600px)
{
	/* رفع هرگونه سرریز ناخواسته در کل صفحه */
	body,
	main
	{
		overflow-x: hidden;
	}

	.upload-dropzone
	{
		padding: 0.75rem 0.6rem;
		gap: 8px;
	}

	.upload-browse-btn
	{
		padding: 5px 10px;
		font-size: 0.74rem;
	}
	
	.voice-preview
	{
		margin-top: 0.3rem;
		padding-top: 0.3rem;
	}

	.voice-preview audio
	{
		display: block;
		margin: 0;
	}
}