/* ==========================================================================
   امداد۳۶۵ - چک‌لیست تعاملی سفر با خودرو
   از متغیرهای رنگی سایت شما استفاده می‌شود (--primary, --dark, --bg, ...).
   اگر این متغیرها در جایی دیگر (استایل قالب فرزند) تعریف شده باشند همان مقادیر
   اعمال می‌شوند؛ در غیر این صورت مقادیر پیش‌فرض زیر (همان کدهایی که فرستادید)
   به‌عنوان fallback استفاده می‌شوند.
   ========================================================================== */

.e365-checklist-overlay,
.e365-checklist-overlay * {
	box-sizing: border-box;
}

.e365-checklist-overlay {
	--e365-dark: var(--dark, #223548);
	--e365-bg: var(--bg, #F5F7FA);
	--e365-muted: var(--muted, rgba(34, 53, 72, 0.55));
	--e365-primary: var(--primary, #F5BC38);
	--e365-white: var(--white, #FFFFFF);
	--e365-radius: var(--radius, 16px);

	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(20, 26, 32, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity .18s ease;
	direction: rtl;
	font-family: inherit;
}
.e365-checklist-overlay.is-open {
	opacity: 1;
}

/* پنل - همیشه به‌صورت مودال وسط صفحه (چه موبایل چه دسکتاپ)، تا با نوار
   ناوبری پایین موبایل یا دکمه‌ی چت‌بات شما تداخل نداشته باشد. */
.e365-checklist-panel {
	background: var(--e365-white);
	width: 100%;
	max-width: 480px;
	max-height: 85vh;
	border-radius: var(--e365-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: scale(.96) translateY(10px);
	transition: transform .2s ease;
	box-shadow: 0 20px 50px rgba(0,0,0,.28);
	font-family: inherit;
}
.e365-checklist-overlay.is-open .e365-checklist-panel {
	transform: scale(1) translateY(0);
}

/* دستگیره کوچک بالای پنل - فقط جنبه‌ی بصری/بات‌شیت، خودش عملکردی ندارد */
.e365-checklist-drag-handle {
	width: 40px;
	height: 4px;
	border-radius: 999px;
	background: var(--e365-bg);
	margin: 10px auto 0;
	flex: none;
}

.e365-checklist-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px 12px;
	border-bottom: 1px solid var(--e365-bg);
	flex: none;
}
.e365-checklist-header h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: var(--e365-dark);
	font-family: inherit;
}

/* دکمه بستن - دایره‌ی ساده با آیکون ضربدر ظریف، بدون پس‌زمینه‌ی تند */
.e365-checklist-close {
	background: transparent;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--e365-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
	flex: none;
}
.e365-checklist-close svg {
	width: 15px;
	height: 15px;
}
.e365-checklist-close:hover {
	background: var(--e365-bg);
	color: var(--e365-dark);
}

/* نوار پیشرفت */
.e365-checklist-progress-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	flex: none;
}
.e365-checklist-progress-bar {
	flex: 1;
	height: 8px;
	background: var(--e365-bg);
	border-radius: 999px;
	overflow: hidden;
}
.e365-checklist-progress-fill {
	height: 100%;
	width: 0%;
	background: var(--e365-primary);
	border-radius: 999px;
	transition: width .3s ease;
}
.e365-checklist-progress-text {
	font-size: 12.5px;
	color: var(--e365-muted);
	white-space: nowrap;
	font-weight: 600;
	font-family: inherit;
}

/* لیست آیتم‌ها */
.e365-checklist-list {
	overflow-y: auto;
	padding: 4px 14px 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.e365-checklist-category-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--e365-muted);
	padding: 12px 6px 2px;
	font-family: inherit;
}

.e365-checklist-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--e365-bg);
	border: 1px solid transparent;
	border-radius: calc(var(--e365-radius) - 4px);
	padding: 11px 12px;
	cursor: pointer;
	user-select: none;
	transition: opacity .25s ease, background .2s ease, transform .25s ease;
}
.e365-checklist-item:hover {
	border-color: var(--e365-primary);
}
.e365-checklist-item.is-checked {
	opacity: .45;
}

.e365-checklist-checkbox {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	border: 2px solid var(--e365-muted);
	background: var(--e365-white);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	transition: background .15s ease, border-color .15s ease;
}
.e365-checklist-item.is-checked .e365-checklist-checkbox {
	background: var(--e365-primary);
	border-color: var(--e365-primary);
}
.e365-checklist-checkbox svg {
	width: 13px;
	height: 13px;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .15s ease, transform .15s ease;
}
.e365-checklist-item.is-checked .e365-checklist-checkbox svg {
	opacity: 1;
	transform: scale(1);
}

.e365-checklist-item-text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--e365-dark);
	font-family: inherit;
}
.e365-checklist-item.is-checked .e365-checklist-item-text {
	text-decoration: line-through;
	color: var(--e365-muted);
}

/* فوتر پنل */
.e365-checklist-footer {
	padding: 12px 20px 18px;
	border-top: 1px solid var(--e365-bg);
	flex: none;
}

/* دکمه‌ی «شروع دوباره» - فونتش صریحاً inherit شده تا فونت قالب فرزند شما را بگیرد
   (دکمه‌ها به‌طور پیش‌فرض در مرورگرها فونت سیستم را می‌گیرند، نه فونت سایت). */
.e365-checklist-reset {
	width: 100%;
	background: var(--e365-white);
	border: 1.5px solid var(--e365-dark);
	color: var(--e365-dark);
	font-family: inherit;
	font-weight: 700;
	font-size: 13.5px;
	border-radius: calc(var(--e365-radius) - 6px);
	padding: 10px;
	cursor: pointer;
	transition: background .15s ease;
}
.e365-checklist-reset:hover {
	background: var(--e365-bg);
}

/* حالت جشن - وقتی همه‌ی آیتم‌ها تیک بخورند */
.e365-checklist-celebration {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 46px 24px 54px;
	gap: 12px;
}
.e365-checklist-celebration-close {
	position: absolute;
	top: -6px;
	left: 2px;
}
.e365-checklist-celebration-emoji {
	font-size: 58px;
	line-height: 1;
	animation: e365-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}
.e365-checklist-celebration-text {
	font-size: 15px;
	font-weight: 700;
	color: var(--e365-dark);
	font-family: inherit;
}
@keyframes e365-pop {
	0%   { transform: scale(.4); opacity: 0; }
	60%  { transform: scale(1.12); opacity: 1; }
	100% { transform: scale(1); }
}

.e365-checklist-empty-state {
	text-align: center;
	padding: 30px 10px;
	color: var(--e365-muted);
	font-size: 13.5px;
	font-family: inherit;
}

/* عنصر باز‌کننده‌ی پنل که از شورت‌کد می‌آید - بدون هیچ استایل تحمیلی،
   فقط قابل‌کلیک بودن را مشخص می‌کند. طراحی ظاهرش کاملاً دست خودتان است. */
.e365-checklist-open {
	cursor: pointer;
}