/* ==========================================================================
   مُحرِّر — ورقة الأنماط الرئيسية
   الهوية البصرية مبنية على نفس نظام ألوان p-editor (أسود/أزرق فاتح، وضعان
   فاتح وداكن، زوايا 8px)، مع تكييف كامل للاتجاه من اليمين لليسار والخط العربي.
   ========================================================================== */

/* --- المتغيّرات: الوضع الفاتح ------------------------------------------- */
:root {
  --bg: #f0f2f5;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --text: #1d1d1d;
  --text-muted: #5f6b7a;
  --border: #e2e6ec;
  --border-2: #eef1f5;

  --brand: #0b0d12;
  --brand-hover: #23272f;
  --brand-accent: #2563eb;
  --brand-accent-soft: #eaf1ff;
  --text-on-brand: #ffffff;

  --link: #1d1d1d;
  --link-hover: #2563eb;

  --success: #12945c;
  --success-soft: #e7f7ef;
  --warning: #a86a00;
  --warning-soft: #fff6e5;
  --danger: #cf3040;
  --danger-soft: #fdeced;
  --info: #2563eb;
  --info-soft: #eaf1ff;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-2: 0 4px 12px rgba(16, 24, 40, .08);
  --shadow-3: 0 12px 32px rgba(16, 24, 40, .12);

  /* القائمة الجانبية — بيضاء في الوضع النهاري */
  --sidebar-bg: #ffffff;
  --sidebar-text: #1d1d1d;
  --sidebar-muted: #5f6b7a;
  --sidebar-border: #e2e6ec;
  --sidebar-hover: #f0f2f5;
  --sidebar-active: #eaf1ff;

  /* الأزرار — بيضاء بإطار أسود في الوضع النهاري */
  --btn-bg: #ffffff;
  --btn-fg: #0b0d12;
  --btn-border: #0b0d12;
  --btn-hover-bg: #0b0d12;
  --btn-hover-fg: #ffffff;

  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --header-h: 62px;
  --sidebar-w: 260px;
  --maxw: 1180px;

  /* ترتيب الخطوط مقصود: Inter أولاً ثم الخط العربي.
     المتصفح يختار الخط **لكل محرف على حدة** من القائمة — فالحروف
     اللاتينية تُرسم بـ Inter، والعربية تسقط إلى IBM Plex Sans Arabic
     لأن Inter لا يغطّي العربية.

     كان الترتيب معكوساً، فكانت كل الكلمات الإنكليزية في الموقع تُرسم
     بحروف الخط العربي اللاتينية — وهي أنحف وأقل حدّة من Inter. هذا
     السبب الأول في أن الموقع بدا أقل وضوحاً من موقع p-editor. */
  --font: "Inter", "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-en: "Inter", "Segoe UI", Arial, sans-serif;
}

/* --- المتغيّرات: الوضع الداكن (مطابق لقيَمهم) ---------------------------- */
:root[data-theme="dark"] {
  --bg: #0f1115;
  --surface: #151922;
  --surface-2: #0f131b;
  --text: #e9eef7;
  --text-muted: #aab3c2;
  --border: #2a3040;
  --border-2: #232a38;

  --brand: #e9eef7;
  --brand-hover: #ffffff;
  --brand-accent: #8fb5ff;
  --brand-accent-soft: #172033;
  --text-on-brand: #0b0d12;

  --link: #e9eef7;
  --link-hover: #8fb5ff;

  --success: #39d98a;
  --success-soft: #13291f;
  --warning: #ffc857;
  --warning-soft: #2a2312;
  --danger: #ff6b6b;
  --danger-soft: #2c1719;
  --info: #8fb5ff;
  --info-soft: #172033;

  --sidebar-bg: #0b0d12;
  --sidebar-text: #e9eef7;
  --sidebar-muted: #aab3c2;
  --sidebar-border: #232a38;
  --sidebar-hover: #171b26;
  --sidebar-active: #172033;

  --btn-bg: #e9eef7;
  --btn-fg: #0b0d12;
  --btn-border: #e9eef7;
  --btn-hover-bg: #ffffff;
  --btn-hover-fg: #0b0d12;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-3: 0 14px 38px rgba(0, 0, 0, .55);
}

