/**
 * Copyright © 2026 Abdo Ibn Egypt. All rights reserved.
 * Unauthorized copying, modification, distribution, or use of this software,
 * via any medium, is strictly prohibited without prior written permission.
 * Owner Contact (WhatsApp): +201098251005
 */

/* ═══════════════════════════════════════════════════
   Speedo Group — الموقع العام
   يُبنى فوق tokens.css/components.css الحاليين، عبر seam التخصيص نفسه
   المُعدّ أصلاً لتغيير --primary لكل مؤسسة/مستخدم (راجع تعليق tokens.css
   أعلى الملف). هوية الموقع العام: تيل/أخضر هادئ #0D9488 وكحلي #004E89
   وأصفر #F7B801 (كان البراند الأصلي برتقاليًا #FF6B35 — استُبدل بطلب
   صريح من صاحب المشروع لأنه "مستفز جدًا")، بينما تبقى لوحتا الإدارة
   ومزوّدي الخدمة على نظام Indigo/Violet الحالي دون أي تغيير — هذا
   التخصيص محصور بـ body.public-site فقط فلا يتسرّب لأي واجهة أخرى.
═══════════════════════════════════════════════════ */

/* خط Alexandria مُستضاف محليًا ضمن assets/shared/fonts/fonts.css (مُحمَّل
   بالفعل عبر tokens.css) — لا استيراد خارجي هنا. */

body.public-site {
  --primary: #0D9488;
  --primary-rgb: 13, 148, 136;
  --secondary: #004E89;
  --accent: #F7B801;
  --footer-bg: #001D3D;
  --brand-gradient: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
  --font-display: 'Alexandria', var(--font-ui);

  /* ---------- Public card radius scale (Part Four foundation) ----------
     يوحّد قيم الاستدارة المتفرقة سابقًا (22/24/28/32px) في 3 مستويات
     موثّقة بدل أرقام سحرية متكررة. company-card/guide-card يبقيان على
     -lg (32px) عمدًا كهوية "دائرية/بروفايل" مميّزة عن باقي البطاقات
     (28px) — لا يُدمَجان في قيمة واحدة. */
  --radius-card-sm: 16px;
  --radius-card-md: 22px;
  --radius-card-lg: 28px;
  --radius-card-xl: 32px;

  /* ---------- Stat-card icon sizes (يوحّد .home-stat-card/.profile-stat/
     .city-stat-card عند دمجها في مكوّن .stat-card واحد) ---------- */
  --stat-icon-size: 44px;
  --stat-icon-size-lg: 56px;
}
[data-theme="dark"] body.public-site {
  --primary: #2DD4BF;
  --primary-rgb: 45, 212, 191;
  --secondary: #3D8BC4;
  --accent: #F7B801;
  --footer-bg: #000d1f;
  --brand-gradient: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 100%);
}

/* tokens.css يفرض html,body{height:100%} عامًا (لازم للوحات الإدارة/المزوّد
   ذات الـapp-shell ثابت الارتفاع) — لكن هذا يكسر position:sticky لأي عنصر
   ابن مباشر لـbody على الموقع العام (site-header تحديدًا): صندوق body
   يتجمّد فعليًا عند ارتفاع الشاشة (100%) بينما المحتوى الحقيقي أطول بكثير،
   فبمجرد تمرير الصفحة إلى ما بعد ارتفاع الشاشة الأول، يخرج header عن حدود
   "صندوق التثبيت" الخاص به ويتوقف عن الالتصاق (نفس الأثر ينتقل بصريًا لأي
   عنصر sticky آخر أسفله مثل .filter-toolbar في jobs.php، رغم أن CSS الخاص
   بيه سليم تمامًا). الموقع العام صفحات تمرير عادية بلا app-shell، فيُلغى
   القيد هنا فقط (بدون المساس بلوحة الإدارة/المزوّد). */
body.public-site { height: auto; min-height: 100%; }

/* ─── انتقال دخول/خروج الصفحة — موقع متعدد الصفحات تقليدي (لا SPA)، فبدل
       الفلاش الأبيض المفاجئ عند كل تنقّل: تلاشي خفيف للصفحة كلها + شريط
       تقدّم علوي بألوان العلامة (راجع page-transition.js). ─── */
.page-transition-init { opacity: 0; }
.page-transition-init.page-ready { opacity: 1; transition: opacity .3s var(--ease-out); }
.page-transition-init.page-ready.page-leaving { opacity: .5; transition: opacity .15s ease-in; }
@media (prefers-reduced-motion: reduce) { .page-transition-init, .page-transition-init.page-ready, .page-transition-init.page-ready.page-leaving { opacity: 1 !important; transition: none !important; } }

.page-load-bar { position: fixed; top: 0; inset-inline: 0; height: 3px; background: var(--brand-gradient); z-index: 9999; transform: scaleX(0); transform-origin: right; opacity: 0; pointer-events: none; box-shadow: 0 0 10px rgba(var(--primary-rgb), .6); transition: transform .3s var(--ease-out), opacity .25s ease-out; }
.page-load-bar.active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .page-load-bar { display: none; } }

/* لا يوجد overflow-x هنا عمدًا: تكراره فوق قاعدة html{overflow-x:hidden}
   (tokens.css) كان يجعل overflow-y المحسوب لـbody يتحوّل تلقائيًا إلى auto
   (حسب مواصفة CSS Overflow)، فيتحوّل body لصندوق تمرير داخلي منفصل عن
   الصفحة الحقيقية (document.scrollingElement يبقى html بscrollHeight
   الفيوبورت فقط) — ما كان يمنع GSAP ScrollTrigger (يراقب تمرير الصفحة
   الحقيقي) من رصد أي تمرير فعلي إطلاقًا، فتبقى كل عناصر gsr/gsr-item
   الموجودة أسفل أول شاشة عند opacity:0 للأبد لأي زائر حقيقي. */
body { background: var(--bg); color: var(--text); font-family: var(--font-ui); }

/* ─── رابط "تخطي إلى المحتوى الرئيسي" — مخفي بصريًا حتى يصله تركيز
       لوحة المفاتيح (Tab)، عندها يظهر أعلى الصفحة — لمستخدمي لوحة المفاتيح
       وقارئات الشاشة الذين يريدون تجاوز شريط التنقّل الطويل ─── */
.skip-link { position: fixed; top: -60px; inset-inline-start: var(--space-4); z-index: 9999; background: var(--primary); color: #fff; font-weight: 800; font-size: 13.5px; padding: 12px 20px; border-radius: var(--radius-md); text-decoration: none; box-shadow: var(--shadow-lg); transition: top var(--dur-fast) var(--ease-out); }
.skip-link:focus { top: var(--space-4); }

/* ─── الرأس — شريط عائم مستدير الحواف مع زجاجية خفيفة (تحديث الجزء الرابع:
       عمق أكبر + blur بدل السطح المصمت المسطّح، مع الحفاظ على نفس البنية
       والمعرّفات (#siteNavToggle/#siteMobileMenu/#siteThemeToggle) التي
       يعتمد عليها public.js حرفيًا) ─── */
.site-header { position: sticky; top: 0; z-index: 60; padding: var(--space-4) var(--space-4) 0; }
.site-nav-pill { max-width: 1280px; margin-inline: auto; background: var(--surface-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-xl), var(--elevation-inset-highlight); padding: 9px var(--space-6); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); transition: box-shadow var(--dur-base) var(--ease-out); }
.site-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.site-logo img { height: 40px; width: auto; object-fit: contain; border-radius: var(--radius-lg); }
.site-logo-mark { width: 44px; height: 44px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--secondary), #003360); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,78,137,.35); }
.site-logo-mark svg { width: 22px; height: 22px; }
.site-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.site-logo-text b { font-family: var(--font-display); font-weight: 900; font-size: 19px; color: var(--secondary); letter-spacing: -.02em; }
[data-theme="dark"] .site-logo-text b { color: var(--text); }
.site-logo-text small { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); }

.site-nav { display: flex; align-items: center; justify-content: center; gap: 2px; background: var(--surface-2); padding: 5px; border-radius: 999px; }
.site-nav a { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; padding: 9px 16px; border-radius: 999px; transition: all var(--dur-base) var(--ease-out); }
.site-nav a svg { width: 15px; height: 15px; }
.site-nav a:hover { color: var(--text); background: var(--surface-hover); }
.site-nav a.active { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(var(--primary-rgb), .35); }

/* ─── .btn-shine — تأثير "لمعة" منزلقة قابل لإعادة الاستخدام، كان مكرَّرًا
       فقط داخل .job-card-cta؛ يُطبَّق الآن أيضًا على أزرار CTA الرئيسية
       (انضم الآن، بانر التذييل) بدل نسخ نفس قواعد ::before ثلاث مرات. */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: -30%; width: 40%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg) translateX(-40%); transition: transform .55s ease; pointer-events: none; }
.btn-shine:hover::before { transform: skewX(-20deg) translateX(340%); }
.btn-shine > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .btn-shine::before { transition: none; display: none; } }

.site-header-actions { display: flex; align-items: center; gap: 10px; justify-self: start; }
.header-search { position: relative; }
.header-search-popover { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 360px; max-width: 90vw; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-3); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); z-index: 60; }
.header-search.open .header-search-popover { opacity: 1; visibility: visible; transform: translateY(0); }
.header-search-popover .input-search { background: var(--surface-2); border-radius: var(--radius-md); }
.header-search-results { max-height: 60vh; overflow-y: auto; }
.header-search-results.has-results { margin-top: var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-2); }
.header-search-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-md); text-decoration: none; color: inherit; }
.header-search-item:hover, .header-search-item:focus-visible { background: var(--surface-2); }
.header-search-item .hsi-text { display: flex; flex-direction: column; min-width: 0; }
.header-search-item .hsi-text b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-search-item .hsi-text small { color: var(--text-muted); font-size: 11.5px; }
.header-search-empty { padding: var(--space-4) var(--space-2); text-align: center; color: var(--text-muted); font-size: 13px; }
.header-search-viewall { display: block; text-align: center; margin-top: 6px; padding: 8px; border-radius: var(--radius-md); font-size: 12.5px; font-weight: 700; color: var(--primary); text-decoration: none; }
.header-search-viewall:hover { background: var(--surface-2); }
@media (max-width: 560px) { .header-search-popover { position: fixed; inset-inline: 12px; top: 66px; width: auto; } }
.site-join-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-gradient); color: #fff; font-weight: 800; font-size: 14px; padding: 12px 22px; border-radius: var(--radius-lg); box-shadow: 0 8px 20px rgba(var(--primary-rgb), .32); transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); white-space: nowrap; }
.site-join-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 26px rgba(var(--primary-rgb), .4); }
.site-join-btn svg { width: 16px; height: 16px; }
.site-nav-toggle { display: none; }

