/**
 * Fluent Support + Element Plus — عزل عن ثيم arabbook، SVG، قوائم Teleport.
 * يُحمَّل كملف مُعتمد على fs_tk_customer_portal* من wp_footer.
 *
 * body:has(#fluent_support_client_app) يضمن تنسيق القوائم المنقولة حتى لو لم يُضف صنف body من الثيم.
 */

/*
 * Bootstrap row-fluid + Fluent قد يوسّعان عرض الصفحة في RTL؛ نُقصّ أفقياً منطقة المحتوى فقط
 * حتى لا يختفي شريط التمرير الأسفل/الفراغ الطويل. القوائم المنقولة إلى body خارج #content-holder فلا تُقصّ.
 */
body:has(#fluent_support_client_app) #content-holder,
body.arabbook-fluent-support-portal #content-holder {
	overflow-x: clip !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

body:has(#fluent_support_client_app) #content-holder .row-fluid,
body.arabbook-fluent-support-portal #content-holder .row-fluid {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

body:has(#fluent_support_client_app),
body.arabbook-fluent-support-portal {
	--el-color-white: #ffffff;
	--el-color-black: #000000;
	--el-color-primary: #409eff;
	--el-border-color: #dcdfe6;
	--el-border-color-light: #e4e7ed;
	--el-fill-color-blank: #ffffff;
	--el-bg-color: #ffffff;
	--el-text-color-regular: #606266;
	--el-text-color-primary: #303133;
	--el-font-size-base: 14px;
	--el-border-radius-base: 4px;
	--el-box-shadow-light: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);
	--el-index-popper: 3000;
}

div#fluent_support_client_app {
	max-width: 100% !important;
	min-width: 0 !important;
	overflow-x: auto !important;
	box-sizing: border-box !important;
	font-family:
		system-ui,
		-apple-system,
		'Segoe UI',
		Roboto,
		'Helvetica Neue',
		Arial,
		sans-serif !important;
	font-size: var(--el-font-size-base) !important;
	line-height: 1.5 !important;
	color: var(--el-text-color-primary) !important;
}

div#fluent_support_client_app *,
div#fluent_support_client_app *::before,
div#fluent_support_client_app *::after {
	box-sizing: border-box !important;
}

/*
 * إلغاء قواعد الثيم على حقول HTML خام فقط — لا تمس حقول Element (.el-*).
 */
div#fluent_support_client_app input:not([class*='el-']):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']),
div#fluent_support_client_app textarea:not([class*='el-']),
div#fluent_support_client_app select:not([class*='el-']) {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	font: inherit !important;
	color: inherit !important;
	line-height: inherit !important;
	vertical-align: middle !important;
	float: none !important;
	text-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

div#fluent_support_client_app button:not([class*='el-']) {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font: inherit !important;
	color: inherit !important;
	line-height: inherit !important;
	float: none !important;
	text-transform: none !important;
	text-shadow: none !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

div#fluent_support_client_app svg {
	display: inline-block !important;
	box-sizing: border-box !important;
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-height: 18px !important;
	inline-size: 18px !important;
	block-size: 18px !important;
	max-inline-size: 18px !important;
	max-block-size: 18px !important;
	vertical-align: middle !important;
	align-self: center !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex-basis: 18px !important;
	flex: 0 0 18px !important;
	object-fit: contain !important;
	overflow: visible !important;
}

div#fluent_support_client_app svg[width],
div#fluent_support_client_app svg[height] {
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
}

div#fluent_support_client_app svg.search-icon {
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	inline-size: 18px !important;
	block-size: 18px !important;
}

div#fluent_support_client_app .el-icon,
div#fluent_support_client_app .el-input__suffix,
div#fluent_support_client_app .el-input__suffix-inner,
div#fluent_support_client_app .el-select__suffix {
	min-width: 0 !important;
	align-items: center !important;
}

div#fluent_support_client_app .el-select__wrapper,
div#fluent_support_client_app .el-select .el-input__wrapper {
	min-width: 0 !important;
	align-items: center !important;
}