/* --- الأساسيات ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  /* ١٧ بكسل لا ١٦: الحرف العربي أصغر بصرياً من اللاتيني عند القياس نفسه،
     فالمقاس الذي يريح قارئ الإنكليزية يُتعب قارئ العربية. */
  font-size: 17px;
  line-height: 1.75;
  /* لا نستخدم -webkit-font-smoothing: antialiased.
     كانت موجودة، وهي **ترقّق** الحروف بدل أن تحسّنها: تُلغي تنعيم
     البكسل الفرعي الذي يعطي الحرف حدّته. هذا السبب الثاني في أن
     الموقع بدا باهتاً مقارنةً بـ p-editor — ولا يستخدمها موقعهم. */
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  transition: background .2s ease, color .2s ease;
}

h1, h2, h3, h4 { line-height: 1.4; margin: 0 0 .6rem; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }

a { color: var(--link); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--link-hover); }

/* النصوص اللاتينية داخل سياق عربي */
.ltr, code, .mono { direction: ltr; unicode-bidi: isolate; font-family: var(--font-en); }
.num { font-variant-numeric: tabular-nums; }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.narrow { max-width: 760px; }
.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
.center { text-align: center; }
.mt-0 { margin-top: 0 } .mt-1 { margin-top: .5rem } .mt-2 { margin-top: 1rem }
.mt-3 { margin-top: 1.5rem } .mt-4 { margin-top: 2.5rem }
.mb-0 { margin-bottom: 0 } .mb-2 { margin-bottom: 1rem } .mb-3 { margin-bottom: 1.5rem }
.section { padding: 60px 0; }
.section-tight { padding: 36px 0; }

/* ==========================================================================
   التخطيط: قائمة جانبية على اليمين + عمود محتوى
   مبني على نفس مواصفات p-editor (عرض 260px، روابط 36px، زوايا 8px) لكن
   بخصائص منطقية (inset-inline-start) فتنقلب تلقائياً إلى اليمين في RTL.
   ========================================================================== */

.layout { display: flex; min-height: 100vh; position: relative; }

/* --- القائمة الجانبية --------------------------------------------------- */
/* نستخدم خصائص فيزيائية صريحة (right/left) لا منطقية.
   سبب مهم: بعض محرّكات العرض تتجاهل inset-inline-start بصمت، فتبدو القائمة
   في مكانها الصحيح صدفةً (لأن flex في RTL يضعها يميناً) لكن الطيّ لا يعمل.

   ولأنها فيزيائية، **لا تنقلب وحدها** عند تغيير اللغة إلى الإنكليزية —
   فكل قاعدة اتجاهية هنا لها مقابل صريح تحت [dir="ltr"] في آخر الملف.
   عند إضافة أي قاعدة اتجاهية جديدة، أضف مقابلها هناك وإلا انكسر
   التخطيط الإنكليزي بصمت. */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: fixed;
  top: 0; bottom: 0; right: 0;
  z-index: 60;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-left: 1px solid var(--sidebar-border);
  padding: 14px 12px;
  display: flex; flex-direction: column;
  transition: transform .28s ease, box-shadow .28s ease;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 8px 16px;
  font-weight: 800; font-size: 1.15rem; color: var(--sidebar-text);
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 12px;
}
.sidebar-brand:hover { color: var(--sidebar-text); }

.sidebar nav {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding-inline-end: 4px; scrollbar-width: thin;
}
.sidebar nav::-webkit-scrollbar { width: 8px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sidebar-muted) 40%, transparent);
  border-radius: 999px; border: 2px solid transparent; background-clip: content-box;
}