@media (max-width: 960px) {
  .site-nav { display: none; }
  .site-join-btn span { display: none; }
  .site-join-btn { padding: 12px; }
  .site-nav-toggle { display: inline-flex; }
}
@media (max-width: 420px) {
  .site-nav-pill { padding: 8px 12px; gap: 10px; }
  .site-header-actions { gap: 6px; }
  .site-logo-text small { display: none; }
  .site-logo-mark { width: 38px; height: 38px; }
  .site-logo-mark svg { width: 19px; height: 19px; }
}
.site-mobile-menu { display: none; position: fixed; inset-inline: 0; top: 84px; z-index: 55; background: var(--surface-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-card-lg) var(--radius-card-lg); box-shadow: var(--shadow-xl); padding: var(--space-3) var(--space-4) var(--space-6); max-height: calc(100vh - 84px); overflow-y: auto; animation: menu-drop var(--dur-base) var(--ease-out); }
.site-mobile-menu.open { display: block; }
@keyframes menu-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .site-mobile-menu { animation: none; } }
.site-mobile-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; margin-bottom: 6px; border-radius: var(--radius-lg); font-weight: 700; color: var(--text); background: var(--surface-2); transition: background var(--dur-fast) var(--ease-out); }
.site-mobile-menu a:hover { background: var(--surface-hover); }
.site-mobile-menu a.active { background: var(--primary); color: #fff; }
.site-mobile-menu a svg:first-child { width: 18px; height: 18px; }

/* ─── التذييل — بانر CTA عائم فوق تذييل كحلي غامق (نفس أسلوب الموقع القديم) ─── */
.site-footer { margin-top: 90px; position: relative; }
.site-footer-cta { max-width: 1200px; margin: 0 auto -70px; padding: 0 var(--space-4); position: relative; z-index: 2; }
.site-footer-cta-inner { background: linear-gradient(120deg, var(--secondary), #003360); border-radius: var(--radius-card-xl); padding: var(--space-10) var(--space-6); text-align: center; color: #fff; box-shadow: var(--shadow-xl); position: relative; overflow: hidden; }
.site-footer-cta-inner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(480px circle at 15% -20%, rgba(var(--primary-rgb), .35), transparent 60%), radial-gradient(420px circle at 105% 120%, rgba(247,184,1,.18), transparent 55%); pointer-events: none; }
.site-footer-cta-inner > * { position: relative; }
.site-footer-cta-inner h2 { font-family: var(--font-display); font-size: clamp(24px, 4vw, 38px); font-weight: 900; margin: 0 0 var(--space-3); }
.site-footer-cta-inner p { opacity: .85; max-width: 560px; margin: 0 auto var(--space-6); }
.site-footer-cta-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.site-footer-cta-actions .btn-primary { background: var(--primary); padding: 14px 30px; border-radius: var(--radius-lg); font-weight: 800; }
.site-footer-cta-actions .btn-outline-white { border: 2px solid rgba(255,255,255,.7); color: #fff; padding: 13px 28px; border-radius: var(--radius-lg); font-weight: 800; background: transparent; }
.site-footer-cta-actions .btn-outline-white:hover { background: #fff; color: var(--secondary); }

.site-footer-body { background: var(--footer-bg); color: rgba(255,255,255,.75); padding: 100px var(--space-6) var(--space-6); border-radius: 40px 40px 0 0; }
.site-footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--space-8); }
@media (max-width: 900px) { .site-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer-grid { grid-template-columns: 1fr; text-align: center; } }
.site-footer-brand-block { display: flex; flex-direction: column; gap: var(--space-4); }
.site-footer-brand-row { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 22px; color: #fff; }
@media (max-width: 560px) { .site-footer-brand-row { justify-content: center; } }
.site-footer-brand-row .mark { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; color: #fff; }
.site-footer-brand-block p { font-size: 13.5px; line-height: 1.7; }
.site-footer-social { display: flex; gap: 10px; }
@media (max-width: 560px) { .site-footer-social { justify-content: center; } }
.site-footer-social a { width: 40px; height: 40px; border-radius: var(--radius-lg); background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); display: flex; align-items: center; justify-content: center; transition: all var(--dur-base) var(--ease-out); }
.site-footer-social a:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }
.site-footer-social svg { width: 18px; height: 18px; }

/* نفس فكرة .site-footer-social، لكن مُحوّلة لحاوية تعتمد ألوان الثيم (light/
   dark) بدل الأبيض الثابت — .site-footer-social مصمَّمة عمدًا للتذييل
   الغامق دائمًا بغضّ النظر عن ثيم الموقع، فاستخدامها في سياق آخر (مثل
   بلوك السوشيال ميديا بصفحة "تواصل معنا") كان يخفي الأيقونات تمامًا في
   الوضع الفاتح (أبيض على خلفية بيضاء) — باج حقيقي مؤكَّد. */
.social-icons-row { display: flex; gap: 10px; flex-wrap: wrap; }
.social-icons-row a { width: 40px; height: 40px; border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; transition: all var(--dur-base) var(--ease-out); }
.social-icons-row a:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-3px); }
.social-icons-row svg { width: 18px; height: 18px; }
.site-footer-col h3 { font-size: 15px; font-weight: 800; color: var(--primary); margin: 0 0 var(--space-4); }
.site-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer-col a { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.6); }
.site-footer-col a:hover { color: #fff; }
.site-footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--space-4); }
@media (max-width: 560px) { .site-footer-contact-item { justify-content: center; } }
a.site-footer-contact-item { text-decoration: none; color: inherit; transition: transform var(--dur-fast) var(--ease-out); }
a.site-footer-contact-item:hover { transform: translateX(-4px); }
a.site-footer-contact-item:hover .icon { background: var(--primary); color: #fff; }
.site-footer-contact-item .icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: rgba(255,255,255,.06); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.site-footer-contact-item .icon svg { width: 16px; height: 16px; }
.site-footer-contact-item .label { font-size: 11px; color: rgba(255,255,255,.4); font-weight: 700; margin-bottom: 2px; }
.site-footer-contact-item .value { font-size: 13.5px; font-weight: 700; color: #fff; }
.site-footer-map { width: 100%; height: 130px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.1); filter: grayscale(1); transition: filter var(--dur-slow) var(--ease-out); }
.site-footer-map:hover { filter: grayscale(0); }
.site-footer-map iframe { width: 100%; height: 100%; border: 0; }
.site-footer-bottom-row { max-width: 1200px; margin: 0 auto; padding-top: var(--space-5); display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; text-align: center; }
.site-footer-bottom { font-size: 12px; color: rgba(255,255,255,.4); font-weight: 600; }

/* ─── توقيع/هوية المطوّر — شريط مستقل بارز فوق صف الحقوق، وليس رابطًا
       صغيرًا مدفونًا بجانب النص. ثابت داخل القالب، غير قابل للتعديل من
       لوحة التحكم (طلب صريح من العميل). ─── */
.site-footer-signature { max-width: 1200px; margin: var(--space-10) auto 0; padding: var(--space-6) 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.site-footer-signature .sig-label { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 700; }
.site-footer-signature .sig-link { display: inline-flex; transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); }
.site-footer-signature .sig-link:hover { transform: scale(1.05); filter: brightness(1.15); }
.site-footer-signature .sig-mark { height: 56px; width: auto; display: block; filter: drop-shadow(0 3px 10px rgba(0,0,0,.4)); }
@media (max-width: 700px) { .site-footer-signature .sig-mark { height: 44px; } }

/* ─── الحاوية العامة لكل صفحة ─── */
.site-main { min-height: 60vh; }
.site-section { max-width: 1280px; margin-inline: auto; padding: var(--space-8) var(--space-6); }

/* ─── قسم "ممتد بالعرض الكامل" بخلفية متمايزة (بدائل style="background:..."
       المباشر على .site-section نفسه) — الفارق الجوهري: القيمة القديمة كانت
       تُطبَّق مباشرة على .site-section (محدود بـ max-width:1280px) فتظهر
       خلفية القسم كـ"صندوق" ملوّن معلَّق منتصف الصفحة مع هوامش فارغة بلون
       الخلفية الافتراضية على الجانبين في أي شاشة أعرض من 1280px — بالضبط
       الإحساس بـ"صناديق منفصلة" غير المرغوب. الآن: <section class=
       "site-section-tint"> يمتد بعرض الشاشة كاملاً بخلفيته، و.site-section
       العادي بداخله كحاوٍ للمحتوى فقط. تلاشٍ ناعم أعلى/أسفل (بدل حافة لونية
       حادة) يمزج القسم بمحيطه فيبدو استمرارًا للصفحة لا كتلة منفصلة عنها. */
.site-section-tint { position: relative; background: var(--surface-2); overflow: hidden; }
.site-section-tint::before, .site-section-tint::after { content: ''; position: absolute; inset-inline: 0; height: 90px; pointer-events: none; z-index: 0; }
.site-section-tint::before { top: -1px; background: linear-gradient(to bottom, var(--bg), transparent); }
.site-section-tint::after { bottom: -1px; background: linear-gradient(to top, var(--bg), transparent); }
.site-section-tint > .site-section { position: relative; z-index: 1; }

/* ─── تنسيق نصّي لمحتوى صفحات CMS الحرة (page.php) — كان يُعرَض بدون أي
       تنسيق للعناوين/القوائم/الروابط داخل HTML الحر القادم من محرر الإدارة ─── */
.cms-content { color: var(--text); font-size: var(--text-md); line-height: var(--leading-normal); }
.cms-content h2 { font-size: var(--text-xl); font-weight: 800; margin: var(--space-8) 0 var(--space-3); font-family: var(--font-display); }
.cms-content h3 { font-size: var(--text-lg); font-weight: 800; margin: var(--space-6) 0 var(--space-2); }
.cms-content p { margin: 0 0 var(--space-4); }
.cms-content ul, .cms-content ol { margin: 0 0 var(--space-4); padding-inline-start: var(--space-6); display: flex; flex-direction: column; gap: 6px; }
.cms-content a { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cms-content blockquote { border-inline-start: 3px solid var(--primary); padding-inline-start: var(--space-4); color: var(--text-muted); margin: 0 0 var(--space-4); }
.cms-content img { max-width: 100%; border-radius: var(--radius-lg); margin: var(--space-4) 0; }
.cms-content hr { border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

/* ─── هيرو بسيط للصفحات الفرعية (قوائم/تفاصيل) — الهيرو الكامل بالرسوم
       المتحركة يُبنى في صفحة الرئيسية بمرحلة لاحقة من الخطة ─── */
.page-hero { background: var(--brand-gradient); color: #fff; padding: var(--space-10) var(--space-6); text-align: center; }
.page-hero h1 { font-size: var(--text-2xl); font-weight: 800; margin: 0 0 var(--space-2); }
.page-hero p { opacity: .9; max-width: 560px; margin-inline: auto; }

/* ─── شبكة بطاقات عامة (شركات/منتجات/موتوسيكلات) ─── */
.public-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); }
/* عدد قليل من العناصر (أقل مما يملأ صفًا واحدًا) — auto-fit بدل auto-fill
   يمنع بقاء أعمدة فارغة تدفع العنصر الوحيد لطرف الحاوية مع فراغ ضخم بجانبه
   (خصوصًا ملحوظ في RTL)، مع تحديد عرض أقصى للبطاقة حتى لا تتمدد بلا حدود
   وتوسيطها بدل التصاقها بحافة الصف */
.public-grid.few-items { grid-template-columns: repeat(auto-fit, minmax(280px, 420px)); justify-content: center; }
.public-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.public-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), 0 14px 32px -16px rgba(var(--glow-rgb, 249,115,22), .35); border-color: rgba(var(--glow-rgb, 249,115,22), .3); }
.public-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--glow-rgb, 249,115,22), .22), transparent 72%);
  transition: opacity var(--dur-base) var(--ease-out);
}
.public-card::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 3px; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--glow-rgb, 249,115,22), 1), transparent);
  border-radius: var(--radius-full);
  box-shadow: 0 0 16px 1px rgba(var(--glow-rgb, 249,115,22), .55);
  transition: opacity var(--dur-base) var(--ease-out);
}
.public-card:hover::before, .public-card:hover::after { opacity: 1; }
.public-card > * { position: relative; z-index: 2; }
.public-card:hover .public-card-title svg { transform: scale(1.12) rotate(-6deg); }
.public-card-title svg { transition: transform var(--dur-base) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .public-card, .public-card::before, .public-card::after, .public-card-title svg { transition: none; } .public-card:hover .public-card-title svg { transform: none; } }
@media (hover: none) { .public-card::before, .public-card::after { display: none; } }
.public-card-media { aspect-ratio: 16/9; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-faint); overflow: hidden; }
.public-card-media img { width: 100%; height: 100%; object-fit: cover; }
.public-card-media svg { width: 40px; height: 40px; }
.public-card-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; min-width: 0; }
.public-card-title { font-weight: 800; font-size: var(--text-md); display: flex; align-items: flex-start; gap: 6px; }
.public-card-title svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--primary); }
.public-card-title-text {
  min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
/* أي رابط/زر CTA داخل جسم البطاقة يُثبَّت أسفلها دائمًا بغض النظر عن طول
   العنوان/الوصف أعلاه — نفس مبدأ .job-card-cta (margin-top:auto) */
.public-card-cta { margin-top: auto; }
.public-card-meta { color: var(--text-muted); font-size: var(--text-sm); margin-top: 4px; }
.public-card-stats { display: flex; gap: var(--space-4); margin-top: var(--space-3); font-size: 12.5px; color: var(--text-muted); }
.public-card-stats span { display: inline-flex; align-items: center; gap: 4px; }
.public-card-stats svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ─── بطاقة منتج مخصَّصة (بدل .public-card العامة) — الجزء الثاني: هوية
       بصرية خاصة بها بدل استعارة قالب عام مشترك مع أي محتوى آخر. صورة أكبر،
       شارة "تقسيط مباشر" عائمة فوق الصورة عند توفّره، وتدرّج سعري واضح
       (السعر الأساسي أبرز عنصر، السعر الأصلي المشطوب أصغر بجانبه، والقسط
       الشهري كسطر منفصل بلون العلامة) بدل رقم واحد مجرَّد. ─── */
/* ─── بطاقة المنتج — إعادة بناء كاملة (طلب صريح: "بمستوى مواقع التجارة
       الإلكترونية الحديثة، وليست مجرد صورة وسعر"): تصنيف المنتج ظاهر الآن
       (category_name كان محمَّلًا ولا يُعرض)، شارة خصم فعلية محسوبة من
       original_price، صندوق التقسيط أصبح كتلة بصرية بارزة بدل سطر عادي،
       وCTA صريح ثابت أسفل البطاقة بدل الاعتماد على أن كل البطاقة رابط. ─── */
.product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card-lg); overflow: hidden; display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; position: relative; isolation: isolate; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), 0 16px 34px -16px rgba(var(--primary-rgb), .32); border-color: rgba(var(--primary-rgb), .3); }
.product-card-media { position: relative; aspect-ratio: 4/3; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-faint); overflow: hidden; }
.product-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.product-card:hover .product-card-media img { transform: scale(1.06); }
.product-card-media svg { width: 44px; height: 44px; }
@media (prefers-reduced-motion: reduce) { .product-card, .product-card-media img { transition: none; } .product-card:hover .product-card-media img { transform: none; } }
.product-card-media-badges { position: absolute; top: 12px; inset-inline: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.product-card-installment-flag { display: inline-flex; align-items: center; gap: 5px; background: var(--surface); color: var(--primary); font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: var(--radius-full); box-shadow: var(--shadow-md); }
.product-card-installment-flag svg { width: 12px; height: 12px; }
.product-card-discount-flag { display: inline-flex; align-items: center; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: var(--radius-full); box-shadow: var(--shadow-md); margin-inline-start: auto; }
.product-card-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.product-card-category { font-size: 10.5px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.product-card-title { font-weight: 800; font-size: var(--text-md); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card-company { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-faint); font-weight: 600; margin-bottom: 6px; }
.product-card-company svg { width: 12px; height: 12px; }
.product-card-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: var(--space-2); }
.product-card-price { font-size: 19px; font-weight: 900; color: var(--text); }
.product-card-price small { font-size: 12px; font-weight: 700; opacity: .7; }
.product-card-monthly { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--primary); background: rgba(var(--primary-rgb), .08); border-radius: var(--radius-md); padding: 6px 9px; margin-top: var(--space-2); }
.product-card-monthly svg { width: 13px; height: 13px; flex-shrink: 0; }
.product-card-monthly b { font-weight: 900; }
.product-card-cta { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--space-3); padding: 10px; border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 13px; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.product-card-cta svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.product-card:hover .product-card-cta { background: var(--primary); color: #fff; }
.product-card:hover .product-card-cta svg { transform: translateX(-4px); }

/* ─── صفحة التفاصيل — بانر الغلاف + الشعار المتراكب فوقه (نمط بروفايل
       معروف: لينكدإن/فيسبوك)، مع بطاقة الهيرو ملتصقة أسفل الغلاف مباشرة ─── */
.profile-banner { margin-bottom: var(--space-6); }
.profile-cover { width: 100%; height: 200px; border-radius: var(--radius-2xl); overflow: hidden; margin-bottom: var(--space-4); }
.profile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-banner.has-cover .profile-cover { margin-bottom: 0; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.profile-banner.has-cover .profile-hero { border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); }
.profile-hero { display: flex; align-items: center; gap: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: var(--space-6); }
.profile-hero-logo { width: 96px; height: 96px; border-radius: var(--radius-xl); background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; color: var(--text-faint); }
.profile-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero-logo svg { width: 34px; height: 34px; }
.profile-banner.has-cover .profile-hero-logo { margin-top: -48px; border: 4px solid var(--surface); box-shadow: var(--shadow-md); background: var(--surface); }
.profile-hero-info h1 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--text-xl); }
.profile-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--space-3); }
.profile-hero-chips a.job-card-region { text-decoration: none; }
.profile-hero-chips a.job-card-region:hover { color: var(--primary); }
@media (max-width: 560px) { .profile-hero { flex-direction: column; align-items: flex-start; text-align: start; } .profile-banner.has-cover .profile-hero-logo { margin-top: -40px; } }

/* ─── مكوّن "شارة إحصائية" موحَّد (أيقونة + رقم + تسمية) ───
       .profile-stat (صفحة الشركة) و.city-stat-card (صفحة المنطقة) كانا
       تعريفين منفصلين بنفس البنية والسلوك حرفيًا (hover lift + shadow،
       دائرة أيقونة مصبوغة بلون العلامة) بفروق حجم مقصودة فقط — وُحِّدا هنا
       في قاعدة مشتركة واحدة، كل فئة تحتفظ فقط بفروق المقاس/الخط الخاصة بها. */
