/**
 * نکته‌ی مهم درباره‌ی رنگ‌ها: بسیاری از قالب‌های وردپرس، استایل سراسری خاصی برای
 * تگ <button> و <a> تعریف می‌کنند (مثلاً پس‌زمینه‌ی تیره با متن سفید، یا برعکس).
 * اگر آن استایل قالب دیرتر لود شود یا specificity بالاتری داشته باشد، رنگ متن
 * دکمه‌های ما با پس‌زمینه‌شان یکی می‌شود و ناخوانا/نامرئی به نظر می‌رسد.
 * برای رفع قطعی این مشکل:
 *   ۱) با "all: unset" ابتدا هر استایل پیش‌فرض/قالب را کاملاً پاک می‌کنیم.
 *   ۲) رنگ پس‌زمینه و متن را هم با background-color/color و هم !important
 *      به‌صورت جداگانه (نه فقط background شورت‌هند) مشخص می‌کنیم.
 *   ۳) یک پالت با کنتراست بسیار بالا (مطابق استاندارد WCAG AA) انتخاب شده.
 */

.kai-wizard-root {
	all: initial;
	display: block;
	max-width: 640px;
	margin: 24px auto;
	direction: rtl;
	text-align: right;
	font-family: Tahoma, Vazir, "Segoe UI", sans-serif;
	background-color: #ffffff !important;
	border: 1px solid #dde3e8;
	border-radius: 12px;
	padding: 20px 24px;
	box-shadow: 0 1px 6px rgba(0,0,0,.08);
	color: #16222b !important;
	box-sizing: border-box;
}

.kai-wizard-root * {
	box-sizing: border-box;
	font-family: inherit;
	direction: rtl;
}

.kai-wizard-root .kai-wizard-header h3 {
	margin: 0 0 6px;
	font-size: 18px;
	color: #16222b !important;
	background: none !important;
}

.kai-wizard-root .kai-wizard-header p {
	margin: 0 0 16px;
	font-size: 14px;
	color: #52626e !important;
	background: none !important;
}

.kai-wizard-root .kai-question-text {
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 14px;
	color: #16222b !important;
}

.kai-wizard-root .kai-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* دکمه‌های گزینه‌ی سؤال - پس‌زمینه‌ی سفید، حاشیه و متن آبی تیره‌ی پرکنتراست */
.kai-wizard-root .kai-option-btn {
	all: unset;
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: right;
	padding: 13px 16px;
	border: 2px solid #4b7bab !important;
	background-color: #ffffff !important;
	color: #0b3d66 !important;
	border-radius: 8px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
	transition: background-color .15s, color .15s, border-color .15s;
}

.kai-wizard-root .kai-option-btn:hover,
.kai-wizard-root .kai-option-btn:focus {
	background-color: #0b3d66 !important;
	border-color: #0b3d66 !important;
	color: #ffffff !important;
}

.kai-wizard-root .kai-result {
	background-color: #f4f7f9 !important;
	border-radius: 10px;
	padding: 16px;
	color: #16222b !important;
}

.kai-wizard-root .kai-result strong {
	display: block;
	margin-top: 12px;
	margin-bottom: 4px;
	color: #0b3d66 !important;
	background: none !important;
}

.kai-wizard-root .kai-result p {
	margin: 0 0 6px;
	color: #16222b !important;
}

.kai-wizard-root .kai-solution-text {
	line-height: 2.1;
	color: #16222b !important;
}

.kai-wizard-root .kai-solution-text code {
	background-color: #e8edf1 !important;
	color: #a1260d !important;
	padding: 2px 7px;
	border-radius: 4px;
	font-family: Consolas, "Courier New", monospace !important;
	direction: ltr;
	display: inline-block;
	font-size: 13.5px;
	unicode-bidi: bidi-override;
}

.kai-wizard-root .kai-solution-text strong.kai-step-title {
	display: inline;
	color: #0b3d66 !important;
}

.kai-wizard-root .kai-result-actions {
	display: flex;
	gap: 10px;
	margin-top: 18px;
	flex-wrap: wrap;
}

/* دکمه‌های عملیاتی (حل شد / تماس کارشناس / بررسی مجدد) - رنگ پررنگ + متن سفید */
.kai-wizard-root .kai-btn {
	all: unset;
	box-sizing: border-box;
	padding: 12px 22px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	display: inline-block;
}

.kai-wizard-root .kai-btn-resolved {
	background-color: #1e7d34 !important;
	color: #ffffff !important;
}
.kai-wizard-root .kai-btn-resolved:hover {
	background-color: #145a25 !important;
	color: #ffffff !important;
}

.kai-wizard-root .kai-btn-escalate {
	background-color: #b3261e !important;
	color: #ffffff !important;
}
.kai-wizard-root .kai-btn-escalate:hover {
	background-color: #7f1a15 !important;
	color: #ffffff !important;
}

.kai-wizard-root .kai-btn-restart {
	background-color: #0b3d66 !important;
	color: #ffffff !important;
	margin-top: 12px;
}
.kai-wizard-root .kai-btn-restart:hover {
	background-color: #072945 !important;
	color: #ffffff !important;
}

.kai-wizard-root .kai-thanks {
	font-size: 15px;
	line-height: 2;
	color: #16222b !important;
}

.kai-wizard-root .kai-wizard-loading {
	color: #7a8892 !important;
}