/* عنوان القسم: فراغ فوقه يفصله عمّا سبق، وفراغ ضيّق تحته يربطه بما يليه.
   كان الفراغان متقاربين (١٥ و٦) فبدا العنوان معلّقاً بين مجموعتين لا
   تابعاً لواحدة — وهذا مصدر «الفراغات الكبيرة» المزعجة في القائمة. */
.nav-section {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  color: var(--sidebar-muted); text-transform: uppercase;
  padding: 16px 10px 4px;
}
.nav-section:first-child { padding-top: 2px; }

.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 8px 10px;
  border-radius: 8px; line-height: 1.3;
  color: var(--sidebar-text); font-size: .9rem;
  position: relative;
  transition: background .13s ease, color .13s ease;
}
.sidebar nav a:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }

/* العنصر المختار: لا نزيد وزن الخط ولا حجمه.
   تكبير النص عند الاختيار يزحزح بقية العناصر بصرياً ويجعل القائمة
   تبدو مضطربة. التمييز يكون بخلفية وشريط جانبي — أهدأ وأوضح. */
.sidebar nav a.active,
.sidebar nav a[aria-current="page"] {
  background: var(--sidebar-active); color: var(--brand-accent);
}
.sidebar nav a.active::before,
.sidebar nav a[aria-current="page"]::before {
  content: ""; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 3px;
  background: var(--brand-accent);
}

/* عرض ثابت — هو ما يجعل كل العناوين تبدأ من نقطة واحدة */
.nav-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--sidebar-muted);
}
.nav-icon .ico { width: 18px; height: 18px; display: block; }
.sidebar nav a:hover .nav-icon,
.sidebar nav a.active .nav-icon,
.sidebar nav a[aria-current="page"] .nav-icon { color: inherit; }

/* الاسم الإنكليزي فوق والعربي تحته */
.nav-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }

/* محاذاة فيزيائية صريحة لا منطقية.
   كان الاسم الإنكليزي على text-align:start داخل direction:ltr، و start
   في LTR تعني **يساراً**. النتيجة أن كل اسم إنكليزي يلتصق بيسار صندوقه:
   لا يُلاحظ حين يكون الاسم طويلاً بطول السطر العربي تحته، لكنه يظهر
   فجوةً واضحة في «AI Detection» لأن اسمه الإنكليزي قصير وعربيّه طويل.
   direction:ltr تبقى لترتيب الحروف، والمحاذاة تصير right صراحةً
   (الموقع RTL — انظر القاعدة ٤ في CLAUDE.md). */
.nav-en {
  font-family: var(--font-en); font-size: .875rem; font-weight: 650;
  letter-spacing: -.005em;
  direction: ltr; text-align: right; unicode-bidi: isolate;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[dir="ltr"] .nav-en { text-align: left; }

.nav-ar {
  font-size: .8rem; color: var(--sidebar-muted); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* وسم صغير يميّز الأداة الفورية عن الخدمة التي ترفع فيها ملفاً */
.nav-tag {
  flex-shrink: 0; font-size: .62rem; font-weight: 700;
  padding: 2px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand-accent) 14%, transparent);
  color: var(--brand-accent); letter-spacing: .01em;
}

.lang-switch { display: inline-flex; margin: 0; }
.lang-btn { font-size: .78rem; font-weight: 800; letter-spacing: .02em; }

/* --- بطاقة الاشتراك في الملف الشخصي -------------------------------------- */
.quota-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.quota .progress { margin-top: 5px; }
/* حدّ ملوّن حين يقارب الاشتراك على النفاد — تنبيه بلا رسالة إضافية */
.plan-low { border-color: var(--warning); }

/* --- صفوف ملفات المقارنة ------------------------------------------------- */
.extra-row {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
}
.extra-row input[type="file"] { flex: 1; min-width: 0; }
.extra-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-muted);
  font-size: .78rem; font-weight: 700;
}
.extra-remove { color: var(--danger); flex-shrink: 0; padding: 4px 9px; }