.profile-stats { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }
.profile-stat, .city-stat-card { display: flex; align-items: center; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.profile-stat:hover, .city-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.profile-stat-icon, .city-stat-icon { border-radius: var(--radius-lg); background: rgba(var(--primary-rgb), .1); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.profile-stat { padding: var(--space-4) var(--space-5); flex: 1; min-width: 180px; }
.profile-stat-icon { width: 42px; height: 42px; }
.profile-stat-icon svg { width: 20px; height: 20px; }
.profile-stat .val { font-size: var(--text-xl); font-weight: 800; color: var(--text); font-family: var(--font-num); }
.profile-stat .label { font-size: 12.5px; color: var(--text-muted); }

/* حالة "لا توجد نتائج" موحّدة — أيقونة + نص، بدون أي تعديل مطلوب في الصفحات
   الـ14 التي تستخدمها (نفس الـ markup القديم، فقط ::before يضيف الأيقونة) */
/* ─── حالة "لا يوجد محتوى" — النسخة السابقة كانت تستخدم نفس أيقونة "لوبّة
       البحث" الثابتة في كل سياق (لا وظائف مطابقة، شركة غير موجودة، صفحة
       404...) بلا أي تمييز، بلا عنوان واضح، وبلا إجراء تالٍ مقترح. الآن كل
       سياق يمرّر أيقونته الفعلية (نفس نظام Icons الموجود) داخل دائرة
       مصبوغة بلون العلامة + عنوان + وصف + إجراء اختياري واحد أو أكثر —
       يحوّل "لا يوجد شيء هنا" من طريق مسدود لخطوة تالية واضحة للمستخدم. ─── */
.empty-public-state { text-align: center; padding: var(--space-10) var(--space-6); color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); max-width: 440px; margin-inline: auto; }
.empty-public-state.has-icon::before { display: none; }
.empty-public-state-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(var(--primary-rgb), .1); color: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); animation: icon-pop .5s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .empty-public-state-icon { animation: none; } }
.empty-public-state-icon svg { width: 28px; height: 28px; }
.empty-public-state h3 { font-size: var(--text-md); font-weight: 800; color: var(--text); margin: 0 0 6px; }
.empty-public-state p { margin: 0; }
.empty-public-state-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }
.empty-public-state::before {
  content: '';
  display: block;
  width: 46px; height: 46px;
  margin: 0 auto var(--space-4);
  background-color: var(--text-faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.35-4.35'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.35-4.35'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ─── صفحة تفاصيل المنتج (تقسيط) ─── */
.product-breadcrumb { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.product-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.product-breadcrumb a:hover { color: var(--primary); }
.product-breadcrumb svg { width: 14px; height: 14px; transform: scaleX(-1); }
.product-breadcrumb span { color: var(--text); font-weight: 700; }

.installment-panel { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; margin-top: var(--space-2); }
.installment-panel-main { padding: var(--space-5); }
.installment-panel-main h3 { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); margin: 0 0 var(--space-4); }
.installment-panel-main h3 svg { width: 18px; height: 18px; color: var(--primary); }

.tenor-pills { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.tenor-pill { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-4) var(--space-3); border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.tenor-pill:hover { border-color: var(--primary); }
.tenor-pill.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.tenor-pill-tag { position: absolute; top: -10px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 800; padding: 2px 10px; border-radius: var(--radius-full); }
.tenor-pill-months { font-weight: 800; font-size: var(--text-sm); }
.tenor-pill-amount { font-size: 12.5px; color: var(--text-muted); }

.installment-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--border); font-size: var(--text-sm); }
.installment-row span { color: var(--text-muted); }
.installment-row b { font-size: var(--text-md); color: var(--text); }
.installment-note { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--info-soft); color: var(--info); border-radius: var(--radius-lg); font-size: 12.5px; line-height: var(--leading-normal); }
.installment-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

.installment-panel-cash { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; padding: var(--space-5); background: var(--text); color: var(--surface); }
.cash-row { display: flex; flex-direction: column; gap: 2px; }
.cash-row span { font-size: 12px; opacity: .7; }
.cash-row b { font-size: var(--text-lg); font-weight: 800; }
.cash-badge { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; opacity: .85; }
.cash-badge svg { width: 15px; height: 15px; }

.product-cta-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: var(--space-5); padding: var(--space-4); font-size: var(--text-md); }
.product-cta-btn svg { width: 18px; height: 18px; transform: scaleX(-1); }

.product-detail-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: start; }

@media (max-width: 900px) {
  .product-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .installment-panel-cash { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .cash-badge { margin-inline-start: 0; }
}

/* ─── أكورديون الأسئلة الشائعة ─── */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.faq-item:hover { border-color: rgba(var(--primary-rgb), .35); box-shadow: var(--shadow-sm); }
.faq-item.open { border-color: rgba(var(--primary-rgb), .5); box-shadow: var(--shadow-md); }
.faq-question { width: 100%; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); font-weight: 700; font-size: var(--text-md); text-align: start; background: none; border: none; color: var(--text); cursor: pointer; }
.faq-q-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.faq-q-icon svg { width: 17px; height: 17px; }
.faq-item.open .faq-q-icon { background: var(--primary); color: #fff; }
.faq-q-text { flex: 1; min-width: 0; }
.faq-q-toggle { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); }
.faq-q-toggle svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.faq-item.open .faq-q-toggle svg { transform: rotate(180deg); color: var(--primary); }
/* grid-template-rows بدل max-height: أنعم لأنه لا يعتمد على ارتفاع أقصى
   تقديري ثابت (راجع نفس الأسلوب في job-card-shifts-panel) */
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; min-height: 0; padding-inline-start: calc(36px + var(--space-3) + var(--space-5)); padding-inline-end: var(--space-5); color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.faq-item.open .faq-answer-inner { padding-bottom: var(--space-5); }
@media (prefers-reduced-motion: reduce) { .faq-answer, .faq-item { transition: none; } }

/* ─── صفحة التواصل ─── */
.contact-support-banner { padding-top: var(--space-8); }
.contact-support-inner { max-width: 1000px; margin: 0 auto; background: var(--surface-2); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-8); }
.contact-support-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--secondary); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 6px 14px; border-radius: var(--radius-full); }
.contact-support-badge svg { width: 14px; height: 14px; }
.contact-support-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); }
.contact-support-head h1 { font-size: var(--text-2xl); font-weight: 900; margin: 0 0 4px; color: var(--text); }
.contact-support-head p { color: var(--text-muted); margin: 0; }
.contact-support-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--success-soft); color: var(--success); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-support-icon svg { width: 26px; height: 26px; }
@media (max-width: 640px) { .contact-support-head { flex-direction: column; align-items: flex-start; } }

.contact-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form-card { padding: var(--space-6); }
.contact-info-col .card-title { margin-bottom: var(--space-4); }
.contact-info-card { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--space-3); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.contact-info-card:hover { transform: translateY(-3px); border-color: rgba(var(--primary-rgb),.3); box-shadow: var(--shadow-md); }
.contact-info-card:hover .icon-chip { transform: scale(1.08) rotate(-4deg); }
.contact-info-card .label { font-size: 12px; color: var(--text-muted); font-weight: 700; margin-bottom: 3px; }
.contact-info-card .value { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.contact-info-card .value + .value { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .contact-info-card, .contact-info-card:hover, .contact-info-card:hover .icon-chip { transform: none; transition: none; } }
.contact-social-block { padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.contact-social-block .label { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.contact-map-wrap { max-width: 1000px; margin: var(--space-8) auto 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); height: 320px; }
.contact-map-wrap iframe { width: 100%; height: 100%; border: 0; }
.contact-form-card .form-group { position: relative; }
.contact-form-card .fg-icon { position: absolute; top: 38px; inset-inline-start: 14px; color: var(--text-muted); opacity: .55; pointer-events: none; }
.contact-form-card .fg-icon svg { width: 16px; height: 16px; }
.contact-form-card .form-control.has-icon { padding-inline-start: 40px; }
.contact-form-card .fg-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }
.contact-form-card .fg-hint.invalid { color: var(--danger); }
.cf-err-shake { animation: cf-shake .4s ease; }
@keyframes cf-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .cf-err-shake { animation: none; } }

/* ═══════════════════════════════════════════════════
   الصفحة الرئيسية العامة — هيرو + قسم كيف تعمل + مزايا + أقسام أحدث
   المحتوى + شركاء. مبنية على نفس متغيرات public.css أعلاه (برتقالي/كحلي/
   أصفر)، مع حركة GSAP للصفحات العامة فقط عبر gsap-init.js.
═══════════════════════════════════════════════════ */

.home-hero { position: relative; overflow: hidden; padding: var(--space-10) var(--space-6) var(--space-6); }
/* تلاشي ناعم أسفل الهيرو يمتزج بلون قسم الإحصائيات التالي مباشرة، بدل خط
   فاصل حاد بين لونَي خلفية مختلفَين — يعزّز إحساس "التدفّق" بين الأقسام.
   الهدف --bg لا --surface-2: قسم الإحصائيات التالي (.site-section-tint)
   له بنفسه تلاشٍ علوي يبدأ من --bg الصلب (راجع ::before تحت) قبل ما يكشف
   لونه الحقيقي --surface-2 تدريجيًا — فلازم أسفل الهيرو يسلّم بالظبط نفس
   لون --bg اللي يبدأ بيه القسم التالي، وإلا يظهر خط فاصل خفيف عند نقطة
   الالتقاء (كان الخطأ الأصلي هنا: التلاشي كان يستهدف --surface-2 مباشرة،
   فيتصادم مع بداية القسم التالي --bg الصلبة). */
.home-hero::after { content: ''; position: absolute; bottom: 0; inset-inline: 0; height: 110px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; z-index: 0; }
.home-hero-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.home-hero-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.home-hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.home-hero-blob.b1 { width: 420px; height: 420px; background: rgba(var(--primary-rgb), .25); top: -120px; inset-inline-end: -100px; }
.home-hero-blob.b2 { width: 360px; height: 360px; background: rgba(0, 78, 137, .18); bottom: -140px; inset-inline-start: -100px; }
[data-theme="dark"] .home-hero-blob.b2 { background: rgba(61, 139, 196, .22); }

.home-hero-inner { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-10); align-items: center; }
@media (max-width: 960px) { .home-hero-inner { grid-template-columns: 1fr; text-align: center; } }

.home-live-pill { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); padding: 8px 16px; border-radius: var(--radius-full); font-size: 12.5px; font-weight: 700; box-shadow: var(--shadow-sm); }
.home-live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.home-live-dot::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: var(--primary); opacity: .5; animation: home-pulse 1.8s ease-out infinite; }
@keyframes home-pulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .home-live-dot::before { animation: none; opacity: .3; } }

/* ─── نظام الأيقونات المتحركة/الثابتة (Animated vs Static Icons) ───
   قاعدة الاختيار المعتمدة من الآن في كل أجزاء المشروع (الموقع العام/لوحة
   الإدارة/لوحة المزوّد/نظام الرسائل): الحركة تُستخدَم فقط حين تحمل معنى
   (مؤشر "مباشر/حيّ"، تفاعل عند hover لبطاقة/زر رئيسي، تأكيد نجاح) — لا
   حركة زخرفية بلا سبب، ولا حركة دائمة على أيقونات صغيرة متكررة (قوائم/
   حقول/أزرار ثانوية) حتى لا تشتّت الانتباه أو تُثقل الأداء. الأدوات
   الجاهزة أدناه: .icon-anim-float (تأرجح رأسي بطيء ومستمر — لعناصر بصرية
   قليلة العدد كأيقونة حالة فارغة أو بادج مميز) و .icon-anim-pop (نبضة
   دخول خفيفة تُشغَّل مرة واحدة عبر إضافة الكلاس من JS عند نجاح فعلي، مثل
   تأكيد إرسال نموذج) — بجانب أنماط hover الموجودة أصلًا لكل عائلة بطاقات
   (transform: scale+rotate على الأيقونة عند :hover). كل الحركات تحترم
   prefers-reduced-motion وتُعطَّل تلقائيًا. */
.icon-anim-float { animation: icon-float 3.2s ease-in-out infinite; }
@keyframes icon-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.icon-anim-pop { animation: icon-pop .5s var(--ease-out); }
@keyframes icon-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .icon-anim-float { animation: none; } .icon-anim-pop { animation: none; } }

.home-hero-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 5vw, 58px); line-height: 1.2; color: var(--secondary); margin: var(--space-5) 0; }
[data-theme="dark"] .home-hero-title { color: var(--text); }
.home-hero-title .accent { color: var(--primary); }

.home-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-6); }
@media (max-width: 960px) { .home-badges { justify-content: center; } }
.home-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-full); font-size: 12.5px; font-weight: 700; border: 1px solid; }
.home-badge svg { width: 14px; height: 14px; }
.home-badge.c1 { color: #EA580C; background: rgba(234,88,12,.08); border-color: rgba(234,88,12,.25); }
.home-badge.c2 { color: #059669; background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.25); }
.home-badge.c3 { color: #2563EB; background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.25); }
.home-badge.c4 { color: #7C3AED; background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.25); }

.home-hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 960px) { .home-hero-ctas { justify-content: center; } }
.home-cta-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: var(--radius-lg); background: var(--primary); color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 12px 28px rgba(var(--primary-rgb), .35); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.home-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(var(--primary-rgb), .45); }
.home-cta-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: var(--radius-lg); background: var(--surface); color: var(--secondary); font-weight: 800; font-size: 16px; border: 2px solid var(--secondary); transition: all var(--dur-base) var(--ease-out); }
[data-theme="dark"] .home-cta-secondary { color: var(--text); border-color: var(--border-strong, var(--border)); }
.home-cta-secondary:hover { background: var(--secondary); color: #fff; transform: translateY(-2px); }

.home-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; height: 420px; }
@media (max-width: 960px) { .home-hero-visual { margin-top: var(--space-6); height: 280px; } }

/* ─── توهج نابض خلف دائرة الهيرو — يمنح العنصر الأهم في الصفحة حضورًا
       بصريًا واضحًا من أول نظرة (نبض بطيء وخفيف، لا حركة مفرطة). ─── */
.home-hero-visual-glow {
  position: absolute; width: 460px; height: 460px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(var(--primary-rgb), .28) 0%, rgba(124,58,237,.16) 45%, transparent 72%);
  filter: blur(6px);
  animation: home-hero-glow-pulse 4.5s ease-in-out infinite;
}
/* الوضع الداكن: نفس التوهج يبدو أخفت بصريًا فوق خلفية داكنة (تباين أقل)،
   فنرفع الشفافية والانتشار قليلاً ليحافظ على نفس قوة الحضور مقارنة بالفاتح. */
[data-theme="dark"] .home-hero-visual-glow {
  background: radial-gradient(circle, rgba(var(--primary-rgb), .4) 0%, rgba(147,112,240,.26) 45%, transparent 74%);
  filter: blur(8px);
}
@keyframes home-hero-glow-pulse { 0%, 100% { transform: scale(.94); opacity: .75; } 50% { transform: scale(1.04); opacity: 1; } }
@media (max-width: 960px) { .home-hero-visual-glow { width: 300px; height: 300px; } }
@media (prefers-reduced-motion: reduce) { .home-hero-visual-glow { animation: none; transform: scale(1); opacity: .85; } }

/* ظل بيضاوي ناعم أسفل الدائرة — إحساس "طفو" بدل دائرة مسطّحة فوق الخلفية */
.home-hero-lottie-shadow {
  position: absolute; width: 220px; height: 34px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse, rgba(0,0,0,.28) 0%, transparent 75%);
  transform: translateY(178px);
}
[data-theme="dark"] .home-hero-lottie-shadow { background: radial-gradient(ellipse, rgba(0,0,0,.5) 0%, transparent 75%); }
@media (max-width: 960px) { .home-hero-lottie-shadow { width: 150px; transform: translateY(118px); } }

.home-hero-ring { position: absolute; border: 1px dashed var(--border); border-radius: 50%; pointer-events: none; z-index: 1; }
/* الحلقة الخارجية: حلقة متدرّجة بألوان الهوية (بدل خط منقّط بسيط) تدور
   ببطء — تمنح دائرة الهيرو إطارًا مميزًا "بريميوم" دون أي تعارض مع
   هوية الموقع (نفس var(--brand-gradient) المستخدم في بطاقات الوظائف).
   الشفافية والسُّمك مرفوعان (كانا .55/2px) ليعطي الإطار حضورًا أقوى
   يوازي النسخة السابقة التي كانت أكثر وضوحًا. */
