/* ============================================================
   Zoon Header v1.0.0 — عنقود أيقونات الشريط العلوي
   RTL بالخصائص المنطقية · متوافق مع الوضع الليلي (html[data-theme])
   ============================================================ */

.zhdr-cluster {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
}

/* فاصل رفيع قبل العنقود يفصله بصرياً عن روابط التصفّح */
.zhdr-cluster::before {
	content: "";
	inline-size: 1px;
	block-size: 22px;
	background: rgba(0, 0, 0, 0.12);
	margin-inline-end: 4px;
}

/* ── الزرّ الأساسي (يشمل زرّ ZDM المدمج) ── */
.zhdr-cluster .zhdr-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.zhdr-cluster .zhdr-acc-toggle { inline-size: auto; padding-inline: 7px; }

/* الدرس 58: Astra يفرض a:hover/active فيقلب لون الأيقونة — نثبّته لكل الحالات */
.zhdr-cluster a.zhdr-btn,
.zhdr-cluster a.zhdr-btn:link,
.zhdr-cluster a.zhdr-btn:visited,
.zhdr-cluster a.zhdr-btn:hover,
.zhdr-cluster a.zhdr-btn:focus,
.zhdr-cluster a.zhdr-btn:active,
.zhdr-cluster button.zhdr-btn {
	color: #12395F !important;
	text-decoration: none !important;
}