/* --- دورة تحضير البحث ---------------------------------------------------- */
.flow { list-style: none; margin: 0; padding: 0; max-width: 780px; margin-inline: auto; }
.flow-step {
  display: flex; gap: 16px; position: relative;
  padding: 0 0 26px 0;
}
/* الخيط الواصل بين الخطوات — خاصية فيزيائية، ولها مقابل في [dir="ltr"] */
.flow-step::before {
  content: ""; position: absolute; top: 34px; bottom: 4px; right: 16px;
  width: 2px; background: var(--border);
}
.flow-last::before { display: none; }
.flow-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--brand-accent-soft); color: var(--brand-accent);
  font-weight: 800; font-size: .95rem;
}
.flow-step h3 { font-size: 1.02rem; margin: 4px 0 .3rem; }
.flow-links { display: flex; gap: 7px; flex-wrap: wrap; margin-top: .55rem; }
.flow-links .chip { text-decoration: none; }
.flow-links .chip:hover { border-color: var(--brand-accent); color: var(--brand-accent); }

/* --- قائمة الحساب في الشريط العلوي -------------------------------------- */
.acct-menu { position: relative; }
.acct-menu > summary {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; list-style: none; user-select: none;
}
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-caret { font-size: .7em; opacity: .8; transition: transform .15s ease; }
.acct-menu[open] .acct-caret { transform: rotate(180deg); }

.avatar-sm { width: 22px; height: 22px; font-size: .68rem; }

/* زر الحساب يقع في **طرف** الشريط العلوي: يساراً في RTL ويميناً في LTR.
   فتُحاذى القائمة إلى الحافة القريبة من طرف الشاشة كي لا تخرج عنها —
   وهذا يعني محاذاة معاكسة لما قد يبدو بديهياً. */
.acct-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: auto;
  min-width: 232px; z-index: 80;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 6px; overflow: hidden;
}

.acct-head {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 10px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border-2);
  border-radius: 8px 8px 0 0; color: var(--text);
  transition: background .13s ease;
}
.acct-head:hover { background: var(--surface-2); }
.acct-head > span:last-child { color: var(--brand-accent); font-weight: 600; }

.acct-panel a,
.acct-logout button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: 8px;
  font-size: .88rem; font-weight: 600; color: var(--text);
  background: none; border: 0; cursor: pointer;
  text-align: start; font-family: inherit;
  transition: background .13s ease;
}
.acct-panel a:hover,
.acct-logout button:hover { background: var(--surface-2); color: var(--text); }

.acct-logout {
  margin: 4px 0 0; padding-top: 4px;
  border-top: 1px solid var(--border-2);
}
.acct-logout button { color: var(--danger); }
.acct-panel .nav-icon { color: var(--text-muted); }
.acct-panel a:hover .nav-icon { color: inherit; }

/* وسم صغير على بطاقة الخدمة يفرّق «ملف كامل» عن «متن ملصوق» */
.chip {
  font-size: .68rem; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-muted); white-space: nowrap;
}
.chip-accent {
  border-color: transparent; color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 13%, transparent);
}

/* أيقونة الخدمة صارت SVG بدل رمز تعبيري */
.service-icon .ico { width: 22px; height: 22px; }
.sidebar nav a.active .nav-ar,
.sidebar nav a[aria-current="page"] .nav-ar {
  color: color-mix(in srgb, var(--brand-accent) 75%, transparent);
}

/* أيقونة عامة داخل النصّ */
.ico { width: 20px; height: 20px; vertical-align: -.28em; }

/* --- بطاقات الخطط ------------------------------------------------------- */
.plan-card { display: flex; flex-direction: column; position: relative; }
.plan-card .plan-list { flex: 1; }
.plan-featured { border-color: var(--brand-accent); box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,.07)); }
.plan-flag {
  position: absolute; top: -11px; right: 16px;
  background: var(--brand-accent); color: var(--text-on-brand);
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px;
}
.plan-price { font-size: 1.6rem; font-weight: 800; margin: .6rem 0 .2rem; }
.plan-list {
  list-style: none; padding: 0; margin: .8rem 0 1rem;
  display: flex; flex-direction: column; gap: .4rem;
  font-size: .86rem;
}
.plan-list li { padding-right: 18px; position: relative; line-height: 1.5; }
.plan-list li::before {
  content: "✓"; position: absolute; right: 0; top: 0;
  color: var(--brand-accent); font-weight: 700;
}
.plan-list li.muted::before { content: "—"; color: var(--text-muted); }