.home-hero-ring.r1 {
  width: 420px; height: 420px; border: none; opacity: .85;
  background: conic-gradient(from 0deg, rgba(var(--primary-rgb), .95), rgba(124,58,237,.9), rgba(var(--primary-rgb), .25), rgba(var(--primary-rgb), .95));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 3px;
  filter: drop-shadow(0 0 10px rgba(var(--primary-rgb), .35));
  animation: home-ring-spin 22s linear infinite;
}
.home-hero-ring.r2 {
  width: 320px; height: 320px; opacity: .8;
  border: 1.5px dashed rgba(var(--primary-rgb), .4);
}
/* الوضع الداكن: خط الحلقة الداخلية المنقّطة (r2) كان يعتمد على var(--border)
   العام منخفض التباين فوق خلفية داكنة فبدا شبه غائب — نستبدله بلون هوية
   مرئي بوضوح، ونرفع قوة الحلقة الرئيسية (r1) والتوهج المحيط بها قليلاً. */
[data-theme="dark"] .home-hero-ring.r1 {
  opacity: .95;
  filter: drop-shadow(0 0 14px rgba(var(--primary-rgb), .45));
}
[data-theme="dark"] .home-hero-ring.r2 { border-color: rgba(var(--primary-rgb), .55); opacity: .85; }
@keyframes home-ring-spin { to { transform: rotate(360deg); } }
@media (max-width: 960px) { .home-hero-ring.r1 { width: 280px; height: 280px; } .home-hero-ring.r2 { width: 210px; height: 210px; } }
@media (prefers-reduced-motion: reduce) { .home-hero-ring { animation: none !important; } }

.home-hero-lottie-circle {
  position: relative; z-index: 2; width: 340px; height: 340px; border-radius: 50%; overflow: hidden;
  background: var(--surface);
  border: 3px solid rgba(var(--primary-rgb), .18);
  box-shadow: var(--shadow-lg), 0 0 0 8px rgba(var(--primary-rgb), .06);
  display: flex; align-items: center; justify-content: center;
}
/* الوضع الداكن: نفس حدود الإطار وظله الخفيف حول الدائرة يفقدان تباينهما
   فوق خلفية داكنة — نرفع شفافيتهما ليبقى حد الدائرة واضحًا واحترافيًا
   بنفس مستوى وضوح الوضع الفاتح، دون تغيير الشكل العام. */
[data-theme="dark"] .home-hero-lottie-circle {
  border-color: rgba(var(--primary-rgb), .32);
  box-shadow: var(--shadow-lg), 0 0 0 8px rgba(var(--primary-rgb), .1), 0 0 24px rgba(var(--primary-rgb), .12);
}
.home-hero-lottie-circle > svg, .home-hero-lottie-circle > canvas { width: 100% !important; height: 100% !important; position: absolute; inset: 0; z-index: 2; }
/* مشهد الراكب (SVG متحرك ذاتيًا) — يملأ الدائرة بمشهده الخاص (سماء/مدينة/
   طريق) فلا حاجة لأي خلفية أو طبقات عمق إضافية خلفه. */
.home-hero-rider-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.home-hero-lottie-fallback { color: var(--primary); opacity: .35; position: relative; z-index: 2; }
.home-hero-lottie-fallback svg { width: 120px; height: 120px; }
@media (max-width: 960px) { .home-hero-lottie-circle { width: 220px; height: 220px; } }

.home-hero-logo-badge { position: absolute; top: 14%; inset-inline-end: 4%; width: 88px; height: 88px; border-radius: var(--radius-xl); background: var(--surface); backdrop-filter: blur(6px); box-shadow: var(--shadow-lg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 3; }
.home-hero-logo-badge img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.home-hero-logo-badge.is-swapping img { opacity: 0; transform: scale(0) rotate(-180deg); }
@media (max-width: 640px) { .home-hero-logo-badge { display: none; } }
@media (max-width: 960px) and (min-width: 641px) { .home-hero-logo-badge { width: 68px; height: 68px; top: 6%; inset-inline-end: 2%; } }

.home-hero-company-name { color: var(--primary); display: inline-block; min-width: 2ch; transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.home-hero-company-name.is-swapping { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .home-hero-logo-badge img, .home-hero-company-name { transition: none !important; } }

/* ─── نظام "التوهج" المشترك عند الـ hover (Glow/Spotlight) ───
   يُطبَّق بإضافة class="glow-card" على أي بطاقة (إحصائية/مزايا/عامة/وظيفة).
   --mx/--my تُحدَّث بحدث mousemove خفيف في public.js (تحديث خاصية CSS فقط،
   بدون أي إعادة تخطيط/Reflow)، فتُنتج توهجًا دائريًا يتبع مؤشر الفأرة، بجانب
   خط توهج ناعم يظهر أسفل البطاقة. يُعطَّل تلقائيًا مع prefers-reduced-motion
   ولا يعمل أصلًا على اللمس (لا mousemove حقيقي على الموبايل). */
.glow-card { position: relative; overflow: hidden; isolation: isolate; }
.glow-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--glow-rgb, 249,115,22), .22), transparent 72%);
  transition: opacity var(--dur-base) var(--ease-out);
}
.glow-card::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 3px; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--glow-rgb, 249,115,22), 1), transparent);
  border-radius: var(--radius-full);
  box-shadow: 0 0 16px 1px rgba(var(--glow-rgb, 249,115,22), .55);
  transition: opacity var(--dur-base) var(--ease-out);
}
.glow-card:hover::before, .glow-card:hover::after { opacity: 1; }
.glow-card > * { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .glow-card::before, .glow-card::after { transition: none; } }
@media (hover: none) { .glow-card::before, .glow-card::after { display: none; } }

.accent-blue { --glow-rgb: 59,130,246; }
.accent-orange { --glow-rgb: 249,115,22; }
.accent-purple { --glow-rgb: 139,92,246; }
.accent-green { --glow-rgb: 16,185,129; }
.accent-teal { --glow-rgb: 20,184,166; }
.accent-pink { --glow-rgb: 236,72,153; }

/* ─── قسم الإحصائيات الحيّة — قسم مستقل بحضور بصري واضح، وليس شريطًا
       ملحقًا بالهيرو: خلفية متمايزة + توهج زخرفي خافت خلف البطاقات +
       عنوان قسم كامل (eyebrow/title/subtitle قابلة للتحرير من Homepage
       Builder) + بطاقات أكبر وأكثر تباعدًا وحضورًا. ─── */
.home-stats-section-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(560px circle at 12% 15%, rgba(var(--primary-rgb), .10), transparent 62%),
    radial-gradient(560px circle at 88% 85%, rgba(0, 78, 137, .10), transparent 62%);
}
[data-theme="dark"] .home-stats-section-glow {
  background:
    radial-gradient(560px circle at 12% 15%, rgba(var(--primary-rgb), .16), transparent 62%),
    radial-gradient(560px circle at 88% 85%, rgba(61, 139, 196, .16), transparent 62%);
}
.home-stats-section .home-section-head,
.home-stats-section .home-stats-strip { position: relative; z-index: 1; }

.home-stats-strip { max-width: 1160px; margin: 0 auto; padding: 0 var(--space-6); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 700px) { .home-stats-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
.home-stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid rgba(var(--glow-rgb, 249,115,22), .6);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6); text-align: center; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.home-stat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), 0 18px 38px -14px rgba(var(--glow-rgb, 0,0,0), .5);
  border-color: rgba(var(--glow-rgb, 0,0,0), .35);
}
.home-stat-icon {
  width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4); background: rgba(var(--glow-rgb, 249,115,22), .12); color: rgb(var(--glow-rgb, 249,115,22));
  transition: transform var(--dur-base) var(--ease-spring, var(--ease-out));
}
.home-stat-icon svg { width: 27px; height: 27px; }
.home-stat-card:hover .home-stat-icon { transform: scale(1.1) rotate(-6deg); }
.home-stat-card .val { font-family: var(--font-num); font-size: var(--text-3xl); font-weight: 800; color: var(--text); line-height: 1.1; }
.home-stat-card .label { font-size: 13.5px; color: var(--text-muted); font-weight: 700; margin-top: 2px; }
@media (max-width: 700px) { .home-stat-card { padding: var(--space-6) var(--space-4); } .home-stat-icon { width: 46px; height: 46px; margin-bottom: var(--space-3); } .home-stat-icon svg { width: 22px; height: 22px; } .home-stat-card .val { font-size: var(--text-2xl); } }
@media (prefers-reduced-motion: reduce) { .home-stat-card, .home-stat-icon { transition: none; } .home-stat-card:hover .home-stat-icon { transform: none; } }

/* ─── عنوان قسم مشترك ─── */
.home-section-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-8); }
.home-section-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 800; color: var(--primary); background: rgba(var(--primary-rgb), .1); padding: 5px 14px; border-radius: var(--radius-full); margin-bottom: var(--space-3); }
.home-section-head h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); color: var(--secondary); margin: 0 0 var(--space-2); }
[data-theme="dark"] .home-section-head h2 { color: var(--text); }
.home-section-head p { color: var(--text-muted); }

/* ─── كيف تعمل (خطوات) — دائرة أيقونة ملوّنة + شارة رقم + خط واصل متدرّج
       اللون بين الخطوات (مطابق للتصميم المرجعي)، بدل بطاقة برقم مجرّد ─── */
.home-steps { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); position: relative; }
.home-steps::before {
  content: ''; position: absolute; top: 32px; inset-inline: 12%; height: 2px; z-index: 0;
  background: linear-gradient(to left, #3B82F6, #F97316, #10B981);
}
@media (max-width: 860px) { .home-steps { grid-template-columns: 1fr; max-width: 420px; } .home-steps::before { display: none; } }
.home-step { text-align: center; position: relative; z-index: 1; }
.home-step-icon-wrap { position: relative; width: 64px; height: 64px; margin: 0 auto var(--space-4); }
.home-step-icon { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); }
.home-step-icon svg { width: 26px; height: 26px; }
.home-step-num { position: absolute; top: -4px; inset-inline-end: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; border: 2px solid var(--surface-2); }
.home-step h3 { font-size: var(--text-md); font-weight: 800; margin: 0 0 6px; }
.home-step p { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ─── المزايا ─── */
.home-features { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.home-features.cols-3 { max-width: 1200px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .home-features, .home-features.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .home-features, .home-features.cols-3 { grid-template-columns: 1fr; } }
.home-feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-6); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.home-feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), 0 14px 32px -16px rgba(var(--glow-rgb, 0,0,0), .4); border-color: rgba(var(--glow-rgb, 0,0,0), .3); }
.home-feature-icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: rgba(var(--primary-rgb), .1); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); transition: transform var(--dur-base) var(--ease-out); }
.home-feature-icon svg { width: 24px; height: 24px; }
.home-feature-card:hover .home-feature-icon { transform: scale(1.1) rotate(-6deg); }
@media (prefers-reduced-motion: reduce) { .home-feature-card, .home-feature-icon { transition: none; } .home-feature-card:hover .home-feature-icon { transform: none; } }
/* ─── خريطة ألوان "شارة الأيقونة الملوّنة" الموحّدة (الجزء الرابع) — كانت
       مكرّرة حرفيًا مرتين (.home-step-icon-wrap.accent-* و
       .home-feature-icon.accent-*)، وُحِّدت هنا في تعريف واحد يخدم كل
       استخدامات .accent-* الحالية على أي أيقونة-شارة، + نسخة للوضع الليلي
       (كانت غائبة تمامًا — الألوان الفاتحة كانت ستظهر باهتة/غريبة فوق خلفية
       الوضع الليلي شبه الأسود بدونها). ─── */