div#fluent_support_client_app .el-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 14px !important;
	line-height: 1 !important;
	width: auto !important;
	height: auto !important;
	max-width: fit-content !important;
	vertical-align: middle !important;
}

div#fluent_support_client_app .el-icon svg {
	width: 1em !important;
	height: 1em !important;
	max-width: 18px !important;
	max-height: 18px !important;
	inline-size: 1em !important;
	block-size: 1em !important;
	max-inline-size: 18px !important;
	max-block-size: 18px !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex-basis: auto !important;
	flex: none !important;
	align-self: center !important;
}

div#fluent_support_client_app .el-input__suffix-inner svg,
div#fluent_support_client_app svg.el-select__caret,
div#fluent_support_client_app .el-select__caret svg,
div#fluent_support_client_app .el-dropdown__icon svg {
	width: 16px !important;
	height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
	inline-size: 16px !important;
	block-size: 16px !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex: none !important;
	align-self: center !important;
}

/* عناصر Teleport خارج الحاوية */
body:has(#fluent_support_client_app) .el-popper.el-select__popper,
body.arabbook-fluent-support-portal .el-popper.el-select__popper {
	z-index: 999999 !important;
	box-sizing: border-box !important;
}

body.rtl:has(#fluent_support_client_app) .el-popper.el-select__popper,
body.rtl:has(#fluent_support_client_app) .el-select-dropdown,
body.rtl.arabbook-fluent-support-portal .el-popper.el-select__popper,
body.rtl.arabbook-fluent-support-portal .el-select-dropdown {
	direction: rtl !important;
	text-align: right !important;
}

body.rtl:has(#fluent_support_client_app) .el-select-dropdown__item,
body.rtl.arabbook-fluent-support-portal .el-select-dropdown__item {
	text-align: right !important;
}

body:has(#fluent_support_client_app) .el-select-dropdown,
body.arabbook-fluent-support-portal .el-select-dropdown {
	box-sizing: border-box !important;
	background-color: #ffffff !important;
	border: 1px solid #e4e7ed !important;
	border-radius: 4px !important;
	box-shadow:
		0 12px 32px 4px rgba(0, 0, 0, 0.04),
		0 8px 20px rgba(0, 0, 0, 0.08) !important;
	padding: 6px 0 !important;
	margin: 6px 0 !important;
	min-width: 160px !important;
	max-height: 280px !important;
	overflow: hidden !important;
	font-family:
		'Helvetica Neue',
		Helvetica,
		'Segoe UI',
		Arial,
		sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #606266 !important;
}

body:has(#fluent_support_client_app) .el-select-dropdown__wrap,
body.arabbook-fluent-support-portal .el-select-dropdown__wrap {
	box-sizing: border-box !important;
	max-height: 268px !important;
	overflow-x: hidden !important;
}

body:has(#fluent_support_client_app) .el-select-dropdown__list,
body.arabbook-fluent-support-portal .el-select-dropdown__list {
	box-sizing: border-box !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body:has(#fluent_support_client_app) .el-select-dropdown__item,
body.arabbook-fluent-support-portal .el-select-dropdown__item {
	box-sizing: border-box !important;
	position: relative !important;
	padding: 0 16px !important;
	min-height: 34px !important;
	line-height: 34px !important;
	font-size: 14px !important;
	color: #606266 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	cursor: pointer !important;
	background-color: transparent !important;
}

body:has(#fluent_support_client_app) .el-select-dropdown__item.is-hovering,
body:has(#fluent_support_client_app) .el-select-dropdown__item:hover,
body.arabbook-fluent-support-portal .el-select-dropdown__item.is-hovering,
body.arabbook-fluent-support-portal .el-select-dropdown__item:hover {
	background-color: #f5f7fa !important;
}

body:has(#fluent_support_client_app) .el-select-dropdown__item.is-selected,
body.arabbook-fluent-support-portal .el-select-dropdown__item.is-selected {
	font-weight: 600 !important;
	color: #409eff !important;
}

body:has(#fluent_support_client_app) .el-scrollbar__bar,
body.arabbook-fluent-support-portal .el-scrollbar__bar {
	z-index: 2 !important;
}

body:has(#fluent_support_client_app) .el-popper.el-cascader__dropdown,
body:has(#fluent_support_client_app) .el-cascader__dropdown,
body.arabbook-fluent-support-portal .el-popper.el-cascader__dropdown,
body.arabbook-fluent-support-portal .el-cascader__dropdown {
	z-index: 999999 !important;
	box-sizing: border-box !important;
	background-color: #ffffff !important;
	border: 1px solid #e4e7ed !important;
	border-radius: 4px !important;
	box-shadow:
		0 12px 32px 4px rgba(0, 0, 0, 0.04),
		0 8px 20px rgba(0, 0, 0, 0.08) !important;
	font-family:
		'Helvetica Neue',
		Helvetica,
		'Segoe UI',
		Arial,
		sans-serif !important;
	font-size: 14px !important;
	color: #606266 !important;
}

body:has(#fluent_support_client_app) .el-cascader-panel,
body.arabbook-fluent-support-portal .el-cascader-panel {
	box-sizing: border-box !important;
	background-color: #ffffff !important;
}

body:has(#fluent_support_client_app) .el-cascader-menu,
body.arabbook-fluent-support-portal .el-cascader-menu {
	box-sizing: border-box !important;
	min-width: 160px !important;
	border-inline-end: 1px solid #e4e7ed !important;
}

body:has(#fluent_support_client_app) .el-cascader-node,
body.arabbook-fluent-support-portal .el-cascader-node {
	box-sizing: border-box !important;
	padding: 8px 16px !important;
	cursor: pointer !important;
}

body:has(#fluent_support_client_app) .el-cascader-node:not(.is-disabled):hover,
body.arabbook-fluent-support-portal .el-cascader-node:not(.is-disabled):hover {
	background-color: #f5f7fa !important;
}

/*
 * القسم El-select — وضوح النص المعروض (placeholder / المختار) وإصلاح قائمة المنقولة.
 * بعض إصدارات Element Plus ترفع المحتوى داخل .el-select__popper؛ نربط القواعد بها صراحةً.
 */

div#fluent_support_client_app .el-select {
	--el-text-color-regular: #606266;
	--el-text-color-placeholder: #909399;
	--el-text-color-primary: #303133;
	--el-font-size-base: 14px;
}

div#fluent_support_client_app .el-select__wrapper {
	color: var(--el-text-color-regular) !important;
}

div#fluent_support_client_app .el-select__selection {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	position: relative !important;
}

div#fluent_support_client_app .el-select__suffix,
div#fluent_support_client_app .el-select__suffix-inner {
	color: var(--el-text-color-regular) !important;
	opacity: 1 !important;
}

div#fluent_support_client_app .el-select__caret {
	color: var(--el-text-color-regular) !important;
}

div#fluent_support_client_app .el-select__placeholder,
div#fluent_support_client_app .el-select__placeholder span {
	color: var(--el-text-color-placeholder) !important;
	opacity: 1 !important;
	font-size: var(--el-font-size-base) !important;
	line-height: 1.5 !important;
}

div#fluent_support_client_app span.el-select__tags-text {
	color: var(--el-text-color-primary) !important;
	font-size: var(--el-font-size-base) !important;
}

div#fluent_support_client_app .el-select__selected-item:not(.el-select__input-wrapper) span,
div#fluent_support_client_app .el-select__tags .el-tag {
	color: inherit !important;
	opacity: 1 !important;
}

/* مدخل الـ combobox للوصولية داخل غلاف is-hidden — لا نترك له عرضاً يغطي النص المرئي */
div#fluent_support_client_app .el-select .el-select__input-wrapper.is-hidden {
	flex: 0 0 auto !important;
	max-width: 1px !important;
	min-width: 0 !important;
	overflow: hidden !important;
}

div#fluent_support_client_app .el-select .el-select__input {
	min-width: 0 !important;
	color: inherit !important;
	opacity: 1 !important;
}

/* حاوية القائمة + القائمة داخل المنقِل إلى body */
body:has(#fluent_support_client_app) .el-select__popper,
body.arabbook-fluent-support-portal .el-select__popper {
	background: transparent !important;
	box-sizing: border-box !important;
}

body:has(#fluent_support_client_app) .el-select__popper .el-select-dropdown,
body.arabbook-fluent-support-portal .el-select__popper .el-select-dropdown {
	box-sizing: border-box !important;
	background-color: #ffffff !important;
	border: 1px solid #e4e7ed !important;
	border-radius: 4px !important;
	box-shadow:
		0 12px 32px 4px rgba(0, 0, 0, 0.04),
		0 8px 20px rgba(0, 0, 0, 0.08) !important;
	padding: 6px 0 !important;
	margin: 0 !important;
	min-width: 160px !important;
	max-height: 280px !important;
	overflow: hidden !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #606266 !important;
}

body:has(#fluent_support_client_app) .el-select__popper .el-scrollbar,
body.arabbook-fluent-support-portal .el-select__popper .el-scrollbar {
	background-color: #ffffff !important;
}

body:has(#fluent_support_client_app) .el-select__popper ul,
body.arabbook-fluent-support-portal .el-select__popper ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

body:has(#fluent_support_client_app) .el-select__popper .el-select-dropdown__item,
body.arabbook-fluent-support-portal .el-select__popper .el-select-dropdown__item {
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 16px !important;
	min-height: 34px !important;
	line-height: 34px !important;
	font-size: 14px !important;
	color: #606266 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	cursor: pointer !important;
	background-color: #ffffff !important;
}

body:has(#fluent_support_client_app) .el-select__popper .el-select-dropdown__item:hover,
body:has(#fluent_support_client_app) .el-select__popper .el-select-dropdown__item.hover,
body:has(#fluent_support_client_app) .el-select__popper .el-select-dropdown__item.is-hovering,
body.arabbook-fluent-support-portal .el-select__popper .el-select-dropdown__item:hover,
body.arabbook-fluent-support-portal .el-select__popper .el-select-dropdown__item.hover,
body.arabbook-fluent-support-portal .el-select__popper .el-select-dropdown__item.is-hovering {
	background-color: #f5f7fa !important;
}

body:has(#fluent_support_client_app) .el-select__popper .el-select-dropdown__item.is-selected,
body.arabbook-fluent-support-portal .el-select__popper .el-select-dropdown__item.is-selected {
	font-weight: 600 !important;
	color: #409eff !important;
	background-color: #ffffff !important;
}

body.rtl:has(#fluent_support_client_app) .el-select__popper,
body.rtl.arabbook-fluent-support-portal .el-select__popper {
	direction: rtl !important;
	text-align: right !important;
}

body.rtl:has(#fluent_support_client_app) .el-select__popper .el-select-dropdown__item,
body.rtl.arabbook-fluent-support-portal .el-select__popper .el-select-dropdown__item {
	text-align: right !important;
}

/* عناصر listbox بدون صنف __item في بعض الدورات */
body:has(#fluent_support_client_app) .el-select__popper [role='option'],
body.arabbook-fluent-support-portal .el-select__popper [role='option'] {
	box-sizing: border-box !important;
	padding: 0 16px !important;
	min-height: 34px !important;
	line-height: 34px !important;
	font-size: 14px !important;
	color: #606266 !important;
	cursor: pointer !important;
	background-color: #ffffff !important;
	list-style: none !important;
}

/* إن رُسِمَت الخيارات كـ li بدون الصنف المعتاد (نسخ قديمة/مختلفة) */
body:has(#fluent_support_client_app) .el-select__popper .el-scrollbar__view li,
body.arabbook-fluent-support-portal .el-select__popper .el-scrollbar__view li {
	list-style: none !important;
	box-sizing: border-box !important;
	padding: 0 16px !important;
	min-height: 34px !important;
	line-height: 34px !important;
	font-size: 14px !important;
	color: #606266 !important;
	cursor: pointer !important;
	background-color: #ffffff !important;
}