/* --- الأدوات النصية ------------------------------------------------------ */
.tool-switch { display: flex; gap: 8px; flex-wrap: wrap; }
.result-text, .result-diff {
  white-space: pre-wrap; line-height: 1.75;
  padding: 12px; border-radius: var(--radius);
  background: var(--surface-soft, rgba(127,127,127,.06));
}

.sidebar-foot {
  border-top: 1px solid var(--sidebar-border);
  padding-top: 12px; margin-top: 10px;
  display: flex; flex-direction: column; gap: 7px;
}
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; background: var(--sidebar-hover);
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-accent); color: var(--text-on-brand);
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}
.sidebar-user-meta { min-width: 0; }
.sidebar-user-name { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-mail { font-size: .72rem; color: var(--sidebar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; }

/* --- عمود المحتوى ------------------------------------------------------- */
.content-column {
  flex: 1; min-width: 0;
  margin-right: var(--sidebar-w);
  display: flex; flex-direction: column;
  transition: margin-right .28s ease;
}

/* حالة الطيّ — على سطح المكتب */
body.sidebar-collapsed .sidebar { transform: translateX(100%); }
body.sidebar-collapsed .content-column { margin-right: 0; }

/* --- الشريط العلوي ------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  padding-inline: 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-title { font-weight: 600; font-size: .95rem; color: var(--text-muted); }
.header-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.2rem; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--brand-accent); color: var(--text-on-brand);
  display: grid; place-items: center; font-size: .95rem; font-weight: 800;
}

/* --- اللوغو -------------------------------------------------------------
   الملف أسود على خلفية شفافة. في الوضع الداكن نقلبه إلى الأبيض بـ invert
   بدل الاحتفاظ بنسختين من الصورة: نسخة واحدة تعني ملفاً واحداً يُحدَّث،
   ولا خطر أن يُستبدل اللوغو في وضع ويُنسى في الآخر.
   يصلح هذا لأن الرسم أبيض وأسود خالص — لو أُضيف لون يوماً فاستبدله
   بنسخة داكنة صريحة، لأن invert سيقلب الألوان إلى أضدادها. */
.brand-logo {
  display: block;
  width: 100%; max-width: 186px; height: auto;
}
[data-theme="dark"] .brand-logo { filter: invert(1); }

.icon-btn {
  width: 38px; height: 38px; border-radius: var(--radius); flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); cursor: pointer; font-size: 1rem;
  display: grid; place-items: center; transition: all .15s ease;
}
.icon-btn:hover { color: var(--text); border-color: var(--text-muted); }

.scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}

/* --- تبويبا بوابة الحساب ------------------------------------------------ */
.auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 4px;
}
.auth-tab {
  padding: 10px 12px; border: none; border-radius: 6px;
  background: transparent; color: var(--text-muted);
  font-family: inherit; font-size: .92rem; font-weight: 600;
  cursor: pointer; transition: all .15s ease;
}
.auth-tab:hover { color: var(--text); }
.auth-tab.active {
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-1);
}
.auth-panel.hidden { display: none; }