.home-step-icon-wrap.accent-blue .home-step-icon, .home-feature-icon.accent-blue, .icon-chip.accent-blue { background: #EFF6FF; color: #3B82F6; }
.home-step-icon-wrap.accent-orange .home-step-icon, .home-feature-icon.accent-orange, .icon-chip.accent-orange { background: #FFF7ED; color: #F97316; }
.home-step-icon-wrap.accent-purple .home-step-icon, .home-feature-icon.accent-purple, .icon-chip.accent-purple { background: #F5F3FF; color: #8B5CF6; }
.home-step-icon-wrap.accent-green .home-step-icon, .home-feature-icon.accent-green, .icon-chip.accent-green { background: #ECFDF5; color: #10B981; }
.home-step-icon-wrap.accent-teal .home-step-icon, .home-feature-icon.accent-teal, .icon-chip.accent-teal { background: #F0FDFA; color: #14B8A6; }
.home-step-icon-wrap.accent-pink .home-step-icon, .home-feature-icon.accent-pink, .icon-chip.accent-pink { background: #FDF2F8; color: #EC4899; }
[data-theme="dark"] .home-step-icon-wrap.accent-blue .home-step-icon, [data-theme="dark"] .home-feature-icon.accent-blue, [data-theme="dark"] .icon-chip.accent-blue { background: rgba(59,130,246,.16); color: #7BAAFB; }
[data-theme="dark"] .home-step-icon-wrap.accent-orange .home-step-icon, [data-theme="dark"] .home-feature-icon.accent-orange, [data-theme="dark"] .icon-chip.accent-orange { background: rgba(249,115,22,.16); color: #FDA76A; }
[data-theme="dark"] .home-step-icon-wrap.accent-purple .home-step-icon, [data-theme="dark"] .home-feature-icon.accent-purple, [data-theme="dark"] .icon-chip.accent-purple { background: rgba(139,92,246,.18); color: #B7A3FA; }
[data-theme="dark"] .home-step-icon-wrap.accent-green .home-step-icon, [data-theme="dark"] .home-feature-icon.accent-green, [data-theme="dark"] .icon-chip.accent-green { background: rgba(16,185,129,.18); color: #5FE0AC; }
[data-theme="dark"] .home-step-icon-wrap.accent-teal .home-step-icon, [data-theme="dark"] .home-feature-icon.accent-teal, [data-theme="dark"] .icon-chip.accent-teal { background: rgba(20,184,166,.18); color: #5FD9CD; }
[data-theme="dark"] .home-step-icon-wrap.accent-pink .home-step-icon, [data-theme="dark"] .home-feature-icon.accent-pink, [data-theme="dark"] .icon-chip.accent-pink { background: rgba(236,72,153,.18); color: #F49AC4; }
/* شارة أيقونة عامة قابلة لإعادة الاستخدام (بديل موحّد لأنماط .icon المتفرّقة
   ذات الخلفية اللونية المضمَّنة inline على بطاقات معلومات التواصل وغيرها) */
.icon-chip { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.icon-chip svg { width: 20px; height: 20px; }
.icon-chip.lg { width: 56px; height: 56px; border-radius: var(--radius-lg); }
.icon-chip.lg svg { width: 26px; height: 26px; }
/* البطاقة "المميَّزة" (بطاقة واحدة بارزة بخلفية متدرّجة، مطابقةً للتصميم المرجعي) */
.home-feature-card.featured { background: linear-gradient(135deg, #F97316, #FB923C); border-color: transparent; color: #fff; }
.home-feature-card.featured .home-feature-icon { background: rgba(255,255,255,.22); color: #fff; }
.home-feature-card.featured h3 { color: #fff; }
.home-feature-card.featured p { color: rgba(255,255,255,.85); }
.home-feature-card h3 { font-size: var(--text-md); font-weight: 800; margin: 0 0 6px; }
.home-feature-card p { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ─── بطاقة رأي عميل — مكوّن مستقل مصمَّم خصيصًا لمحتوى الاقتباس (بدل
       استعارة .home-feature-card العامة سابقًا وحشو النجوم/التذييل بأنماط
       inline). علامة اقتباس كبيرة شبه شفافة في الزاوية، شارة تقييم واضحة،
       واسم/صورة رمزية للمُقيِّم بنمط "بطاقة توصية" مألوف عالميًا. ─── */
.home-testimonial-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 760px) { .home-testimonial-grid { grid-template-columns: 1fr; } }
.home-testimonial-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card-md); padding: var(--space-6); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.home-testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.home-testimonial-quote-mark { position: absolute; top: var(--space-4); inset-inline-end: var(--space-5); color: rgba(var(--primary-rgb), .12); pointer-events: none; }
.home-testimonial-quote-mark svg { width: 46px; height: 46px; }
[data-theme="dark"] .home-testimonial-quote-mark { color: rgba(var(--primary-rgb), .18); }
.home-testimonial-stars { color: var(--accent); display: flex; gap: 2px; margin-bottom: var(--space-3); position: relative; }
.home-testimonial-quote { color: var(--text); font-size: 14.5px; line-height: var(--leading-normal); margin: 0 0 var(--space-5); position: relative; min-height: 3.2em; }
.home-testimonial-person { display: flex; align-items: center; gap: 10px; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.home-testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-gradient); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.home-testimonial-name { font-weight: 800; font-size: 13.5px; color: var(--text); }
.home-testimonial-role { font-size: 12px; color: var(--text-muted); }

/* ─── شريط الشركاء المتحرك (شركاء النجاح) ─── */
.home-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.home-marquee-track { display: flex; gap: var(--space-10); width: max-content; animation: home-marquee 28s linear infinite; align-items: center; }
.home-marquee:hover .home-marquee-track { animation-play-state: paused; }
@keyframes home-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.home-marquee-item { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.home-marquee-item a { display: block; }
.home-marquee-item .logo { width: 96px; height: 56px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: var(--space-2); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.home-marquee-item .logo img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) opacity(.55); transition: filter var(--dur-slow) var(--ease-out); }
.home-marquee-item .logo svg { width: 28px; height: 28px; color: var(--text-faint); }
.home-marquee-item:hover .logo { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.home-marquee-item:hover .logo img { filter: grayscale(0) opacity(1); }

/* ─── نطاق دعوة "كن مزوّد خدمة" ─── */
.home-cta-band { position: relative; overflow: hidden; max-width: 1100px; margin: 0 auto; background: var(--brand-gradient); border-radius: var(--radius-xl); padding: var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; color: #fff; box-shadow: 0 16px 40px -12px rgba(var(--primary-rgb), .45); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.home-cta-band:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -12px rgba(var(--primary-rgb), .55); }
.home-cta-band-icon { position: absolute; inset-inline-end: -18px; top: 50%; transform: translateY(-50%); width: 150px; height: 150px; opacity: .14; pointer-events: none; }
.home-cta-band-icon svg { width: 100%; height: 100%; }
.home-cta-band-text { position: relative; z-index: 1; flex: 1 1 320px; min-width: 0; }
.home-cta-band h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; margin: 0 0 4px; }
.home-cta-band p { opacity: .92; margin: 0; }
.home-cta-band .btn { position: relative; z-index: 1; background: #fff; color: var(--primary); font-weight: 800; padding: 12px 24px; border-radius: var(--radius-lg); flex-shrink: 0; }
.home-cta-band.alt { background: linear-gradient(90deg, #059669, #10B981); box-shadow: 0 16px 40px -12px rgba(5, 150, 105, .45); }
.home-cta-band.alt:hover { box-shadow: 0 22px 48px -12px rgba(5, 150, 105, .55); }
.home-cta-band.alt .btn { color: #059669; }
@media (max-width: 560px) { .home-cta-band-icon { width: 110px; height: 110px; opacity: .1; } }

/* GSAP scroll-reveal hook: عنصر يبدأ مخفيًا، gsap-init.js يتحكم في ظهوره؛
   بدون JS (متصفح قديم/معطّل) يبقى العنصر ظاهرًا بشكل طبيعي عبر noscript فقط */
/* الحالة الافتراضية: ظاهر دائمًا — لا يعتمد المحتوى على تحميل JS/GSAP.
   فقط بعد تأكيد gsap-init.js تحميل GSAP بنجاح تُضاف .gsap-ready على
   <html> فتُخفى هذه العناصر مؤقتًا تمهيدًا لحركة الظهور عند التمرير. */
html.gsap-ready .gsr, html.gsap-ready .gsr-item { opacity: 0; transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) { html.gsap-ready .gsr, html.gsap-ready .gsr-item { opacity: 1 !important; transform: none !important; } }

/* ═══════════════════════════════════════════════════
   معالج التسجيل السريع (Apply Wizard) — يُستخدَم مضمَّنًا داخل الهيرو في
   الرئيسية وككامل الصفحة في /apply (راجع apply-wizard.js). نفس البطاقة
   البصرية في الموضعين، فقط الحاوية الخارجية تختلف.
═══════════════════════════════════════════════════ */
.wizard-card { background: var(--surface); border-radius: var(--radius-card-lg); box-shadow: var(--shadow-lg); overflow: hidden; max-width: 440px; width: 100%; }
.wizard-header { background: var(--brand-gradient); padding: var(--space-5) var(--space-6); color: #fff; position: relative; }
.wizard-header-top { display: flex; align-items: center; gap: 12px; }
.wizard-header-icon { width: 44px; height: 44px; border-radius: var(--radius-lg); background: rgba(255,255,255,.2); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wizard-header-icon svg { width: 22px; height: 22px; }
.wizard-header-text { flex: 1; min-width: 0; }
.wizard-header-text b { display: block; font-size: 16px; font-weight: 800; }
.wizard-header-text span { font-size: 12.5px; opacity: .85; }
.wizard-step-pill { background: rgba(255,255,255,.2); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 800; flex-shrink: 0; direction: ltr; unicode-bidi: isolate; }
.wizard-progress-track { height: 4px; background: rgba(255,255,255,.25); border-radius: 999px; margin-top: var(--space-4); overflow: hidden; }
.wizard-progress-bar { height: 100%; background: #fff; border-radius: 999px; transition: width var(--dur-slow) var(--ease-out); }

.wizard-stepper { display: flex; align-items: center; margin-top: var(--space-4); }
.wizard-stepper-dot { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.2); color: rgba(255,255,255,.75); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; transition: all var(--dur-fast) var(--ease-out); }
.wizard-stepper-dot svg { width: 11px; height: 11px; }
.wizard-stepper-dot.done { background: #fff; color: var(--primary); cursor: pointer; }
.wizard-stepper-dot.current { background: #fff; color: var(--primary); box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.wizard-stepper-line { flex: 1; height: 2px; background: rgba(255,255,255,.2); margin: 0 4px; }
.wizard-stepper-line.done { background: #fff; }

.wizard-review-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.wizard-review-row:last-child { border-bottom: none; }
.wizard-review-row .r-label { color: var(--text-muted); flex-shrink: 0; }
.wizard-review-row .r-value { font-weight: 700; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-review-note { font-size: 12px; color: var(--text-faint); margin-top: var(--space-3); text-align: center; }

.wizard-success-reqnum { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1.5px dashed var(--border); border-radius: var(--radius-full); padding: 8px 18px; font-size: 13.5px; font-weight: 800; color: var(--primary); margin-bottom: var(--space-5); }
.wizard-success-reqnum .num { font-size: 15px; }

/* ─── سعر أصلي مشطوب بجانب السعر الحالي (خصم) — منتجات/موتوسيكلات ─── */
.price-with-discount { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-original-strike { text-decoration: line-through; color: var(--text-faint); font-size: 13px; font-weight: 700; }

.wizard-body { padding: var(--space-6); min-height: 260px; display: flex; flex-direction: column; }
.wizard-step-title { font-size: 19px; font-weight: 900; margin: 0 0 4px; }
.wizard-step-desc { font-size: 13.5px; color: var(--text-muted); margin: 0 0 var(--space-5); }
.wizard-input-group { position: relative; margin-bottom: var(--space-3); }
.wizard-input-group svg.leading { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-faint); pointer-events: none; }
.wizard-input-group input { width: 100%; height: 52px; border-radius: var(--radius-lg); border: 1.5px solid var(--border); background: var(--surface-2); padding-inline-start: 44px; padding-inline-end: 14px; font-size: 15px; font-weight: 700; color: var(--text); }
.wizard-input-group input:focus { border-color: var(--primary); outline: none; background: var(--surface); }
.wizard-input-group input[dir="ltr"] { text-align: left; }
.wizard-helper { font-size: 11.5px; color: var(--text-faint); margin-top: -4px; margin-bottom: var(--space-3); }
.wizard-error { font-size: 12.5px; color: var(--danger); margin-top: -4px; margin-bottom: var(--space-3); }
/* ─── حاويات Lottie لخطوات OTP (الجزء 11 — الحركة) — تستضيف إما رسم SVG
       متحرّك أو الأيقونة الثابتة البديلة عند تعطيل الحركة/فشل التحميل ─── */
.wizard-otp-visual, .wizard-2fa-visual { width: 100%; max-width: 200px; margin: 0 auto var(--space-4); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.wizard-otp-visual svg, .wizard-2fa-visual svg { width: 100%; height: 100%; }
.wizard-otp-visual [data-lottie-fallback], .wizard-2fa-visual [data-lottie-fallback] { width: 56px; height: 56px; border-radius: 50%; background: rgba(var(--primary-rgb),.1); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.wizard-otp-visual [data-lottie-fallback] svg, .wizard-2fa-visual [data-lottie-fallback] svg { width: 26px; height: 26px; }
/* حاوية Lottie لصفحة 404 — أكبر من دائرة الأيقونة القياسية لأنها المشهد
   الرئيسي في الصفحة، لا مجرد أيقونة مصاحبة */
.notfound-lottie { width: 220px; height: 220px; margin: 0 auto var(--space-4); display: flex; align-items: center; justify-content: center; }
.notfound-lottie svg { width: 100%; height: 100%; }
.notfound-lottie [data-lottie-fallback] { width: 64px; height: 64px; border-radius: 50%; background: rgba(var(--primary-rgb),.1); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.notfound-lottie [data-lottie-fallback] svg { width: 28px; height: 28px; }
@media (max-width: 480px) { .notfound-lottie { width: 170px; height: 170px; } }

.wizard-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wizard-choice-grid.cols-1 { grid-template-columns: 1fr; }
.wizard-choice { border: 1.5px solid var(--border); background: var(--surface-2); border-radius: var(--radius-lg); padding: 14px 10px; text-align: center; font-size: 13px; font-weight: 700; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.wizard-choice-icon { display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; color: var(--primary); }
.wizard-choice-icon svg { width: 24px; height: 24px; }
/* أيقونات توضيحية (صور PNG بدل SVG أحادي اللون) لخطوة اختيار وسيلة العمل —
   حجم أكبر يليق بتفاصيل الرسمة، بلا استدارة/قص حتى تظهر الخلفية الملوّنة
   الأصلية لكل صورة كاملة */
.wizard-choice-illustrated { padding-top: 12px; }
.wizard-choice-icon-img { width: 44px; height: 44px; margin-bottom: 8px; }
.wizard-choice-icon-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); display: block; }
.wizard-choice-company { display: flex; align-items: center; gap: 10px; text-align: start; padding: 12px 14px; }
.wizard-choice-company .wizard-choice-icon { margin: 0; flex-shrink: 0; }
.wizard-choice-company .wizard-choice-icon svg { width: 18px; height: 18px; }
.wizard-choice:hover { border-color: var(--primary); }
.wizard-choice.selected { border-color: var(--primary); background: rgba(var(--primary-rgb), .08); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); }
/* اختيار بعنوان+وصف (مسارات التقديم الثلاثة) — يعيد استخدام .wizard-choice-company (Flex+محاذاة يمين) بدل تكرار القواعد */
.wizard-choice-grid.cols-1 .wizard-choice:has(b) { display: flex; align-items: flex-start; gap: 10px; text-align: start; padding: 14px; }
.wizard-choice-grid.cols-1 .wizard-choice:has(b) .wizard-choice-icon { margin: 2px 0 0; flex-shrink: 0; }

.wizard-terms-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); margin-top: var(--space-3); cursor: pointer; }
.wizard-terms-check input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--primary); }
.wizard-terms-check a { color: var(--primary); font-weight: 700; }

.wizard-whatsapp-notice { display: flex; align-items: flex-start; gap: 8px; background: rgba(37, 211, 102, .08); border: 1px solid rgba(37, 211, 102, .25); border-radius: var(--radius-lg); padding: 10px 12px; font-size: 12.5px; color: var(--text-muted); margin-bottom: var(--space-4); }
.wizard-whatsapp-notice svg { width: 18px; height: 18px; flex-shrink: 0; color: #25D366; margin-top: 1px; }

.wizard-footer { padding: 0 var(--space-6) var(--space-6); display: flex; gap: 10px; margin-top: auto; }
.wizard-btn-back { flex: 0 0 auto; padding: 13px 18px; border-radius: var(--radius-lg); border: 1.5px solid var(--border); background: var(--surface); color: var(--text-muted); font-weight: 700; font-size: 14px; }
.wizard-btn-next { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: var(--radius-lg); background: var(--primary); color: #fff; font-weight: 800; font-size: 14.5px; box-shadow: 0 8px 20px rgba(var(--primary-rgb), .3); }
.wizard-btn-next:disabled { opacity: .5; cursor: not-allowed; }
.wizard-btn-next svg { width: 17px; height: 17px; }

.wizard-success { text-align: center; padding: var(--space-8) var(--space-6); }
.wizard-success-icon { width: 68px; height: 68px; border-radius: 50%; background: rgba(16,185,129,.12); color: #10B981; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); }
.wizard-success-icon svg { width: 34px; height: 34px; }
.wizard-success h3 { font-size: 19px; font-weight: 900; margin: 0 0 6px; }
.wizard-success p { font-size: 13.5px; color: var(--text-muted); margin: 0 0 var(--space-5); }

.wizard-blocked { text-align: center; padding: var(--space-8) var(--space-6); }
.wizard-blocked-icon { width: 60px; height: 60px; border-radius: 50%; background: rgba(239,68,68,.1); color: var(--danger); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); }
.wizard-blocked-icon svg { width: 28px; height: 28px; }

@media (max-width: 480px) { .wizard-card { max-width: 100%; } .wizard-choice-grid { grid-template-columns: 1fr 1fr; } }

/* ─── خطوة اختيار مركبة/منتج حقيقي (إيجار/تقسيط مباشر) ─── */
.wizard-vehicle-grid { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; margin-bottom: var(--space-3); }
.wizard-vehicle-card { border: 1.5px solid var(--border); background: var(--surface-2); border-radius: var(--radius-lg); padding: 10px; transition: border-color var(--dur-fast) var(--ease-out); }
.wizard-vehicle-card.selected { border-color: var(--primary); background: rgba(var(--primary-rgb), .08); }
.wizard-vehicle-top { display: flex; align-items: center; gap: 10px; }
.wizard-vehicle-top img, .wizard-vehicle-noimg { width: 52px; height: 52px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; }
.wizard-vehicle-noimg { display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text-faint); }
.wizard-vehicle-noimg svg { width: 24px; height: 24px; }
.wizard-vehicle-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wizard-vehicle-info b { font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-vehicle-info .num { font-size: 13px; color: var(--primary); font-weight: 800; }
.wizard-vehicle-actions { display: flex; gap: 8px; margin-top: 8px; }
.wizard-vehicle-details-btn, .wizard-vehicle-select-btn { flex: 1; padding: 8px 10px; border-radius: var(--radius-md); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.wizard-vehicle-select-btn svg { width: 13px; height: 13px; }
.wizard-vehicle-details-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
.wizard-vehicle-select-btn { background: var(--primary); color: #fff; border: none; }
.wizard-vehicle-detail-panel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.wizard-detail-rows { display: flex; flex-direction: column; gap: 4px; }
.wizard-detail-row { font-size: 12px; color: var(--text-muted); }
.wizard-detail-row b { color: var(--text); }

/* ─── خطوة اختيار الشركة/العرض الوظيفي الفعلي (رحلة تقديم الوظيفة عبر واتساب) ─── */
.wizard-company-card { border: 1.5px solid var(--border); background: var(--surface-2); border-radius: var(--radius-lg); padding: var(--space-3); margin-bottom: var(--space-3); }
.wizard-company-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.wizard-company-logo { width: 40px; height: 40px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; }
.wizard-company-logo-placeholder { display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text-faint); }
.wizard-company-logo-placeholder svg { width: 20px; height: 20px; }
.wizard-company-header b { font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.wizard-company-header b svg { width: 15px; height: 15px; color: var(--primary); }
.wizard-offer-grid { display: flex; flex-direction: column; gap: 8px; }
.wizard-offer-card { border: 1.5px solid var(--border); background: var(--surface); border-radius: var(--radius-md); padding: 10px; transition: border-color var(--dur-fast) var(--ease-out); }
.wizard-offer-card.selected { border-color: var(--primary); background: rgba(var(--primary-rgb), .08); }
.wizard-offer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.wizard-offer-top b { font-size: 13px; font-weight: 800; }
.wizard-offer-payout { font-size: 11px; color: var(--text-muted); background: var(--surface-2); padding: 2px 8px; border-radius: var(--radius-full); }
.wizard-offer-salary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.wizard-offer-salary span { font-size: 11.5px; color: var(--primary); font-weight: 700; background: rgba(var(--primary-rgb), .08); padding: 3px 8px; border-radius: var(--radius-md); }
.wizard-offer-benefits { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.wizard-offer-age { font-size: 11.5px; color: var(--text-faint); margin-bottom: 8px; }
.wizard-offer-card .wizard-vehicle-select-btn { width: 100%; padding: 9px 10px; }

/* ─── بطاقة "مقفلة" لمركبة/منتج مُختار مسبقًا (يصل المستخدم مباشرة من صفحة الموتوسيكل/المنتج) ─── */
.wizard-locked-card { position: relative; background: var(--surface); border: 1.5px solid var(--success); border-radius: 20px; padding: var(--space-4); max-width: 440px; width: 100%; margin-bottom: var(--space-3); box-shadow: var(--shadow-sm); }
.wizard-locked-badge { position: absolute; top: -11px; inset-inline-start: var(--space-4); display: inline-flex; align-items: center; gap: 4px; background: var(--success); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-full); }
.wizard-locked-badge svg { width: 12px; height: 12px; }
.wizard-locked-top { display: flex; align-items: center; gap: var(--space-3); }
.wizard-locked-top img, .wizard-locked-noimg { width: 64px; height: 64px; border-radius: var(--radius-lg); object-fit: cover; flex-shrink: 0; }
.wizard-locked-noimg { display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-faint); }
.wizard-locked-noimg svg { width: 26px; height: 26px; }
.wizard-locked-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wizard-locked-info > b { font-size: 11px; font-weight: 800; color: var(--text-muted); }
.wizard-locked-title { font-size: 14.5px; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-locked-price { font-size: 13px; color: var(--primary); font-weight: 800; }
.wizard-locked-owner { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }
.wizard-locked-owner svg { width: 13px; height: 13px; }
.wizard-legal-note { max-width: 440px; width: 100%; background: var(--danger-soft); border: 1px solid rgba(220,38,38,.2); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); font-size: 11.5px; line-height: 1.7; color: var(--text-muted); margin-bottom: var(--space-4); }
.wizard-legal-note b { color: var(--danger); }

/* ═══════════════════════════════════════════════════
   شريط ترحيب + شريط فلاتر (وظائف/شركات) — نفس أسلوب صفحة العروض بالموقع
   القديم: بطاقة ترحيب بيضاء، ثم شريط فلاتر شبه لاصق بفواصل عمودية.
═══════════════════════════════════════════════════ */
.welcome-banner { display: flex; align-items: center; gap: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-sm); margin-bottom: var(--space-6); flex-wrap: wrap; }
.welcome-banner-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); background: rgba(var(--primary-rgb), .1); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.welcome-banner-icon svg { width: 26px; height: 26px; }
.welcome-banner-text { flex: 1; min-width: 200px; }
.welcome-banner-text b { display: block; font-size: 17px; font-weight: 800; }
.welcome-banner-text span { font-size: 13px; color: var(--text-muted); }
.welcome-banner-stats { display: flex; align-items: stretch; gap: var(--space-3); flex-wrap: wrap; }
.welcome-banner-count { background: var(--surface-2); border-radius: var(--radius-lg); padding: 10px 20px; text-align: center; }
.welcome-banner-count .num { font-family: var(--font-num); font-size: 22px; font-weight: 900; color: var(--primary); }
.welcome-banner-count .label { font-size: 11px; color: var(--text-muted); font-weight: 700; }

.quick-chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-6); }

.discovery-section { margin-bottom: var(--space-7); }
.discovery-section-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; margin: 0 0 var(--space-4); }
.discovery-section-title svg { width: 20px; height: 20px; color: var(--primary); }

.featured-companies-strip { margin: var(--space-2) 0 var(--space-7); }
.featured-companies-row { display: flex; flex-wrap: wrap; gap: 10px; }
.featured-company-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: var(--radius-full); border: 1.5px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 700; color: var(--text); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.featured-company-chip:hover { border-color: var(--primary); transform: translateY(-1px); }
.featured-company-logo { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-faint); }
.featured-company-logo img { width: 100%; height: 100%; object-fit: cover; }
.featured-company-logo svg { width: 13px; height: 13px; }

.filter-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-6); position: sticky; top: 90px; z-index: 30; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base) var(--ease-out); }
.filter-toolbar-divider { width: 1px; align-self: stretch; background: var(--border); flex-shrink: 0; }
/* أزرار تبديل مباشرة (Pill Tabs) لنوع المركبة — بدل <select> منسدل، مطابقةً
   للتصميم المرجعي (الكل/موتوسيكل/عجلة كخيارات ظاهرة تُضغط مباشرة) */
.filter-pill-group { display: flex; gap: 6px; background: var(--surface-2); border-radius: var(--radius-lg); padding: 4px; }
.filter-pill { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 700; color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.filter-pill:hover { color: var(--text); }
.filter-pill.active { background: var(--text); color: var(--surface); }
@media (max-width: 700px) { .filter-pill-group { width: 100%; } .filter-pill { flex: 1; justify-content: center; } }
/* سهم SVG موحّد بدل سهم الـ<select> الافتراضي (يختلف بين المتصفحات
   وينكسر في RTL) — نفس تقنية select.form-control في لوحة الإدارة،
   مع حالتَي hover/focus لإحساس أكثر احترافية بدل select عادي جامد */
.filter-toolbar select {
  height: 42px; border-radius: var(--radius-lg); border: 1.5px solid var(--border);
  background-color: var(--surface-2); color: var(--text);
  padding-inline: 14px 36px; font-size: 13px; font-weight: 700; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 12px center; background-size: 14px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
[dir="ltr"] .filter-toolbar select { background-position: right 12px center; }
.filter-toolbar select:hover { border-color: var(--primary); background-color: var(--surface); }
.filter-toolbar select:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); }
.filter-toolbar .provider-cta-btn { margin-inline-start: auto; background: linear-gradient(90deg, #6366F1, #A855F7); color: #fff; font-weight: 800; font-size: 13px; padding: 10px 18px; border-radius: var(--radius-lg); white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.filter-toolbar .provider-cta-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
@media (max-width: 700px) { .filter-toolbar { position: static; } .filter-toolbar select { flex: 1; min-width: 130px; } .filter-toolbar .provider-cta-btn { margin-inline-start: 0; width: 100%; text-align: center; } }

/* شريط فلترة بالفئات (تصنيفات المنتجات) — أزرار Pill قابلة للطي أفقيًا
   على الموبايل، الفئة النشطة بلون العلامة التجارية بدل حدود رمادية باهتة */
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-full); border: 1.5px solid var(--border); background: var(--surface); font-size: 13.5px; font-weight: 700; color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.filter-chip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.filter-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(var(--primary-rgb), .3); }
@media (max-width: 700px) { .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .filter-bar::-webkit-scrollbar { display: none; } }

/* ─── بطاقة وظيفة Premium — الراتب هو نجم البطاقة (Salary Hero)، مع توهج
       Spotlight مشترك (.glow-card، نفس نظام بطاقات الصفحة الرئيسية) بدل
       الشريط العلوي القديم، ولوحة قابلة للطي بأسلوب grid-template-rows
       (أنعم من max-height لأنها لا تعتمد على ارتفاع أقصى تقديري ثابت). ─── */
.job-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); box-shadow: var(--shadow-xs); transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(0); transition: transform .15s var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.job-card-badge-float { position: absolute; top: -9px; inset-inline-start: var(--space-5); box-shadow: 0 2px 8px rgba(0,0,0,.12); z-index: 1; }
.job-card:hover { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-7px); box-shadow: var(--shadow-xl), 0 22px 48px -16px rgba(var(--glow-rgb, 249,115,22), .42); border-color: rgba(var(--glow-rgb, 249,115,22), .35); }
.job-card:hover .job-card-identity-arrow { transform: translateX(-3px); opacity: 1; }
@keyframes job-card-icon-bounce { 30% { transform: scale(1.25) rotate(-8deg); } 60% { transform: scale(.95) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .job-card, .job-card:hover { transform: none !important; transition: none; } }
@media (hover: none) { .job-card { transform: none !important; } }

/* شريط علوي ملوّن يشير للتفعيل السريع من أول نظرة (عامل تحويل حقيقي لعمال
   التوصيل) — إشارة بصرية فورية قبل حتى قراءة أي نص داخل البطاقة */
.job-card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; background: var(--border); opacity: .35; transition: opacity var(--dur-base) var(--ease-out); }
.job-card-urgent::before { background: var(--brand-gradient); opacity: 1; }

/* الهوية: كتلة واحدة موحّدة (شعار + اسم الشركة + توثيق + المنطقة/المركبة)
   بنمط avatar + سطرين، بدل ترويسة منفصلة عن صف الشركة — نفس منطق بطاقات
   مواقع التوظيف العالمية (الشركة أولًا لأنها العنصر الذي يبني الثقة فورًا،
   والمنطقة/المركبة كسطر ثانوي تحتها مباشرة بدل رأس منفصل). الكتلة كلها
   رابط واحد لصفحة الشركة — لا تعارض مع رابط "التفاصيل والتقديم" بالأسفل. */
.job-card-identity { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.job-card-logo { width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; border: 1px solid var(--border); color: var(--text-faint); transition: border-color var(--dur-fast) var(--ease-out); }
.job-card-logo svg { width: 20px; height: 20px; }
.job-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.job-card-identity:hover .job-card-logo { border-color: rgba(var(--primary-rgb), .4); }
.job-card-identity-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.job-card-company-name { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); }
.job-card-identity:hover .job-card-company-name { color: var(--primary); }
.job-card-verified { display: inline-flex; flex-shrink: 0; color: var(--info); }
.job-card-verified svg { width: 15px; height: 15px; }
.job-card-identity-sub { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-card-identity-sub svg { width: 13px; height: 13px; color: var(--text-faint); flex-shrink: 0; }
.job-card-identity-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.job-card-identity-arrow { flex-shrink: 0; opacity: .4; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); color: var(--text-faint); }
.job-card-identity-arrow svg { width: 16px; height: 16px; }

/* المزايا الفعلية المُدخَلة من لوحة التحكم (company_offers.benefits) — كانت
   مخزَّنة ولا تُعرض؛ أول ثلاث فقط لإبقاء البطاقة مختصرة (التفاصيل الكاملة
   في صفحة الوظيفة نفسها) */
.job-card-perks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.job-card-perk { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.job-card-perk svg { width: 13px; height: 13px; color: var(--success); flex-shrink: 0; }

/* شريحتا "منطقة" و"مركبة مطلوبة" الصغيرتان — لم تعودا تُستخدَمان داخل
   البطاقة نفسها (استبدلتهما الهوية الموحّدة أعلاه)، لكنهما ما زالتا
   مستخدَمتين فعليًا كشرائح على هيرو صفحة تفاصيل الوظيفة (job.php) وصف
   معلومات التواصل بصفحة الشركة (company.php: هاتف/إيميل/موقع) — تعريف
   أساسي مشترك بدل تكراره في كل صفحة. (ملاحظة: كانت هذه القاعدة الأساسية
   مفقودة فعليًا من هذا الملف رغم استخدام الكلاس حيًا — أُعيد تعريفها هنا). */
.job-card-region { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); color: var(--text-muted); font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: var(--radius-full); border: 1px solid var(--border); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.job-card-region svg { width: 13px; height: 13px; color: var(--text-faint); flex-shrink: 0; }
a.job-card-region:hover { color: var(--primary); border-color: rgba(var(--primary-rgb), .35); }
.job-card-vehicle-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); color: var(--text-muted); font-size: 10.5px; font-weight: 800; padding: 5px 9px; border-radius: var(--radius-full); border: 1px solid var(--border); flex-shrink: 0; white-space: nowrap; }
.job-card-vehicle-badge svg { width: 12px; height: 12px; color: var(--primary); display: inline-block; }

/* عنوان الوظيفة — بارز ومتمركز، أول عنصر نصّي يقرأه الزائر بعد الهوية */
.job-card-title { margin: 0; font-size: 16px; font-weight: 900; color: var(--text); text-align: center; line-height: 1.35; }

/* صف معلومات سريعة: الشركة / المنطقة / مدة الوردية — أيقونة + نص لكل عنصر */
.job-card-quickinfo { display: flex; align-items: center; justify-content: center; gap: 4px 12px; flex-wrap: wrap; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.job-card-quickinfo-item { display: inline-flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.job-card-quickinfo-item svg { width: 13px; height: 13px; color: var(--text-faint); flex-shrink: 0; }

/* الراتب — أكبر عنصر بصريًا في البطاقة عمدًا (إبراز الراتب)، مع توهّج
   زخرفي خافت خلف الأرقام لعمق إضافي بدون تشتيت الانتباه عن الرقم نفسه.
   صندوقان منفصلان بصريًا (موتوسيكل/عجلة) بدل رقمين متجاورين — كل صندوق
   يحمل تفصيلتيه الخاصتين (راتب الوردية + سعر الأوردر) بدل سطر عام واحد
   أسفل الصندوقين معًا. */
.job-card-income-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--brand-gradient-soft); border: 1px solid rgba(var(--primary-rgb), .14); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.job-card-salary-glow { position: absolute; top: -40%; left: 50%; translate: -50% 0; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--primary-rgb), .3), transparent 70%); z-index: 0; pointer-events: none; }
.job-card-income-hero > *:not(.job-card-salary-glow) { position: relative; z-index: 1; }
.job-card-income-label { display: inline-flex; font-size: 11px; font-weight: 800; color: var(--primary); background: var(--surface); padding: 3px 11px; border-radius: var(--radius-full); box-shadow: var(--shadow-xs); }
.job-card-income-desc { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); line-height: var(--leading-normal); white-space: pre-line; }
.job-card-income-desc-empty { font-weight: 600; color: var(--text-faint); font-size: 12.5px; }

.job-card-meta-row { display: flex; gap: 8px; flex-wrap: wrap; }
.job-card-chip { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--surface-2); border-radius: var(--radius-md); padding: 7px 11px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); flex: 1; min-width: 120px; }
.job-card-chip svg { width: 13px; height: 13px; color: var(--text-faint); flex-shrink: 0; }
/* سرعة التفعيل عامل تحويل حقيقي — تُبرَز بلون النجاح بدل الرمادي المحايد */
.job-card-chip-accent { background: var(--success-soft, rgba(16,185,129,.12)); color: var(--success); }
.job-card-chip-accent svg { color: var(--success); }

/* جدول الشفتات القابل للطي — يُفتَح من زر "تفاصيل أخرى" أسفل البطاقة */
.job-card-shifts-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.job-card-shifts.open .job-card-shifts-panel { grid-template-rows: 1fr; }
.job-card-shifts-panel-inner { overflow: hidden; min-height: 0; }
.job-card-shift-durations { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.job-card-shift-duration-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); border-radius: var(--radius-full); padding: 5px 12px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.job-card-shift-duration-chip svg { width: 12px; height: 12px; color: var(--text-faint); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .job-card-shifts-panel { transition: none; } }

.job-card-cta-row { margin-top: auto; display: flex; align-items: stretch; gap: 8px; }
.job-card-cta { position: relative; overflow: hidden; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand-gradient); color: #fff; padding: 13px 16px; border-radius: var(--radius-lg); font-weight: 800; font-size: 14px; box-shadow: var(--shadow-brand); transition: filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.job-card-cta::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: -30%; width: 40%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg) translateX(-40%); transition: transform .55s ease; pointer-events: none; }
.job-card-cta:hover::before { transform: skewX(-20deg) translateX(340%); }
.job-card-cta:hover { filter: brightness(1.07); box-shadow: var(--shadow-md), var(--shadow-brand); }
.job-card-cta:active { transform: scale(.98); }
.job-card-cta svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); position: relative; z-index: 1; }
.job-card-cta span { position: relative; z-index: 1; }
.job-card:hover .job-card-cta svg { transform: translateX(-4px); }
@media (prefers-reduced-motion: reduce) { .job-card-cta::before { transition: none; display: none; } }
.job-card-more-btn { flex-shrink: 0; display: flex; align-items: center; gap: 5px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); padding: 0 14px; border-radius: var(--radius-lg); font-size: 12px; font-weight: 700; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.job-card-more-btn:hover { background: var(--surface-3, var(--surface-2)); color: var(--text); }
.job-card-more-btn svg { width: 13px; height: 13px; transition: transform var(--dur-base) var(--ease-spring); }
.job-card-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ─── صفحة تفاصيل الوظيفة — عمودان (محتوى رئيسي + نموذج التقديم مضمَّن
       ومثبَّت) بدل عمود واحد ضيق طويل — طلب صريح: نموذج التقديم يظهر جنب
       تفاصيل الوظيفة في نفس الشاشة بدل الانتقال لصفحة منفصلة، مطابقةً
       للمرجع المرفق. العمود الجانبي أُوسِّع من 320px إلى 400px لاستيعاب
       الويزارد كاملاً (نفس max-width:460px المستخدَم في /apply المستقلة،
       لكن هنا بعرض عمود لا صفحة). ─── */
.job-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-6); align-items: start; }
.job-detail-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
@media (max-width: 980px) {
  /* minmax(0, ...) وليس 1fr وحدها: بدونها لا يسمح المسار بالانكماش أقل من
     عرض محتواه الأدنى (كجدول الرواتب)، فيتمدد الشبكة والصفحة كلها أفقيًا
     بدل أن يظهر تمرير أفقي داخلي محصور فقط داخل .table-wrap نفسه. */
  .job-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .job-detail-cols { grid-template-columns: minmax(0, 1fr); }
  .job-detail-side .job-detail-apply-panel { position: static !important; }
}
/* البطاقة الخاصة بالويزارد (wizard-card) لها بالفعل هيدر متدرّج وظل خاص
   بها — تغليفها في .card بيضاء تقليدية كان يعطي صندوقًا داخل صندوق. هنا
   بنسيب wizard-card تقف بنفسها كعنصر بصري واحد فوق توهّج خفيف من لون
   البراند بدل صندوق أبيض جامد، مع تسمية صغيرة (eyebrow) بلا حدود فوقها. */
.job-detail-apply-panel { position: sticky; top: 100px; }
.job-detail-apply-panel::before {
  content: ''; position: absolute; inset: -24px -16px auto -16px; height: 220px;
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%);
  pointer-events: none; z-index: -1;
}
.job-detail-apply-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-3) 2px; font-size: 13px; font-weight: 800; color: var(--primary); letter-spacing: .2px; }
.job-detail-apply-eyebrow svg { width: 16px; height: 16px; }
.job-detail-apply-panel .wizard-card { max-width: none; box-shadow: var(--shadow-xl), 0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent); }
.job-sidebar-cta-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: var(--space-4) 0 0; padding: 10px 14px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); font-size: 12.5px; font-weight: 700; }
.job-sidebar-cta-note svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 980px) { .job-detail-apply-panel { position: static; } }