.zhdr-cluster .zhdr-btn:hover { background: rgba(0, 0, 0, 0.05); }
.zhdr-cluster .zhdr-btn:focus-visible { outline: 2px solid #1A5FA8; outline-offset: 2px; }

.zhdr-cluster .zhdr-ic { inline-size: 20px; block-size: 20px; display: block; }
.zhdr-cluster .zhdr-ic-sm { inline-size: 14px; block-size: 14px; }

/* زرّ الوضع الليلي المدمج: يرث شكل العنقود لا الزرّ العائم (ID مختلف) */
.zhdr-cluster .zhdr-theme { font-size: 17px; line-height: 1; }

/* ── شارة عدد السلة ── */
.zhdr-cluster .zhdr-badge {
	position: absolute;
	inset-block-start: -4px;
	inset-inline-end: -4px;
	min-inline-size: 17px;
	block-size: 17px;
	padding-inline: 4px;
	border-radius: 999px;
	background: #D64545;
	color: #fff !important;
	font-size: 11px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}
.zhdr-cluster .zhdr-badge.is-empty { background: rgba(0, 0, 0, 0.28); }

/* ── منسدلة «حسابي» ── */
.zhdr-acc { position: relative; }

.zhdr-acc-menu {
	/* fixed على مستوى body والموضع من JS. والإرساء **فيزيائي** لا منطقي —
	   انظر شرح over-constrained في قاعدة اللوح المنسدل. وتحييد أنماط UA
	   لعنصر `[popover]` كما في القاعدة أعلاه. */
	position: fixed;
	margin: 0;
	bottom: auto;
	block-size: auto;
	inline-size: auto;
	color: inherit;
	top: var(--zhdr-top, 64px);
	left: 0;
	right: auto;
	min-inline-size: 190px;
	padding: 6px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	overflow-y: auto;
	/* فوق اللوح المنسدل (1000000) — مع التنافر المتبادل في JS هذا حزام أمان. */
	z-index: 2147483001;
}
.zhdr-acc-menu[hidden] { display: none; }

.zhdr-acc-menu .zhdr-acc-item,
.zhdr-acc-menu .zhdr-acc-item:link,
.zhdr-acc-menu .zhdr-acc-item:visited,
.zhdr-acc-menu .zhdr-acc-item:hover,
.zhdr-acc-menu .zhdr-acc-item:focus,
.zhdr-acc-menu .zhdr-acc-item:active {
	display: block;
	padding: 9px 12px;
	border-radius: 7px;
	font-size: 14px;
	color: #12395F !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.zhdr-acc-menu .zhdr-acc-item:hover { background: rgba(26, 95, 168, 0.08); }

/* ── الوضع الليلي ── */
html[data-theme="dark"] .zhdr-cluster::before { background: rgba(255, 255, 255, 0.16); }

html[data-theme="dark"] .zhdr-cluster .zhdr-btn {
	border-color: #2A3547;
}
html[data-theme="dark"] .zhdr-cluster a.zhdr-btn,
html[data-theme="dark"] .zhdr-cluster a.zhdr-btn:link,
html[data-theme="dark"] .zhdr-cluster a.zhdr-btn:visited,
html[data-theme="dark"] .zhdr-cluster a.zhdr-btn:hover,
html[data-theme="dark"] .zhdr-cluster a.zhdr-btn:focus,
html[data-theme="dark"] .zhdr-cluster a.zhdr-btn:active,
html[data-theme="dark"] .zhdr-cluster button.zhdr-btn {
	color: #E6EAF2 !important;
}
html[data-theme="dark"] .zhdr-cluster .zhdr-btn:hover { background: rgba(255, 255, 255, 0.07); }
html[data-theme="dark"] .zhdr-cluster .zhdr-badge.is-empty { background: rgba(255, 255, 255, 0.22); }

html[data-theme="dark"] .zhdr-acc-menu {
	background: #161D28;
	border-color: #2A3547;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .zhdr-acc-menu .zhdr-acc-item,
html[data-theme="dark"] .zhdr-acc-menu .zhdr-acc-item:link,
html[data-theme="dark"] .zhdr-acc-menu .zhdr-acc-item:visited,
html[data-theme="dark"] .zhdr-acc-menu .zhdr-acc-item:hover,
html[data-theme="dark"] .zhdr-acc-menu .zhdr-acc-item:focus,
html[data-theme="dark"] .zhdr-acc-menu .zhdr-acc-item:active {
	color: #E6EAF2 !important;
}
html[data-theme="dark"] .zhdr-acc-menu .zhdr-acc-item:hover { background: rgba(92, 198, 232, 0.14); }

/* ── الجوال ── */
@media (max-width: 600px) {
	.zhdr-cluster { gap: 6px; }
	.zhdr-cluster::before { display: none; }
	.zhdr-cluster .zhdr-btn { inline-size: 34px; block-size: 34px; }
	.zhdr-cluster .zhdr-ic { inline-size: 19px; block-size: 19px; }
}

/* ============================================================
   v2.0.0 — الترويسة الكاملة (بديلة ترويسة Astra)
   نقطة التحوّل للجوال 921px (افتراضي Astra) — عدّلها هنا إن لزم.
   ============================================================ */

.zhdr-header {
	position: relative;
	z-index: 999;
	background: #fff;
	border-block-end: 1px solid rgba(0, 0, 0, 0.08);
}
.zhdr-header.zhdr-is-sticky { position: sticky; inset-block-start: 0; }
/* شريط أدوات ووردبريس ثابت أعلى الشاشة — نزيح اللاصقة تحته */
.admin-bar .zhdr-header.zhdr-is-sticky { inset-block-start: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .zhdr-header.zhdr-is-sticky { inset-block-start: 46px; }
}
.zhdr-header.zhdr-scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }

.zhdr-bar {
	max-inline-size: 1200px;
	margin-inline: auto;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	gap: 18px;
}

/* الشعار أوّل عنصر ⇒ يقع يميناً في RTL (قرار أحمد) */
.zhdr-logo { flex: 0 0 auto; display: flex; align-items: center; }
.zhdr-logo-img img,
.zhdr-logo .custom-logo {
	block-size: var(--zhdr-logo-h, 44px);
	inline-size: auto;
	display: block;
}
.zhdr-logo-text,
.zhdr-logo-text:hover,
.zhdr-logo-text:focus {
	font-size: 19px; font-weight: 600;
	color: #12395F !important; text-decoration: none !important;
}

.zhdr-nav { flex: 1 1 auto; }
.zhdr-end { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

/* ── قائمة سطح المكتب ── */
/* (v2.2.1) 🔴 الصفّ الأفقي **مقصور على `.zhdr-nav`**. قبل هذا كانت خصائص الصفّ
   على `.zhdr-list` وحدها، و`<ul>` قائمة الجوال يحمل الصنفين معاً، فكان الصحيح
   يتوقّف على **ترتيب المصدر** — أي أن نجاة القائمة تعتمد على بقاء قاعدتين معاً
   وبالترتيب. أي طبقة تحسين CSS (UCSS/التصغير) تُسقط إحداهما أو تعيد ترتيبهما
   فيعود العطل. الآن قائمة الجوال **لا تستلم `justify-content: center` أصلاً**،
   فالنتيجة صحيحة بقاعدة واحدة ولا تعتمد على ترتيب ولا على وجود الأخرى. */
.zhdr-list { margin: 0; padding: 0; list-style: none; }
.zhdr-nav .zhdr-list {
	display: flex; align-items: center; justify-content: center;
	gap: 4px;
}
.zhdr-item { position: relative; display: flex; align-items: center; }

.zhdr-list .zhdr-link,
.zhdr-list .zhdr-link:link,
.zhdr-list .zhdr-link:visited,
.zhdr-list .zhdr-link:hover,
.zhdr-list .zhdr-link:focus,
.zhdr-list .zhdr-link:active {
	display: block;
	position: relative;
	padding: 9px 12px;
	border-radius: 7px;
	font-size: 16px;
	color: #12395F !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.zhdr-list .zhdr-link:hover { background: rgba(26, 95, 168, 0.08); }

/* مؤشّر الصفحة الحالية — الوزن هنا وحده يعني شيئاً.
   الخطّ السفلي يحمل الدلالة، والوزن 500 لا 700: التعريض الثقيل يخنق
   عيون الحروف العربية (بياض ه/ع/ص) عند الأحجام الصغيرة. */
.zhdr-list .zhdr-link[aria-current="page"] { font-weight: 500; }
.zhdr-nav .zhdr-list > .zhdr-item > .zhdr-link[aria-current="page"]::after {
	content: "";
	position: absolute;
	inset-inline: 12px;
	inset-block-end: 2px;
	block-size: 2px;
	border-radius: 2px;
	background: #19C6DD;
}
.zhdr-list-drawer .zhdr-link[aria-current="page"] { background: rgba(26, 95, 168, 0.08); }

.zhdr-sub-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 22px; block-size: 22px; padding: 0;
	border: 0; background: transparent; cursor: pointer; color: #12395F;
}
.zhdr-sub-toggle svg { inline-size: 14px; block-size: 14px; }
.zhdr-item[data-open="1"] > .zhdr-sub-toggle { transform: rotate(180deg); }

.zhdr-sub {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline-start: 0;
	min-inline-size: 190px;
	margin: 0; padding: 6px;
	list-style: none;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	display: none;
}
.zhdr-item[data-open="1"] > .zhdr-sub { display: block; }
.zhdr-sub[hidden] { display: none; }

/* ── زرّ الهامبرغر ── */
/* (v2.4.1) زرّ القائمة — كان مربّعاً بحدّ رمادي وخلفية شفّافة، فيلتقط أنماط
   أزرار الثيم أحياناً ويظهر بلون العلامة مصمتاً. الآن هيئة مصرّحة بالكامل
   (خلفية · حدّ · مقاس · لون) فلا يبقى شيء للثيم ليملأه، مع **حالة مفتوح** واضحة. */
.zhdr-burger {
	display: none;
	align-items: center; justify-content: center;
	inline-size: 40px; block-size: 40px; padding: 0;
	-webkit-appearance: none; appearance: none;
	border: 1px solid rgba(18, 57, 95, 0.10);
	border-radius: 12px;
	background: #F1F5FA;
	color: #12395F;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.zhdr-burger:hover { background: #E7EEF7; }
.zhdr-burger-ic { display: block; inline-size: 18px; margin-inline: auto; }
.zhdr-burger-ic span {
	display: block; block-size: 2px; margin: 3.5px 0;
	background: currentColor; border-radius: 2px;
	transition: background-color .15s ease;
}
/* مفتوح: الزرّ نفسه يُعلن الحالة بدل أن يتركها للوح وحده */
.zhdr-burger[aria-expanded="true"] {
	background: #12395F;
	border-color: #12395F;
	color: #fff;
}

/* ── الدرج / القائمة العمودية ── */
.zhdr-overlay {
	position: fixed; inset: 0; z-index: 99998;
	margin: 0; border: 0; padding: 0;
	background: rgba(0, 0, 0, 0.45);
}
.zhdr-overlay[hidden] { display: none; }

.zhdr-drawer {
	position: fixed;
	margin: 0;
	color: inherit;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: min(320px, 86vw);
	z-index: 99999;
	background: #fff;
	box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18);
	overflow-y: auto;
	padding: 14px;
}
.zhdr-drawer[hidden] { display: none; }

.zhdr-drawer-head {
	display: flex; align-items: center; justify-content: space-between;
	padding-block-end: 10px; margin-block-end: 8px;
	border-block-end: 1px solid rgba(0, 0, 0, 0.1);
}
.zhdr-drawer-title { font-weight: 600; color: #12395F; }
.zhdr-drawer-close {
	inline-size: 32px; block-size: 32px; padding: 0; font-size: 22px; line-height: 1;
	border: 0; background: transparent; cursor: pointer; color: #12395F;
}

/* ============================================================
   (v2.2.0) قائمة الجوال — الوضعان معاً
   ⚠️ عزل صريح عن قاعدة `.zhdr-list`: تلك مكتوبة لصفّ flex أفقي، وخصائص
   المحاذاة فيها (justify-content / align-items / gap) **تبقى سارية** حين
   نغيّر `display` وحده. وهذا كان جذر بلاغ «شكل القائمة»:
   `justify-content: center` على شبكة بلا `grid-template-columns` مصرَّح
   يجعل العمود الضمني بعرض `max-content` ثم يوسّطه ⇒ بطاقات متساوية العرض
   ضيّقة في وسط الشاشة. عائلة الدرس 122 نفسها (تسرّب من قاعدة الأساس).
   العلاج: تصريح العمود والمحاذاة هنا صراحةً، لا تجاوز جزئي.
   ============================================================ */
.zhdr-list-drawer {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-content: stretch;
	justify-items: stretch;
	align-items: start;
	align-content: start;
	gap: 8px;
	inline-size: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* بطاقة العنصر */
.zhdr-list-drawer > .zhdr-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	inline-size: 100%;
	min-inline-size: 0;
	background: #F7F9FC;
	border: 1px solid rgba(18, 57, 95, 0.09);
	border-radius: 12px;
	padding-inline: 6px;
	transition: background-color .15s ease, border-color .15s ease;
}
.zhdr-list-drawer > .zhdr-item:hover { background: #F1F5FA; }

/* الروابط — تُكرَّر سلسلة الحالات لأن `.zhdr-list .zhdr-link:link`
   (خصوصية 0,3,0) تفرض display:block وحشوة سطح المكتب، فأي قاعدة أقلّ
   خصوصيةً تُبتلع صامتة (منطق الدرس 58). */
.zhdr-list-drawer .zhdr-link,
.zhdr-list-drawer .zhdr-link:link,
.zhdr-list-drawer .zhdr-link:visited,
.zhdr-list-drawer .zhdr-link:hover,
.zhdr-list-drawer .zhdr-link:focus,
.zhdr-list-drawer .zhdr-link:active {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-inline-size: 0;
	min-block-size: 44px;
	padding: 8px 12px;
	font-size: 16px;
	line-height: 1.45;
	border-radius: 9px;
	text-align: start;
	white-space: normal;
	overflow-wrap: anywhere;
}
/* البطاقة تحمل أثر التمرير — لا تظليل مزدوج داخلها */
.zhdr-list-drawer .zhdr-link:hover { background: transparent; }

/* زرّ الفرع: هدف لمس 40px بدل 22px */
.zhdr-list-drawer .zhdr-sub-toggle {
	flex: 0 0 auto;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 9px;
}
.zhdr-list-drawer .zhdr-sub-toggle svg { inline-size: 16px; block-size: 16px; }
.zhdr-list-drawer .zhdr-sub-toggle:hover { background: rgba(26, 95, 168, 0.08); }

/* الفروع داخل البطاقة */
/* (v2.4.1) 🔴 `:not([hidden])` وليس `.zhdr-list-drawer .zhdr-sub` مجرّدة.
   القاعدة `.zhdr-sub[hidden]{display:none}` (السطر ~281) لها **نفس الخصوصية**
   (0,2,0)، وهذه القاعدة بعدها في الملف ⇒ تفوز ⇒ `display:block` يتغلّب على
   الإخفاء، فيبقى الفرع ممدوداً أبداً ولا ينكمش. الاعتماد على ترتيب المصدر بين
   قاعدتين متساويتين هو نفس الفخّ الذي أوقعنا في «تنسيق القائمة» — العلاج أن
   يصير الشرط جزءاً من المحدِّد لا من الترتيب. */
.zhdr-list-drawer .zhdr-sub:not([hidden]) {
	position: static;
	inline-size: 100%;
	flex-basis: 100%;
	display: block;
	border: 0;
	box-shadow: none;
	background: transparent;
	margin: 0;
	padding-inline: 8px 4px;
	padding-block: 4px 6px;
	border-block-start: 1px dashed rgba(18, 57, 95, 0.14);
}
.zhdr-list-drawer .zhdr-sub li { margin: 0; }
.zhdr-list-drawer .zhdr-sub .zhdr-link { font-size: 15px; min-block-size: 40px; }

/* الصفحة الحالية: البطاقة كلها + خيط سماوي على حافة البداية (اليمين في RTL) */
/* (v2.3.0) 🔴 كانت هذه القاعدة محدِّداً والدياً يستنبط حالة الابن.
   محلّل QUIC.cloud لا يفهم هذا المحدِّد، وفشل توليد UCSS لصفحة يجعل ملفها **تعليق
   خطأ فقط** ⇒ الصفحة تفقد CSS بالكامل (وهو ما ظهر في الرئيسية بعد مسح UCSS:
   نقاط تعداد أصلية وSVG بلا مقاس). الحالة صارت صنفاً يرسمه PHP، فلا محدِّد هشّ
   ولا اعتماد على دعم المتصفّح. */
.zhdr-list-drawer > .zhdr-item-current {
	background: rgba(26, 95, 168, 0.07);
	border-color: rgba(26, 95, 168, 0.28);
	box-shadow: inset -3px 0 0 0 #19C6DD;
}
.zhdr-list-drawer .zhdr-link[aria-current="page"] { font-weight: 500; }


/* القائمة العمودية — (v2.2.1) لوح `fixed` على مستوى `<body>`.
   🔴 سبب التغيير (بلاغ «القائمة تختفي خلف خلفية الصفحة»): الإرساء داخل الترويسة
   (v2.1.1) يضع اللوح **داخل سياق تكديس الترويسة**، وأي جدّ للترويسة يُنشئ سياق
   تكديس (transform / filter / opacity / will-change من الثيم أو باني الصفحة)
   يحبس اللوح بأكمله بداخله — فيرتفع فوقه أي عنصر في سياق لاحق، مهما بلغ
   z-index الداخلي. رفع z-index لا يُصلح هذا أبداً: المقارنة لا تحدث في نفس
   الطبقة. العلاج الوحيد الحاسم: نقل اللوح إلى `<body>` (يفعله JS) وتثبيته
   بـ`fixed`، **والموضع يُحسب من مستطيل الترويسة في JS** لا من إرساء CSS —
   فيصير مستقلاً عن كل جدّ. الأنماط السطرية من JS مناعة إضافية ضد تقليم CSS. */
/* (v2.4.0) تحييد أنماط UA لعنصر `[popover]`: المتصفّح يفرض عليه
   `inset:0; margin:auto; width:fit-content; border:solid; color:canvastext`.
   أنماط المؤلّف تتغلّب عليها، لكن **ما لم نصرّح به يبقى سارياً** — و`bottom:0`
   و`margin:auto` وحدهما كافيان لتمديد اللوح وتوسيطه. لذا تُصرَّح هنا صراحةً. */
.zhdr-drawer[data-zhdr-mobile="dropdown"] {
	position: fixed;
	margin: 0;
	bottom: auto;
	height: auto;
	color: inherit;
	border: 0;
	/* (v2.3.0) 🔴 خصائص **فيزيائية** لا منطقية. `inset-inline-start` في RTL =
	   `right`، وJS يضبط `left` — فيجتمع left+width+right على عنصر مثبَّت ⇒ حالة
	   over-constrained، وقاعدة CSS 2.1 تُهمل `left` في RTL فيلتصق اللوح بالحافة
	   اليمنى ويُهمل الحساب. على الجوال كان الطرفان صفراً فلم يظهر الأثر، وظهر على
	   سطح المكتب حيث `left` ≠ 0 (منسدلة «حسابي» تهاجر لليمين). */
	top: var(--zhdr-top, 64px);
	left: 0;
	right: auto;
	inline-size: auto;
	block-size: auto;
	overflow-y: auto;
	/* أعلى من أي طبقة معقولة في الصفحة — واللوح الآن في الطبقة الجذرية فالمقارنة
	   تحدث فعلاً (خلافاً لحالة الحبس أعلاه). */
	/* (v2.4.0) هذه القيمة للسقوط وحده: مع الطبقة العليا لا معنى للمقارنة. */
	z-index: 2147483000;
	background: #fff;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
	border-block-start: 1px solid rgba(0, 0, 0, 0.08);
}
.zhdr-drawer[data-zhdr-mobile="dropdown"] .zhdr-drawer-head { display: none; }

/* (v2.1.2) الترويسة sticky = سياق تكديس يحبس القائمة. نرفع الترويسة كلها
   فوق كل شيء ما دامت القائمة مفتوحة، فيعلو سياقها والقائمة بداخله معاً. */
.zhdr-header.zhdr-dropdown-open,
.zhdr-header.zhdr-acc-open { z-index: 100000; }
/* في الوضع المنسدل لا نعتّم الخلفية (ليس درجاً جانبياً) */
.zhdr-header .zhdr-drawer[data-zhdr-mobile="dropdown"] ~ .zhdr-overlay,
.zhdr-drawer[data-zhdr-mobile="dropdown"] + .zhdr-overlay { display: none; }

/* ── (v2.2.0) اللوح المنسدل نفسه — البطاقات صارت مشتركة أعلاه ── */
.zhdr-drawer[data-zhdr-mobile="dropdown"] {
	padding: 12px;
	border-end-start-radius: 14px;
	border-end-end-radius: 14px;
}

/* دخول ناعم: تعمل الحركة تلقائياً كلما أُزيل hidden (إعادة رسم جديدة) */
@keyframes zhdrDropIn {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}
.zhdr-drawer[data-zhdr-mobile="dropdown"]:not([hidden]) {
	animation: zhdrDropIn .18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
	.zhdr-drawer[data-zhdr-mobile="dropdown"]:not([hidden]) { animation: none; }
}

/* منع تمرير الخلفية عند فتح الدرج */
html.zhdr-locked, html.zhdr-locked body { overflow: hidden; }

/* ── التحوّل للجوال ── */
@media (max-width: 921px) {
	.zhdr-bar { padding: 8px 14px; gap: 10px; }
	.zhdr-nav { display: none; }
	.zhdr-burger { display: block; }
	.zhdr-end { margin-inline-start: auto; }
}
@media (min-width: 922px) {
	.zhdr-overlay, .zhdr-drawer { display: none !important; }
}

/* ── الوضع الليلي ── */
html[data-theme="dark"] .zhdr-header {
	background: #11171F;
	border-block-end-color: #2A3547;
}
html[data-theme="dark"] .zhdr-logo-text,
html[data-theme="dark"] .zhdr-logo-text:hover,
html[data-theme="dark"] .zhdr-list .zhdr-link,
html[data-theme="dark"] .zhdr-list .zhdr-link:link,
html[data-theme="dark"] .zhdr-list .zhdr-link:visited,
html[data-theme="dark"] .zhdr-list .zhdr-link:hover,
html[data-theme="dark"] .zhdr-list .zhdr-link:focus,
html[data-theme="dark"] .zhdr-list .zhdr-link:active { color: #E6EAF2 !important; }
html[data-theme="dark"] .zhdr-list .zhdr-link:hover { background: rgba(92, 198, 232, 0.14); }
html[data-theme="dark"] .zhdr-sub-toggle,
html[data-theme="dark"] .zhdr-drawer-title,
html[data-theme="dark"] .zhdr-drawer-close { color: #E6EAF2; }
html[data-theme="dark"] .zhdr-burger { border-color: #2A3547; }
html[data-theme="dark"] .zhdr-burger-ic span { background: #E6EAF2; }
html[data-theme="dark"] .zhdr-sub,
html[data-theme="dark"] .zhdr-drawer { background: #161D28; border-color: #2A3547; }
html[data-theme="dark"] .zhdr-drawer-head { border-block-end-color: #2A3547; }
html[data-theme="dark"] .zhdr-list-drawer .zhdr-sub { background: transparent; }

html[data-theme="dark"] .zhdr-burger {
	background: #1B2432; border-color: #2A3547; color: #E6EAF2;
}
html[data-theme="dark"] .zhdr-burger:hover { background: #202B3B; }
html[data-theme="dark"] .zhdr-burger[aria-expanded="true"] {
	background: #1A5FA8; border-color: #1A5FA8; color: #F2F7FF;
}

/* (v2.2.0) بطاقات قائمة الجوال ليلاً — للوضعين */
html[data-theme="dark"] .zhdr-list-drawer > .zhdr-item {
	background: #1B2432;
	border-color: #2A3547;
}
html[data-theme="dark"] .zhdr-list-drawer > .zhdr-item:hover { background: #202B3B; }
html[data-theme="dark"] .zhdr-list-drawer > .zhdr-item-current {
	background: rgba(92, 198, 232, 0.12);
	border-color: rgba(92, 198, 232, 0.35);
	box-shadow: inset -3px 0 0 0 #5CC6E8;
}

html[data-theme="dark"] .zhdr-list-drawer .zhdr-sub {
	border-block-start-color: #2A3547;
}
html[data-theme="dark"] .zhdr-list-drawer .zhdr-sub-toggle:hover { background: rgba(92, 198, 232, 0.14); }

/* ============================================================
   v2.2.0 — هوية المستخدم + قسم الحساب في قائمة الجوال
   ============================================================ */

/* ── اسم صاحب الحساب على زرّ العنقود (سطح المكتب فقط) ── */
.zhdr-cluster .zhdr-acc-toggle.has-name {
	inline-size: auto;
	gap: 6px;
	padding-inline: 9px;
	max-inline-size: 200px;
}
.zhdr-acc-name { display: inline-flex; min-inline-size: 0; }
.zhdr-acc-name .zhdr-user-name {
	font-size: 14px;
	font-weight: 500;
	max-inline-size: 120px;
}

/* ── كتلة المستخدم (منسدلة «حسابي» + قائمة الجوال) ── */
.zhdr-user {
	display: flex;
	align-items: center;
	gap: 10px;
	min-inline-size: 0;
}
.zhdr-acc-menu .zhdr-user {
	padding: 4px 8px 10px;
	margin-block-end: 6px;
	border-block-end: 1px solid rgba(18, 57, 95, 0.10);
}
.zhdr-user-av {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 50%;
	background: #12395F;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	-webkit-user-select: none;
	user-select: none;
}
.zhdr-user-tx { display: block; min-inline-size: 0; }
.zhdr-user-name,
.zhdr-user-sub {
	display: block;
	max-inline-size: 190px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zhdr-user-name { font-size: 14px; font-weight: 600; color: #12395F; }
.zhdr-user-sub {
	margin-block-start: 2px;
	font-size: 12px;
	font-weight: 400;
	color: rgba(18, 57, 95, 0.62);
}
/* الإخفاء يجب أن يتغلّب على display:block أعلاه */
.zhdr-user-sub[hidden],
.zhdr-user[hidden] { display: none; }

/* نسخة أكبر داخل قائمة الجوال */
.zhdr-user-lg { gap: 12px; }
.zhdr-user-lg .zhdr-user-av { inline-size: 44px; block-size: 44px; font-size: 18px; }
.zhdr-user-lg .zhdr-user-name { font-size: 15px; max-inline-size: 62vw; }
.zhdr-user-lg .zhdr-user-sub { font-size: 12.5px; max-inline-size: 62vw; }

/* ── منسدلة «حسابي»: أوسع قليلاً لتحتمل الاسم ── */
.zhdr-acc-menu {
	min-inline-size: 220px;
	max-inline-size: 300px;
}

/* ── مظهر المنسدلة على الجوال (الموضع صار من JS: لوح تحت الترويسة بعرضها) ── */
@media (max-width: 921px) {
	.zhdr-acc-menu {
		min-inline-size: 0;
		max-inline-size: none;
		padding: 10px;
		border-radius: 14px;
	}
	.zhdr-acc-menu .zhdr-acc-item,
	.zhdr-acc-menu .zhdr-acc-item:link,
	.zhdr-acc-menu .zhdr-acc-item:visited,
	.zhdr-acc-menu .zhdr-acc-item:hover,
	.zhdr-acc-menu .zhdr-acc-item:focus,
	.zhdr-acc-menu .zhdr-acc-item:active {
		display: flex;
		align-items: center;
		min-block-size: 44px;
		padding: 8px 12px;
		font-size: 15px;
		border-radius: 10px;
		background: #F7F9FC;
		border: 1px solid rgba(18, 57, 95, 0.09);
		white-space: normal;
	}
	.zhdr-acc-menu .zhdr-acc-item + .zhdr-acc-item { margin-block-start: 6px; }
	.zhdr-acc-menu .zhdr-user-name,
	.zhdr-acc-menu .zhdr-user-sub { max-inline-size: 62vw; }
	/* الاسم على الزرّ يُخفى: المساحة هنا للأيقونات لا للنصّ */
	.zhdr-acc-name { display: none; }
	.zhdr-cluster .zhdr-acc-toggle.has-name { inline-size: auto; padding-inline: 7px; }
}

/* ── قسم الحساب داخل قائمة الجوال ── */
.zhdr-drawer-acc {
	margin-block-start: 12px;
	padding-block-start: 12px;
	border-block-start: 1px solid rgba(18, 57, 95, 0.12);
}
.zhdr-drawer-acc .zhdr-user {
	border: 0;
	padding: 0 4px;
	margin-block-end: 10px;
}

/* عنصر الخروج: تمييز هادئ لا صارخ (خطر منخفض، لكن لا يُخطئه الإصبع) */
.zhdr-list-acc > .zhdr-item-out {
	background: rgba(214, 69, 69, 0.06);
	border-color: rgba(214, 69, 69, 0.22);
}
.zhdr-list-acc > .zhdr-item-out:hover { background: rgba(214, 69, 69, 0.10); }
.zhdr-list-acc > .zhdr-item-out .zhdr-link,
.zhdr-list-acc > .zhdr-item-out .zhdr-link:link,
.zhdr-list-acc > .zhdr-item-out .zhdr-link:visited,
.zhdr-list-acc > .zhdr-item-out .zhdr-link:hover,
.zhdr-list-acc > .zhdr-item-out .zhdr-link:focus,
.zhdr-list-acc > .zhdr-item-out .zhdr-link:active { color: #B03A3A !important; }

/* زرّ دخول الزائر — نصّ صريح لا أيقونة صامتة */
.zhdr-drawer-cta,
.zhdr-drawer-cta:link,
.zhdr-drawer-cta:visited,
.zhdr-drawer-cta:hover,
.zhdr-drawer-cta:focus,
.zhdr-drawer-cta:active {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	padding-inline: 14px;
	border-radius: 12px;
	background: #12395F;
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none !important;
}
.zhdr-drawer-cta:hover { background: #164873; }

/* ── الوضع الليلي ── */
html[data-theme="dark"] .zhdr-user-name { color: #E6EAF2; }
html[data-theme="dark"] .zhdr-user-sub { color: rgba(230, 234, 242, 0.60); }
html[data-theme="dark"] .zhdr-user-av { background: #1A5FA8; color: #F2F7FF; }
html[data-theme="dark"] .zhdr-acc-menu .zhdr-user { border-block-end-color: #2A3547; }
html[data-theme="dark"] .zhdr-drawer-acc { border-block-start-color: #2A3547; }
html[data-theme="dark"] .zhdr-list-acc > .zhdr-item-out {
	background: rgba(214, 69, 69, 0.12);
	border-color: rgba(214, 69, 69, 0.32);
}
html[data-theme="dark"] .zhdr-list-acc > .zhdr-item-out .zhdr-link,
html[data-theme="dark"] .zhdr-list-acc > .zhdr-item-out .zhdr-link:link,
html[data-theme="dark"] .zhdr-list-acc > .zhdr-item-out .zhdr-link:visited,
html[data-theme="dark"] .zhdr-list-acc > .zhdr-item-out .zhdr-link:hover,
html[data-theme="dark"] .zhdr-list-acc > .zhdr-item-out .zhdr-link:focus,
html[data-theme="dark"] .zhdr-list-acc > .zhdr-item-out .zhdr-link:active { color: #F19A9A !important; }
html[data-theme="dark"] .zhdr-drawer-cta,
html[data-theme="dark"] .zhdr-drawer-cta:link,
html[data-theme="dark"] .zhdr-drawer-cta:visited,
html[data-theme="dark"] .zhdr-drawer-cta:hover,
html[data-theme="dark"] .zhdr-drawer-cta:focus,
html[data-theme="dark"] .zhdr-drawer-cta:active { background: #1A5FA8; color: #F2F7FF !important; }
@media (max-width: 921px) {
	html[data-theme="dark"] .zhdr-acc-menu .zhdr-acc-item,
	html[data-theme="dark"] .zhdr-acc-menu .zhdr-acc-item:link,
	html[data-theme="dark"] .zhdr-acc-menu .zhdr-acc-item:visited,
	html[data-theme="dark"] .zhdr-acc-menu .zhdr-acc-item:hover,
	html[data-theme="dark"] .zhdr-acc-menu .zhdr-acc-item:focus,
	html[data-theme="dark"] .zhdr-acc-menu .zhdr-acc-item:active {
		background: #1B2432;
		border-color: #2A3547;
	}
}