/* --- الأزرار ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius);
  font-size: .95rem; font-weight: 600; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  transition: all .15s ease; white-space: nowrap;
}
.btn-primary {
  background: var(--btn-bg); color: var(--btn-fg);
  border-color: var(--btn-border); border-width: 1.5px; font-weight: 700;
}
.btn-primary:hover {
  background: var(--btn-hover-bg); color: var(--btn-hover-fg);
  border-color: var(--btn-hover-bg);
  transform: translateY(-1px); box-shadow: var(--shadow-2);
}
.btn-outline { background: transparent; color: var(--text); border-color: var(--border); }
.btn-outline:hover { border-color: var(--text-muted); background: var(--surface-2); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 7px 14px; font-size: .875rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* --- البطاقات ----------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  box-shadow: var(--shadow-1);
}
.card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--text-muted); }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* أربع بطاقات في صفّ واحد على الشاشات الواسعة.
   كان `auto-fit` مع حدّ أدنى ٢٣٠px يكسر الصفّ إلى ٣+١ عند العروض
   المتوسطة — والبطاقة اليتيمة تحت الثلاث تبدو خطأً لا تصميماً.
   الحلّ: أربعة أعمدة صريحة فوق ٩٦٠px، وتقسيم مقصود تحتها. */
.grid-4 { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));}
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* --- الواجهة الرئيسية (Hero) -------------------------------------------- */
.hero { padding: 76px 0 56px; text-align: center; }
.hero h1 { max-width: 800px; margin-inline: auto; }
.hero .lead {
  font-size: 1.12rem; color: var(--text-muted);
  max-width: 660px; margin: 1rem auto 2rem;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--brand-accent-soft); color: var(--brand-accent);
  font-size: .82rem; font-weight: 600; margin-bottom: 1.1rem;
}

.trust-row {
  display: flex; gap: 26px; justify-content: center; flex-wrap: wrap;
  margin-top: 2.5rem; color: var(--text-muted); font-size: .9rem;
}
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row .tick { color: var(--success); font-weight: 700; }

/* --- بطاقة الخدمة ------------------------------------------------------- */
.service-card { display: flex; flex-direction: column; height: 100%; }
.service-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--brand-accent-soft); color: var(--brand-accent);
  display: grid; place-items: center; font-size: 1.25rem; margin-bottom: 14px;
}
.service-card h3 { margin-bottom: .35rem; }
.service-card p { color: var(--text-muted); font-size: .93rem; flex: 1; }
.service-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: .83rem; color: var(--text-muted);
  padding-top: 14px; margin-top: 12px; border-top: 1px solid var(--border-2);
}

/* --- النماذج ------------------------------------------------------------ */
.form-group { margin-bottom: 1.15rem; }
.form-label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .4rem; }
.form-label .req { color: var(--danger); margin-inline-start: 3px; }

.form-control, .form-select {
  width: 100%; padding: 11px 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: inherit; font-size: .95rem; line-height: 1.6;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  outline: none; border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 18%, transparent);
}
.form-control::placeholder { color: var(--text-muted); opacity: .7; }
textarea.form-control { resize: vertical; min-height: 90px; }

.form-help { font-size: .82rem; color: var(--text-muted); margin-top: .35rem; }
.form-error { font-size: .84rem; color: var(--danger); margin-top: .35rem; font-weight: 500; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }

.form-check { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; }
.form-check input { margin-top: 5px; width: 16px; height: 16px; accent-color: var(--brand-accent); flex-shrink: 0; }

.form-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* اختيار الخدمة بالبطاقات بدل قائمة منسدلة */
.service-radio-group { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.service-radio-item {
  position: relative; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; cursor: pointer;
  background: var(--surface); transition: all .15s ease;
}
.service-radio-item:hover { border-color: var(--text-muted); }
.service-radio-item input { position: absolute; opacity: 0; }
.service-radio-item input:checked ~ .sr-body { color: var(--text); }
.service-radio-item:has(input:checked) {
  border-color: var(--brand-accent); background: var(--brand-accent-soft);
  box-shadow: 0 0 0 1px var(--brand-accent);
}
.sr-title { font-weight: 600; font-size: .95rem; display: block; }
.sr-desc { font-size: .82rem; color: var(--text-muted); display: block; margin-top: 2px; }

/* --- الشارات ------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: .8rem; font-weight: 600;
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-info    { background: var(--info-soft);    color: var(--info); }
.badge-muted   { background: var(--surface-2);    color: var(--text-muted); }

/* --- التنبيهات ---------------------------------------------------------- */
.alert {
  padding: 13px 17px; border-radius: var(--radius);
  border: 1px solid transparent; margin-bottom: 1rem; font-size: .92rem;
  display: flex; align-items: flex-start; gap: 10px;
}
.alert-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 28%, transparent); }
.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 28%, transparent); }
.alert-error, .alert-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 28%, transparent); }
.alert-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 28%, transparent); }