/* ─── هيرو صفحة تفاصيل الوظيفة — لمحة راتب فورية قبل التمرير ─── */
.job-hero { background: var(--brand-gradient); border-radius: var(--radius-2xl); padding: var(--space-6); color: #fff; margin-bottom: var(--space-6); }
.job-hero-back { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 700; text-decoration: none; margin-bottom: var(--space-5); transition: color var(--dur-fast) var(--ease-out); }
.job-hero-back:hover { color: #fff; }
.job-hero-back svg { width: 15px; height: 15px; }
.job-hero-row { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.job-hero-logo { width: 68px; height: 68px; border-radius: var(--radius-xl); background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.job-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.job-hero-info { flex: 1; min-width: 220px; }
.job-hero-info h1 { margin: 0 0 6px; font-size: var(--text-xl); font-weight: 800; }
.job-hero-company { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.9); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.job-hero-company svg { width: 14px; height: 14px; }
.job-hero-company:hover { color: #fff; text-decoration: underline; }
.job-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--space-3); }
.job-hero-chips .job-card-region { background: rgba(255,255,255,.16); color: #fff; }
.job-hero-chips .job-card-vehicle-badge { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3); }
.job-hero-chips .job-card-vehicle-badge svg { color: #fff; }
.job-hero-salary { background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); text-align: center; flex-shrink: 0; }
.job-hero-salary-label { font-size: 11.5px; font-weight: 800; color: rgba(255,255,255,.85); margin-bottom: 6px; }
.job-hero-salary-figures { display: flex; align-items: center; gap: var(--space-4); }
.job-hero-salary-figure { display: flex; align-items: center; gap: 6px; color: #fff; }
.job-hero-salary-figure svg { width: 18px; height: 18px; }
.job-hero-salary-figure b { font-size: 22px; font-weight: 900; }
.job-hero-salary-figure small { font-size: 11px; font-weight: 700; opacity: .85; }
.job-hero-salary-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,.3); }
@media (max-width: 700px) { .job-hero-row { flex-direction: column; align-items: stretch; } .job-hero-salary { width: 100%; } }

/* ─── رأس صفحة التفاصيل — بطاقة بيضاء (بديل .job-hero الداكن)، مطابقة
       لمرجع التصميم: شارات أعلى (توثيق/تاريخ النشر)، شعار كبير، عنوان بارز،
       صف إحصائيات سريعة حقيقية (عدد المتقدّمين الفعلي، نوع الراتب،
       المنطقة، الفئة العمرية) ─── */
.job-detail-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: var(--space-6); margin-bottom: var(--space-6); box-shadow: var(--shadow-xs); }
.job-detail-header-badges { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-5); }
.job-detail-header-row { display: flex; align-items: flex-start; gap: var(--space-5); flex-wrap: wrap; }
.job-detail-logo { width: 72px; height: 72px; border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; color: var(--text-faint); }
.job-detail-logo img { width: 100%; height: 100%; object-fit: cover; }
.job-detail-logo svg { width: 30px; height: 30px; }
.job-detail-title-block { flex: 1; min-width: 240px; }
.job-detail-title-block h1 { margin: 0 0 8px; font-size: var(--text-xl); font-weight: 900; }
.job-detail-company-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.job-detail-company-link:hover { color: var(--primary); }
.job-detail-company-link svg { width: 15px; height: 15px; }
.job-detail-company-link .job-card-verified { color: var(--info); display: inline-flex; }
.job-detail-company-link .job-card-verified svg { width: 15px; height: 15px; }
.job-detail-quickstats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-4); }
.job-detail-quickstat { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: var(--radius-full); padding: 6px 14px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.job-detail-quickstat svg { width: 14px; height: 14px; color: var(--text-faint); flex-shrink: 0; }

/* ─── صندوق نظام الدخل — صفحة التفاصيل، نسخة أكبر من job-card-income-hero
       المستخدَمة في البطاقة المدمَجة (نفس الفكرة: شارة نوع الدخل + نص حر
       يُعرض حرفيًا بلا أي حساب أو معادلة) ─── */
.job-detail-income-hero { position: relative; background: var(--brand-gradient-soft); border: 1px solid rgba(var(--primary-rgb), .14); border-radius: var(--radius-xl); padding: var(--space-6); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.job-detail-income-hero .job-card-income-desc { font-size: 16px; }

/* ─── بطاقتا "موعد الاستلام" و"نظام الصرف" — معلومتان أُبرِزتا بلون مستقل
       عن بعضهما، بدل صف نصي محايد ─── */
.job-info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin: var(--space-6) 0; }
.job-info-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); }
.job-info-card.accent-orange { background: var(--warning-soft); }
.job-info-card.accent-yellow { background: var(--phase-onboarding-soft, var(--warning-soft)); }
.job-info-card-label { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 3px; }
.job-info-card-value { font-size: 15px; font-weight: 800; color: var(--text); }
.job-info-card-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--warning); flex-shrink: 0; box-shadow: var(--shadow-xs); }
.job-info-card-icon svg { width: 19px; height: 19px; }

/* ─── "المميزات والشروط" — بطاقات ملوّنة صغيرة بدل صف نصوص، لكل مواصفة
       ثابتة (المركبة/السن/الاستلام) لون مستقل يسهّل المسح البصري السريع ─── */
.job-condition-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.job-condition-card { border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); }
.job-condition-card.tone-purple { background: var(--brand-gradient-soft); }
.job-condition-card.tone-blue { background: var(--info-soft); }
.job-condition-card.tone-green { background: var(--success-soft); }
.job-condition-card-top { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; }
.job-condition-card-top svg { width: 15px; height: 15px; }
.job-condition-card-value { font-size: 15px; font-weight: 800; color: var(--text); }

/* ─── رأس قسم موحّد داخل صفحة تفاصيل الوظيفة ─── */
.job-section-head { display: flex; align-items: center; gap: 10px; margin: var(--space-6) 0 var(--space-4); }
.job-section-head:first-child { margin-top: 0; }
.job-section-head-icon { width: 34px; height: 34px; border-radius: var(--radius-md); background: rgba(var(--primary-rgb), .1); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.job-section-head-icon svg { width: 18px; height: 18px; }
.job-section-head h3 { margin: 0; font-size: var(--text-md); font-weight: 800; }

/* ─── بطاقات الراتب حسب الشفت — بديل عن الجدول المسطّح ─── */
.salary-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.salary-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.salary-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.salary-card-duration { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); background: var(--surface); border-radius: var(--radius-full); padding: 4px 10px; margin-bottom: var(--space-3); }
.salary-card-duration svg { width: 12px; height: 12px; }
.salary-card-figures { display: flex; flex-direction: column; gap: 8px; }
.salary-card-figure { display: flex; align-items: center; justify-content: center; gap: 6px; }
.salary-card-figure svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }
.salary-card-figure b { font-size: 18px; font-weight: 900; color: var(--text); }
.salary-card-figure small { font-size: 11px; color: var(--text-muted); font-weight: 700; }

/* ─── صفحة المنطقة/المدينة ─── */
.city-breadcrumb { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; color: #fff; opacity: .9; margin-bottom: var(--space-4); }
.city-breadcrumb a { color: inherit; text-decoration: none; }
.city-breadcrumb a:hover { text-decoration: underline; }
.city-breadcrumb svg { width: 12px; height: 12px; }
.city-breadcrumb span { color: #fff; opacity: 1; }
.city-intro { max-width: 780px; color: var(--text-muted); font-size: 14px; line-height: var(--leading-normal); margin: 0 0 var(--space-6); }
.city-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-8); }
.city-stat-card { padding: var(--space-4); }
.city-stat-icon { width: 40px; height: 40px; border-radius: var(--radius-md); }
.city-stat-icon svg { width: 19px; height: 19px; }
.city-stat-card .val { font-size: 19px; font-weight: 900; color: var(--text); line-height: 1.2; }
.city-stat-card .label { font-size: 11px; color: var(--text-muted); font-weight: 700; margin-top: 2px; }

/* ─── شرائح الشركات النشطة ─── */
.city-companies-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.city-company-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 8px 16px 8px 8px; font-size: 13px; font-weight: 700; color: var(--text); text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.city-company-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); color: var(--primary); }
.city-company-chip-logo { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; color: var(--text-faint); }
.city-company-chip-logo img { width: 100%; height: 100%; object-fit: cover; }
.city-company-chip-logo svg { width: 14px; height: 14px; }