/* --- الجداول ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { padding: 13px 16px; text-align: right; border-bottom: 1px solid var(--border-2); }
th { background: var(--surface-2); font-weight: 600; font-size: .86rem; color: var(--text-muted); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }

/* --- شريط التقدّم -------------------------------------------------------- */
.progress { height: 7px; background: var(--border-2); border-radius: var(--radius-pill); overflow: hidden; }
.progress-bar { height: 100%; background: var(--brand-accent); border-radius: var(--radius-pill); transition: width .5s ease; }
.progress-bar.done { background: var(--success); }
.progress-bar.failed { background: var(--danger); }

/* --- الخط الزمني للأحداث ------------------------------------------------ */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding-inline-start: 22px; padding-bottom: 16px; }
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent);
}
.timeline li::after {
  content: ""; position: absolute; inset-inline-start: 3.5px; top: 18px; bottom: 0;
  width: 1px; background: var(--border);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline-title { font-weight: 600; font-size: .92rem; }
.timeline-meta { font-size: .81rem; color: var(--text-muted); }

/* --- الإحصاءات ---------------------------------------------------------- */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.stat-value { font-size: 1.85rem; font-weight: 800; line-height: 1.2; }
.stat-label { font-size: .86rem; color: var(--text-muted); margin-top: 3px; }

/* --- الأسئلة الشائعة ---------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  padding: 18px 0; cursor: pointer; font-weight: 600; font-size: 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--text-muted); font-size: 1.3rem; font-weight: 400; flex-shrink: 0; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { color: var(--text-muted); padding-bottom: 18px; margin: 0; font-size: .94rem; }

/* --- منطقة رفع الملف ---------------------------------------------------- */
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius-lg);
  padding: 34px 20px; text-align: center; background: var(--surface-2);
  transition: all .15s ease; cursor: pointer;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
.dropzone-icon { font-size: 1.9rem; color: var(--text-muted); margin-bottom: 8px; }
.dropzone-file { font-weight: 600; color: var(--brand-accent); }

/* --- التذييل ------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 70px; padding: 48px 0 28px; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr)); }
.footer-col h4 { font-size: .88rem; margin-bottom: .8rem; color: var(--text-muted); font-weight: 600; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .5rem; }
.footer-col a { font-size: .9rem; color: var(--text-muted); }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border-2);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: .85rem; color: var(--text-muted);
}

/* --- شريط وضع التطوير --------------------------------------------------- */
.dev-banner {
  background: var(--warning-soft); color: var(--warning);
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  padding: 8px 0; font-size: .85rem; text-align: center; font-weight: 500;
}

/* --- واتساب عائم -------------------------------------------------------- */
.wa-float {
  position: fixed; inset-inline-end: 20px; inset-block-end: 20px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-3); font-size: 1.5rem;
  transition: transform .15s ease;
}
.wa-float:hover { transform: scale(1.08); color: #fff; }

/* --- الاستجابة للشاشات الصغيرة ------------------------------------------ */
@media (max-width: 1000px) {
  /* على الشاشات الصغيرة: القائمة مطويّة افتراضياً وتنزلق فوق المحتوى */
  .content-column,
  body.sidebar-collapsed .content-column,
  body.sidebar-open .content-column { margin-right: 0; }

  .sidebar,
  body.sidebar-collapsed .sidebar { transform: translateX(100%); }

  body.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-3); }
  body.sidebar-open .scrim { opacity: 1; pointer-events: auto; }
}