/* ─── مزايا إضافية + شروط خاصة ─── */
.benefit-chip-grid { display: flex; flex-direction: column; gap: 8px; }
.benefit-chip { display: flex; align-items: flex-start; gap: 10px; background: var(--surface-2); border-radius: var(--radius-md); padding: 10px 14px; font-size: 13.5px; color: var(--text); transition: background var(--dur-fast) var(--ease-out); }
.benefit-chip:hover { background: var(--surface-hover); }
.benefit-chip-icon { width: 20px; height: 20px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.benefit-chip-icon svg { width: 12px; height: 12px; }
.job-note { display: flex; gap: 10px; background: var(--warning-soft); border: 1px solid var(--warning-soft); border-inline-start: 3px solid var(--warning); border-radius: var(--radius-md); padding: var(--space-4); }
.job-note svg { width: 18px; height: 18px; color: var(--warning); flex-shrink: 0; margin-top: 1px; }
.job-note p { margin: 0; color: var(--text); font-size: 13.5px; line-height: var(--leading-normal); }

/* ─── الشريط الجانبي — لوحة مواصفات + CTA ─── */
.job-sidebar-badge { background: var(--brand-gradient-soft); color: var(--primary); border-radius: var(--radius-md); padding: 10px 14px; font-size: 13px; font-weight: 800; text-align: center; }
.job-spec-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.job-spec-row { display: flex; align-items: center; gap: 10px; }
.job-spec-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.job-spec-icon svg { width: 17px; height: 17px; }
.job-spec-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.job-spec-label { font-size: 11px; color: var(--text-faint); font-weight: 700; }
.job-spec-value { font-size: 13.5px; font-weight: 800; color: var(--text); }
.job-sidebar-cta { width: 100%; margin-top: var(--space-6); }
.job-sidebar-cta-note { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; color: var(--text-faint); margin-top: var(--space-3); text-align: center; }
.job-sidebar-cta-note svg { width: 13px; height: 13px; color: var(--success); }

/* ─── شريط ثقة سريع أسفل الهيرو — يعزّز إحساس "صفحة هبوط" مكتملة ─── */
.job-trust-strip { display: flex; align-items: center; justify-content: center; gap: var(--space-6); flex-wrap: wrap; margin: var(--space-5) 0 var(--space-8); padding: var(--space-3) var(--space-4); }
.job-trust-strip span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.job-trust-strip svg { width: 15px; height: 15px; color: var(--success); flex-shrink: 0; }

/* ─── شريط CTA ثابت أسفل الشاشة على الموبوايل فقط — الشريط الجانبي
   اللاصق (position: sticky) يتحوّل إلى static على الشاشات الضيقة، فيفقد
   المستخدم إمكانية التقديم السريع أثناء التمرير الطويل بدون هذا البديل ─── */
.job-mobile-cta-bar { display: none; }
@media (max-width: 900px) {
  .job-mobile-cta-bar { display: flex; align-items: center; gap: var(--space-4); position: fixed; bottom: 0; inset-inline: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--border); padding: var(--space-3) var(--space-4); box-shadow: 0 -8px 24px rgba(0,0,0,.08); padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); }
  .job-mobile-cta-bar .job-card-cta { flex-shrink: 0; margin-top: 0; padding: 12px 20px; }
  .job-mobile-cta-info { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1; }
  .job-mobile-cta-label { font-size: 13.5px; font-weight: 800; color: var(--primary); }
  .job-detail-grid { padding-bottom: 76px; }
}

/* ─── تذييل SEO — أعمدة روابط ─── */
.seo-links-grid { max-width: 900px; margin: var(--space-10) auto 0; padding-top: var(--space-8); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 700px) { .seo-links-grid { grid-template-columns: 1fr; } }
.seo-links-col h4 { font-size: 13px; font-weight: 800; margin: 0 0 var(--space-3); color: var(--text); }
.seo-links-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.seo-links-col a { font-size: 12.5px; color: var(--text-muted); }
.seo-links-col a:hover { color: var(--primary); }

/* ─── شارات إحصائية في الهيرو (شركات/عروض...) ─── */
.hero-stat-pills { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }
.hero-stat-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.hero-stat-pill svg { width: 15px; height: 15px; }

/* ─── بطاقة شركة (دائرية الطابع) — الجزء الثاني: أكبر وأوضح (شعار/خط/
       تباعد أكبر) بناءً على طلب صريح، مع حلقة توهج خلف الشعار عند hover
       بدل تكبير مسطّح فقط. ─── */
/* ─── بطاقة الشركة — إعادة بناء كاملة (نمط "بروفايل شركة" — غلاف علوي +
       شعار دائري متراكب فوقه، كما في LinkedIn/Wellfound، بدل تخطيط قديم
       متمركز بالكامل بلا صورة غلاف). محاذاة يمين/يسار بدل التوسيط الكامل —
       أسهل قراءة لاسم طويل ووصف الشركة معًا، وتُبرِز الوصف الفعلي
       (companies.description) الذي كان مخزَّنًا ولا يُعرض إطلاقًا. ─── */
.company-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card-xl); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.company-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), 0 16px 34px -16px rgba(var(--primary-rgb), .3); border-color: rgba(var(--primary-rgb), .3); }
.company-card-cover { height: 76px; background: var(--brand-gradient-soft); position: relative; overflow: hidden; flex-shrink: 0; }
.company-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.company-card-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.08)); }
.company-card-body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 0 var(--space-5) var(--space-5); }
.company-card-logo { position: relative; width: 64px; height: 64px; margin-top: -32px; border-radius: var(--radius-xl); background: var(--surface-2); border: 3px solid var(--surface); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--text-faint); transition: box-shadow var(--dur-base) var(--ease-out); }
.company-card-logo svg { width: 26px; height: 26px; }
.company-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.company-card:hover .company-card-logo { box-shadow: 0 0 0 5px rgba(var(--primary-rgb), .12), var(--shadow-sm); }
.company-card-name { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 16px; margin-top: var(--space-3); }
.company-card-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.company-card-desc { margin: 6px 0 var(--space-4); font-size: 12.5px; line-height: 1.6; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: calc(12.5px * 1.6 * 2); }
.company-card-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4); }
.company-card-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; padding: 5px 13px; border-radius: 999px; background: rgba(var(--primary-rgb), .1); color: var(--primary); }
.company-card-badge svg { width: 13px; height: 13px; }
.company-card-badge-direct { background: var(--success-soft, rgba(16,185,129,.12)); color: var(--success); }
.company-card-footer-btn { margin-top: auto; background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 13.5px; padding: 11px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; gap: 6px; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.company-card-footer-btn svg { transition: transform var(--dur-fast) var(--ease-out); }
.company-card:hover .company-card-footer-btn { background: var(--secondary); color: #fff; }
.company-card:hover .company-card-footer-btn svg { transform: translateX(-4px); }
@media (prefers-reduced-motion: reduce) { .company-card, .company-card:hover { transform: none !important; } }

/* ─── دليل "إزاي تختار" ─── */
.guide-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card-lg); padding: var(--space-8); max-width: 780px; margin: 0 auto; }
.guide-card h2 { font-size: var(--text-xl); font-weight: 900; margin: 0 0 var(--space-3); }
.guide-card ol { margin: var(--space-4) 0 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--text-muted); font-size: 14px; line-height: 1.7; }

/* ─── أكورديون الأسئلة الشائعة + بحث ─── */
.faq-search-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.faq-search-box { position: relative; min-width: 260px; }
.faq-search-box svg { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-faint); }
.faq-search-box input { width: 100%; height: 42px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-2); padding-inline-start: 40px; padding-inline-end: 14px; font-size: 13.5px; }
.faq-search-box input:focus { border-color: var(--primary); outline: none; }

/* ─── هيرو الإيجارات — لون مستقل (أخضر زمردي) عن هوية البراند الأساسية،
       نفس أسلوب الموقع القديم لتمييز قسم الإيجارات بصريًا ─── */
.page-hero.theme-emerald { background: linear-gradient(135deg, #064e3b 0%, #059669 50%, #1e293b 100%); }
.page-hero.theme-emerald .hero-stat-pill { background: rgba(255,255,255,.12); }

/* ─── بطاقة موتوسيكل للإيجار — مكوّن مستقل بالكامل (الجزء الثاني: لم يعد
       يعتمد على .public-card كقالب مشترك، بنفس فلسفة .product-card أعلاه)،
       بهوية لونية خضراء مميّزة (نفس أخضر قسم الإيجار في باقي الموقع)،
       صورة أكبر، وسعر بارز جدًا كعنصر الجذب الأول في البطاقة. ─── */
.rental-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card-lg); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.rental-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), 0 16px 34px -16px rgba(5,150,105,.35); border-color: rgba(5,150,105,.4); }
.rental-card-link { display: block; text-decoration: none; color: inherit; }
.rental-ribbon { position: absolute; top: 14px; inset-inline-end: -6px; z-index: 5; background: #059669; color: #fff; padding: 6px 14px 6px 10px; border-radius: 10px 0 0 10px; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; gap: 5px; box-shadow: 0 4px 12px rgba(5,150,105,.4); }
.rental-ribbon svg { width: 13px; height: 13px; }
.rental-discount-flag { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 5; background: var(--danger); color: #fff; padding: 5px 11px; border-radius: var(--radius-full); font-size: 11px; font-weight: 800; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
/* المسار 6 — شارة إلزامية غير قابلة للإخفاء لأي بطاقة إعلان مموَّل (راجع
   MotorcycleService::publicList). نفس زاوية شارة الخصم (أعلى يسار)؛ عند
   اجتماعهما تنزل شارة الإعلان بمعدّل .has-discount حتى لا تتراكبا. */
.rental-promoted-flag { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 5; background: linear-gradient(135deg, #A855F7, #7C3AED); color: #fff; padding: 5px 12px; border-radius: var(--radius-full); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 4px 14px rgba(124,58,237,.4); overflow: hidden; }
.rental-promoted-flag.has-discount { top: 50px; }
.rental-promoted-flag svg { width: 12px; height: 12px; position: relative; z-index: 1; }
.rental-promoted-flag span { position: relative; z-index: 1; }
.rental-promoted-flag::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); background-size: 220% 100%; animation: promotedShine 2.6s ease-in-out infinite; }
@keyframes promotedShine { 0% { background-position: 140% 0; } 60%, 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .rental-promoted-flag::after { animation: none; } }

/* ─── بطاقة إعلان مموَّل في محفظة مزوّد الخدمة ─── */
.promoted-listing-card { padding: 12px; margin-top: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color var(--dur-base) var(--ease-out); }
.promoted-listing-card:hover { border-color: rgba(124,58,237,.35); }
.promoted-listing-head { display: flex; align-items: center; gap: 10px; }
.promoted-listing-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #A855F7, #7C3AED); color: #fff; }
.promoted-listing-icon svg { width: 15px; height: 15px; }
.promoted-listing-views { margin-top: 10px; }
.promoted-listing-views-bar { height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
.promoted-listing-views-bar > div { height: 100%; background: linear-gradient(90deg, #A855F7, #7C3AED); border-radius: 999px; transition: width var(--dur-slow) var(--ease-out); }
.promoted-listing-views > span { display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-muted); }
.rental-card-media { aspect-ratio: 4/3; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-faint); overflow: hidden; }
.rental-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.rental-card:hover .rental-card-media img { transform: scale(1.06); }
.rental-card-media svg { width: 44px; height: 44px; }
@media (prefers-reduced-motion: reduce) { .rental-card, .rental-card-media img { transition: none; } .rental-card:hover .rental-card-media img { transform: none; } }
.rental-card-body { padding: var(--space-5) var(--space-5) var(--space-2); }
.rental-card-title { font-weight: 800; font-size: var(--text-md); margin-bottom: 6px; }
.rental-card-specs { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: var(--space-2); }
.rental-card-spec { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.rental-card-spec svg { width: 12px; height: 12px; color: #059669; flex-shrink: 0; }
.rental-card-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rental-card-price { font-size: 21px; font-weight: 900; color: #059669; }
.rental-card-price-unit { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.rental-card-terms { display: flex; align-items: flex-start; gap: 5px; margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }
.rental-card-terms svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 2px; }
.rental-card-footer { padding: var(--space-2) var(--space-5) var(--space-5); margin-top: auto; }
.rental-card-cta { display: flex; align-items: center; justify-content: space-between; background: #059669; color: #fff; padding: 12px 16px; border-radius: var(--radius-lg); font-weight: 800; font-size: 13.5px; text-decoration: none; }
.rental-card-cta svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.rental-card:hover .rental-card-cta svg { transform: translateX(-4px); }
.rental-provider-row { margin: 0 var(--space-5) var(--space-3); padding: var(--space-3); background: var(--surface-alt, rgba(5,150,105,.06)); border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.rental-provider-name { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.rental-provider-name svg { width: 14px; height: 14px; color: #059669; flex-shrink: 0; }
.rental-provider-call { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: #059669; text-decoration: none; background: #fff; border: 1px solid #05966933; padding: 6px 10px; border-radius: 999px; transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.rental-provider-call:hover { background: #05966912; transform: translateY(-1px); }
.rental-provider-call svg { width: 13px; height: 13px; }
[data-theme="dark"] .rental-provider-call { background: rgba(255,255,255,.04); }

/* ─── تبديل طريقة العرض (تفصيلي/مختصر) — وحدة الوظائف الإدارية ─── */
.aj-view-toggle { display: inline-flex; gap: 4px; background: var(--surface-2); border-radius: var(--radius-lg); padding: 4px; margin-bottom: var(--space-5); }
.aj-view-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 700; color: var(--text-muted); border: none; background: transparent; }
.aj-view-btn svg { width: 15px; height: 15px; }
.aj-view-btn.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-xs); }
.public-grid.aj-compact .aj-detail-only { display: none; }

/* ─── وحدة الوظائف الإدارية — الجزء الثاني: أكبر وأوضح (تباعد/خط أكبر) ─── */
.admin-job-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card-md); padding: var(--space-7); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-4); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.admin-job-card::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 4px; background: linear-gradient(90deg, var(--primary), #A855F7); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-base) var(--ease-out); }
.admin-job-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.admin-job-card:hover::before { transform: scaleX(1); }
.admin-job-card-title {
  font-weight: 800; font-size: 19px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.admin-job-card-dept { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--primary); background: rgba(var(--primary-rgb), .1); border-radius: var(--radius-full); padding: 4px 11px; margin-top: 6px; width: fit-content; }
.admin-job-card-dept svg { width: 13px; height: 13px; }
.admin-job-card-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
.admin-job-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.admin-job-card-meta svg { width: 14px; height: 14px; }
.admin-job-card-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.admin-job-card-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-job-card-badge { background: var(--surface-2); border-radius: var(--radius-md); padding: 10px 12px; font-size: 12px; min-width: 0; }
.admin-job-card-badge span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-job-card-badge b { display: block; font-size: 14px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-job-card-docs { display: flex; align-items: flex-start; gap: 10px; background: var(--surface-2); border-radius: var(--radius-md); padding: 10px 12px; }
.admin-job-card-docs > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); margin-top: 2px; }
.admin-job-card-docs span { display: block; font-size: 11px; color: var(--text-muted); }
.admin-job-card-docs b { display: block; font-size: 12.5px; font-weight: 700; margin-top: 2px; line-height: 1.5; }
.admin-job-card-salary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: var(--space-4); margin-top: auto; border-top: 1px solid var(--border); }
.admin-job-card-salary .val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-job-card-salary .val { color: var(--primary); font-weight: 900; font-size: 18px; }
.admin-job-card-apply-btn { width: 100%; background: var(--primary); color: #fff; font-weight: 800; padding: 13px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.admin-job-card-apply-btn svg { transition: transform var(--dur-fast) var(--ease-out); }
.admin-job-card:hover .admin-job-card-apply-btn svg { transform: translateX(-4px); }

.public-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100; display: none; align-items: center; justify-content: center; padding: var(--space-4); }
.public-modal-overlay.open { display: flex; }
.public-modal-box { background: var(--surface); border-radius: 24px; max-width: 420px; width: 100%; padding: var(--space-6); position: relative; max-height: 90vh; overflow-y: auto; }
.public-modal-close { position: absolute; top: var(--space-4); left: var(--space-4); width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.public-modal-close svg { width: 16px; height: 16px; }