@media (max-width: 640px) {
  .hero { padding: 44px 0 32px; }
  .section { padding: 40px 0; }
  .topbar { padding-inline: 14px; }
  .topbar-title { display: none; }
  .container { padding-inline: 15px; }
  th, td { padding: 11px 12px; }
  .header-actions .btn { padding: 7px 12px; font-size: .85rem; }
}

@media print {
  .site-header, .site-footer, .wa-float, .dev-banner, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   وسائل الدفع اليدوي — بطاقات الحسابات في صفحة الطلب
   لا قاعدة اتجاهية هنا عمداً (flex و gap فقط)، فلا تحتاج مقابلاً في [dir="ltr"].
   ========================================================================== */

.mb-1 { margin-bottom: .5rem }

.pay-accounts { display: grid; gap: 10px; }

.pay-account {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface-2, var(--surface));
}
.pay-account-head {
  display: flex; align-items: center; gap: 10px;
  justify-content: space-between; margin-bottom: 8px;
}
.pay-account-name { font-weight: 700; }

/* الرقم أكبر وبمسافات ثابتة: يُنسخ أو يُنقل يدوياً إلى تطبيق مصرفي،
   وخطأ رقم واحد يعني تحويلاً ضائعاً. */
.pay-number { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-number code {
  font-size: 1.15rem; font-weight: 700; letter-spacing: .06em;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 12px;
}

/* ==========================================================================
   قلب التخطيط في الوضع الإنكليزي  [dir="ltr"]
   ==========================================================================
   كل القواعد الاتجاهية أعلاه فيزيائية (right / margin-right / translateX)
   لسبب موثّق: الخصائص المنطقية تُتجاهَل بصمت في بعض المحرّكات (§٧.١ في
   PROJECT_STATUS). الثمن أنها لا تنقلب وحدها عند تبديل اللغة — فتبقى
   القائمة يميناً في صفحة إنكليزية يقرأها الزائر من اليسار.

   هذه الكتلة هي المقابل الصريح. **كل قاعدة هنا تقابل قاعدة فوق**، وأي
   قاعدة اتجاهية جديدة تحتاج سطراً هنا. الترتيب في آخر الملف مقصود كي
   تتقدّم في التطبيق على ما سبقها بلا !important.
   ========================================================================== */

[dir="ltr"] .sidebar {
  right: auto; left: 0;
  border-left: none;
  border-right: 1px solid var(--sidebar-border);
}
[dir="ltr"] .content-column { margin-right: 0; margin-left: var(--sidebar-w); }
[dir="ltr"] body.sidebar-collapsed .content-column,
body[dir="ltr"].sidebar-collapsed .content-column { margin-left: 0; }
[dir="ltr"] body.sidebar-collapsed .sidebar,
body[dir="ltr"].sidebar-collapsed .sidebar { transform: translateX(-100%); }

/* شريط العنصر المختار ينتقل إلى الحافة اليسرى */
[dir="ltr"] .sidebar nav a.active::before,
[dir="ltr"] .sidebar nav a[aria-current="page"]::before {
  right: auto; left: 0;
}

/* في LTR الزر عند يمين الشريط، فتُحاذى القائمة يميناً لتبقى داخل الشاشة */
[dir="ltr"] .acct-panel { left: auto; right: 0; }

/* خيط دورة تحضير البحث ينتقل إلى يسار الأرقام */
[dir="ltr"] .flow-step::before { right: auto; left: 16px; }

/* علامات القوائم وبطاقات الخطط */
[dir="ltr"] .plan-list li { padding-right: 0; padding-left: 18px; }
[dir="ltr"] .plan-list li::before { right: auto; left: 0; }
[dir="ltr"] .plan-flag { right: auto; left: 16px; }

@media (max-width: 1000px) {
  [dir="ltr"] .content-column,
  [dir="ltr"] body.sidebar-collapsed .content-column,
  [dir="ltr"] body.sidebar-open .content-column { margin-left: 0; }

  [dir="ltr"] .sidebar,
  [dir="ltr"] body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
  [dir="ltr"] body.sidebar-open .sidebar { transform: translateX(0); }
}