/* ⚠️ تنبيه دائم: أي تعديل بهذا الملف يتطلب رفع رقم الإصدار بوسم
   ?v=... في كل مكان يستدعيه (styles.css?v=... بالصفحات الـ14 الحقيقية
   + cms/api/builder.php) — وإلا يستمر متصفح كل زائر سابق بعرض النسخة
   القديمة المخزَّنة عنده مهما استُبدل الملف فعليًا على الخادم (نفس الرابط
   = نفس الكاش). حصل هذا فعليًا مرتين بهذا المشروع — لا تُهمَل مجددًا. */
:root{
  /* THE ONLY THREE SITE COLORS — قاعدة الألوان الثلاثة حصرية بلا استثناء:
     الأول #110A05 (إسبريسو — حبر الموقع واسوداد خلفيته في الداكن)،
     الثاني #DBE4FF (لؤلؤة — المربعات/الألواح في الفاتح والنصوص في الداكن)،
     الثالث #C5D8FF (سماوي مائل — الخلفية العامة في الفاتح والمربعات في الداكن)
     كل لون أو ظل في الموقع يُشتق حصريًا من هذه الثلاثة أو تفتيح/تعميق
     أحدهما — لا لون رابع ولا أي ظل (box-shadow) على المربعات إطلاقًا. */
  --espresso:#110A05;      /* اللون الأول — داكن */
  --pearl:#DBE4FF;         /* اللون الثاني — فاتح أوسط */
  --sky-sand:#C5D8FF;      /* اللون الثالث — فاتح / متوسط */
  /* light mode semantic tokens — مشتقة من الثلاثة فوق فقط */
  --sand:var(--pearl);
  --sand-strong:var(--espresso);
  --sand-light:var(--sky-sand);
  --sand-bg:rgba(17,10,5,.05);
  --ink:var(--espresso);
  --bg:var(--sky-sand);
  --ink-fixed:var(--espresso);  /* حبر توقيعي ثابت للشارات على الأسطح غير المنقلبة (لوحات الفوتر/الداكنة) */
  --paper:var(--pearl);
  --paper-2:rgba(17,10,5,.05);
  --text:var(--espresso);
  --body-text:var(--espresso);
  /* muted tones = espresso عند شفافية أقل — مقروءة فوق السماوي/اللؤلؤة */
  --muted:rgba(17,10,5,.72);
  --muted-2:rgba(17,10,5,.6);
  --card-border:rgba(17,10,5,.3);
  --line:rgba(17,10,5,.14);
  --line-strong:rgba(17,10,5,.28);
  /* fixed-dark tokens: used only by the deliberate dark anchor elements
     (header, hero panel, contact card, mobile nav, toast, lightbox) —
     these never flip, regardless of the site being light or dark mode */
  --dark:var(--espresso);
  --dark-2:rgba(35,21,14,.94);
  --dark-text:var(--pearl);
  --dark-body:rgba(219,228,255,.9);
  --dark-muted:rgba(219,228,255,.68);
  --dark-line:rgba(219,228,255,.14);
  --shadow: 0 20px 40px -10px rgba(35,21,14,.5), 0 8px 16px -6px rgba(35,21,14,.3);
  --shadow-sm: 0 10px 30px rgba(35,21,14,.09);
  --shadow-hover: 0 20px 40px rgba(35,21,14,.12);
  --radius-btn: 12px;
  --radius-card: 20px;
  --radius-img: 24px;
  --radius-input: 14px;
  --radius-lg: 24px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --container: 1140px;
  --font-heading-primary:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading-secondary:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-english:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* semantic status tokens — part of the Theme Variables system in the
     dashboard's Design Manager; within the two-color rule these all
     resolve to the two brand tones, and admins may still override them
     from the dashboard if a real status hue is ever required */
  --success:rgba(35,21,14,.85);
  --warning:rgba(35,21,14,.7);
  --danger:rgba(35,21,14,.9);
  --info:rgba(35,21,14,.65);
  /* card shadow system — dark shadows read fine on the light paper
     background, but the exact same shadow is nearly invisible once the
     card itself turns dark, so dark mode needs a different recipe
     (lighter, glow-based) to keep that same "lifted card" elegance */
  --card-shadow:0 10px 26px rgba(35,21,14,.09);
  --card-shadow-hover:0 20px 40px rgba(35,21,14,.15);
}

/* Dark mode — full-site inversion derived ONLY from the same two brand
   colors: espresso (#23150E) becomes the page paper, pearl (#DBE4FF) becomes
   the ink and linework. Every element already reads from these semantic
   tokens, so redefining them here turns the whole site dark in one place:
   dark background, light text, same identity. All flipped tokens AND the
   element overrides below use !important on purpose: the dashboard's
   "Design Manager" writes its light palette inline onto <html> and into a
   late-injected <style> sheet (theme.* / page.*.bg_color / section / card
   colors), which would silently beat any plain rule. Dark mode is a true
   skin — it reverses the light palette, it imports none of its values.
   قاعدة اللونين فقط: لا صبغة ثالثة — كل ظل هنا مشتق من اللؤلؤ/الإسبريسو. */
html.dark-mode{
  /* scene — dark paper everywhere, light ink (all !important to defeat the
     inline palette the dashboard injects onto :root) */
  --bg:var(--espresso) !important;
  --sand-light:rgba(219,228,255,.04) !important;
  --sand-bg:rgba(219,228,255,.05) !important;
  --ink:var(--pearl) !important;
  --paper:rgba(219,228,255,.045) !important;
  --paper-2:rgba(219,228,255,.06) !important;
  --text:var(--pearl) !important;
  --body-text:var(--pearl) !important;
  --muted:rgba(219,228,255,.72) !important;
  --muted-2:rgba(219,228,255,.62) !important;
  --card-border:rgba(219,228,255,.26) !important;
  --line:rgba(219,228,255,.14) !important;
  --line-strong:rgba(219,228,255,.3) !important;
  --success:rgba(219,228,255,.94) !important;
  --warning:rgba(219,228,255,.82) !important;
  --danger:rgba(219,228,255,.97) !important;
  --info:rgba(219,228,255,.74) !important;
  /* shadows — near-black paper needs a soft pearl glow instead of a dark cast */
  --card-shadow:0 10px 30px rgba(219,228,255,.05), 0 0 0 1px rgba(219,228,255,.05) !important;
  --card-shadow-hover:0 20px 48px rgba(219,228,255,.1), 0 0 0 1px rgba(219,228,255,.09) !important;
  --shadow:0 20px 46px rgba(0,0,0,.5), 0 8px 18px rgba(219,228,255,.04) !important;
  --shadow-sm:0 12px 32px rgba(0,0,0,.35) !important;
  --shadow-hover:0 20px 44px rgba(0,0,0,.45) !important;
}
/* Beat the Design-Manager palette: cms-connector.js injects a late <style>
   sheet with section[id]{background/color}, section[id] h1..h3, .eyebrow,
   p colors and CARD backgrounds (page.*.bg_color etc.). Each is mirrored
   here with !important so the forced "light-on-light" rules lose in dark
   mode. background-color (longhand) keeps any real background-IMAGE intact.
   :not(#__shiary_dark) is a specificity booster: it adds a (1,0,0) to our
   selectors so they ALSO beat the per-section text rules the dashboard
   injects with an ID selector + !important (e.g. #works h1) when dark mode
   is toggled mid-session — dark always wins, everywhere. */
html.dark-mode section[id]:not(#__shiary_dark){ background-color:var(--paper-2) !important; color:var(--body-text) !important; }
html.dark-mode section[id]:not(#__shiary_dark) h1,
html.dark-mode section[id]:not(#__shiary_dark) h2,
html.dark-mode section[id]:not(#__shiary_dark) h3{ color:var(--pearl) !important; }
html.dark-mode section[id]:not(#__shiary_dark) p:not(.eyebrow){ color:var(--body-text) !important; }
html.dark-mode section[id]:not(#__shiary_dark) .eyebrow{ color:var(--sand) !important; }
html.dark-mode .card,
html.dark-mode .service-card,
html.dark-mode .why-item,
html.dark-mode .work-card,
html.dark-mode .mv-card,
html.dark-mode .form-card,
html.dark-mode .contact-card-dark,
html.dark-mode .project-card,
html.dark-mode .story-quote,
html.dark-mode .about-plate,
html.dark-mode .about-stat-box{ background-color:var(--paper-2) !important; }
/* glass text panel on work cards flips to dark glass + pearl text */
html.dark-mode .work-card__content{ background:rgba(35,21,14,.72) !important; color:var(--pearl) !important; box-shadow:inset 0 1px 0 rgba(219,228,255,.14), 0 4px 14px rgba(0,0,0,.4); }
html.dark-mode .work-card h3{ color:var(--pearl) !important; }
html.dark-mode .work-card p{ color:var(--muted) !important; }
html.dark-mode .work-card__category{ background:rgba(219,228,255,.16) !important; color:var(--pearl) !important; }
/* engagement icons reverted to espresso — force them pearl on dark paper */
html.dark-mode .engagement-like{ color:var(--pearl) !important; }
html.dark-mode .engagement-like svg{ color:var(--pearl); }
html.dark-mode .engagement-share:hover{ color:var(--sand) !important; }
/* the two deliberate light chips inside the (now dark) CTA band keep their
   own solid light chip + dark label so they stay readable. */
html.dark-mode .cta-eyebrow,
html.dark-mode .cta-band .cta-btn,
html.dark-mode .cta-band .cta-btn--ghost{ color:#19100A !important; }
/* element fixes — the few spots that hardcode the old (light) ink inside
   the now-dark paper, so nothing fades into the new background. */
html.dark-mode .work-dot.is-active{ background:var(--sand); }
html.dark-mode .work-arrow:hover{ background:var(--sand); color:var(--ink-fixed); border-color:var(--sand); }
html.dark-mode .engagement-like:hover,
html.dark-mode .engagement-like.is-liked,
html.dark-mode .engagement-like.is-liked svg{ color:var(--sand); }
html.dark-mode .engagement-like.is-liked svg{ fill:var(--sand); stroke:var(--sand); }
html.dark-mode .review-stars{ color:var(--sand); }
html.dark-mode .cta-band-inner{ background:rgba(219,228,255,.07) !important; }
html.dark-mode .careers-culture-icon{ background:rgba(219,228,255,.08); color:var(--sand); border-color:rgba(219,228,255,.18); }
html.dark-mode .careers-culture-card:hover{ border-color:rgba(219,228,255,.4); }
html.dark-mode .careers-track-result-status{ background:rgba(219,228,255,.08); }
html.dark-mode .msg-thankyou-icon{ background:rgba(219,228,255,.14); color:var(--sand); }
html.dark-mode .fab-whatsapp{ background:var(--sand); color:var(--ink-fixed); }
html.dark-mode .fab-unread-badge{ background:var(--pearl); color:var(--espresso); border-color:var(--espresso); }
html.dark-mode .checkbox-field input{ accent-color:var(--sand); }
/* project-tracker.css (standalone tracker) — its few espresso-strong tokens
   would vanish on the new dark paper, so re-tint them to pearl. */
html.dark-mode .pt-order-number strong{ color:var(--sand); }
html.dark-mode .pt-update-client strong{ color:var(--sand); }
html.dark-mode .pt-progress-fill{ background:var(--sand); }
html.dark-mode .pt-step-done .pt-timeline-dot{ background:var(--sand); border-color:var(--sand); color:var(--ink-fixed); }
html.dark-mode .pt-step-done::before{ background:var(--sand); }
/* full-unified dark paper — no light islands: the accent chips (buttons,
   icon tiles, active pills, arrows) turn charcoal with pearl glyphs. */
html.dark-mode .btn-sand,
html.dark-mode .btn-sand-sm{ background:rgba(219,228,255,.13) !important; color:var(--pearl) !important; border-color:rgba(219,228,255,.32) !important; }
html.dark-mode .svc-icon,
html.dark-mode .mv-icon,
html.dark-mode .why-icon{ background:rgba(219,228,255,.1); color:var(--pearl); }
html.dark-mode .pill.is-active,
html.dark-mode .pill:hover,
html.dark-mode .carousel-arrow:hover{ background:rgba(219,228,255,.13); color:var(--pearl); border-color:rgba(219,228,255,.3); }
html.dark-mode .timeline-dot{ background:var(--espresso); border-color:var(--line-strong); box-shadow:0 0 0 2px var(--sand); }
html.dark-mode .process-card:hover{ border-color:var(--sand); }
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus{ border-color:var(--sand); }
/* footer — same unified dark paper (overrides the deliberately-light
   "signature shell" only in dark mode). */
html.dark-mode .site-footer{
  background:var(--espresso); color:var(--dark-body);
  border-top:1px solid var(--line);
}
html.dark-mode .site-footer .footer-col-center{ color:var(--dark-body); }
html.dark-mode .site-footer .footer-col-center span:not(.footer-tagline){ color:var(--dark-muted); }
html.dark-mode .site-footer .footer-careers-link{ color:var(--dark-body); border-color:rgba(219,228,255,.28); }
html.dark-mode .site-footer .footer-careers-link:hover{ background:rgba(219,228,255,.08); border-color:var(--sand); }
html.dark-mode .site-footer .footer-terms-link{ color:var(--dark-muted); }
html.dark-mode .site-footer .footer-terms-link:hover{ color:var(--sand); }
html.dark-mode .footer-logo-full{ filter:none; opacity:1; }

*{box-sizing:border-box}
/* English mode uses its own default font (Plus Jakarta Sans) unless the
   admin explicitly overrides it — kept separate from the Arabic font
   settings so switching site language never fights with Arabic typography
   choices, and vice versa. */
html.lang-en body{ font-family:var(--font-english); }
html.lang-en h1, html.lang-en h2, html.lang-en h3{ font-family:var(--font-english); }
/* عناصر التحكم/القائمة العائمة أعلى الشاشة ثابتة الموضع دائمًا (position:
   fixed) بارتفاع تقريبي ~90px — هامش تمرير يمنع أي قسم مُستهدَف (Anchor)
   من الاختباء خلفها عند التمرير السلس إليه من رابط بالقائمة. */
html{scroll-behavior:smooth; scroll-padding-top:100px;
  scrollbar-width:none; /* Firefox: إخفاء شريط التمرير مع الحفاظ على التمرير */
  -webkit-overflow-scrolling:touch; /* iOS: تمرير سلس */
}
html::-webkit-scrollbar{ display:none; } /* WebKit/Chrome/Safari/Edge */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg);
  background-attachment: fixed;
  color: var(--body-text);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing: antialiased;
}
/* خلفية الجوال: تعطيل background-attachment:fixed عليه (الخلفية مُسطّحة
   فلا أثر بصري، ويتجنّب حدوث تمزّق/وميض عرض على iOS وAndroid عند التمرير). */
@media (max-width:760px){
  body{ background-attachment:scroll; }
}
h1{ font-family:var(--font-heading-primary); }
h2, h3, h4, h5, h6{ font-family:var(--font-heading-secondary); }
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* Branded keyboard-focus ring for links/buttons/controls that don't
   already define their own focus style (form fields keep their existing
   box-shadow focus below — a plain :focus-visible here loses to their
   more specific input:focus/.client-input-wrap input:focus rules, so
   this only fills the gap for nav links, buttons, and the fab/toggles).
   :focus-visible (not :focus) so it only shows for keyboard navigation,
   never on a mouse/touch click. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--sand-strong);
  outline-offset:2px;
}
/* pill buttons already use border-radius:999px — modern browsers shape
   the outline to match it automatically, so no override needed here */
p{margin:0 0 1em}
h1,h2,h3{margin:0; line-height:1.28; letter-spacing:-0.01em; color:var(--text);}
button,input,select,textarea{font:inherit}

.container{ width:min(var(--container), calc(100% - 48px)); margin-inline:auto; }
.container.narrow{ max-width:640px; }
.contact-grid-2col{ display:flex; flex-direction:column; }
@media (min-width:900px){
  .container.contact-wide{ max-width:980px; }
  .contact-grid-2col{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
  .contact-grid-2col .form-card{ margin-bottom:0; }
}


/* ---------- Header (عناصر تحكم عائمة، بلا شريط علوي تقليدي) ---------- */
/* إزالة إجبارية للشريط العلوي التقليدي (Header أفقي بخلفية/حدود/ظل ثابتة)
   — بدلاً منه عنصرا Header نفسه أصبح غير مرئي كليًا (بلا خلفية ولا
   sticky)، ويحوي فقط زر فتح القائمة بالجوال (.menu-toggle، مخفي بسطح
   المكتب/التابلت — راجع .sidebar-nav أدناه). عناصر التحكم الثلاثة
   (اللغة/تسجيل الدخول/الوضع الداكن) أصبحت مجموعة عائمة مستقلة تمامًا
   (.floating-controls) أعلى يسار الشاشة، بلا علاقة بعنصر <header>. */
.site-header{ position:static; background:transparent; border:none; box-shadow:none; }

/* ثلاثة أزرار عائمة صغيرة أعلى يسار الشاشة: اللغة، تسجيل الدخول، الوضع
   الداكن — داكن شبه شفاف بلا ضبابية خلفية (طلب صريح: أزرار واضحة نظيفة)،
   يبقى مقروءًا فوق أي خلفية بكل صفحات الموقع. */
.floating-controls{
  position:fixed; top:28px; left:28px; z-index:80;
  display:flex; align-items:center; gap:8px;
}
.floating-btn{
  display:flex; align-items:center; justify-content:center; gap:5px;
  height:42px; padding:0 14px; border-radius:999px; min-width:42px;
  background:rgba(35,21,14,.5); border:1px solid rgba(219,228,255,.18);
  color:#DBE4FF; font-size:15px; cursor:pointer;
  transition:background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.floating-btn.is-icon-only{ width:42px; padding:0; }
.floating-btn:hover{
  background:rgba(219,228,255,.16); border-color:var(--sand); color:var(--sand);
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(35,21,14,.28);
}
.floating-btn:active{ transform:translateY(0) scale(.96); }

/* زر فتح القائمة — عائم أعلى يمين الشاشة، لكن يظهر بالجوال فقط (القائمة
   بسطح المكتب/التابلت ظاهرة دومًا بلا حاجة لفتحها — راجع .sidebar-nav). */
.menu-toggle{
  position:fixed; top:28px; right:28px; z-index:81;
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background:rgba(35,21,14,.5); border:1px solid rgba(219,228,255,.18);
  color:#DBE4FF; cursor:pointer;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.menu-toggle:hover{ background:rgba(219,228,255,.16); border-color:var(--sand); transform:translateY(-2px); }
@media (max-width:760px){ .menu-toggle{ display:flex; } }

/* أيقونات عناصر التحكم العائمة والقائمة: تُرسم بلون العنصر نفسه
   (currentColor) بدل ألوان stroke ثابتة بالـHTML — فتتلوّن ديناميكيًا
   حسب خلفية الزر/اللوحة في الوضعين الفاتح والداكن تلقائيًا. */
.floating-btn svg, .menu-toggle svg, .sidebar-close svg{ stroke:currentColor; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; padding:12px 22px; font-weight:600; font-size:14.5px;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
  cursor:pointer; border:1.5px solid transparent; white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn:active{ transform:scale(.96); }
.btn:disabled{
  background:rgba(35,21,14,.18) !important; border-color:rgba(35,21,14,.18) !important; color:rgba(35,21,14,.5) !important;
  cursor:not-allowed !important; box-shadow:none !important; transform:none !important; opacity:.85;
}
.btn .ripple{
  position:absolute; border-radius:50%; background:rgba(219,228,255,.35);
  transform:scale(0); animation:ripple .6s ease-out forwards; pointer-events:none;
}
@keyframes ripple{ to{ transform:scale(2.6); opacity:0; } }
.btn-outline{ background:transparent; border-color:rgba(219,228,255,.22); color:var(--text); }
.btn-outline:hover{ border-color:var(--text); background:rgba(219,228,255,.06); }
.btn-sand{ background:var(--sand); color:var(--ink-fixed); font-weight:700; border-color:var(--sand-strong); box-shadow:0 8px 20px rgba(219,228,255,.45); }
.btn-sand:hover{ background:var(--sand-strong); }
.btn-sand-sm{ background:var(--sand); color:var(--ink-fixed); padding:10px 18px; font-size:13.5px; border-radius:999px; font-weight:700; border-color:var(--sand-strong); }
.btn-sand-sm:hover{ background:var(--sand-strong); }

.lang-toggle-label{ font-size:12px; font-weight:700; }

/* Basic LTR mirroring for the pieces that would otherwise look backwards in English
   — عناصر التحكم العائمة والقائمة العائمة تتبادلان الجهة مع اتجاه الواجهة،
   بنفس منطق قراءة الصفحة (يمين↔يسار)، بدل البقاء بمواضع ثابتة بصرف النظر
   عن اللغة. Note: direction:ltr alone is enough to flip default text
   alignment for elements that don't set their own text-align (browser
   default is "start", which resolves to left under ltr) — we deliberately
   don't force text-align on headings/paragraphs here, since that would
   also override intentionally-centered elements like section titles and
   CTA bands. */
html.lang-en{ direction:ltr; }
html.lang-en .floating-controls{ left:auto; right:28px; }
html.lang-en .menu-toggle{ right:auto; left:28px; }
html.lang-en .sidebar-nav{ right:auto; left:28px; transform:translateX(calc(-100% - 32px)); }
html.lang-en .sidebar-nav.is-open{ transform:translateX(0); }
html.lang-en .sidebar-overlay{ direction:ltr; }
@media (max-width:760px){
  html.lang-en .sidebar-nav{ right:auto; left:16px; }
  html.lang-en .sidebar-links a{ transform:translateX(-18px); }
  html.lang-en .sidebar-nav.is-open .sidebar-links a{ transform:translateX(0); }
}

/* ---------- Sidebar / floating navigation box ---------- */
/* الخلفية المعتمة خلف القائمة — لازمة بالجوال فقط (القائمة تُفتح كطبقة
   منبثقة هناك)؛ بسطح المكتب/التابلت القائمة ظاهرة دومًا وليست منبثقة،
   فلا حاجة لخلفية معتمة إطلاقًا (مخفية تمامًا هناك، أسفل). */
.sidebar-overlay{
  position:fixed; inset:0; background:rgba(35,21,14,.6); z-index:78;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.sidebar-overlay.is-open{ opacity:1; pointer-events:auto; }

/* القائمة العائمة (Navigation) أعلى يمين الشاشة — صندوق عمودي صغير مضغوط
   بخلفية داكنة شبه شفافة + Backdrop Blur، بحجم عناصرها فقط (لا تمتد
   لأسفل الشاشة). بسطح المكتب/التابلت (min-width:761px أدناه) تبقى ظاهرة
   دومًا بلا حاجة لفتحها؛ بالجوال (max-width:760px) تُخفى افتراضيًا وتُفتح
   عبر زر Menu العائم (.menu-toggle) — نفس آلية .is-open/aria-hidden
   الموجودة أصلًا بالسكربتات (script.js/about.js/works.js/services-
   catalog.js/service-detail.js)، بلا أي تعديل بمنطق الفتح/الإغلاق نفسه. */
.sidebar-nav{
  /* متغيرات قابلة للتخصيص من لوحة التحكم (بند "عناصر القائمة ← القائمة
     الجانبية") — تتجاوزها سمة data-nav-theme على الصندوق نفسه لأي من
     الأنماط الجاهزة (`--nav-container-bg`/`--nav-container-border`...
     تُكتب كخصائص inline من cms-connector.js حسب global.nav_*). */
  --nav-container-bg: rgba(35,21,14,.55);
  --nav-container-border: rgba(219,228,255,.16);
  --nav-container-blur: 16px;
  --nav-container-radius: 16px;
  --nav-default-text: var(--dark-body);
  /* لمعة العنصر النشط/المحور عليه — ناعمة وشفافة بلا إطار صلب، تتكيّف
     تلقائيًا مع لون خلفية القائمة: على الخلفية الغامقة تُستخدم باهتة
     فاتحة بلون الموقع الفاتح، وعلى الفاتحة (sand-light) باهتة غامقة
     بلون الموقع الغامق — تباين مريح بكل الأنماط الجاهزة بلا الشكل
     المربّع ذي الحدود المعتاد. */
  --nav-accent: var(--pearl);
  --nav-hover-bg: rgba(219,228,255,.10);
  --nav-active-bg: rgba(219,228,255,.16);
  --nav-active-glow: rgba(219,228,255,.22);
  position:fixed; top:28px; bottom:auto; right:28px; width:132px; max-width:80vw;
  max-height:calc(100vh - 56px); z-index:79;
  background:var(--nav-container-bg); color:var(--nav-default-text); border-radius:var(--nav-container-radius);
  border:1px solid var(--nav-container-border);
  backdrop-filter:blur(var(--nav-container-blur)); -webkit-backdrop-filter:blur(var(--nav-container-blur));
  box-shadow:0 20px 50px rgba(35,21,14,.35);
  display:flex; flex-direction:column; padding:10px; gap:4px; overflow-y:auto;
  transition:transform .3s ease, opacity .3s ease, padding .25s ease;
}
/* أنماط جاهزة متعددة للقائمة الجانبية تختارها من لوحة التحكم
   (global.nav_theme) — كل نمط يعرّف بدائل لمتغيرات الحاوية أعلاه، فيبقى
   كل ما داخلها (روابط، عناوين، أزرار) يعمل كما هو بلا أي كود إضافي. */
.sidebar-nav[data-nav-theme="dark-solid"]{
  --nav-container-bg: rgba(35,21,14,.92);
  --nav-container-border: rgba(219,228,255,.22);
  --nav-container-blur: 12px;
}
.sidebar-nav[data-nav-theme="sand-light"]{
  --nav-container-bg: rgba(219,228,255,.92);
  --nav-container-border: rgba(35,21,14,.12);
  --nav-default-text: var(--ink-fixed);
  --nav-accent: var(--ink-fixed);
  --nav-hover-bg: rgba(35,21,14,.05);
  --nav-active-bg: rgba(35,21,14,.08);
  --nav-active-glow: rgba(35,21,14,.12);
}
.sidebar-nav[data-nav-theme="sand-light"] .sidebar-close{ color:var(--ink-fixed); border-color:rgba(35,21,14,.2); }
.sidebar-nav[data-nav-theme="sand-light"] .sidebar-close:hover{ background:rgba(35,21,14,.06); border-color:var(--sand-strong); }
.sidebar-nav[data-nav-theme="transparent"]{
  --nav-container-bg: rgba(35,21,14,.28);
  --nav-container-border: transparent;
  --nav-container-blur: 6px;
  box-shadow:none;
}
.sidebar-nav[data-nav-theme="elegant-border"]{
  --nav-container-bg: rgba(35,21,14,.5);
  --nav-container-border: var(--sand);
  --nav-container-radius: 10px;
}
/* حركات الظهور للقائمة الجانبية (global.nav_entrance) — تُطبَّق على
   فتح/إغلاق القائمة بالجوال (.is-open) وعلى أول ظهور بسطح المكتب
   (كلاس .is-appearing تضافه cms-connector.js عند التحميل). حالات
   الإخفاء :not(.is-open) مقيَّدة بالجوال أدناه — بسطح المكتب القائمة
   دائمة الظهور فلا تُخفى أبدًا مهما اختيرت الحركة. */
.sidebar-nav[data-nav-entrance="fade"]{
  transition:transform .3s ease, opacity .4s ease, padding .25s ease;
}
.sidebar-nav[data-nav-entrance="zoom"]{
  transition:transform .38s cubic-bezier(.2,.9,.3,1.2), opacity .38s ease, padding .25s ease;
}
.sidebar-nav[data-nav-entrance="slide"]{
  transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease, padding .25s ease;
}
@media (max-width:760px){
  html.lang-en .sidebar-nav[data-nav-entrance="slide"]{ --nav-slide-from: calc(-100% - 40px); }
  .sidebar-nav[data-nav-entrance="zoom"]:not(.is-open){ transform:translateY(-8px) scale(.9); }
  .sidebar-nav[data-nav-entrance="slide"]:not(.is-open){ --nav-slide-from: calc(100% + 40px); transform:translateX(var(--nav-slide-from)); opacity:0; }
}
/* حركة ظهور بدء (سطح المكتب/التابلت فقط): مسح (wipe) أنيق من جهة
   القائمة عند أول تحميل — عبر clip-path (بلا تعارض مع
   transform:none !important بقاعدة سطح المكتب). العربية RTL: من
   اليسار؛ الإنجليزية تعكس الاتجاه. */
@media (min-width:761px){
  .sidebar-nav.is-appearing{
    animation:shiary-nav-wipe .8s cubic-bezier(.22,.61,.36,1) both;
  }
  html.lang-en .sidebar-nav.is-appearing{
    animation-name:shiary-nav-wipe-en;
  }
  .sidebar-nav.is-appearing .sidebar-links a{
    animation:shiary-nav-links-in .5s ease both;
  }
}
@keyframes shiary-nav-wipe{
  from{ clip-path:inset(0 100% 0 0); }
  to{ clip-path:inset(0 0 0 0); }
}
@keyframes shiary-nav-wipe-en{
  from{ clip-path:inset(0 0 0 100%); }
  to{ clip-path:inset(0 0 0 0); }
}
@keyframes shiary-nav-links-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
/* مؤشر جانبي (شريط رملي رفيع) على حافة رابط القائمة النشط/المحور عليه —
   عنصر إبداعي إضافي، يعمل فوق أنماط الخلفية أعلاه. ::before محجوز
   للأيقونات، لذا نستخدم ::after. */
.sidebar-links a{ position:relative; }
.sidebar-links a::after{
  content:""; position:absolute; top:50%; left:4px; width:3px; height:0;
  border-radius:2px; background:var(--nav-accent); transform:translateY(-50%);
  transition:height .22s ease, background .3s ease; pointer-events:none;
}
html.lang-en .sidebar-links a::after{ left:auto; right:4px; }
.sidebar-links a:hover::after,
.sidebar-links a.is-active::after{ height:calc(100% - 24px); }
.sidebar-close{
  align-self:flex-end; background:transparent; border:1px solid rgba(219,228,255,.18);
  color:#DBE4FF; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; margin-bottom:4px; transition:.2s; flex-shrink:0;
}
.sidebar-close:hover{ background:rgba(219,228,255,.08); border-color:var(--sand); }
.sidebar-links{ display:flex; flex-direction:column; gap:4px; }
/* تنسيق نص العنصر نفسه (لون/خلفية/خط/حجم) — قيم افتراضية ثابتة هنا،
   قابلة للتخصيص المستقل لكل عنصر عبر متغيرات CSS (--nav-text-*) تُطبَّق
   كخصائص inline على الرابط نفسه من cms-connector.js حسب
   global.nav_text_style (نفس مبدأ --nav-icon-size/--nav-icon-color
   تمامًا: سمة/خاصية على الرابط لا عنصر DOM بداخله، فتنجو من مسح
   textContent عند تبديل اللغة). font-size مكرَّر بنقطتَي التوقف أدناه
   (761px/1024px) بنفس المتغير — لو خُصِّص حجم لعنصر معيّن يبقى ثابتًا
   بكل الأحجام، وإلا يتبع القيمة الافتراضية الخاصة بكل نقطة توقف كالسابق. */
.sidebar-links a{
  padding:9px 8px; border-radius:10px; font-weight:var(--nav-text-font-weight, 600); color:var(--nav-text-color, var(--dark-body));
  text-align:center; line-height:1.35; border:1px solid transparent; background:var(--nav-text-bg, transparent);
  font-family:var(--nav-text-font-family, inherit); font-size:var(--nav-text-size, 12.5px);
  transition:background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease;
}
.sidebar-links a:hover{
  background:var(--nav-hover-bg); color:var(--nav-accent);
  transform:translateY(-1px); border-color:transparent;
}
.sidebar-links a:active{ transform:translateY(0) scale(.97); }
/* العنصر الحالي (نشِط): لمعة ناعمة شفافة بلا إطار صلب، تتكيّف تلقائيًا
   مع خلفية القائمة (فاتحة على الغامق، غامقة على الفاتح) — أنيقة بدل
   المربّع ذي الحدود المعتاد. */
.sidebar-links a.is-active{
  background:var(--nav-active-bg); color:var(--nav-accent);
  border-color:transparent;
  box-shadow:0 6px 18px -8px var(--nav-active-glow);
}
.sidebar-links a.is-active:hover{ transform:translateY(-1px); }

/* أيقونات عناصر القائمة — بالجوال فقط (راجع media query أدناه)، تظهر
   بجانب نص كل عنصر يملك أيقونة مختارة من لوحة التحكم ("🧭 عناصر القائمة").
   تُرسم كـ::before بتقنية CSS mask (لون العنصر currentColor) بدل عنصر
   <span> فعلي داخل الرابط، لأن نص الرابط يُعاد كتابته بالكامل (textContent)
   عند تبديل اللغة وعند كل تحديث إعدادات — أي عنصر DOM حقيقي بداخله كان
   سيُمحى فورًا بأول تبديل لغة. الخاصية data-nav-icon نفسها غير متأثرة بذلك
   إطلاقًا (سمة على العنصر لا محتوى نصي بداخله)، فتبقى المصدر الوحيد
   والدائم لعرض الأيقونة. مطابقة تمامًا لـNAV_ICON_LIBRARY بـcms-connector.js
   وdashboard.js — حدِّث الثلاثة معًا عند أي تغيير. */
.sidebar-links a[data-nav-icon]::before{ display:none; }
.sidebar-links a[data-nav-icon="home"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9a1 1 0 0 0 1 1H9a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h2.5a1 1 0 0 0 1-1v-9'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9a1 1 0 0 0 1 1H9a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h2.5a1 1 0 0 0 1-1v-9'/%3E%3C/svg%3E"); }
.sidebar-links a[data-nav-icon="sparkle"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M18 6l-2.5 2.5M8.5 15.5 6 18'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M18 6l-2.5 2.5M8.5 15.5 6 18'/%3E%3C/svg%3E"); }
.sidebar-links a[data-nav-icon="briefcase"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12' rx='2'/%3E%3Cpath d='M8 7.5V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1.5'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12' rx='2'/%3E%3Cpath d='M8 7.5V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1.5'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E"); }
.sidebar-links a[data-nav-icon="tag"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12.5 12.5 20a1.5 1.5 0 0 1-2.1 0l-6.4-6.4a1.5 1.5 0 0 1 0-2.1L9.8 4H16a4 4 0 0 1 4 4v4.5Z'/%3E%3Ccircle cx='14.5' cy='9.5' r='1.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12.5 12.5 20a1.5 1.5 0 0 1-2.1 0l-6.4-6.4a1.5 1.5 0 0 1 0-2.1L9.8 4H16a4 4 0 0 1 4 4v4.5Z'/%3E%3Ccircle cx='14.5' cy='9.5' r='1.5'/%3E%3C/svg%3E"); }
.sidebar-links a[data-nav-icon="document"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4V19a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 19V5A1.5 1.5 0 0 1 7 3.5Z'/%3E%3Cpath d='M14 3.5V8h4'/%3E%3Cpath d='M9 13h6M9 16.5h6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4V19a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 19V5A1.5 1.5 0 0 1 7 3.5Z'/%3E%3Cpath d='M14 3.5V8h4'/%3E%3Cpath d='M9 13h6M9 16.5h6'/%3E%3C/svg%3E"); }
.sidebar-links a[data-nav-icon="grid"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.2'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.2'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.2'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.2'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.2'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.2'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.2'/%3E%3C/svg%3E"); }
.sidebar-links a[data-nav-icon="search"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' 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"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' 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"); }
.sidebar-links a[data-nav-icon="star"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9L12 3Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9L12 3Z'/%3E%3C/svg%3E"); }
.sidebar-links a[data-nav-icon="mail"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); }
.sidebar-links a[data-nav-icon="phone"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 10.5a13 13 0 0 0 6.9 6.9l2.3-2.3a1 1 0 0 1 1-.24 9.3 9.3 0 0 0 2.9.46 1 1 0 0 1 1 1V19.5a1 1 0 0 1-1 1A16.5 16.5 0 0 1 3.5 4a1 1 0 0 1 1-1H7.7a1 1 0 0 1 1 1 9.3 9.3 0 0 0 .46 2.9 1 1 0 0 1-.25 1l-2.3 2.3Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 10.5a13 13 0 0 0 6.9 6.9l2.3-2.3a1 1 0 0 1 1-.24 9.3 9.3 0 0 0 2.9.46 1 1 0 0 1 1 1V19.5a1 1 0 0 1-1 1A16.5 16.5 0 0 1 3.5 4a1 1 0 0 1 1-1H7.7a1 1 0 0 1 1 1 9.3 9.3 0 0 0 .46 2.9 1 1 0 0 1-.25 1l-2.3 2.3Z'/%3E%3C/svg%3E"); }
.sidebar-links a[data-nav-icon="info"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.51v.01'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.51v.01'/%3E%3C/svg%3E"); }
.sidebar-links a[data-nav-icon="link"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 14.5 14.5 9.5'/%3E%3Cpath d='M11 6.5 12.4 5a3.5 3.5 0 1 1 5 5l-1.5 1.4'/%3E%3Cpath d='M13 17.5 11.6 19a3.5 3.5 0 1 1-5-5l1.5-1.4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 14.5 14.5 9.5'/%3E%3Cpath d='M11 6.5 12.4 5a3.5 3.5 0 1 1 5 5l-1.5 1.4'/%3E%3Cpath d='M13 17.5 11.6 19a3.5 3.5 0 1 1-5-5l1.5-1.4'/%3E%3C/svg%3E"); }
.sidebar-links a[data-nav-icon="people"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3'/%3E%3Cpath d='M2.5 20c0-3.5 2.9-6 6.5-6s6.5 2.5 6.5 6'/%3E%3Ccircle cx='17' cy='8' r='2.2'/%3E%3Cpath d='M15.3 13.3c2.6.4 4.2 2.3 4.2 5.2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3'/%3E%3Cpath d='M2.5 20c0-3.5 2.9-6 6.5-6s6.5 2.5 6.5 6'/%3E%3Ccircle cx='17' cy='8' r='2.2'/%3E%3Cpath d='M15.3 13.3c2.6.4 4.2 2.3 4.2 5.2'/%3E%3C/svg%3E"); }

/* أيقونة قبل النص — بسطح المكتب والجوال معًا، وفقط للعنصر اللي فعليًا
   يملك أيقونة (data-nav-icon) حتى لا يتغيّر شكل العناصر بلا أيقونة
   إطلاقًا. غير مقيَّدة بأي media query (كانت بالجوال فقط سابقًا) —
   نفس التقنية تعمل بنفس الشكل على الحجمين، فقط القياس الافتراضي يبقى
   واحدًا ما لم يخصّص الأدمن حجمًا/لونًا مستقلًا لهذا العنصر تحديدًا
   (--nav-icon-size/--nav-icon-color، خصائص مضمَّنة تُطبَّق فورًا مباشرة
   على الرابط نفسه من cms-connector.js حسب global.nav_icon_style —
   تنجو من مسح textContent كما تنجو data-nav-icon، لأنها سمة/تصميم
   على الرابط لا محتوى نصي بداخله). */
.sidebar-links a[data-nav-icon]{
  display:flex; align-items:center; justify-content:flex-start; gap:9px; text-align:start;
}
.sidebar-links a[data-nav-icon]::before{
  content:""; display:inline-block; flex-shrink:0;
  width:var(--nav-icon-size, 17px); height:var(--nav-icon-size, 17px);
  background-color:var(--nav-icon-color, currentColor);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
}
/* إظهار/إخفاء الأيقونة نفسها (لا النص) حسب حجم الشاشة — مستقل لكل عنصر
   عبر data-nav-icon-hide="mobile"|"desktop" (يُطبَّقه cms-connector.js
   من global.nav_icon_style، بنفس منطق data-nav-icon: سمة على الرابط لا
   عنصر DOM، فتنجو من مسح textContent). نفس نقطتَي التوقف 760/761px
   المستخدمتين بكل مكان آخر بهذا الملف لفصل الجوال عن سطح المكتب. */
@media (max-width:760px){
  .sidebar-links a[data-nav-icon-hide="mobile"]::before{ display:none; }
}
@media (min-width:761px){
  .sidebar-links a[data-nav-icon-hide="desktop"]::before{ display:none; }
}

/* بالجوال فقط: القائمة مخفية افتراضيًا (تُفتح عبر .menu-toggle)، وتظهر
   أسفل زر Menu مباشرة (وليس بمكان زر Menu نفسه). زر الإغلاق ✕ يظهر هنا
   فقط (بسطح المكتب/التابلت القائمة دائمة الظهور فلا حاجة لإغلاقها). */
@media (max-width:760px){
  .sidebar-nav{
    top:80px; max-height:calc(100vh - 108px);
    transform:translateY(-12px) scale(.96); opacity:0; pointer-events:none;
  }
  .sidebar-nav.is-open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
  .sidebar-close{ display:flex; }
}
/* بسطح المكتب/التابلت: القائمة ظاهرة دومًا بلا أي حاجة لفتحها — تتجاهل
   حالة .is-open كليًا، ويختفي زر الإغلاق (لا وظيفة له هنا). حجم أكبر قليلًا
   من نسخة الجوال (طلب صريح: "تكبير بسيط" بوضع الكمبيوتر). */
@media (min-width:761px){
  .sidebar-nav{
    transform:none !important; opacity:1 !important; pointer-events:auto !important;
    width:150px; padding:12px;
  }
  .sidebar-links{ gap:5px; }
  .sidebar-links a{ padding:10px 9px; font-size:var(--nav-text-size, 13.5px); }
  html.lang-en .sidebar-links a{ transform:none; }
  html.lang-en .sidebar-nav{ width:auto; min-width:158px; max-width:80vw; }
  .sidebar-close{ display:none; }

  /* تفاعلية مع التمرير (سطح المكتب/التابلت فقط): بعد النزول للأسفل تنكمش
     القائمة لزر "الرئيسية" فقط (أول رابط بالقائمة دومًا، بما فيها أي
     روابط مخصّصة يضيفها الأدمن لاحقًا — تُضاف دائمًا بنهاية القائمة)،
     وتعود لكامل حجمها فور تمرير الفأرة عليها أو لمسها (تابلت باللمس) —
     راجع .is-scroll-collapsed/.is-touch-expanded المُضافتين من JS
     (script.js/about.js/works.js/services-catalog.js/service-detail.js). */
  .sidebar-nav.is-scroll-collapsed:not(:hover):not(:focus-within):not(.is-touch-expanded) .sidebar-links a:not(:first-child){
    display:none;
  }
  .sidebar-nav.is-scroll-collapsed:not(:hover):not(:focus-within):not(.is-touch-expanded){
    padding:6px;
  }
}

/* ---------- Quick action bar (بين الهيرو والبنر) ---------- */
.quick-action-bar{
  position:relative; z-index:10;
  background:transparent;
  padding:18px 0 6px;
}
.quick-action-inner{
  display:flex; align-items:center; gap:16px; justify-content:center;
}
/* الزرّان الجانبيان (انضم إلينا / اكتشف خدماتنا): نفس وظيفتهما الأصلية
   تمامًا (نفس الرابط + نفس مفتاح data-cms القابل للتعديل من اللوحة)،
   بأسلوب زجاجي مصنفر — خلفية شبه شفافة مع ضبابية خلفية حقيقية
   (backdrop-filter) تعزل الزر عن الخلفية بلا أي إطار. "انضم إلينا"
   زجاج داكن بنص لؤلؤي (الزر الرئيسي)، و"اكتشف خدماتنا" زجاج فاتح بنص
   غامق، وأيقونة كل زر داخل قرص بلون معاكس حتى تتباين مع نصه بوضوح. */
.quick-action-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  flex:1 1 0; min-width:150px; max-width:230px;
  padding:11px 22px 11px 18px; border-radius:18px;
  white-space:nowrap; text-decoration:none;
  font-size:13.5px; font-weight:700;
  background:#ebf0fc; color:#23150E;
  box-shadow:0 2px 8px -4px rgba(35,21,14,.12), inset 0 1px 0 rgba(255,255,255,.6);
  transition:background .22s ease, transform .18s ease, box-shadow .22s ease;
}
.quick-action-btn .p-text{ line-height:1.5; }
/* مسافة ثابتة (12px) بين القرص الدائري للأيقونة والنص — لا تلاصق ولا
   فراغ مبالغ، فيبقى الزران الجانبيان متساويين ومتوازنين مع مربع البحث. */
.quick-action-btn .qa-icon{ margin-inline-end:12px; }
@media (max-width:760px){ .quick-action-btn .qa-icon{ margin-inline-end:10px; } }
/* قاعدة موحّدة: عند الإشارة أو الضغط يتحول الزر للغامق والنص فاتح
   (بلون الخلفية #ebf0fc) — بخاصية !important لضمان عدم التفوق عليها. */
.quick-action-btn:hover,
.quick-action-btn:active{
  background:#23150E;
  color:#ebf0fc !important;
  box-shadow:0 3px 12px -6px rgba(35,21,14,.18);
}
.quick-action-btn:hover .p-text,
.quick-action-btn:active .p-text{
  color:#ebf0fc !important;
}
.quick-action-btn:hover .qa-icon,
.quick-action-btn:active .qa-icon{
  color:#23150E !important;
  background:#ebf0fc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.quick-action-btn--join:hover{ transform:translateY(-2px); }
.quick-action-btn--join:active{ transform:translateY(0) scale(.98); }
.quick-action-btn--services:hover{ transform:translateY(-2px); }
.quick-action-btn--services:active{ transform:translateY(0) scale(.98); }
/* أيقونة كل زر: قرص غامق على الزر الفاتح، وفي الحالة الغامقة يتحول
   القرص إلى لؤلؤي — فيبقى النص والأيقونة متمايزين دائماً. */
.quick-action-btn .qa-icon{
  display:grid; place-items:center; width:32px; height:32px;
  border-radius:11px; flex-shrink:0;
  background:rgba(35,21,14,.88); color:#ebf0fc;
  transition:background .22s ease, color .22s ease;
}
/* شريط البحث: أبيض ناصع، نص غامق داخله، وأيقونة العدسة أيمن المربع
   (أول عنصر بالـ DOM = اليمين في RTL). بلا إطار نهائيًا، وظل ناعم للعمق. */
.quick-action-search{
  display:flex; align-items:center; gap:9px;
  flex:1; max-width:470px;
  background:#ffffff;
  border-radius:18px; padding:0 20px;
  box-shadow:0 2px 8px -4px rgba(35,21,14,.1), inset 0 1px 0 rgba(255,255,255,.7);
  transition:background .25s ease, box-shadow .25s ease;
}
/* عند مجرد الإشارة: يتحول المربع للغامق والنص للأرتيكال الفاتح. */
.quick-action-search:hover{
  background:#23150E;
  box-shadow:0 3px 12px -6px rgba(35,21,14,.18);
}
.quick-action-search:hover svg,
.quick-action-search:hover input{
  color:#ebf0fc;
}
.quick-action-search:hover input::placeholder{
  color:rgba(235,240,252,.7);
}
/* عند الكتابة (التركيز): يبقى المربع فاتحًا والنص غامقًا حتى تبقى
   الكتابة واضحة — فقط الإشارة (hover) هي التي تُغمّق المربع. */
.quick-action-search:focus-within{
  background:#ffffff;
  box-shadow:0 3px 12px -6px rgba(35,21,14,.15);
}
.quick-action-search:focus-within svg,
.quick-action-search:focus-within input{
  color:#23150E;
}
.quick-action-search:focus-within input::placeholder{
  color:rgba(35,21,14,.55);
}
.quick-action-search svg{ flex-shrink:0; color:#23150E; margin-inline-end:6px; }
.quick-action-search input{
  width:100%; border:none; outline:none; background:transparent;
  font-size:14px; color:#23150E; padding:13px 0;
  font-family:inherit;
}
.quick-action-search input::placeholder{ color:rgba(35,21,14,.55); font-size:13px; }
/* القاعدة العامة input:focus تجلب معها حلقة خزامية (0 0 0 3px
   rgba(219,228,255,.2)) وخلفية تتداخل مع المربع الأبيض — تُحيد هنا،
   فيبقى المربع أبيض ناصعًا أثناء الكتابة فقط، والغامق حصريًا للإشارة. */
.quick-action-search input:focus{ box-shadow:none; background:transparent; }
/* ---------- Search results panel (شريط البحث — نتائج كل الموقع) ----------
   لوحة ناعمة تنسدل تحت البحث تعرض نتائج (صفحات/خدمات/باقات/أعمال) من
   بيانات حية؛ بلا إطارات — بالاعتماد على التدفق (backdrop) وظل ناعم فقط،
   وتحافظ على لوني الموقع فقط (#DBE4FF/#23150E). */
.quick-search-results{
  position:fixed; z-index:120; width:min(430px, 92vw);
  max-height:min(62vh, 480px); overflow-y:auto;
  background:#ffffff;
  color:#23150E;
  border-radius:18px;
  box-shadow:0 18px 46px rgba(35,21,14,.28), 0 4px 14px rgba(35,21,14,.14);
  padding:8px;
}
.quick-search-results[hidden]{ display:none; }
.quick-search-results .qs-group{ margin:2px 0; }
.quick-search-results .qs-group + .qs-group{ margin-top:6px; }
.quick-search-results .qs-group-label{
  font-size:11px; font-weight:700; letter-spacing:.04em;
  color:rgba(35,21,14,.55); padding:6px 12px 4px;
}
.quick-search-results ul{ list-style:none; margin:0; padding:0; }
.quick-search-results .qs-row{ border-radius:12px; }
.quick-search-results .qs-row.is-active,
.quick-search-results .qs-row:hover{ background:rgba(35,21,14,.07); }
.quick-search-results .qs-row a{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:12px;
  color:#23150E; text-decoration:none; font-size:13.5px; font-weight:500;
}
.quick-search-results .qs-row a svg{ flex-shrink:0; color:rgba(35,21,14,.55); }
.quick-search-results .qs-row a span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quick-search-results .qs-empty{
  padding:18px 14px; text-align:center; font-size:13px; color:rgba(35,21,14,.6);
}
html.lang-en .quick-search-results .qs-group-label{ letter-spacing:.02em; }
@media (max-width:760px){
  .quick-action-inner{ flex-direction:row; flex-wrap:wrap; gap:10px; }
  /* الجوال: مربع البحث سطرًا كاملًا، والزرّان الجانبيان نصفان متساويان —
     بارتفاع/حشوة مريحة تتناسب معه وتحدّ من تفصيل النص. */
  .quick-action-btn{ order:1; width:auto; flex:1; justify-content:center; min-width:0; padding:10px 10px; border-radius:14px; }
  .quick-action-btn .qa-icon{ width:26px; height:26px; border-radius:9px; }
  .quick-action-search{ max-width:100%; width:auto; flex:1 1 100%; order:2; padding:0 14px; border-radius:14px; }
  .quick-action-search input{ padding:12px 0; font-size:13.5px; }
}

/* ---------- Top banner carousel ---------- */
/* البنر المتحرك — مساحة محيطة ناعمة بينه وبين الخلفية (الوضع الافتراضي:
   لا إطار إطلاقًا)، مع "إضاءة خفيفة" متميزة تنسدل من أعلى البنر وتحتضن
   حدّه السفلي — ميزة ناعمة بألوان الموقع فقط (بدل أي حدود/خطوط فاصلة). */
.top-banner-carousel{
  position:relative; height:442px; overflow:hidden;
  background:var(--dark); cursor:grab; user-select:none;
  margin:6px 16px 26px; border-radius:18px;
  /* لا ظل ولا طبقة لونية فوق البنر إطلاقًا — الصورة تبقى بكامل نقائها
     (قرار العميل الحاسم: ممنوع أي shadow في المربعات/البنارات) */
  box-shadow:none;
}
.top-banner-carousel:active{ cursor:grabbing; }
.banner-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); }
.banner-slide.is-empty-slot{ display:none; }
.banner-slide a{ display:block; width:100%; height:100%; overflow:hidden; }
.banner-slide img{ width:100%; height:100%; object-fit:cover; object-position:center center; transition:transform .5s ease; }
.banner-slide video{ width:100%; height:100%; object-fit:cover; object-position:center center; }
.banner-slide a:hover img{ transform:scale(1.05); }
.banner-dots{ position:absolute; bottom:18px; right:50%; transform:translateX(50%); display:flex; gap:8px; z-index:2; }
.banner-dots span{ width:8px; height:8px; border-radius:50%; background:#C5D8FF; transition:.25s; cursor:pointer; }
.banner-dots span.is-active{ background:#DBE4FF; width:22px; border-radius:5px; }
@media (max-width:760px){ .top-banner-carousel{ height:271px; margin:6px 10px 22px; border-radius:14px; box-shadow:inset 0 1px 0 rgba(219,228,255,.3), 0 14px 30px -14px rgba(219,228,255,.5); } }

/* ---------- Banner transition styles (selectable from the dashboard) ---------- */

/* 1) fade — classic soft cross-fade (default) */
.top-banner-carousel[data-transition="fade"] .banner-slide{ opacity:0; transform:none; }
.top-banner-carousel[data-transition="fade"] .banner-slide.is-active{ opacity:1; }

/* 2) slide-right — the new slide glides in toward the right */
.top-banner-carousel[data-transition="slide-right"] .banner-slide{ opacity:0; transform:translateX(-7%); }
.top-banner-carousel[data-transition="slide-right"] .banner-slide.is-active{ opacity:1; transform:translateX(0); }

/* 3) slide-left — mirror of slide-right */
.top-banner-carousel[data-transition="slide-left"] .banner-slide{ opacity:0; transform:translateX(7%); }
.top-banner-carousel[data-transition="slide-left"] .banner-slide.is-active{ opacity:1; transform:translateX(0); }

/* 4) zoom — the new slide scales in from slightly larger to full size */
.top-banner-carousel[data-transition="zoom"] .banner-slide{ opacity:0; transform:scale(1.08); }
.top-banner-carousel[data-transition="zoom"] .banner-slide.is-active{ opacity:1; transform:scale(1); }

/* 5) kenburns — cinematic slow continuous zoom while a slide is showing */
.top-banner-carousel[data-transition="kenburns"] .banner-slide{ opacity:0; transform:none; }
.top-banner-carousel[data-transition="kenburns"] .banner-slide.is-active{ opacity:1; }
.top-banner-carousel[data-transition="kenburns"] .banner-slide.is-active img{ animation:shiary-kenburns 4.6s ease-out forwards; }
@keyframes shiary-kenburns{
  from{ transform:scale(1); }
  to{ transform:scale(1.09); }
}
@media (prefers-reduced-motion: reduce){
  .top-banner-carousel .banner-slide{ transition:opacity .3s ease; transform:none !important; }
  .top-banner-carousel .banner-slide.is-active img{ animation:none !important; }
}

/* ---------- Process banner (single, static) ----------
   نفس ارتفاع .top-banner-carousel (البنر المتحرك) بالضبط — بطلب صريح أن
   تكون كل البنرات الثابتة (بنر "منهجيتنا" وبنر الصفحة بكل الصفحات) بنفس
   حجم البنر المتحرك بالرئيسية، وليس أصغر منه. */
.process-banner{
  display:block; height:442px; overflow:hidden;
  margin:6px 16px 26px; border-radius:18px; position:relative;
  box-shadow:
    inset 0 1px 0 rgba(219,228,255,.35),
    inset 0 -1px 0 rgba(219,228,255,.18),
    0 10px 30px -12px rgba(219,228,255,.55),
    0 22px 50px -18px rgba(35,21,14,.35);
}
.process-banner.is-no-image{ display:none; }
.process-banner img{ width:100%; height:100%; object-fit:cover; object-position:center center; transition:transform .5s ease; display:block; }
.process-banner:hover img{ transform:scale(1.04); }
.process-banner video.process-banner-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center; display:block; background:#110A05;
}
@media (max-width:760px){ .process-banner{ height:271px; margin:6px 10px 22px; border-radius:14px; box-shadow:inset 0 1px 0 rgba(219,228,255,.3), 0 14px 30px -14px rgba(219,228,255,.5); } }

/* ---------- Hero ---------- */
/* هيرو أول ما يراه الزائر عند فتح الموقع، بلا شريط علوي فوقه (راجع
   "Header" أعلاه — عناصر التحكم العائمة تقع أصلًا فوق خلفية الهيرو نفسها
   بما إنها تبدأ من أعلى الصفحة تمامًا، فتبقى "جزءًا من الهيرو" بصريًا
   بلا أي تعديل إضافي). التركيز بصريًا على الشعار الحقيقي والنص فقط: خلفية
   داكنة صلبة موحّدة (بلا طبقات تدرّج لوني — طلب صريح)، بلا صور خارجية/
   Stock — الشعار نفسه (الحقيقي، وليس نصًا بديلاً) هو العنصر البصري
   المركزي.
   الارتفاع يتبع المحتوى فقط (min-height:auto) — كان مفروضًا 100vh حتى لو
   محتواه أقصر من ذلك، يترك فراغًا فارغًا واضحًا أسفل النص قبل نهاية القسم
   (طلب صريح بإزالته بوضع الكمبيوتر أيضًا، بعد أن أُزيل مثله بالجوال سابقًا
   لنفس السبب بالضبط). */
.hero{
  position:relative; overflow:hidden;
  min-height:auto;
  display:flex; flex-direction:column; justify-content:center;
  padding:150px 0 48px;
  background:#23150E;
}
/* خلفية صورة/فيديو اختيارية (من المحرر — "خلفية الهيرو") تحل محل الخلفية
   الصلبة أعلاه بصريًا لو فعّلها الأدمن يدويًا؛ لا تُستخدم افتراضيًا (لا صور
   Stock بالخلفية الافتراضية — التركيز على الشعار وحده، تعليمات صريحة).
   .hero-bg-overlay فوقها لكن بلا تعتيم (طلب صريح: إزالة الضبابية/الفلترة
   فوق الصور — تبقى صورة نظيفة واضحة)؛ المقروئية تُضمن باقتراب لون الخلفية
   من لون خلفية النص الموجود أصلًا. */
.hero-bg-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
/* :not([hidden]) إجباري هنا — بدونه display:block الصريح (تخصيصه أعلى من
   قاعدة المتصفح الافتراضية [hidden]{display:none}) يُلغي إخفاء العنصر
   المخفي (الفيديو غالبًا، بلا مصدر) فيحجز ارتفاعًا كاملًا بالتخطيط
   العادي ويدفع العنصر الآخر (الصورة) خارج الحاوية المرئية. */
.hero-bg-media img:not([hidden]), .hero-bg-media video:not([hidden]){ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero-bg-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background:transparent; transition:background .3s ease; }
/* عمود واحد يتوسّط الشعار فوق النص، بمسافات سخية بين العناصر (الشعار،
   ثم عنوان الفقرة التعريفية، ثم العنوان الرئيسي، ثم الفقرة) — لا شيء
   ملاصق للقائمة العائمة أو أزرار التحكم أعلى الشاشة (padding-top سخي
   على .hero نفسها أعلاه). */
.hero-grid{
  position:relative; z-index:3; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:36px; padding-bottom:56px;
}
.eyebrow{ color:var(--text); font-size:16px; font-weight:600; margin-bottom:14px; letter-spacing:.02em; }
.hero .eyebrow{ color:var(--dark-text); opacity:.85; }
.hero-copy{ display:flex; flex-direction:column; align-items:center; max-width:640px; }
.hero-copy h1{ font-size:clamp(28px, 3.6vw, 40px); font-weight:700; color:var(--dark-text); margin-bottom:16px; }
.hero-copy > p{ color:var(--dark-muted); font-size:17px; max-width:520px; margin:0; }
.hero .btn-outline{ border-color:rgba(219,228,255,.3); color:var(--dark-text); background:transparent; }
.hero .btn-outline:hover{ border-color:var(--sand); background:rgba(219,228,255,.06); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hero-ctas .btn{ padding:14px 24px; font-size:15px; }

/* الشعار الحقيقي (assets/logo-full.png — نفس ملف الهوية المستخدم بالفوتر،
   يجمع علامة "شِعاري" ونص "SHAARI Studio" معًا) هو العنصر البصري الرئيسي
   بالهيرو، ظاهر افتراضيًا وبحجم كبير جدًا بسطح المكتب. الحجم يتدرّج عبر
   نقاط التوقف أدناه (كبير جدًا بسطح المكتب، متوسط بالتابلت، مناسب للجوال
   بلا خروج عن حدود الشاشة). يبقى قابلاً للإخفاء من لوحة التحكم (خانة
   "إخفاء شعار الهيرو") عبر الكلاس .is-hidden — راجع cms-connector.js. */
.hero-visual{ position:relative; z-index:3; }
.hero-visual.is-hidden{ display:none; }
.mark-plate{
  position:relative; width:min(620px, 52vw);
  /* نسبة الشعار الافتراضي السابق (logo-full.png، 711×471) — تُثبِّت
     ارتفاع هذا الصندوق دائمًا بنفس القيمة، سواء كان الشعار ظاهرًا أو
     مخفيًا (بلا صورة مرفوعة بعد) أو مستبدَلًا بشعار آخر بنسبة مختلفة —
     حتى لا يتغيّر حجم/ارتفاع الهيرو الكلي إطلاقًا حسب حالة الشعار. مهم
     تحديدًا عند إضافة خلفية للهيرو لاحقًا (حجم ثابت يعتمد عليه). */
  aspect-ratio: 711 / 471;
}
.mark-plate picture{ display:block; width:100%; height:100%; }
.hero-logo{
  width:100%; height:100%; object-fit:contain; display:block;
  animation:hero-reveal-up 1.3s cubic-bezier(.16,.84,.44,1) .25s both;
}
/* لا شعار افتراضي مضمَّن — الصورة نفسها تختفي (بنفس نمط
   .process-banner.is-no-image) حتى يرفع الأدمن صورة له صراحةً من لوحة
   التحكم؛ حينها فقط تُزال .is-no-image (cms-connector.js) وتظهر. صندوق
   .mark-plate الأب يحافظ على نفس المساحة (aspect-ratio أعلاه) بغضّ
   النظر عن ظهور الصورة من عدمه. */
.hero-logo.is-no-image{ display:none; }
@keyframes hero-reveal-up{
  0%{ clip-path:inset(0 0 100% 0); transform:scale(1.08); }
  100%{ clip-path:inset(0 0 0 0); transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .hero-logo{ animation:none; }
}
@media (max-width:920px){
  .mark-plate{ width:min(460px, 62vw); }
}
@media (max-width:520px){
  .mark-plate{ width:min(320px, 78vw); }
  /* الهيرو بالجوال يشغل كامل الشاشة — 100dvh يدعم شاشات آيفون اللتي
     تتغير ارتفاعها مع شريط البحث/التبويب السفلي (dvh = dynamic viewport height). */
  .hero{ padding:100px 0 36px; min-height:100dvh; min-height:100vh; }
}
.float-card{
  /* hidden for now — remove this line to bring the stat cards back */
  display:none;
  position:absolute; background:var(--paper);
  border:1px solid var(--line); box-shadow:0 18px 40px rgba(35,21,14,.28);
  border-radius:16px; padding:13px 16px; font-size:13px; color:var(--muted);
}
.float-card-top{ top:20px; left:20px; min-width:126px; }
.float-card-top strong{ display:block; font-size:24px; color:var(--text); line-height:1.1; }
.float-card-bottom{ bottom:20px; right:20px; display:flex; align-items:center; gap:8px; font-weight:500; color:var(--text); }
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--sand-strong); box-shadow:0 0 0 4px rgba(219,228,255,.35); flex-shrink:0; }

/* ---------- Section base ---------- */
.section{ padding:76px 0; }
.section:first-of-type{ border-top:none; }
.section-muted{ padding:76px 0; }
.section-title{ text-align:center; max-width:600px; margin:0 auto 42px; }
.section-title h2{ font-size:clamp(26px, 3vw, 34px); font-weight:700; margin-bottom:8px; }
.section-title p{ color:var(--muted); font-size:17px; margin:0; }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.about-copy{ color:var(--ink); }
.about-copy p{ color:var(--muted); font-size:16px; }
.about-copy svg{ stroke:var(--ink) !important; fill:none; }
.about-copy__eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink); }
.about-copy__eyebrow svg{ color:var(--ink); flex-shrink:0; }
.about-copy h2 svg{ color:var(--ink); flex-shrink:0; }
.about-copy p svg{ color:var(--ink); flex-shrink:0; }
.about-copy__heading{ display:flex; align-items:flex-start; gap:10px; }
.about-copy__heading svg{ margin-top:4px; flex-shrink:0; }
.about-copy__heading h2{ flex:1; }
.check-list{
  list-style:none; padding:0; margin:16px 0 0;
  display:grid; grid-template-columns:1fr 1fr; gap:10px 20px;
  font-size:14.5px; color:var(--text); font-weight:500;
}
.check-list li{ display:flex; align-items:center; gap:9px; }
.check-list li svg{ color:var(--ink); flex-shrink:0; }
.check-list li span{ color:var(--muted); }
.check-list li:not(:has(> svg))::before{
  content:""; width:19px; height:19px; border-radius:50%; flex-shrink:0;
  background:var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2314151A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.about-media{ position:relative; }
.about-plate{
  position:relative;
  border-radius:22px; overflow:hidden; aspect-ratio:4/3.4;
}
.about-plate img{ width:100%; height:100%; object-fit:cover; }
.about-stat-box{
  display:flex; gap:36px; justify-content:space-between; align-items:stretch;
  background:var(--paper-2); border-radius:16px; box-shadow:0 10px 26px rgba(35,21,14,.2), inset 0 1px 0 rgba(219,228,255,.5);
  padding:20px 28px; border:0; margin-top:18px;
}
.about-stat-box > div{ flex:1; text-align:center; position:relative; }
.about-stat-box > div + div{ border-right:1px solid var(--line); }
.about-stat-box strong{ display:block; font-size:48px; font-weight:800; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-1px; transition:transform .25s ease, color .25s ease; }
.about-stat-box span{ font-size:14px; margin-top:8px; display:block; color:var(--muted); }
.about-stat-box.is-show strong{ animation:statPop .5s cubic-bezier(.22,.61,.36,1); }
@keyframes statPop{ 0%{ transform:scale(.8); opacity:.4; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }
@media (hover:hover){
  .about-stat-box:hover{ transform:translateY(-4px); box-shadow:0 26px 52px rgba(35,21,14,.22); }
  .about-stat-box:hover strong{ transform:scale(1.12); color:var(--sand-strong); }
  .about-stat-box{ transition:transform .25s ease, box-shadow .25s ease; }
}

/* ---------- Services ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
/* تنقل سوايب لقسم الخدمات (يظهر على الجوال فقط) بنفس عناصر أعمالنا */
.services-swipe-nav{ display:none; }
@media (max-width:760px){
  .services-swipe-nav{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; }
  #servicesGrid{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding:4px 4px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  #servicesGrid::-webkit-scrollbar{ display:none; }
  #servicesGrid .service-card{ min-width:80%; scroll-snap-align:center; }
  .services-swipe-arrow{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
  .services-swipe-dots{ display:flex; gap:7px; }
}
.services-cta-row{ text-align:center; margin-top:36px; margin-bottom:32px; }
/* مسافة إضافية عند إخفاء قسم الخدمات المميزة (is-empty) لمنع التصاق زر "استكشف خدماتنا" بعنوان "أحدث الأعمال" */
#services{ padding-bottom:12px; }
#featuredServices.is-empty + #latest-work{ margin-top:12px; }
.latest-work__heading h2{ margin-bottom:10px; }
.latest-work__heading p{ margin-top:6px; line-height:1.8; }
.service-card{
  display:block; text-decoration:none; color:inherit; cursor:pointer;
  background:var(--paper-2);
  border:0; border-radius:20px; padding:26px 22px;
  box-shadow:0 6px 18px -8px rgba(35,21,14,.18), inset 0 1px 0 rgba(219,228,255,.5);
  transition:transform .22s ease, box-shadow .22s ease;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px -10px rgba(35,21,14,.28), inset 0 1px 0 rgba(219,228,255,.5); }
.svc-icon{
  width:52px; height:52px; border-radius:15px; background:var(--sand); color:var(--ink-fixed);
  display:grid; place-items:center; margin-bottom:14px;
}
.svc-icon-image{ overflow:hidden; padding:0; background:var(--paper-2); }
.svc-icon-image img{ width:100%; height:100%; object-fit:cover; }
.service-card h3{ font-size:23px; font-weight:700; margin-bottom:6px; color:var(--ink); }
.service-card p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.75; }

/* ---------- Tilt (interactive hover) ---------- */
.tilt{ transition:transform .25s ease, box-shadow .25s ease; will-change:transform; transform-style:preserve-3d; }

/* ---------- Work / Projects ---------- */
.project-filters{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:30px; }
.pill{
  border:1px solid var(--line-strong); background:var(--paper); color:var(--text); padding:9px 18px;
  border-radius:999px; font-size:13.5px; font-weight:600; cursor:pointer; transition:.18s;
}
.pill.is-active, .pill:hover{ background:var(--sand); color:var(--ink-fixed); border-color:var(--sand); }

.carousel-wrap{ position:relative; }
.carousel-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding:4px 2px 10px;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track .project-card{
  scroll-snap-align:start; flex:0 0 auto;
  width:87%;
}
@media (min-width:820px){
  .carousel-track .project-card{ width:calc(50% - 10px); }
}
@media (min-width:1200px){
  .carousel-track .project-card{ width:calc(33.333% - 15px); }
}
.carousel-arrow{
  position:absolute; top:calc(50% - 20px); transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--paper); color:var(--text); cursor:pointer;
  display:grid; place-items:center; z-index:3; box-shadow:var(--shadow-sm);
  transition:background .2s ease, border-color .2s ease;
}
.carousel-arrow:hover{ background:var(--sand); color:var(--ink-fixed); border-color:var(--sand); }
.carousel-prev{ right:-8px; }
.carousel-next{ left:-8px; }
.carousel-dots{ display:flex; gap:7px; justify-content:center; margin-top:18px; }
.carousel-dots span{
  width:7px; height:7px; border-radius:50%; background:var(--line-strong); cursor:pointer; transition:.2s;
}
.carousel-dots span.is-active{ background:var(--sand); width:20px; border-radius:5px; }
@media (max-width:640px){
  .carousel-arrow{ display:none; }
}
.project-card{
  position:relative;
  background:var(--paper-2);
  border:0; border-radius:18px;
  cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(35,21,14,.18), inset 0 1px 0 rgba(219,228,255,.5);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s ease, box-shadow .3s ease;
}
.project-card:hover{ transform:translateY(-8px) scale(1.015); box-shadow:0 14px 30px -10px rgba(35,21,14,.28), inset 0 1px 0 rgba(219,228,255,.5); }
.project-card.is-hidden{ display:none; }
/* بطاقة "مميّزة" بمنتصف كل مجموعة ثلاثية — نفس الإيقاع البصري بالنموذج
   المرسل (بطاقة وسطى أعلى قليلاً من جارتيها) بدون تثبيت العدد على 3 عناصر
   بالضبط: يتكرر كل 3 بطاقات تلقائيًا مهما كان عدد بطاقات الكاروسيل. */
@media (min-width:1200px){
  .carousel-track .project-card:nth-child(3n+2){ transform:translateY(-18px); z-index:1; }
  .carousel-track .project-card:nth-child(3n+2):hover{ transform:translateY(-24px) scale(1.015); }
}
/* صندوق ثابت الارتفاع (نفس إيقاع الشبكة — كل البطاقات بنفس الطول)، والصورة
   بـobject-fit:cover تملأ الصندوق بالكامل edge-to-edge (قصّ عند الحاجة
   بدل ترك فراغ letterbox حواليها) — بطلب صريح: القصّ غير مشكلة. */
.project-thumb{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  margin:18px 16px 0; border-radius:14px;
  background:var(--paper);
}
.project-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.project-card:hover .project-thumb img{ transform:scale(1.08); }
.project-thumb-overlay{
  position:absolute; inset:0; z-index:1;
  background:transparent; /* بلا تدرّج غامق — طلب صريح: إزالة الفلترة/الضبابية فوق الصور */
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:20px;
  opacity:0; transition:opacity .3s ease;
  pointer-events:none;
}
.project-card:hover .project-thumb-overlay{ opacity:1; }
.project-thumb-overlay-btn{
  display:flex; align-items:center; gap:7px;
  background:rgba(219,228,255,.95); color:var(--ink-fixed); border-radius:999px;
  padding:9px 18px; font-size:12.5px; font-weight:700;
  transform:translateY(10px); transition:transform .3s ease;
}
.project-card:hover .project-thumb-overlay-btn{ transform:translateY(0); }
/* شارة التصنيف — صندوق داكن مصمت يطفو أعلى منتصف الصورة، متراكب مع
   الحافة العلوية للبطاقة والصورة معًا (نفس أثر النموذج المرسل) — لازم
   تكون شقيقة لـ.project-thumb (وليست بداخلها) حتى لا يقصّها overflow:
   hidden الخاص بالصورة (المطلوب أصلاً لاحتواء تكبير الصورة عند hover). */
.project-tag{
  position:absolute; top:6px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:7px;
  background:var(--ink-fixed); color:#DBE4FF; border:none;
  font-size:11.5px; font-weight:700; padding:7px 16px; border-radius:999px;
  box-shadow:0 8px 18px rgba(35,21,14,.28);
  white-space:nowrap; transition:transform .3s ease;
}
.project-card:hover .project-tag{ transform:translateX(-50%) translateY(-2px); }
.tag-dot{ display:none; } /* الشارة الجديدة نص فقط بلا نقطة لون، لمطابقة النموذج المرسل */
.photo-count{
  position:absolute; bottom:12px; left:12px; z-index:1;
  display:flex; align-items:center; gap:5px;
  background: var(--paper); color: var(--ink); border:1px solid var(--line);
  font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:999px;
}
.project-body{
  margin:14px 16px 16px; padding:12px 14px;
  border:1px solid var(--line); border-radius:12px;
}

/* ---------- "أحدث أعمالنا" — coverflow carousel (قسم مستقل بتصميم
   خاص، مثل .hero/.about-hero/.cta-band — ليس .section/.section-title
   العامّين، لأن التخطيط هنا [عنوان+وصف على اليمين، أسهم على اليسار]
   مختلف جذريًا عن ترويسة الأقسام المركزية المعتادة بالموقع). ألوان
   النموذج المرجعي استُبدلت بمتغيرات هوية الموقع الفعلية
   (--sand-light/--ink/--muted...) — ضمن قانون اللونين فقط (#DBE4FF/#23150E). */
.latest-work{
  position:relative; overflow:hidden;
  padding:90px 0 100px;
  background:var(--sand-light);
  color:var(--ink);
  isolation:isolate;
}
.latest-work__header{
  width:min(1280px, calc(100% - 60px));
  margin:0 auto 50px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
}
.latest-work__heading{ max-width:560px; }
.section-label{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:15px; font-size:13px; font-weight:600; color:var(--ink);
}
.section-label::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.latest-work h2{
   margin:0; font-size:clamp(40px, 5.5vw, 66px); line-height:1.05; font-weight:800; color:var(--ink);
 }
 .latest-work__heading p{
   max-width:510px; margin:18px 0 0; font-size:14px; line-height:1.8; color:var(--muted);
 }
.latest-work__controls{ display:flex; gap:10px; direction:ltr; }
.work-arrow{
  width:52px; height:52px; border:1px solid var(--line-strong); border-radius:50%;
  background:transparent; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.work-arrow:hover{ background:var(--ink-fixed); color:var(--dark-text); border-color:var(--ink-fixed); transform:translateY(-3px); }
.work-arrow:disabled{ opacity:.35; cursor:default; pointer-events:none; }

.works-carousel{
  position:relative; width:100%; height:540px; overflow:hidden;
  perspective:1400px; cursor:grab; user-select:none; touch-action:pan-y;
}
.works-carousel.is-dragging{ cursor:grabbing; }
.works-carousel__track{
  position:absolute; top:0; left:50%; width:100%; height:100%; transform:translateX(-50%);
}
.work-card{
  position:absolute; top:50%; left:50%;
  width:min(360px, 30vw); height:480px; overflow:hidden; border-radius:24px;
  background:var(--paper-2);
  will-change:transform, opacity;
  transition:transform .75s cubic-bezier(.22,.61,.36,1), opacity .75s ease, box-shadow .75s ease;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* بطاقة مستبعدة بفلتر تصنيف (قسم "أعمالنا") — تُستبعد من حساب مواضع
   الكاروسيل بالجافاسكربت، لكن قد يبقى عليها transform/opacity قديم من
   آخر مرة كانت ظاهرة فيها؛ display:none يضمن اختفاءها فعليًا بلا انتظار
   إعادة render(). */
.work-card.is-filtered-out{ display:none !important; }
/* الصورة تملأ البطاقة بالكامل edge-to-edge (object-fit:cover) — أصبح هذا
   آمنًا الآن رغم القصّ لأن نص البطاقة له صندوقه الزجاجي المصنفر الخاص
   فوق الصورة (لا يعتمد على مساحة فارغة/letterbox تحته كما كان سابقًا). */
.work-card__image{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center;
  pointer-events:none;
  background:var(--paper-2);
  opacity:0;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:transform .9s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
}
.work-card__image.is-loaded{ opacity:1; }
.work-card__overlay{
  /* التدرّج الغامق اللي كان يقصّ لون أسفل البطاقة أُزيل بطلب صريح —
     العنصر نفسه أُبقي بلا حذف من HTML، فقط بلا أي تأثير بصري. */
  position:absolute; inset:0;
}
/* صندوق زجاجي فاتح خلف نص البطاقة — لون أقرب إلى مربع البحث (#ebf0fc)
   بشفافية أخف، زوايا أنعم، وضبابية خلفية ناعمة، ونصوص غامقة. */
.work-card__content{
  position:absolute; z-index:2; right:24px; left:24px; bottom:22px;
  background:rgba(235,240,252,.42); color:#23150E;
  border-radius:20px; padding:14px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px rgba(35,21,14,.1);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.work-card__category{
  display:inline-block; padding:6px 12px; margin-bottom:8px; border-radius:50px;
  background:var(--ink-fixed); font-size:11px; color:#DBE4FF;
}
.work-card h3{ margin:0; font-size:22px; line-height:1.3; color:#23150E; }
.work-card p{ margin:8px 0 0; font-size:12px; line-height:1.7; color:rgba(35,21,14,.7); }
.work-card.is-center{ box-shadow:0 18px 46px rgba(35,21,14,.16); }
.work-card.is-center .work-card__image{ transform:translateZ(0) scale(1.04); }

.works-pagination{ display:flex; justify-content:center; gap:7px; margin-top:30px; }
.work-dot{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:var(--line-strong); cursor:pointer; transition:.35s ease;
}
.work-dot.is-active{ width:28px; border-radius:20px; background:var(--ink-fixed); }

/* نفس كاروسيل الـcoverflow، لكن نسخة ثانية بقسم "أعمالنا" (فلاتر + كل
   الأعمال، لا الـ6 المميّزة فقط) — الأسهم هنا تطفو على حواف الكاروسيل
   نفسه بدل الجلوس بجانب العنوان (العنوان هنا يبقى بتصميمه الأصلي
   المتمركز + الفلاتر تحته، لم يُطلب تغييره). */
.works-carousel-wrap{ position:relative; }
.works-carousel-wrap .work-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  background:var(--paper); box-shadow:var(--shadow-sm);
}
.works-carousel-wrap .work-arrow:hover{ transform:translateY(-50%) translateY(-3px); }
.works-carousel-wrap .work-arrow--prev{ right:-8px; }
.works-carousel-wrap .work-arrow--next{ left:-8px; }

@media (max-width:760px){
  .latest-work{ padding:65px 0 70px; }
  .latest-work__header{ width:calc(100% - 32px); flex-direction:column; align-items:flex-start; margin-bottom:30px; }
  .latest-work__controls{ display:none; } /* على الجوال: Swipe فقط، الأسهم مخصصة لسطح المكتب */
  .works-carousel-wrap .work-arrow{ display:none; }
  .works-carousel{ height:430px; }
  .work-card{ width:290px; height:auto; aspect-ratio:.74; min-height:0; border-radius:20px; }
  /* مربع التسميات الزجاجي أصغر قليلًا على الجوال ليناسب الشاشة */
  .work-card__content{ right:14px; left:14px; bottom:14px; padding:10px 14px; border-radius:16px; }
  .work-card h3{ font-size:17px; }
  .work-card p{ font-size:11px; margin-top:5px; line-height:1.6; }
  .work-card__category{ padding:4px 10px; margin-bottom:6px; font-size:10px; }
}
@media (max-width:480px){
  .work-card{ width:270px; aspect-ratio:.74; }
}
/* حركة دخول البطاقات عند ظهور القسم (data-work-entrance يضبطه
   cms-connector.js حسب إعداد القسم "الحركة والتأثيرات" باللوحة):
   - fade: تلاشٍ ناعم
   - slide-up: صعود متدرج من الأسفل
   - stagger: دخول متتابع (كل بطاقة تليها مع تأخير خفيف) — الطابع
     الإبداعي الافتراضي.
   بطاقات الكاروسيل (.work-card) تستخدم تلاشي opacity فقط حتى لا تتعارض
   مع transforms الـcoverflow التي يتحكم بها الـJS على نفس العنصر —
   الـrise (مع transform) حصرًا لبطاقات الشبكة (.project-card). */
section[data-work-entrance="fade"] .work-card,
section[data-work-entrance="fade"] .project-card{ animation:shiary-work-fade .7s ease both; }
section[data-work-entrance="slide-up"] .work-card,
section[data-work-entrance="stagger"] .work-card{ animation:shiary-work-fade .7s ease both; }
section[data-work-entrance="slide-up"] .project-card,
section[data-work-entrance="stagger"] .project-card{ animation:shiary-work-rise .75s cubic-bezier(.22,.8,.35,1) both; }
section[data-work-entrance="stagger"] .work-card:nth-child(1),
section[data-work-entrance="stagger"] .project-card:nth-child(1){ animation-delay:.05s; }
section[data-work-entrance="stagger"] .work-card:nth-child(2),
section[data-work-entrance="stagger"] .project-card:nth-child(2){ animation-delay:.16s; }
section[data-work-entrance="stagger"] .work-card:nth-child(3),
section[data-work-entrance="stagger"] .project-card:nth-child(3){ animation-delay:.27s; }
section[data-work-entrance="stagger"] .work-card:nth-child(4),
section[data-work-entrance="stagger"] .project-card:nth-child(4){ animation-delay:.38s; }
section[data-work-entrance="stagger"] .work-card:nth-child(5),
section[data-work-entrance="stagger"] .project-card:nth-child(5){ animation-delay:.49s; }
section[data-work-entrance="stagger"] .work-card:nth-child(6),
section[data-work-entrance="stagger"] .project-card:nth-child(6){ animation-delay:.6s; }
section[data-work-entrance="stagger"] .work-card:nth-child(7),
section[data-work-entrance="stagger"] .project-card:nth-child(7){ animation-delay:.71s; }
section[data-work-entrance="stagger"] .work-card:nth-child(8),
section[data-work-entrance="stagger"] .project-card:nth-child(8){ animation-delay:.82s; }
@keyframes shiary-work-fade{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes shiary-work-rise{
  from{ opacity:0; transform:translateY(28px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
/* صندوق نص البطاقة يرتفع قليلًا مع ظل أثقل عند التحويم (تكامل رفع
   العنوان مع تكبير الصورة الموجود أصلًا) — انتقال ناعم متوافق مع
   خلفيته شبه الصلبة الجديدة. */
.work-card__content{ transition:transform .35s cubic-bezier(.22,.8,.35,1), box-shadow .35s ease; }
.work-card:hover .work-card__content,
.work-card.is-center:hover .work-card__content{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(35,21,14,.24); }
@media (prefers-reduced-motion: reduce){
  section[data-work-entrance] .work-card,
  section[data-work-entrance] .project-card{ animation:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .work-card, .work-card__image, .work-arrow, .work-dot{ transition:none !important; }
}

/* ---------- Portfolio engagement row (views / likes / shares) ---------- */
.project-engagement{
  display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--line);
}
.engagement-item{
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0;
  font-size:13px; font-weight:600; color:var(--muted); cursor:default;
  transition:color .2s ease, transform .15s ease;
}
.engagement-views svg{ opacity:.75; }
button.engagement-item{ cursor:pointer; }
button.engagement-item:hover{ color:var(--text); transform:scale(1.06); }
.engagement-like svg{ transition:fill .2s ease, stroke .2s ease, transform .2s ease; }
.engagement-like:active svg{ transform:scale(1.25); }
.engagement-like:hover{ color:#23150E; }
.engagement-like.is-liked{ color:#23150E; }
.engagement-like.is-liked svg{ fill:#23150E; stroke:#23150E; }
.engagement-share:hover{ color:var(--sand-strong); }
.engagement-share:hover svg{ transform:rotate(-8deg); }
.engagement-count{ min-width:12px; font-variant-numeric:tabular-nums; }

.engagement-share-wrap{ position:relative; }
.engagement-share-menu{
  position:absolute; bottom:calc(100% + 8px); right:0; z-index:300;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 16px 36px rgba(35,21,14,.18); padding:6px; width:172px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease;
}
.engagement-share-menu.engagement-share-menu-detached{
  position:fixed; right:auto; bottom:auto; /* JS sets top/bottom/left explicitly once moved to <body> */
}
.engagement-share-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.engagement-share-option{
  display:flex; align-items:center; gap:10px; width:100%; text-align:right; background:none; border:none; cursor:pointer;
  padding:9px 10px; border-radius:9px; font-size:13px; font-weight:600; color:var(--text);
  transition:background .15s ease;
}
.engagement-share-option svg{ flex-shrink:0; opacity:.85; }
.engagement-share-option:hover{ background:var(--paper-2); }
.project-body h3{ font-size:22px; font-weight:700; margin-bottom:4px; color:var(--ink); }
.project-body p{ color:var(--muted); font-size:14.5px; margin:0; }

/* ---------- Lightbox (full-screen studio viewer) ---------- */
.lightbox-overlay{
  position:fixed; inset:0; z-index:500; background:#000;
  overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  scrollbar-width:none; /* إخفاء شريط التمرير الجانبي في نافذة العرض */
  -ms-overflow-style:none;
}
.lightbox-overlay.hidden{ display:none; }
.lightbox-overlay.is-visible{ opacity:1; pointer-events:auto; }
.lightbox-overlay::-webkit-scrollbar{ display:none; }

.lightbox-top{
  position:sticky; top:0; z-index:5; background:transparent;
  display:flex; align-items:center; justify-content:flex-end;
  padding:14px 16px;
}
.lightbox-top-meta{ display:none; }
.lightbox-tag{
  display:inline-block; background:rgba(219,228,255,.1); color:var(--dark-body); font-size:12px; font-weight:700;
  padding:6px 13px; border-radius:999px;
}
.lightbox-count{ color:rgba(219,228,255,.5); font-size:12.5px; font-family:var(--font-body, "IBM Plex Sans Arabic", sans-serif); }
.lightbox-close{
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  color:#DBE4FF; cursor:pointer;
  display:grid; place-items:center; flex-shrink:0;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .2s ease, transform .2s ease;
}
.lightbox-close:hover{ background:rgba(255,255,255,.26); transform:scale(1.06); }
.lightbox-close svg{ color:inherit; }

.lightbox-stage{
  min-height:calc(100dvh - 64px);
  padding:0 12px 28px;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-image-stack{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  width:100%;
}
/* كل صورة تُعرض بحجمها الطبيعي الكبير ضمن حدود الشاشة — لا تصغير ولا قصّ
   ولا تشويه؛ أبعادها ونسبها محفوظة دائمًا (object-fit:contain). */
.lightbox-image-stack img{
  max-width:100%; max-height:calc(100dvh - 96px);
  width:auto; height:auto;
  display:block; object-fit:contain; object-position:center;
  border-radius:8px;
}

/* نافذة مخصصة للصورة فقط: لا شيء سوى الصورة وزر الإغلاق (X) */
.lightbox-footer{ display:none; }
.lightbox-meta{ margin-bottom:0; }
.lightbox-meta h3{ color:var(--dark-text); font-size:16.5px; margin-bottom:4px; }
.lightbox-meta p{ color:var(--dark-muted); font-size:13.5px; margin:0; max-width:640px; }

@media (max-width:720px){
  .lightbox-stage{ min-height:calc(100dvh - 56px); padding:0 8px 20px; }
  .lightbox-image-stack img{ max-height:calc(100dvh - 88px); }
}

/* ---------- Process (compact timeline) ---------- */
.timeline{ position:relative; margin-top:6px; }
.timeline::before{
  content:""; position:absolute; right:19px; top:6px; bottom:6px; width:2px; background:var(--line-strong);
}
.timeline-item{ position:relative; padding-right:56px; margin-bottom:26px; }
.timeline-item:last-child{ margin-bottom:0; }
.timeline-dot{
  position:absolute; right:10px; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--sand); border:4px solid #dbe4ff; box-shadow:0 0 0 2px var(--sand-strong);
}
.timeline-year{ font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:3px; letter-spacing:.04em; }
.timeline-item h3{ font-size:16.5px; margin-bottom:4px; }
.timeline-item p{ color:var(--muted); font-size:14px; margin:0; max-width:560px; }

/* ---------- Process (cards) ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:6px; }
.process-card{
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--card-border); border-radius:20px; padding:26px 22px;
  box-shadow:var(--card-shadow);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.process-card:hover{ transform:translateY(-4px); box-shadow:var(--card-shadow-hover); border-color:var(--sand-strong); }
.process-card .svc-icon{ transition:background .22s ease, transform .22s ease; }
.process-card:hover .svc-icon{ background:var(--sand-strong); transform:scale(1.08) rotate(-4deg); }
.process-num{
  position:absolute; top:20px; inset-inline-end:20px;
  font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--muted);
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:3px 11px; line-height:1.6;
}
.process-card h3{ font-size:20px; font-weight:700; margin-bottom:6px; color:var(--ink); }
.process-card p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.75; }

/* ---------- Why ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.why-item{
  background:var(--paper-2);
  border:1px solid var(--line); border-radius:18px; padding:20px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--card-shadow);
  transition:box-shadow .22s ease, transform .22s ease;
}
.why-item:hover{ transform:translateY(-3px); box-shadow:var(--card-shadow-hover); }
.why-icon{ width:42px; height:42px; border-radius:12px; background:var(--sand); color:var(--ink-fixed); display:grid; place-items:center; }
.why-item h3{ font-size:22px; font-weight:700; margin-bottom:2px; color:var(--ink); }
.why-item p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.7; }

/* ---------- CTA — "ابدأ قصتك" بطابع إبداعي (قصّة تُروى + خطوط متحركة) ---------- */
/* اللوحة محتواة مثل بقية البنرات — ليست ممتدة لآخر الصفحة، بل شريط
   بحواف ناعمة وهامش جانبي فوق خلفية الصفحة نفسها. */
.cta-band{
  position:relative;
  padding:26px 0 72px;
}
.cta-band-inner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  width:min(var(--container), calc(100% - 64px)); margin:0 auto;
  background:var(--cta-bar-bg, #DBE4FF);
  border-radius:30px;
  padding:clamp(30px, 4.2vw, 54px) clamp(22px, 3.2vw, 46px);
  box-shadow:0 16px 40px -32px rgba(35,21,14,.28), inset 0 1px 0 rgba(219,228,255,.9);
  overflow:hidden; z-index:1;
}
/* خلفية إبداعية متحركة للشريط: ثلاث طبقات خطوط تميل بزوايا مختلفة وتنزلق
   باتجاهين متعاكسين باستمرار (كأنها نسج قصة) + توهج خفيف متغير + لمعة
   ضوئية تمسح الشريط ببطء (::after). اختيار "صورة/بنر" أو "فيديو" من خلفية
   الشريط يخفي هذه الزخارف تمامًا — لا تتدرج ولا خطوط تبقى فوق الوسائط. */
.cta-band-inner::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:0; opacity:.6;
  background-image:
    repeating-linear-gradient(55deg, rgba(35,21,14,.05) 0 2px, transparent 2px 48px),
    repeating-linear-gradient(-55deg, rgba(35,21,14,.034) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(20deg, rgba(35,21,14,.024) 0 1px, transparent 1px 120px),
    radial-gradient(640px 420px at 14% -12%, rgba(255,255,255,.85), transparent 68%);
  animation:ctaFlow 30s linear infinite, ctaBreath 9s ease-in-out infinite;
}
@keyframes ctaFlow{ to{ background-position:-120px 0, 90px 0, 0 0, 0 0; } }
@keyframes ctaBreath{ 0%,100%{ opacity:.45; } 50%{ opacity:.8; } }
@keyframes ctaSweep{ 0%{ background-position:135% 0; } 100%{ background-position:-35% 0; } }
.cta-band-inner::after{
  content:""; position:absolute; inset:-20%; border-radius:inherit; pointer-events:none;
  z-index:0; opacity:.5;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%);
  background-size:220% 100%;
  animation:ctaSweep 8s cubic-bezier(.4,0,.2,1) infinite;
}
#shiary-cta-media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  border-radius:inherit;
}
/* صورة/بنر أو فيديو يعطِّلان زخارف الشريط كاملة — "الخلفية الحالية تظهر
   فقط لو ما خصّصت". */
.cta-band-inner[data-cta-bg="image"]::before,
.cta-band-inner[data-cta-bg="image"]::after,
.cta-band-inner[data-cta-bg="video"]::before,
.cta-band-inner[data-cta-bg="video"]::after{ display:none; }
html.dark-mode .cta-band-inner::before{
  background-image:
    repeating-linear-gradient(55deg, rgba(219,228,255,.06) 0 2px, transparent 2px 48px),
    repeating-linear-gradient(-55deg, rgba(219,228,255,.045) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(20deg, rgba(219,228,255,.028) 0 1px, transparent 1px 120px),
    radial-gradient(640px 420px at 14% -12%, rgba(219,228,255,.13), transparent 68%);
}
html.dark-mode .cta-band-inner::after{
  background:linear-gradient(115deg, transparent 42%, rgba(219,228,255,.14) 50%, transparent 58%);
}
.cta-copy{ position:relative; z-index:2; max-width:620px; }
.cta-eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 18px !important;
  padding:9px 20px; border-radius:999px;
  background:rgba(235,240,252,.95); color:#19100A; font-weight:700;
  border:1px solid rgba(35,21,14,.1);
  box-shadow:0 6px 16px -12px rgba(35,21,14,.18), inset 0 1px 0 rgba(255,255,255,.85);
}
.cta-eyebrow::before{ content:"\2726"; font-size:11px; color:rgba(25,16,10,.85); }
.cta-band h3{
  font-size:clamp(34px, 5vw, 64px); font-weight:800; margin:0 0 16px;
  color:#19100A; line-height:1.22;
}
.cta-band p{ margin:0; color:#19100A; font-size:clamp(17px, 1.7vw, 21px); line-height:1.9; max-width:560px; opacity:.88; }
.cta-actions{ position:relative; z-index:2; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
/* مربعات ناعمة #EBF0FC بنص #19100A — أشكال حبّية ناعمة بظل خفيف */
.cta-band .cta-btn{
  display:inline-flex; align-items:center; gap:12px;
  min-width:185px; justify-content:center;
  padding:18px 30px; border-radius:999px;
  background:rgba(235,240,252,.95); color:#19100A;
  border:1px solid rgba(35,21,14,.08);
  box-shadow:0 8px 20px -16px rgba(35,21,14,.24), inset 0 1px 0 rgba(255,255,255,.95);
  font-weight:700; font-size:17px; white-space:nowrap;
  transition:transform .25s cubic-bezier(.22,.8,.35,1), box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.cta-band .cta-btn svg{ flex-shrink:0; }
.cta-band .cta-btn .cta-btn__arrow{ flex-shrink:0; transition:transform .3s cubic-bezier(.22,.8,.35,1); }
.cta-band .cta-btn:hover{
  background:#EBF0FC; transform:translateY(-3px);
  box-shadow:0 12px 26px -18px rgba(35,21,14,.3), inset 0 1px 0 rgba(255,255,255,1);
  border-color:rgba(35,21,14,.16);
}
.cta-band .cta-btn:hover .cta-btn__arrow{ transform:translateX(-4px); }
.cta-band .cta-btn:active{ transform:translateY(-1px) scale(.97); }
.cta-band .cta-btn--ghost{ background:rgba(235,240,252,.55); border-style:solid; border-color:rgba(35,21,14,.18); }
.cta-band .cta-btn .ripple{ background:rgba(35,21,14,.12); }
/* الشكل المحتوى على الموبايل مثل بقية البنرات (هوامش جانبية + زوايا أنعم) */
@media (max-width:760px){
  .cta-band{ padding:18px 0 44px; }
  .cta-band-inner{ width:auto; margin:0 10px; border-radius:22px; }
}
@media (prefers-reduced-motion: reduce){
  .cta-band-inner::before, .cta-band-inner::after, #shiary-cta-media{ animation:none !important; }
}
/* ---------- Contact ---------- */
.form-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:24px; padding:30px 26px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:16px; margin-bottom:28px;
  color:var(--ink);
}
.careers-form-card{ max-width:760px; margin-inline:auto; }

/* ---------- Careers culture strip (لماذا معنا) ---------- */
.careers-culture{ background:var(--paper-2); }
.careers-culture-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
  margin-top:36px;
}
.careers-culture-card{
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:24px 20px; text-align:center;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.careers-culture-card:hover{
  transform:translateY(-5px); box-shadow:0 14px 34px rgba(35,21,14,.1);
  border-color:rgba(35,21,14,.4);
}
.careers-culture-icon{
  width:52px; height:52px; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px; background:rgba(35,21,14,.1);
  color:var(--sand-strong, #23150E); border:1px solid rgba(35,21,14,.2);
}
.careers-culture-card h3{ font-size:16px; margin:0 0 8px; color:var(--ink); }
.careers-culture-card p{ font-size:13px; line-height:1.8; color:var(--muted); margin:0; }
@media (max-width:900px){
  .careers-culture-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px){
  .careers-culture-grid{ grid-template-columns:1fr; }
}
.field-hint{ font-size:12px; color:var(--muted); margin-top:6px; display:block; }
.form-status{ font-size:13.5px; margin:14px 0 0; min-height:20px; }
.form-status.is-error{ color:var(--danger, #23150E); }
.form-status.is-success{ color:var(--success, #23150E); }

/* ---------- Site-wide startup/welcome popup ---------- */
.site-popup-overlay{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity var(--popup-anim-duration, .3s) ease;
}
.site-popup-overlay.is-open{ opacity:1; pointer-events:auto; }
.site-popup{
  border-radius:22px; padding:36px 30px 28px; max-width:440px; width:100%;
  text-align:center; position:relative; box-shadow:0 30px 70px rgba(35,21,14,.4);
  transition:transform var(--popup-anim-duration, .3s) cubic-bezier(.2,.9,.3,1.2), opacity var(--popup-anim-duration, .3s) ease;
}
/* fade (default): gentle rise + scale */
.site-popup-overlay.anim-fade .site-popup{ transform:translateY(14px) scale(.97); }
.site-popup-overlay.anim-fade.is-open .site-popup{ transform:translateY(0) scale(1); }
/* slide-right: enters moving from the left edge towards the right */
.site-popup-overlay.anim-slide-right .site-popup{ transform:translateX(-60px); opacity:0; }
.site-popup-overlay.anim-slide-right.is-open .site-popup{ transform:translateX(0); opacity:1; }
/* slide-left: enters moving from the right edge towards the left */
.site-popup-overlay.anim-slide-left .site-popup{ transform:translateX(60px); opacity:0; }
.site-popup-overlay.anim-slide-left.is-open .site-popup{ transform:translateX(0); opacity:1; }
/* typewriter: the popup itself just fades in; the title/description type themselves out via JS */
.site-popup-overlay.anim-typewriter .site-popup{ transform:translateY(10px); }
.site-popup-overlay.anim-typewriter.is-open .site-popup{ transform:translateY(0); }
.site-popup-typing::after{ content:'|'; animation:site-popup-caret 1s step-end infinite; opacity:.7; }
@keyframes site-popup-caret{ 50%{ opacity:0; } }
.site-popup-image{ width:100%; max-height:180px; object-fit:cover; border-radius:14px; margin-bottom:18px; }
.site-popup h3{ font-size:20px; margin:0 0 12px; }
.site-popup p{ font-size:14px; opacity:.85; line-height:1.8; margin:0 0 22px; }
.site-popup-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.site-popup-close{
  position:absolute; top:14px; left:14px; width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(219,228,255,.2); background:transparent; color:inherit; opacity:.75;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px; transition:.2s;
}
.site-popup-close:hover{ opacity:1; background:rgba(219,228,255,.08); }

/* fullscreen auto-close mode — media fills the entire viewport, no card
   chrome, no title/description/buttons */
.site-popup-overlay.mode-fullscreen{ padding:0; background:#23150E !important; }
.site-popup.fullscreen{
  max-width:none; width:100vw; height:100vh; height:100dvh; border-radius:0;
  padding:0; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.site-popup-fullscreen-media{ width:100%; height:100%; object-fit:cover; display:block; }
.site-popup.fullscreen .site-popup-close{
  top:20px; left:20px; background:rgba(35,21,14,.4); border-color:rgba(219,228,255,.35); z-index:2;
}

/* ---------- PWA "Add to Home Screen" install banner ---------- */
.pwa-install-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:390;
  max-width:480px; margin-inline:auto;
  background:var(--dark); color:var(--dark-body); border:1px solid var(--dark-line);
  border-radius:16px; padding:14px 16px; box-shadow:0 20px 50px rgba(35,21,14,.35);
  display:flex; align-items:center; gap:12px;
  transform:translateY(120%); opacity:0; transition:transform .35s cubic-bezier(.2,.9,.3,1.1), opacity .35s ease;
}
.pwa-install-banner.is-open{ transform:translateY(0); opacity:1; }
.pwa-install-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.pwa-install-text strong{ font-size:13.5px; color:var(--dark-text); }
.pwa-install-text span{ font-size:12px; color:var(--dark-muted); line-height:1.5; }
.pwa-install-close{
  width:26px; height:26px; border-radius:50%; border:1px solid rgba(219,228,255,.2);
  background:transparent; color:inherit; opacity:.7; flex-shrink:0; order:3;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px;
}
.pwa-install-close:hover{ opacity:1; }
@media (max-width:520px){
  .pwa-install-banner{ flex-wrap:wrap; }
  .pwa-install-text{ order:1; width:100%; }
  #pwaInstallBtn{ order:2; }
}
.site-popup-never-again{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px;
  font-size:12.5px; opacity:.7; cursor:pointer;
}
.site-popup-never-again input{ width:15px; height:15px; accent-color:var(--sand-strong); }


.careers-modal-overlay{
  position:fixed; inset:0; background:rgba(35,21,14,.72); z-index:300;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.careers-modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.careers-modal{
  background:var(--paper); border-radius:24px; padding:40px 32px 32px; max-width:420px; width:100%;
  text-align:center; position:relative; box-shadow:0 30px 70px rgba(35,21,14,.35);
  transform:translateY(14px) scale(.97); transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.careers-modal-overlay.is-open .careers-modal{ transform:translateY(0) scale(1); }
.careers-modal-icon{ font-size:44px; margin-bottom:12px; }
.careers-modal-icon svg{ width:44px; height:44px; color:var(--ink); }
.careers-modal h3{ font-size:19px; margin:0 0 12px; }
.careers-modal p{ font-size:14px; color:var(--muted); line-height:1.8; margin:0 0 24px; }
.careers-modal .btn{ width:100%; }
.careers-modal-close{
  position:absolute; top:14px; left:14px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s;
}
.careers-modal-close:hover{ background:var(--paper-2); color:var(--ink); }
.careers-modal-app-number{
  font-size:22px !important; font-weight:800; letter-spacing:.5px; direction:ltr;
  color:var(--ink-fixed) !important; background:var(--sand); border-radius:12px; padding:10px 16px;
  margin:0 0 18px !important; display:inline-block;
}
.careers-form-section-title{ font-size:15px; margin:8px 0 -2px; color:var(--ink); }
.careers-form-section-title:first-child{ margin-top:0; }
.careers-track-result{
  margin-top:18px; padding:18px; border-radius:16px; background:var(--paper); border:1px solid var(--line);
}
.careers-track-result-status{
  display:inline-block; padding:5px 14px; border-radius:999px; font-size:13px; font-weight:700; margin-bottom:10px;
}
.careers-track-result-status.is-under-review{ background:rgba(35,21,14,.18); color:rgba(35,21,14,.85); }
.careers-track-result-status.is-accepted{ background:rgba(35,21,14,.15); color:var(--success, #23150E); }
.careers-track-result-status.is-rejected{ background:rgba(35,21,14,.15); color:var(--danger, #23150E); }
/* حالات إضافية — استعلام طلب الخدمة بصفحة الخدمات (services.html)، نفس
   البطاقة/الشارة أعلاه بالضبط، فقط حالات مختلفة (new/reviewing/converted
   بدل under_review فقط بطلبات التوظيف). */
.careers-track-result-status.is-new{ background:rgba(35,21,14,.15); color:rgba(35,21,14,.85); }
.careers-track-result-status.is-reviewing{ background:rgba(35,21,14,.18); color:rgba(35,21,14,.85); }
.careers-track-result-status.is-converted{ background:rgba(35,21,14,.15); color:var(--success, #23150E); }
.form-field{ display:flex; flex-direction:column; gap:6px; }
label{ font-size:13px; font-weight:600; color:var(--muted); }
input,select,textarea{
  width:100%; border:1.3px solid var(--line-strong); background:var(--paper-2); border-radius:12px; padding:12px 14px;
  outline:none; transition:border-color .18s, box-shadow .18s; color:var(--text);
}
input:focus, select:focus, textarea:focus{ border-color:var(--sand-strong); box-shadow:0 0 0 3px rgba(219,228,255,.2); background:var(--paper); }
textarea{ min-height:110px; resize:vertical; }

.checkbox-field{
  display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--muted); cursor:pointer; line-height:1.6;
}
.checkbox-field input{ width:19px; height:19px; flex-shrink:0; margin-top:2px; accent-color:var(--sand-strong); }

.btn-block{ width:100%; padding:15px 22px; font-size:15px; }
.btn-sand svg{ flex-shrink:0; }

.form-actions{ margin-top:2px; }
.form-note{ font-size:12px; color:var(--muted-2); margin-top:6px; }
.form-note.center{ text-align:center; color:var(--muted-2); }

.contact-card-dark{
  background:var(--dark); color:var(--dark-body); border-radius:24px; padding:30px;
  box-shadow:0 22px 50px rgba(35,21,14,.2); border:1px solid var(--dark-line);
}
.contact-card-logo{ display:block; height:44px; width:auto; margin:0 auto 16px; }
.contact-card-dark h3{ color:var(--dark-text); font-size:22px; margin-bottom:8px; text-align:center; }
.contact-dark-desc{ color:var(--dark-muted); font-size:14px; margin-bottom:6px; text-align:center; }
.contact-dark-sub{
  color:rgba(35,21,14,.55); font-size:13px; text-align:center; line-height:1.75;
  margin:14px auto 0; padding-top:14px; max-width:36ch;
  border-top:1px solid rgba(219,228,255,.08);
}
.contact-list{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:13px; font-size:14.5px; }
.contact-list li{ display:flex; gap:11px; align-items:flex-start; }
.contact-list svg{ flex-shrink:0; margin-top:3px; color:var(--sand); }

.socials.socials-dark a{
  width:38px; height:38px;
  background:var(--sand); border-color:var(--sand); color:var(--ink-fixed);
  box-shadow:0 6px 18px rgba(219,228,255,.35), 0 0 0 4px rgba(219,228,255,.08);
  transition:background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.socials.socials-dark a:hover{
  background:var(--sand-strong); color:var(--ink-fixed); border-color:var(--sand-strong);
  transform:translateY(-3px) scale(1.08);
  box-shadow:0 12px 26px rgba(219,228,255,.5), 0 0 0 5px rgba(219,228,255,.14);
}
.contact-phone-link{ transition:color .2s ease; }
.contact-phone-link:hover{ color:var(--sand); text-decoration:underline; }
.contact-socials-tagline{
  text-align:center; color:var(--dark-muted); font-size:12.5px; line-height:1.8;
  margin:18px 0 0; padding-top:16px; border-top:1px solid rgba(219,228,255,.08);
}
.tagline-link{ color:var(--sand); font-weight:700; transition:color .2s ease; }
.tagline-link:hover{ color:var(--sand-strong); text-decoration:underline; }

/* ---------- Footer ---------- */
footer{ background:var(--paper-2); padding:44px 0 24px; color:var(--muted); font-size:13.5px; }

/* ---------- Professional minimal footer (3-column row) ----------
   خلفية وألوان ثابتة عمدًا (--sand/--ink، لا تتبع وضع فاتح/غامق) — بنفس
   مبدأ "المرساة الثابتة" المستخدم أصلًا بالهيدر والهيرو (لكن هنا فاتحة
   بدل داكنة)، لضمان تطابق الفوتر دائمًا مع النموذج المرسل بغض النظر عن
   تفضيل الزائر فاتح/غامق. */
.site-footer{ background:var(--sand); color:var(--ink-fixed); padding:32px 0; }
.footer-minimal-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:22px;
}
.footer-col{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.footer-col-brand{ flex:0 0 auto; }
/* الشعار الكامل (assets/logo-full.png) مرسوم بلون فاتح فاتح (--sand) —
   مصمَّم أصلاً ليظهر فوق خلفية داكنة (الهيدر). فوتر فاتح الآن فخلفيته
   قريبة جدًا من لون الشعار نفسه، فيختفي بلا تحويله للون داكن هنا عبر
   فلتر CSS (يحافظ على الشكل والشفافية، فقط يغيّر اللون). */
.footer-logo-full{ height:58px; width:auto; object-fit:contain; filter:brightness(0) saturate(100%); opacity:.88; }
.footer-col-center{ flex:1 1 220px; text-align:center; font-size:13px; color:var(--ink-fixed); gap:4px; }
.footer-col-center .footer-tagline{ font-weight:700; font-size:13.5px; }
.footer-col-center span:not(.footer-tagline){ color:rgba(35,21,14,.6); }
.footer-col-actions{ flex:0 0 auto; }
.footer-careers-link{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(35,21,14,.28); border-radius:999px; padding:10px 24px;
  font-weight:700; font-size:13.5px; color:var(--ink-fixed); text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-careers-link:hover{ background:rgba(35,21,14,.06); border-color:var(--ink-fixed); transform:translateY(-2px); text-decoration:none; }
.footer-col-actions-sub{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.footer-terms-link{ color:rgba(35,21,14,.55); font-weight:600; font-size:12px; text-decoration:none; }
.footer-terms-link:hover{ color:var(--ink-fixed); }
.footer-socials-item{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }

@media (min-width:761px){
  /* the floating contact button sits fixed at the bottom-left corner —
     give the actions column (now on the left end of this row) enough
     clearance so it never renders underneath it. */
  .footer-col-actions{ margin-left:170px; }
}
@media (max-width:760px){
  /* تقريب عناصر الفوتر على الجوال: إلغاء الحد الأدنى لارتفاع عمود النصوص
     (flex-basis) الذي كان يفتح فراغًا طويلًا بين النصوص وأيقونات التواصل،
     وتقليل المسافات العمودية بين الأعمدة الثلاثة. */
  .footer-minimal-row{ flex-direction:column; text-align:center; gap:14px; }
  .footer-col-brand{ order:1; }
  .footer-col-center{ order:2; flex:1 1 auto; }
  .footer-col-actions{ order:3; }
  .footer-col-actions-sub{ gap:10px; margin-top:6px; }
}

/* الشارات الاجتماعية بخلفية فاتحة الآن (سابقًا كانت مصمَّمة لخلفية داكنة
   بالوضع الافتراضي) — الأيقونات ذات لون العلامة التجارية (instagram/
   twitter...) غير متأثرة، هذا فقط لأيقونة بلا لون منصة محدد. */
.footer-social-icon{
  width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:rgba(35,21,14,.05); border:1px solid rgba(35,21,14,.12); color:var(--ink-fixed);
  box-shadow:0 4px 12px rgba(35,21,14,.1);
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.footer-social-icon:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(35,21,14,.18); }

.dynamic-social-icon:hover{ transform:translateY(-3px) scale(1.05); }

/* Two-color rule: every platform tile uses the same two-tone outline
   treatment (espresso on pearl) — no third brand hue, per the site rule. */
.footer-social-icon[data-social]{ background:rgba(35,21,14,.05); border-color:rgba(35,21,14,.22); color:var(--ink-fixed); box-shadow:0 6px 16px rgba(35,21,14,.12); }
.footer-social-icon[data-social]:hover{ color:var(--pearl); background:var(--ink-fixed); border-color:var(--ink-fixed); box-shadow:0 10px 24px rgba(35,21,14,.24); }

/* ---------- Reveal / toast ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--reveal-duration, .6s) ease, transform var(--reveal-duration, .6s) ease; }

/* per-field visibility from the "🎨 تنسيق النص" editor — reacts live to
   the language toggle (translate.js adds/removes html.lang-en) instead of
   only being checked once when the page first loads */
html:not(.lang-en) .cms-hide-ar{ display:none !important; }
html.lang-en .cms-hide-en{ display:none !important; }

/* per-section reveal effect override (set via data-reveal-effect from the dashboard) */
[data-reveal-effect="fade"] .reveal{ transform:none; }
[data-reveal-effect="none"] .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

/* per-section hover effect override (set via data-hover-effect from the dashboard) —
   applies to the common "card" elements found within that section */
[data-hover-effect="lift"] .service-card:hover,
[data-hover-effect="lift"] .project-card:hover,
[data-hover-effect="lift"] .mv-card:hover,
[data-hover-effect="lift"] .why-item:hover,
[data-hover-effect="lift"] .process-card:hover,
[data-hover-effect="lift"] .stat-block:hover,
[data-hover-effect="lift"] .about-stat-box:hover{ transform:translateY(-6px); }

[data-hover-effect="scale"] .service-card:hover,
[data-hover-effect="scale"] .project-card:hover,
[data-hover-effect="scale"] .mv-card:hover,
[data-hover-effect="scale"] .why-item:hover,
[data-hover-effect="scale"] .process-card:hover,
[data-hover-effect="scale"] .stat-block:hover,
[data-hover-effect="scale"] .about-stat-box:hover{ transform:scale(1.035); }

[data-hover-effect="glow"] .service-card:hover,
[data-hover-effect="glow"] .project-card:hover,
[data-hover-effect="glow"] .mv-card:hover,
[data-hover-effect="glow"] .why-item:hover,
[data-hover-effect="glow"] .process-card:hover,
[data-hover-effect="glow"] .stat-block:hover,
[data-hover-effect="glow"] .about-stat-box:hover{ box-shadow:0 0 0 2px var(--sand); }

/* Staggered line-by-line reveal for text groups (eyebrow, heading, paragraph)
   inside a .reveal container — each line cascades in slightly after the one
   before it, both scrolling down into view and scrolling back up into view. */
.section-title.reveal > *, .hero-copy.reveal > *, .about-copy.reveal > *, .story-copy.reveal > *, .about-hero-inner.reveal > * {
  opacity:0; transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease;
}
.section-title.reveal.in > *, .hero-copy.reveal.in > *, .about-copy.reveal.in > *, .story-copy.reveal.in > *, .about-hero-inner.reveal.in > * {
  opacity:1; transform:translateY(0);
}
.section-title.reveal > *:nth-child(1), .hero-copy.reveal > *:nth-child(1), .about-copy.reveal > *:nth-child(1), .story-copy.reveal > *:nth-child(1), .about-hero-inner.reveal > *:nth-child(1){ transition-delay:.05s; }
.section-title.reveal > *:nth-child(2), .hero-copy.reveal > *:nth-child(2), .about-copy.reveal > *:nth-child(2), .story-copy.reveal > *:nth-child(2), .about-hero-inner.reveal > *:nth-child(2){ transition-delay:.16s; }
.section-title.reveal > *:nth-child(3), .hero-copy.reveal > *:nth-child(3), .about-copy.reveal > *:nth-child(3), .story-copy.reveal > *:nth-child(3), .about-hero-inner.reveal > *:nth-child(3){ transition-delay:.27s; }
.section-title.reveal > *:nth-child(4), .hero-copy.reveal > *:nth-child(4), .about-copy.reveal > *:nth-child(4), .story-copy.reveal > *:nth-child(4), .about-hero-inner.reveal > *:nth-child(4){ transition-delay:.38s; }
.section-title.reveal > *:nth-child(5), .hero-copy.reveal > *:nth-child(5), .about-copy.reveal > *:nth-child(5), .story-copy.reveal > *:nth-child(5), .about-hero-inner.reveal > *:nth-child(5){ transition-delay:.49s; }
.reveal.in{ opacity:1; transform:none; }
#toast{
  position:fixed; bottom:20px; right:20px; z-index:99; background:var(--paper); color:var(--text);
  padding:13px 18px; border-radius:14px; box-shadow:0 16px 32px rgba(35,21,14,.12); font-size:13.5px; font-weight:600;
  transform:translateY(14px); opacity:0; pointer-events:none; transition:.28s ease;
}
#toast.show{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .services-grid, .why-grid, .process-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:920px){
  .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .about-media{ order:-1; }
}
@media (max-width:760px){
  .header-actions .btn-sand-sm{ display:none; }
  .section{ padding:56px 0; }
  .check-list{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .cta-band-inner{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ flex-direction:column; }
}
@media (max-width:520px){
  .container{ width:min(var(--container), calc(100% - 56px)); }
  .services-grid, .why-grid, .process-grid{ grid-template-columns:1fr; }
  .about-stat-box{ justify-content:space-between; }
}

/* ---------- Floating contact button ---------- */
.fab-contact{
  position:fixed; bottom:36px; left:22px; z-index:80;
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  /* the container's own fixed box is far taller than the visible button
     (it reserves room for the menu that only appears on click), so its
     empty area was sitting on top of — and silently swallowing clicks
     meant for — whatever content scrolls underneath it (like the CTA
     band's own "تواصل معنا الآن" button, right at this same screen
     position). Only the actual visible controls inside should be
     clickable; the invisible wrapper itself should not. */
  pointer-events:none;
}
.fab-contact > *{ pointer-events:auto; }
.fab-toggle{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  /* بدون صندوق دائم: الزر أيقونة مفرّغة فقط بلون الموقع الغامق (إسبريسو)
     فوق خلفية الصفحة الفاتحة — بلا حدود ولا خلفية صلبة. أي لون خلفية
     يختاره الأدمن من اللوحة يبقى يعمل عبر تطبيق inline من messages-widget.js. */
  background:transparent; color:var(--ink-fixed); border:none;
  border-radius:50%; cursor:pointer;
  font-family:inherit;
  box-shadow:none;
  transition:transform .2s ease, opacity .2s ease;
}
.fab-toggle:hover{ transform:translateY(-2px) scale(1.06); opacity:.75; }
.fab-toggle:active{ transform:translateY(0) scale(.96); }
.fab-toggle svg{ color:var(--ink-fixed); filter:drop-shadow(0 1px 2px rgba(219,228,255,.95)); }
/* أيقونة مفرّغة دائمًا: نُلغي أي ملء قادم من أيقونة مخصّصة (icons.fab.chat)
   ونُبقي الحدود (stroke) بلون الزر — فتظهر بشكل مفرّغ أنيق بنفس نمط أيقونات
   الموقع، واضحة فوق أي خلفية. */
.fab-toggle svg *{ fill:none; stroke:currentColor; }
.fab-icon-close{ display:none; }
.fab-toggle.is-open .fab-icon-chat{ display:none; }
.fab-toggle.is-open .fab-icon-close{ display:block; }

.fab-menu{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin-right:auto;
  opacity:0; pointer-events:none; transform:translateY(10px) scale(.96); transform-origin:bottom center;
  transition:opacity .2s ease, transform .2s ease;
}
.fab-menu.is-open{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.fab-menu-item{
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;
}
.fab-menu-item:hover{ transform:translateY(-2px); }
.fab-whatsapp{ background:#23150E; color:#DBE4FF; }
.fab-call{ background:var(--dark); color:#DBE4FF; }
.fab-message{ background:var(--sand); color:var(--ink-fixed); border:none; cursor:pointer; }

/* ---------- attention-grabbing bubble next to the FAB ---------- */
.msg-attention-bubble{
  position:fixed; z-index:81; bottom:104px; left:22px; max-width:250px;
  background:var(--dark); color:var(--dark-text); border:1px solid var(--dark-line);
  border-radius:14px; border-bottom-left-radius:4px; padding:12px 34px 12px 14px;
  font-size:13px; line-height:1.6; box-shadow:0 16px 40px rgba(35,21,14,.3); cursor:pointer;
  opacity:0; transform:translateY(10px) scale(.96); transition:opacity .25s ease, transform .25s ease;
}
.msg-attention-bubble.is-open{ opacity:1; transform:translateY(0) scale(1); }
.msg-attention-close{
  position:absolute; top:8px; left:8px; width:20px; height:20px; border-radius:50%;
  border:1px solid rgba(219,228,255,.2); background:transparent; color:inherit; opacity:.7;
  font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.msg-attention-close:hover{ opacity:1; }
/* السلة العائمة (.cart-icon-btn) تُضاف فوق زر المحادثة داخل نفس حاوية
   .fab-contact — لما تكون ظاهرة (فيها عناصر) لازم نرفع هذي الفقاعة
   وقائمة "راسلنا" فوقها بالمقدار، حتى ما تتعارض معها بصريًا. الكلاس
   نفسه يُضاف/يُزال من body.has-cart-bubble بواسطة cart.js. */
body.has-cart-bubble .msg-attention-bubble{ bottom:162px; }
@media (max-width:520px){
  .msg-attention-bubble{ bottom:96px; left:16px; max-width:calc(100vw - 100px); }
  body.has-cart-bubble .msg-attention-bubble{ bottom:154px; }
}

/* ---------- "راسلنا" async messaging panel ---------- */
.msg-panel{
  position:fixed; z-index:395; bottom:100px; left:24px;
  width:340px; max-width:calc(100vw - 32px); height:440px; max-height:70vh;
  background:var(--dark); color:var(--dark-body); border:1px solid var(--dark-line);
  border-radius:18px; box-shadow:0 24px 60px rgba(35,21,14,.4);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; pointer-events:none; transform:translateY(16px) scale(.97);
  transition:opacity .22s ease, transform .22s ease;
}
.msg-panel.is-open{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.msg-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--dark-line); flex-shrink:0;
}
.msg-panel-header strong{ color:var(--dark-text); font-size:14.5px; }
.msg-panel-close{
  width:26px; height:26px; border-radius:50%; border:1px solid rgba(219,228,255,.2);
  background:transparent; color:inherit; cursor:pointer; font-size:16px; opacity:.7;
  display:flex; align-items:center; justify-content:center;
}
.msg-panel-close:hover{ opacity:1; }
.msg-panel-body{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.msg-empty{ color:var(--dark-muted); font-size:13px; text-align:center; margin:auto; padding:0 10px; }
.msg-bubble{ max-width:82%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.6; word-break:break-word; }
.msg-from-visitor{ align-self:flex-end; background:var(--sand); color:var(--ink-fixed); border-bottom-left-radius:4px; }
.msg-from-admin{ align-self:flex-start; background:rgba(219,228,255,.08); color:var(--dark-body); border-bottom-right-radius:4px; }
.msg-panel-footer{ padding:10px 12px 12px; border-top:1px solid var(--dark-line); flex-shrink:0; }
.msg-start-form{ display:flex; flex-direction:column; gap:8px; }
.msg-start-form input, .msg-start-form textarea{
  width:100%; background:rgba(219,228,255,.06); border:1px solid var(--dark-line); border-radius:10px;
  padding:9px 12px; color:var(--dark-text); font-size:13px; font-family:inherit; resize:none;
}
.msg-start-form input::placeholder, .msg-start-form textarea::placeholder{ color:var(--dark-muted); }
.msg-start-row{ display:flex; gap:8px; }
.msg-start-hint{ color:rgba(219,228,255,.7); font-size:11.5px; margin:0; min-height:14px; }
.msg-start-form button{
  background:var(--sand); color:var(--ink-fixed); border:none; border-radius:10px;
  padding:10px; font-size:13px; font-weight:700; cursor:pointer;
}
.msg-panel-footer input{
  width:100%; background:rgba(219,228,255,.06); border:1px solid var(--dark-line); border-radius:10px;
  padding:9px 12px; color:var(--dark-text); font-size:13px; margin-bottom:8px;
}
.msg-panel-footer input::placeholder{ color:var(--dark-muted); }
.msg-panel-input-row{ display:flex; gap:8px; margin-bottom:0; }
.msg-panel-input-row input{ margin-bottom:0; flex:1; }
#msgSendBtn{
  background:var(--sand); color:var(--ink-fixed); border:none; border-radius:10px;
  padding:0 16px; font-size:13px; font-weight:700; cursor:pointer; flex-shrink:0;
}
body.has-cart-bubble .msg-panel{ bottom:158px; }
@media (max-width:520px){
  .msg-panel{ left:16px; bottom:96px; width:calc(100vw - 32px); }
  body.has-cart-bubble .msg-panel{ bottom:154px; }
}

/* quick-action menu — the single FAB now opens straight into this,
   replacing the old 3-button fan-out (call/whatsapp/message) */
.msg-menu{ display:flex; flex-direction:column; gap:8px; }
.msg-menu-btn{
  display:block; width:100%; text-align:center; text-decoration:none;
  background:rgba(219,228,255,.06); color:var(--dark-text); border:1px solid var(--dark-line);
  border-radius:10px; padding:11px; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:background .15s ease;
}
.msg-menu-btn:hover{ background:rgba(219,228,255,.12); }
.msg-menu-btn.is-whatsapp{ background:rgba(219,228,255,.15); border-color:rgba(219,228,255,.35); }
.msg-menu-btn.is-whatsapp:hover{ background:rgba(219,228,255,.25); }

/* in-site WhatsApp-style handoff screen */
.msg-wa-header{ display:flex; align-items:center; gap:10px; padding:6px 0 14px; border-bottom:1px solid var(--dark-line); margin-bottom:12px; }
.msg-wa-avatar{
  width:38px; height:38px; border-radius:50%; background:rgba(219,228,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
}
.msg-wa-header strong{ display:block; color:var(--dark-text); font-size:13.5px; }
.msg-wa-status{ font-size:11px; color:var(--dark-muted); }
.msg-wa-bubble{
  background:rgba(219,228,255,.06); color:var(--dark-body); border-radius:12px; border-bottom-right-radius:4px;
  padding:10px 13px; font-size:13px; line-height:1.6; max-width:88%;
}
.msg-wa-textarea{
  width:100%; background:rgba(219,228,255,.06); border:1px solid var(--dark-line); border-radius:10px;
  padding:9px 12px; color:var(--dark-text); font-size:13px; font-family:inherit; resize:vertical; margin-bottom:8px;
}
.msg-back-btn{ background:none; border:none; color:var(--dark-muted); font-size:12.5px; font-weight:600; cursor:pointer; padding:0 0 10px; display:block; }

@media (max-width:520px){
  .fab-contact{ bottom:28px; left:16px; }
  .fab-toggle{ width:38px; height:38px; }
}

/* ---------- About page ---------- */
.about-hero{
  position:relative; overflow:hidden;
  background:#23150E;
  padding:110px 0 84px; text-align:center;
}
.about-hero-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.about-hero .eyebrow{
  color:var(--sand); text-align:center;
  font-size:13.5px; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 16px; border:1px solid rgba(219,228,255,.28); border-radius:999px;
  background:rgba(219,228,255,.08); margin-bottom:20px;
}
.about-hero h1{
  color:var(--dark-text); font-size:clamp(30px, 4.4vw, 52px); font-weight:800; line-height:1.25;
  margin-bottom:18px; letter-spacing:-.01em;
}
.about-hero p{ color:var(--dark-muted); font-size:17px; max-width:620px; margin:0 auto; line-height:1.8; }

.story-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:start; }
.story-copy p{ color:var(--muted); font-size:16px; margin-bottom:18px; }
.story-copy p:last-child{ margin-bottom:0; }

.story-quote{
  background:var(--dark); color:var(--dark-text); border-radius:20px; padding:28px 26px;
  box-shadow:var(--shadow); position:relative; margin-bottom:24px;
}
.story-quote-mark{ font-size:48px; color:var(--sand); line-height:1; display:block; margin-bottom:6px; font-family:var(--font-heading-secondary, "IBM Plex Sans Arabic", sans-serif); }
.story-quote p{ font-size:16px; line-height:1.7; margin-bottom:14px; }
.story-quote-by{ font-size:13px; color:var(--dark-muted); }
.story-check{ grid-template-columns:1fr; }

.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.mv-card{
  background:var(--paper-2);
  border:1px solid var(--line); border-radius:20px; padding:30px;
  box-shadow:0 10px 26px rgba(35,21,14,.08);
}
.mv-icon{
  width:48px; height:48px; border-radius:14px; background:var(--sand); color:var(--ink-fixed);
  display:grid; place-items:center; margin-bottom:16px;
}
.mv-card h3{ font-size:23px; font-weight:700; margin-bottom:10px; color:var(--ink); }
.mv-card p{ color:var(--muted); font-size:15px; margin:0; }

/* ---------- client reviews ---------- */
.reviews-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
@media (max-width:900px){ .reviews-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .reviews-grid{ grid-template-columns:1fr; } }
.review-card{
  background:var(--paper-2); border:0; border-radius:18px; padding:24px;
  box-shadow:0 6px 18px -8px rgba(35,21,14,.18), inset 0 1px 0 rgba(219,228,255,.5);
  display:flex; flex-direction:column; gap:12px;
  transition:box-shadow .22s ease, transform .22s ease;
}
.review-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -10px rgba(35,21,14,.28), inset 0 1px 0 rgba(219,228,255,.5); }
.review-stars{ color:rgba(35,21,14,.85); font-size:16px; letter-spacing:2px; }
.review-comment{ color:var(--muted); font-size:14.5px; line-height:1.8; margin:0; }
.review-author{ display:flex; flex-direction:column; gap:1px; margin-top:auto; padding-top:14px; }
.review-author strong{ color:var(--ink); font-size:13.5px; }
.review-author span{ color:var(--muted); font-size:12px; }

.stats-strip{ background:var(--dark); padding:52px 0; }
.stats-strip-inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-block{ border-radius:16px; padding:14px 10px; transition:transform .25s ease, background .25s ease; }
.stat-block strong{ display:block; font-size:clamp(28px,4vw,38px); font-weight:700; color:var(--sand); margin-bottom:6px; transition:transform .25s ease; }
.stat-block span{ font-size:13px; color:var(--dark-muted); }
@media (hover:hover){
  .stat-block:hover{ transform:translateY(-6px); background:rgba(219,228,255,.06); }
  .stat-block:hover strong{ transform:scale(1.1); }
}

@media (max-width:900px){
  .story-grid{ grid-template-columns:1fr; }
  .mv-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .stats-strip-inner{ grid-template-columns:1fr 1fr; }
  .about-hero{ padding:84px 0 64px; }
}

.view-all-wrap{ text-align:center; margin-top:36px; }
.view-all-btn{
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 10px 26px rgba(35,21,14,.14); border-width:1.8px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.view-all-btn:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(35,21,14,.2); }
.view-all-btn svg{ transition:transform .2s ease; }
.view-all-btn:hover svg{ transform:translateX(-3px); }

/* ---------- Works gallery page ---------- */
.works-hero{
  padding-bottom:60px;
  background:#23150E;
}
.careers-hero{
  background:#23150E;
}
.works-count{
  text-align:center; color:var(--muted); font-size:13.5px; margin:-8px 0 28px;
}
.works-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.works-grid .project-card.is-hidden{ display:none; }
.empty-state{
  text-align:center; color:var(--muted); padding:60px 20px; font-size:15px;
}
.empty-state.hidden{ display:none; }

@media (max-width:900px){
  .works-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .works-grid{ grid-template-columns:1fr; }
}

/* ---------- Larger, more comfortable text sizes for desktop reading ---------- */
@media (min-width:1024px){
  body{ font-size:18px; }
  p{ font-size:17.5px; }

  .btn, .btn-sand-sm{ font-size:16px; }
  .pill{ font-size:15.5px; }

  .eyebrow{ font-size:18px; }
  .hero-copy > p{ font-size:19px; }
  .section-title p{ font-size:17px; }
  .about-copy p, .story-copy p, .story-quote p{ font-size:18.5px; }
  .service-card h3, .why-item h3, .project-body h3, .timeline-item h3, .process-card h3{ font-size:19px; }
  .service-card p, .why-item p, .project-body p, .process-card p{ font-size:16px; }
  .mv-card h3{ font-size:19px; }
  .mv-card p{ font-size:17px; }
  .timeline-item p{ font-size:16px; }
  .form-note, .form-status, .checkbox-field{ font-size:15.5px; }
  .contact-list{ font-size:17px; }
  .contact-dark-desc, .contact-dark-sub{ font-size:16px; }
  .lightbox-meta h3{ font-size:19px; }
  .lightbox-meta p{ font-size:15.5px; }
  .footer-col-brand p, .footer-col a, .footer-col span, footer{ font-size:15.5px; }
  .stats-strip .stat-block span, .about-stat-box span{ font-size:14.5px; }
  .works-count{ font-size:15.5px; }
  .sidebar-links a{ font-size:var(--nav-text-size, 17px); }
  label{ font-size:14.5px; }
  input, select, textarea{ font-size:16px; }

  h1{ font-size:calc(1em * 1.12); }
  h2{ font-size:calc(1em * 1.1); }
}

/* ---------- Services catalog page (services.html) ---------- */
.services-catalog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:28px; }
@media (max-width:900px){ .services-catalog-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .services-catalog-grid{ grid-template-columns:1fr; } }
.catalog-card{ position:relative; text-decoration:none; }
.catalog-price{ font-size:13.5px; color:var(--muted); margin-top:4px !important; }
.catalog-price strong{ color:var(--ink); font-size:15px; }
.catalog-details-link{ display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:var(--sand-strong); }

/* بطاقة الخدمة هنا تظهر "كأنها منتج" — صورة/أيقونة كبيرة تملأ عرض
   البطاقة أعلاها بدل الأيقونة الصغيرة (52px) المستخدمة بكل مكان آخر.
   مُقيَّد بـ[data-page="services"] .catalog-card تحديدًا حتى لا يمسّ
   .service-card/.svc-icon الأساسية إطلاقًا — تصميم بطاقات "خدماتنا"
   بالصفحة الرئيسية (services-render.js) يبقى بلا أي تغيير كما طُلب. */
body[data-page="services"] .catalog-card{ padding:0; overflow:hidden; }
body[data-page="services"] .catalog-card .svc-icon{
  width:100%; height:auto; aspect-ratio:4/3; margin:0 0 18px; border-radius:0;
}
body[data-page="services"] .catalog-card .svc-icon svg{ width:56px; height:56px; }
body[data-page="services"] .catalog-card .svc-icon-image{ background:var(--paper); }
body[data-page="services"] .catalog-card h3,
body[data-page="services"] .catalog-card p,
body[data-page="services"] .catalog-card .catalog-price{ margin-inline:22px; }
body[data-page="services"] .catalog-card h3{ margin-top:0; }
body[data-page="services"] .catalog-card .catalog-details-link{ display:block; margin:12px 22px 22px; }

/* ---------- Service detail page ---------- */
.includes-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:28px; }
.includes-grid.is-grouped{ display:block; }
.includes-group-title{ font-size:16px; font-weight:700; color:var(--text); margin:26px 0 12px; }
.includes-group-title:first-child{ margin-top:0; }
.includes-group-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
@media (max-width:640px){ .includes-grid{ grid-template-columns:1fr; } .includes-group-grid{ grid-template-columns:1fr; } }
.includes-item{
  display:flex; align-items:flex-start; gap:10px; background:var(--paper-2); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; font-size:14px; color:var(--muted);
}
.includes-check{
  flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--sand); color:var(--ink-fixed);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}

.packages-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:28px; align-items:start; }
@media (max-width:900px){ .packages-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }
.package-card{
  background:var(--paper-2); border:0; border-radius:20px; padding:28px 24px;
  box-shadow:0 6px 18px -8px rgba(35,21,14,.18), inset 0 1px 0 rgba(219,228,255,.5);
  position:relative; display:flex; flex-direction:column;
}
.package-card.is-popular{ box-shadow:0 10px 24px -8px rgba(35,21,14,.3), inset 0 1px 0 rgba(219,228,255,.6); transform:translateY(-6px); }
.package-badge{
  position:absolute; top:-13px; right:20px; background:var(--dark); color:var(--dark-text);
  font-size:11.5px; font-weight:700; padding:5px 14px; border-radius:999px;
}
.package-card h3{ font-size:19px; color:var(--ink); margin:6px 0 10px; }
.package-price{ font-size:28px; font-weight:800; color:var(--ink); margin:0 0 18px; }
.package-price span{ font-size:14px; font-weight:600; color:var(--muted); }
.package-features{ list-style:none; padding:0; margin:0 0 6px; display:flex; flex-direction:column; gap:10px; }
.package-features li{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--muted); }
.package-meta{ font-size:12.5px; color:var(--muted); margin:4px 0 0; }

.packages-compare-table-wrap{ overflow-x:auto; margin-top:24px; }
.packages-compare-table{ width:100%; border-collapse:collapse; background:var(--paper-2); border-radius:14px; overflow:hidden; min-width:480px; }
.packages-compare-table th, .packages-compare-table td{ padding:12px 16px; text-align:center; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink); }
.packages-compare-table th:first-child, .packages-compare-table td:first-child{ text-align:right; font-weight:600; }
.packages-compare-table thead th{ background:var(--sand); color:var(--ink-fixed); font-weight:700; }

.faq-list{ display:flex; flex-direction:column; gap:10px; margin-top:28px; }
.faq-item{
  background:var(--paper-2); border:0; border-radius:14px; padding:16px 20px; cursor:pointer;
  box-shadow:0 4px 14px -6px rgba(35,21,14,.15), inset 0 1px 0 rgba(219,228,255,.5);
}
.faq-item summary{ font-weight:700; font-size:14.5px; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::after{ content:'+'; font-size:20px; color:var(--sand-strong); flex-shrink:0; margin-inline-start:10px; }
.faq-item[open] summary::after{ content:'−'; }
.faq-item p{ margin:12px 0 0; font-size:13.5px; color:var(--muted); line-height:1.8; }

/* ---------- Order tracking compact bar (services.html top) ---------- */
.order-tracking-compact{ padding:28px 0; }
.order-tracking-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--paper-2); border:0; border-radius:16px; padding:16px 20px;
  box-shadow:0 8px 20px -8px rgba(35,21,14,.2), inset 0 1px 0 rgba(219,228,255,.5);
}
.order-tracking-bar-label{ display:flex; flex-direction:column; gap:1px; flex-shrink:0; }
.order-tracking-bar-label strong{ font-size:14px; color:var(--ink); }
.order-tracking-bar-label span{ font-size:12px; color:var(--muted); }
.order-tracking-bar input{
  flex:1; min-width:140px; background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; font-size:13.5px; color:var(--ink);
}
.order-tracking-bar button{ flex-shrink:0; }
@media (max-width:640px){
  .order-tracking-bar{ flex-direction:column; align-items:stretch; }
  .order-tracking-bar-label{ flex-direction:row; gap:6px; align-items:baseline; }
}

/* ---------- Cart bubble (floats next to the contact FAB) + panel ---------- */
.cart-icon-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; padding:0;
  /* --sand/--ink (like .fab-toggle right below it) stay the same fixed
     light-bg/dark-text pair in BOTH color modes — unlike --paper, which
     flips dark in dark mode and would turn --ink text illegible on it. */
  background:var(--sand); color:var(--ink-fixed); border:1px solid var(--sand-strong);
  border-radius:50%; cursor:pointer; font-family:inherit;
  box-shadow:0 12px 26px rgba(35,21,14,.2), 0 4px 12px rgba(219,228,255,.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cart-icon-btn:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 18px 36px rgba(35,21,14,.24), 0 6px 16px rgba(219,228,255,.5); }
.cart-icon-badge{
  position:absolute; top:-5px; right:-5px; background:var(--dark); color:var(--dark-text);
  font-size:10.5px; font-weight:700; min-width:18px; height:18px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
  border:2px solid var(--sand);
}
.cart-overlay{
  position:fixed; inset:0; background:rgba(35,21,14,.4); z-index:396;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.cart-overlay.is-open{ opacity:1; pointer-events:auto; }
/* السلة إطار يظهر من الأسفل (Bottom Sheet) بدل درج جانبي — نفس النمط
   المألوف بتطبيقات الجوال (قوائم تطبيقات التوصيل مثلًا). */
.cart-panel{
  position:fixed; left:0; right:0; bottom:0; z-index:397;
  width:100%; max-width:560px; margin-inline:auto; max-height:min(78vh, 640px);
  background:var(--paper); color:var(--text); box-shadow:0 -20px 60px rgba(35,21,14,.25);
  border-radius:22px 22px 0 0;
  display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.9,.3,1.1);
}
.cart-panel.is-open{ transform:translateY(0); }
.cart-panel-grabber{ width:44px; height:5px; border-radius:999px; background:var(--line); margin:10px auto 0; flex-shrink:0; }
.cart-panel-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); flex-shrink:0; }
.cart-panel-header strong{ font-size:15px; }
.cart-panel-close{ width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:transparent; color:inherit; cursor:pointer; font-size:17px; }
.cart-panel-body{ flex:1; overflow-y:auto; padding:16px 18px; }
.cart-panel-footer{ padding:14px 18px 18px; border-top:1px solid var(--line); flex-shrink:0; }
.cart-empty{ color:var(--muted); font-size:13.5px; text-align:center; margin-top:40px; }
.cart-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.cart-item-info{ display:flex; flex-direction:column; gap:2px; }
.cart-item-info strong{ font-size:13.5px; }
.cart-item-info span{ font-size:12px; color:var(--muted); }
.cart-item-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.cart-item-price{ font-size:12.5px; font-weight:700; color:var(--sand-strong); white-space:nowrap; }
.cart-item-remove{ width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:14px; }
.cart-total-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:14px; }
.cart-total-row strong{ font-size:17px; color:var(--text); }
.cart-back-btn{ background:none; border:none; color:var(--sand-strong); font-size:13px; font-weight:700; cursor:pointer; padding:0; margin-bottom:14px; }
.cart-checkout-title{ font-size:16px; margin:0 0 16px; }
.cart-checkout-form{ display:flex; flex-direction:column; gap:10px; }
.cart-checkout-form input[type="text"], .cart-checkout-form input[type="tel"], .cart-checkout-form input[type="email"]{
  border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:13.5px; background:var(--paper-2); color:var(--text);
}
.cart-terms-check{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--muted); cursor:pointer; }
.cart-terms-check input{ margin-top:2px; }
.cart-terms-check a{ color:var(--sand-strong); font-weight:700; text-decoration:underline; }
.cart-terms-check a:hover{ color:var(--sand); }
.cart-checkout-error{ color:var(--danger); font-size:12px; min-height:14px; margin:0; }
.cart-success{ text-align:center; padding:30px 10px; }
.cart-success-title{ font-size:18px; font-weight:700; margin:0 0 10px; }
.cart-success-msg{ font-size:13px; color:var(--muted); margin:0; }
.cart-success-number{ font-family:var(--font-body, "IBM Plex Sans Arabic", sans-serif); font-variant-numeric:tabular-nums; font-size:22px; font-weight:800; color:var(--sand-strong); margin:8px 0 16px; }
.cart-success-sub{ font-size:12.5px; color:var(--muted); line-height:1.7; margin:0; }

.cart-account-nudge{
  display:flex; align-items:flex-start; gap:10px; margin:0 14px 14px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:14px;
}
.cart-account-nudge svg{ flex-shrink:0; color:var(--sand-strong); margin-top:2px; }
.cart-account-nudge-title{ font-size:13px; font-weight:700; color:var(--text); margin:0 0 3px; }
.cart-account-nudge-sub{ font-size:12px; color:var(--muted); line-height:1.6; margin:0; }

/* ---------- Client account login/register + portal ---------- */
/* أزرار التبويب/البوابات (استعلام مشروع / طلب توظيف، تسجيل الدخول /
   إنشاء حساب...): بطاقتان منفصلتان متوازنتان بمسافة بينهما، بلا التصاق
   ولا صندوق موحّد ملتصق — تبويب فعال يصبح حبرًا غامقًا (أو فاتحًا في
   الوضع الداكن) والنص مقلوب اللون. */
.client-auth-tabs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px; margin:0 0 24px; padding:0; width:100%;
}
.client-auth-tab{
  display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
  background:var(--paper); border:1.5px solid var(--line); border-radius:16px;
  padding:14px 18px; font-size:15px; font-weight:700; color:var(--ink); cursor:pointer;
  text-align:start; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
.client-auth-tab::before{
  content:""; width:11px; height:11px; border-radius:4px; flex-shrink:0;
  background:var(--line-strong); transition:background .18s ease, transform .18s ease;
}
.client-auth-tab:not(.is-active):hover{ transform:translateY(-2px); border-color:var(--line-strong); }
.client-auth-tab.is-active{
  background:var(--ink); border-color:var(--ink); color:#F7FAFF;
  box-shadow:0 12px 26px rgba(35,21,14,.16);
}
.client-auth-tab.is-active::before{ background:var(--sand); transform:scale(.8); }

/* صفحة "بوابة شِعاري" الموحّدة: التصميم الرأسي الجديد (تبويبات
   تحت بعض) منقولة إلى كتلة "بوابة شِعاري" أسفل ضمن التصميم الاحترافي. */

.cp-section{ margin-bottom:30px; }
.cp-section h2{ font-size:18px; margin:0 0 14px; }
.cp-item-card{
  display:block; background:var(--paper-2); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; margin-bottom:10px; text-decoration:none; color:inherit; transition:box-shadow .15s ease;
}
.cp-item-card:not(.cp-item-static):hover{ box-shadow:0 8px 20px rgba(35,21,14,.08); }
.cp-item-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.cp-item-top strong{ font-size:14.5px; color:var(--text); }
.cp-item-badge{ font-family:var(--font-body, "IBM Plex Sans Arabic", sans-serif); font-variant-numeric:tabular-nums; font-size:12px; background:var(--sand); color:var(--ink-fixed); padding:3px 9px; border-radius:999px; font-weight:700; }
.cp-progress-track{ height:6px; background:var(--line); border-radius:999px; overflow:hidden; margin-bottom:8px; }
.cp-progress-fill{ height:100%; background:var(--sand-strong); border-radius:999px; }
.cp-item-sub{ font-size:12.5px; color:var(--muted); }

/* ---------- Client account login/register — professional redesign ---------- */
/* ---------- Auth split layout (بوابة العملاء) ---------- */
.auth-split{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 460px);
  gap:40px; align-items:center; max-width:1080px;
}
.auth-brand-panel{
  position:relative; overflow:hidden;
  background:#23150E; border-radius:24px; padding:40px 36px;
  color:#DBE4FF; min-height:420px;
  display:flex; flex-direction:column; justify-content:center;
}
.auth-brand-inner{ position:relative; z-index:1; max-width:420px; }
/* شعار اللوحة الاختياري في بوابة العميل (يُرفع من إعدادات اللوحة
   "مظهر لوحة التحكم" ويظهر هنا وفي hero بوابة العميل) */
.portal-brand-logo{ display:block; max-height:56px; max-width:200px; width:auto; object-fit:contain; margin-bottom:16px; }
#portalBrandLogo[hidden]{ display:none; }
.auth-brand-badge{
  width:52px; height:52px; border-radius:16px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(219,228,255,.1);
  border:1px solid rgba(219,228,255,.3); color:var(--sand);
}
.auth-brand-eyebrow{
  color:var(--sand); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  padding:6px 14px; border:1px solid rgba(219,228,255,.28); border-radius:999px;
  background:rgba(219,228,255,.08);
}
.auth-brand-panel h2{
  font-size:clamp(24px, 2.6vw, 32px); font-weight:800; color:#DBE4FF;
  margin:0 0 14px; line-height:1.35; letter-spacing:-.01em;
}
.auth-brand-panel > .auth-brand-inner > p{
  color:rgba(219,228,255,.72); font-size:15px; line-height:1.9; margin:0 0 26px;
}
.auth-brand-features{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.auth-brand-features li{ display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(219,228,255,.9); }
.auth-brand-features svg{ color:var(--sand); flex-shrink:0; }
@media (max-width:900px){
  .auth-split{ grid-template-columns:1fr; gap:24px; }
  .auth-brand-panel{ min-height:auto; }
}
@media (max-width:520px){
  .auth-brand-panel{ padding:30px 24px; border-radius:18px; }
}

.client-auth-card{
  background:var(--paper); border:1px solid var(--line); border-radius:22px;
  padding:30px 28px; box-shadow:0 20px 50px rgba(35,21,14,.08);
}
.client-auth-tabs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px; margin:0 0 24px; padding:0; width:100%;
}
.client-auth-tab{
  display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
  background:var(--paper); border:1.5px solid var(--line); border-radius:16px;
  padding:14px 18px; font-size:15px; font-weight:700; color:var(--ink); cursor:pointer;
  text-align:start; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
.client-auth-tab::before{
  content:""; width:11px; height:11px; border-radius:4px; flex-shrink:0;
  background:var(--line-strong); transition:background .18s ease, transform .18s ease;
}
.client-auth-tab:not(.is-active):hover{ transform:translateY(-2px); border-color:var(--line-strong); }
.client-auth-tab.is-active{
  background:var(--ink); border-color:var(--ink); color:#F7FAFF;
  box-shadow:0 12px 26px rgba(35,21,14,.16);
}
.client-auth-tab.is-active::before{ background:var(--sand); transform:scale(.8); }

/* ====== صفحة "بوابة شِعاري" الموحّدة: البوابات الأربع رأسية ======
   كل بوابة صفّ قائم بذاته بأيقونة وتسمية واضحة، بدل تبويبات صغيرة
   متزاحمة. الترتيب: دخول العملاء / تسجيل العملاء / الموظفين / الإدارة. */
.client-auth-tabs.client-auth-tabs--four{
  grid-template-columns:1fr; gap:10px; margin-bottom:22px; padding:0;
}
.client-auth-tabs.client-auth-tabs--four .client-auth-tab{
  width:100%; box-sizing:border-box; display:flex; align-items:center; gap:12px;
  justify-content:flex-start; text-align:start; white-space:nowrap;
  padding:14px 16px; font-size:15px; font-weight:700;
  border:1px solid var(--line); background:var(--paper); color:var(--text);
}
.client-auth-tabs.client-auth-tabs--four .client-auth-tab::before{ display:none; }
.client-auth-tabs.client-auth-tabs--four .client-auth-tab svg{
  width:20px; height:20px; flex-shrink:0; color:var(--muted); transition:color .15s ease;
}
.client-auth-tabs.client-auth-tabs--four .client-auth-tab:not(.is-active):hover{
  border-color:var(--line); background:var(--paper-2);
}
.client-auth-tabs.client-auth-tabs--four .client-auth-tab.is-active{
  background:var(--ink); border-color:var(--ink); color:#F7FAFF; box-shadow:0 8px 18px rgba(35,21,14,.18);
}
.client-auth-tabs.client-auth-tabs--four .client-auth-tab.is-active svg{ color:var(--sand); }

.client-input-group{ margin-bottom:16px; }
.client-input-group label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.client-input-wrap{ position:relative; display:flex; align-items:center; }
.client-input-icon{
  position:absolute; inset-inline-start:14px; color:var(--muted); pointer-events:none; flex-shrink:0;
}
.client-input-wrap input{
  width:100%; padding-inline-start:42px; padding-inline-end:14px; padding-block:12px;
  border:1.3px solid var(--line-strong); background:var(--paper-2); border-radius:12px;
  font-size:15px; color:var(--text); outline:none; transition:border-color .18s, box-shadow .18s;
}
.client-input-wrap input:focus{ border-color:var(--sand-strong); box-shadow:0 0 0 3px rgba(219,228,255,.25); }
.client-input-wrap:has(.client-eye-toggle) input{ padding-inline-end:42px; }
.client-eye-toggle{
  position:absolute; inset-inline-end:10px; background:none; border:none; color:var(--muted);
  cursor:pointer; padding:4px; display:flex; align-items:center; justify-content:center;
}
.client-eye-toggle:hover{ color:var(--text); }

.client-forgot-link{ text-align:end; margin:0 0 16px; }
.client-forgot-link a{ font-size:12.5px; color:var(--muted); text-decoration:none; }
.client-forgot-link a:hover{ color:var(--sand-strong); text-decoration:underline; }

.client-google-wrap{ margin-bottom:20px; }
#googleSigninBtn{ display:flex; justify-content:center; }
.client-auth-divider{
  display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--muted); font-size:12.5px;
}
.client-auth-divider::before, .client-auth-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.cp-section-title{ display:flex; align-items:center; gap:8px; }

/* ---------- international phone field (country code + number) ---------- */
.phone-input-group{ display:flex; gap:6px; }
.phone-country-select{
  flex-shrink:0; width:auto; min-width:88px; max-width:100px;
  padding-inline-end:6px; font-size:13px; text-align:center;
}
.phone-number-input{ flex:1; min-width:0; direction:ltr; text-align:right; }
/* the dark "راسلنا" widget context uses its own dark inputs already —
   the country select just needs to match that same dark styling */
.msg-start-form .phone-country-select{
  background:rgba(219,228,255,.12); border:1px solid var(--dark-line); color:var(--dark-text);
}
.msg-start-form .phone-country-select:focus{ box-shadow:0 0 0 3px rgba(219,228,255,.16); }
/* قائمة مفتاح الدولة المنسدلة (مثال: 🇸🇦 +966): خلفية داكنة صريحة ونص فاتح
   واضح بدل الظهور الباهت الذي كانت تسبّبه شفافية 6% على اللوحة الداكنة. */
.msg-start-form .phone-country-select option{
  background:#1A1C22; color:#EAF0FF;
}

/* chat widget — personalized thank-you shown right after registration */
.msg-thankyou{ text-align:center; padding:22px 10px; animation:msgThankYouIn .4s ease; }
.msg-thankyou-icon{
  width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  background:rgba(35,21,14,.14); color:#23150E;
  display:flex; align-items:center; justify-content:center;
}
.msg-thankyou-title{ font-size:15.5px; font-weight:700; color:var(--dark-text); margin:0 0 6px; }
.msg-thankyou-sub{ font-size:13px; color:var(--dark-muted); margin:0; line-height:1.6; }
@keyframes msgThankYouIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- smooth page transitions (fade out on navigation click) ---------- */
html.page-leaving body{ opacity:0 !important; transition:opacity .16s ease !important; }

/* ---------- hero heading word-by-word reveal ---------- */
/* الكلمات تبدأ ظاهرة (opacity:1) — النص لا يختفي لحظة التحويل للكلمات
   المقسمة (كان opacity:0 يسبب ومضة "اختفاء ثم ظهور" على الاستضافة البطيئة).
   الحركة الباقية: الكلمات تصعد 22px نحو موضعها فقط. */
.hero-word-reveal-ready{ overflow:hidden; }
.hero-word{
  display:inline-block; opacity:1; transform:translateY(22px);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.hero-word-reveal-ready.is-revealed .hero-word{ transform:translateY(0); }

/* ---------- smooth dark/light mode crossfade — active only during the
   brief moment of toggling (class removed automatically right after),
   never a permanent global transition that would fight with hover/
   reveal animations elsewhere ---------- */
html.theme-transitioning, html.theme-transitioning *{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

/* ---------- skeleton loading placeholders (shimmer) — shown in-markup
   immediately, replaced wholesale the moment the real fetch resolves
   (innerHTML= in works.js/services-render.js overwrites these along
   with everything else in the grid, no extra code needed) ---------- */
.skeleton-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  padding:14px; display:flex; flex-direction:column; gap:10px;
}
.skeleton-thumb{
  aspect-ratio:4/3; border-radius:12px;
  background:rgba(35,21,14,.1);
  animation:skeletonPulse 1.4s ease-in-out infinite;
}
.skeleton-line{
  height:12px; border-radius:6px;
  background:rgba(35,21,14,.1);
  animation:skeletonPulse 1.4s ease-in-out infinite;
}
@keyframes skeletonPulse{
  0%, 100%{ opacity:.45; }
  50%{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .skeleton-thumb, .skeleton-line{ animation:none; opacity:.6; }
}

/* ---------- client portal — dashboard redesign ---------- */
.cp-hero-compact{ padding-top:36px !important; padding-bottom:36px !important; }
.cp-hero-compact h1{ font-size:26px; margin:6px 0 4px; }

.cp-section-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.cp-section-header .cp-section-title{ margin:0; }
.cp-new-request-btn{ width:auto; padding:9px 18px; font-size:13px; }

/* stats row */
.cp-stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px; }
.cp-stat-box{
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:14px 8px;
  text-align:center; box-shadow:var(--card-shadow);
}
.cp-stat-box strong{ display:block; font-size:20px; color:var(--ink); }
.cp-stat-box span{ font-size:11px; color:var(--muted); }
.cp-stat-box.has-attention{ border-color:rgba(219,228,255,.4); background:rgba(219,228,255,.06); }
.cp-stat-box.has-attention strong{ color:rgba(35,21,14,.85); }
@media (max-width:520px){ .cp-stats-row{ grid-template-columns:repeat(2,1fr); } }

/* quick actions row — chat badge, notifications badge, turnover type */
.cp-quick-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:22px; }
.cp-quick-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:14px 10px;
  font-weight:700; font-size:13px; color:var(--ink); display:flex; flex-direction:column;
  align-items:center; gap:6px; box-shadow:var(--card-shadow); text-align:center;
}
button.cp-quick-card{ cursor:pointer; font:inherit; }
button.cp-quick-card:hover{ border-color:var(--sand-strong); }
.cp-quick-card .si{ color:var(--sand-strong); }
.cp-quick-badge{ min-width:20px; height:20px; border-radius:999px; background:var(--danger,#c0392b); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; }
.cp-quick-accent{ width:12px; height:12px; border-radius:999px; display:inline-block; border:1px solid rgba(0,0,0,.15); }
@media (max-width:520px){ .cp-quick-row{ grid-template-columns:repeat(3,1fr); } }

/* client turnover data card — the per-client required items */
.cp-client-data-card{ background:var(--paper); border:1px solid var(--card-border); border-radius:20px; padding:20px; box-shadow:var(--card-shadow-hover); }
.cp-cd-item{ margin-bottom:14px; }
.cp-cd-item label{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; margin-bottom:6px; }
.cp-cd-filled{ font-size:11px; font-weight:700; color:#2e7d32; }
.cp-cd-item textarea{ width:100%; min-height:64px; border:1px solid var(--line); border-radius:12px; background:var(--paper-2); color:var(--ink); padding:10px 12px; font:inherit; font-size:13px; resize:vertical; }
.cp-cd-item textarea:focus{ outline:none; border-color:var(--sand-strong); }
.cp-cd-meta{ display:grid; grid-template-columns:1fr auto; gap:12px; margin:16px 0; }
.cp-cd-meta select{ border:1px solid var(--line); border-radius:10px; background:var(--paper-2); color:var(--ink); padding:8px 10px; font:inherit; font-size:13px; }
.cp-cd-meta input[type=color]{ width:44px; height:36px; border:1px solid var(--line); border-radius:10px; background:var(--paper-2); padding:2px; }
.cp-cd-save-row{ display:flex; align-items:center; gap:12px; margin-top:4px; flex-wrap:wrap; }

/* current project hero card */
.cp-current-project-card{
  background:var(--paper); border:1px solid var(--card-border); border-radius:20px; padding:22px;
  box-shadow:var(--card-shadow-hover);
}
.cp-current-project-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.cp-current-project-top strong{ font-size:16px; }
.cp-status-pill{ background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; }
.cp-progress-track-lg{ height:10px; }
.cp-progress-percent{ text-align:end; font-size:12.5px; font-weight:700; color:var(--sand-strong); margin-top:4px; }
.cp-current-project-meta{ display:flex; gap:24px; margin-top:16px; flex-wrap:wrap; }
.cp-current-project-meta div{ display:flex; flex-direction:column; gap:2px; }
.cp-current-project-meta span{ font-size:11.5px; color:var(--muted); }
.cp-current-project-meta strong{ font-size:13.5px; }
.cp-other-projects{ margin-top:14px; }
.cp-other-projects-label{ font-size:12px; color:var(--muted); margin:0 0 8px; }

/* last update card */
.cp-last-update-card{
  background:rgba(219,228,255,.14); border:1px solid var(--card-border); border-radius:16px; padding:16px 18px;
}
.cp-last-update-label{ font-size:12px; font-weight:700; color:var(--sand-strong); margin:0 0 6px; }
.cp-last-update-text{ font-size:14px; color:var(--text); margin:0 0 8px; line-height:1.6; }
.cp-last-update-footer{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted); }
.cp-last-update-footer a{ color:var(--sand-strong); font-weight:700; text-decoration:none; }

/* payments */
.cp-payment-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:10px; }
.cp-payment-project-name{ font-size:13px; font-weight:700; margin:0 0 10px; }
.cp-payment-numbers{ display:flex; gap:28px; }
.cp-payment-numbers span{ display:block; font-size:11px; color:var(--muted); }
.cp-payment-numbers strong{ font-size:15px; }
.cp-payment-pending-note{ font-size:12px; color:rgba(35,21,14,.85); margin:10px 0 0; }

/* chat card */
.cp-chat-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:16px; }
.cp-chat-prompt{ font-size:13.5px; color:var(--muted); margin:0 0 12px; }

/* account section */
.cp-account-summary{ padding:16px 18px; }
.cp-account-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.cp-account-row:last-of-type{ border-bottom:none; }
.cp-account-row span{ color:var(--muted); }
.cp-security-details{ margin-top:14px; }
.cp-security-details summary{ cursor:pointer; font-size:13px; font-weight:700; color:var(--sand-strong); padding:6px 0; }

/* mobile bottom navigation */
.cp-bottom-nav{ display:none; }
@media (max-width:768px){
  .cp-bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:396;
    background:var(--dark); border-top:1px solid var(--dark-line);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .cp-bottom-nav a, .cp-bottom-nav button{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; color:var(--dark-muted); font-size:10.5px; font-family:inherit;
    padding:4px; cursor:pointer; text-decoration:none;
  }
  .cp-bottom-nav a:hover, .cp-bottom-nav button:hover{ color:var(--sand); }
  /* room for the fixed bottom nav so the last section + FAB don't hide behind it */
  body[data-page="client-portal"] .site-footer{ margin-bottom:64px; }
  body[data-page="client-portal"] .fab-contact{ bottom:76px; }
}
.cart-login-prompt-sub{ font-size:13px; color:var(--muted); line-height:1.7; margin:0 14px 16px; }

/* ---------- chat widget — inline quick-action chips (replace the old
   separate menu screen) ---------- */
.msg-quick-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; }
.msg-quick-chips:empty{ display:none; padding:0; }
.msg-chip{
  background:rgba(219,228,255,.06); color:var(--dark-text); border:1px solid var(--dark-line);
  border-radius:999px; padding:6px 13px; font-size:12px; font-weight:600; cursor:pointer;
  text-decoration:none; transition:background .15s ease; white-space:nowrap;
}
.msg-chip:hover{ background:rgba(219,228,255,.14); }

/* ---------- routing row: "وجّه رسالتك إلى" (support/designer/admin) ---------- */
.msg-routing-row{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:2px 2px 8px; }
.msg-routing-label{ font-size:11px; color:var(--muted); font-weight:700; margin-inline-end:2px; }
.msg-recipient-chip{ opacity:.72; }
.msg-recipient-chip.is-active{ opacity:1; background:var(--accent-soft, rgba(219,228,255,.12)); border-color:var(--accent, #23150E); color:var(--accent-contrast, var(--dark-text)); }
.msg-routing-row:empty{ display:none; }

/* ---------- FAB smart unread badge ---------- */
.fab-unread-badge{
  position:absolute; top:-3px; left:-3px; min-width:19px; height:19px; padding:0 4px;
  background:#23150E; color:#DBE4FF; border-radius:999px; border:2px solid var(--bg);
  font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
  line-height:1;
}
.fab-unread-badge.is-dot{ min-width:11px; width:11px; height:11px; padding:0; background:rgba(219,228,255,.85); }
.msg-system-notice{
  text-align:center; font-size:11.5px; color:var(--dark-muted); background:rgba(219,228,255,.05);
  border-radius:999px; padding:5px 14px; margin:8px auto; max-width:85%;
}

/* ---------- chat widget — attachments ---------- */
.msg-attach-btn{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:36px; height:36px; border-radius:50%; cursor:pointer; color:var(--dark-muted);
  transition:background .15s ease, color .15s ease;
}
.msg-attach-btn:hover{ background:rgba(219,228,255,.08); color:var(--dark-text); }
.msg-attach-status{ font-size:11px; color:var(--dark-muted); padding:0 14px 8px; margin:0; }
.msg-attachment-img{ max-width:100%; max-height:180px; border-radius:10px; display:block; margin-bottom:6px; cursor:pointer; }
.msg-attachment-file{
  display:flex; align-items:center; gap:6px; background:rgba(219,228,255,.08); border-radius:8px;
  padding:8px 10px; font-size:12.5px; color:inherit; text-decoration:none; margin-bottom:4px;
}

/* ---------- chat widget — inline service request flow ---------- */
.msg-service-picker{ padding:6px 14px; display:flex; flex-direction:column; gap:8px; }
.msg-service-picker-title{ font-size:13px; font-weight:700; color:var(--dark-text); margin:0 0 4px; }
.msg-service-option{
  display:flex; align-items:center; justify-content:space-between; width:100%; text-align:right;
  background:rgba(219,228,255,.06); color:var(--dark-text); border:1px solid var(--dark-line);
  border-radius:10px; padding:11px 14px; font-size:13px; font-weight:600; cursor:pointer;
  transition:background .15s ease;
}
.msg-service-option:hover{ background:rgba(219,228,255,.12); }
.msg-package-option{ flex-direction:column; align-items:flex-start; gap:2px; }
.msg-package-option span{ font-size:12px; color:var(--dark-muted); font-weight:400; }
.msg-service-option.is-back{ background:none; border:none; color:var(--dark-muted); justify-content:center; padding:6px; }
.msg-request-summary{ background:rgba(219,228,255,.05); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.msg-request-summary > div{ display:flex; justify-content:space-between; font-size:12.5px; }
.msg-request-summary span{ color:var(--dark-muted); }
.msg-request-success{ text-align:center; padding:20px 10px; }
.msg-request-success p{ font-size:13.5px; color:var(--dark-text); margin:0 0 8px; }
.msg-request-success strong{ font-size:20px; color:var(--sand); font-family:var(--font-body, "IBM Plex Sans Arabic", sans-serif); font-variant-numeric:tabular-nums; }

/* ---------- FAB button — dashboard-driven animation options ---------- */
.fab-toggle.fab-anim-pulse{ animation:fabPulse 1.8s ease-in-out infinite; }
.fab-toggle.fab-anim-bounce{ animation:fabBounce 2.6s ease-in-out infinite; }
@keyframes fabPulse{
  0%,100%{ box-shadow:0 18px 36px rgba(35,21,14,.3), 0 8px 22px rgba(219,228,255,.55), 0 0 0 0 rgba(219,228,255,.45); }
  50%{ box-shadow:0 18px 36px rgba(35,21,14,.3), 0 8px 22px rgba(219,228,255,.55), 0 0 0 16px rgba(219,228,255,0); }
}
@keyframes fabBounce{ 0%,85%,100%{ transform:translateY(0); } 92%{ transform:translateY(-8px); } }
@media (prefers-reduced-motion: reduce){
  .fab-toggle.fab-anim-pulse, .fab-toggle.fab-anim-bounce{ animation:none; }
}
.msg-login-prompt-sub{ font-size:12px; color:var(--dark-muted); line-height:1.6; margin:-4px 0 4px; }
.msg-service-suggestion-btn{
  display:flex; align-items:center; gap:6px; margin-top:8px;
  background:var(--sand,#DBE4FF); color:var(--ink-fixed,#23150E); border-radius:10px;
  padding:9px 13px; font-size:12.5px; font-weight:700; text-decoration:none; width:fit-content;
  border:none; cursor:pointer; font-family:inherit;
}
.msg-service-suggestion-btn.is-whatsapp{ background:#23150E; color:#DBE4FF; }

/* ================================================================
   حاسبة التسعير التفاعلية (services.html) — pricing-calculator.js
   ================================================================ */
.pc-section{ padding-bottom:60px; }
/* the sticky bar is position:fixed (visible everywhere on this page, not
   just inside the calculator section) — reserve room so it never
   permanently covers the CTA band / footer beneath it. */
body[data-page="services"]{ padding-bottom:92px; }
@media (max-width:640px){ body[data-page="services"]{ padding-bottom:150px; } }
.pc-intro{ text-align:center; max-width:680px; margin:0 auto 46px; }
.pc-intro h2{ font-size:clamp(26px, 3vw, 34px); font-weight:700; margin-bottom:8px; }
.pc-intro p{ color:var(--muted); font-size:16px; margin:0; line-height:1.8; }

/* ---------- Package cards ---------- */
.pc-packages{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:22px;
  margin-bottom:56px; align-items:stretch;
}
.pc-pkg-card{
  position:relative; background:var(--paper-2); border:1px solid var(--card-border);
  border-radius:var(--radius-card, 20px); padding:28px 24px 24px; box-shadow:var(--card-shadow);
  display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pc-pkg-card:hover{ transform:translateY(-4px); box-shadow:var(--card-shadow-hover); }
.pc-pkg-card.is-popular{
  border-color:var(--sand-strong); background:var(--paper);
  transform:scale(1.035); box-shadow:0 20px 46px rgba(219,228,255,.35);
}
.pc-pkg-card.is-popular:hover{ transform:scale(1.035) translateY(-4px); }
.pc-pkg-card.is-active{ border-color:var(--sand-strong); box-shadow:0 0 0 3px var(--sand), var(--card-shadow-hover); }
.pc-pkg-badge{
  position:absolute; top:-13px; inset-inline:0; margin-inline:auto; width:fit-content;
  background:var(--sand); color:var(--ink-fixed); font-size:12px; font-weight:800; letter-spacing:.02em;
  padding:6px 16px; border-radius:999px; box-shadow:0 6px 14px rgba(219,228,255,.5);
}
.pc-pkg-card h3{ font-size:20px; margin:6px 0 4px; }
.pc-pkg-tagline{ font-size:13.5px; color:var(--muted); margin:0 0 16px; line-height:1.7; min-height:22px; }
.pc-pkg-price{
  font-size:30px; font-weight:800; color:var(--ink); margin-bottom:18px;
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
}
.pc-pkg-price span{ font-size:13px; font-weight:400; color:var(--muted); }
.pc-pkg-price em{ font-style:normal; font-size:13px; font-weight:400; color:var(--muted); }
.pc-pkg-includes{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.pc-pkg-includes li{ font-size:13.5px; color:var(--ink); display:flex; align-items:flex-start; gap:8px; line-height:1.6; }
.pc-pkg-includes li::before{
  content:''; width:14px; height:14px; flex-shrink:0; margin-top:2px;
  background:var(--sand-strong);
  -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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pc-pkg-select{ width:100%; }

/* ---------- Modifiers (speed / org size) ---------- */
.pc-modifiers{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:26px;
  background:var(--paper-2); border:0; border-radius:var(--radius-card, 20px);
  padding:24px 26px; margin-bottom:32px; box-shadow:0 6px 18px -8px rgba(35,21,14,.18), inset 0 1px 0 rgba(219,228,255,.5);
}
.pc-modifier-group label.pc-modifier-label{ display:block; font-weight:700; font-size:14px; margin-bottom:12px; color:var(--ink); }
.pc-pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pc-pill{
  border:1.5px solid var(--card-border); background:transparent; color:var(--ink);
  padding:9px 18px; border-radius:999px; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.pc-pill:hover{ border-color:var(--sand-strong); transform:translateY(-1px); }
.pc-pill.is-active{ background:var(--sand); border-color:var(--sand-strong); color:var(--ink-fixed); font-weight:800; }

/* ---------- Category accordion ---------- */
.pc-categories{ display:flex; flex-direction:column; gap:14px; margin-bottom:40px; }
.pc-category{
  background:var(--paper-2); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:border-color .2s ease;
}
.pc-category[open]{ border-color:var(--card-border); }
.pc-category summary{
  list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center;
  justify-content:space-between; gap:14px; font-weight:700; font-size:15px; color:var(--ink);
}
.pc-category summary::-webkit-details-marker{ display:none; }
.pc-category summary::after{
  content:'+'; font-size:20px; color:var(--sand-strong); flex-shrink:0; order:3; margin-inline-start:6px;
}
.pc-category[open] summary::after{ content:'−'; }
.pc-cat-title{ display:flex; align-items:center; gap:10px; }
.pc-cat-icon{ font-size:19px; display:inline-flex; align-items:center; justify-content:center; }
.pc-cat-icon svg{ display:block; }
.pc-cat-subtotal{ font-size:13px; font-weight:800; color:var(--sand-strong); order:2; white-space:nowrap; }
.pc-cat-body{ padding:2px 22px 18px; display:flex; flex-direction:column; gap:4px; }
.pc-item-row{
  display:flex; align-items:center; gap:12px; padding:12px 8px; border-radius:12px;
  cursor:pointer; transition:background .15s ease;
}
.pc-item-row:hover{ background:var(--sand-bg); }
.pc-item-row input[type="checkbox"]{
  width:19px; height:19px; accent-color:var(--sand-strong); flex-shrink:0; cursor:pointer;
}
.pc-item-name{ flex:1; font-size:14px; color:var(--ink); }
.pc-item-info{
  width:19px; height:19px; border-radius:50%; border:1px solid var(--card-border); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; cursor:help;
}
.pc-item-info:hover, .pc-item-info:focus{ border-color:var(--sand-strong); color:var(--sand-strong); outline:none; }
.pc-item-price{ font-size:13.5px; font-weight:700; color:var(--muted); white-space:nowrap; }

/* ---------- Tooltip (عام للنصوص المقصوصة — يظهر النص الكامل عند الوقوف عليه) ---------- */
.shiary-ellipsis-tip{
  position:absolute; z-index:600; max-width:min(320px, 90vw); background:var(--ink-fixed); color:#DBE4FF;
  font-size:12.5px; line-height:1.8; padding:10px 14px; border-radius:10px; white-space:pre-wrap; word-break:break-word;
  box-shadow:0 12px 28px rgba(35,21,14,.3); opacity:0; pointer-events:none;
  transform:translateY(4px); transition:opacity .15s ease, transform .15s ease;
}
.shiary-ellipsis-tip.is-open{ opacity:1; transform:translateY(0); }

/* ---------- Tooltip ---------- */
.pc-tooltip{
  position:absolute; z-index:500; max-width:260px; background:var(--ink-fixed); color:#DBE4FF;
  font-size:12.5px; line-height:1.7; padding:10px 14px; border-radius:10px;
  box-shadow:0 12px 28px rgba(35,21,14,.3); opacity:0; pointer-events:none;
  transform:translateY(4px); transition:opacity .15s ease, transform .15s ease;
}
.pc-tooltip.is-open{ opacity:1; transform:translateY(0); }

/* ---------- Sticky summary bar ---------- */
#pcStickyBar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:120;
  max-width:900px; margin-inline:auto;
  background:var(--dark); color:var(--dark-text); border-radius:20px;
  box-shadow:0 20px 50px rgba(35,21,14,.35); padding:16px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  opacity:.55; transition:opacity .25s ease, transform .25s ease;
}
#pcStickyBar.has-items{ opacity:1; }
.pc-sticky-info{ display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; }
.pc-sticky-price-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pc-sticky-price-row span{ font-size:12px; color:var(--dark-muted); }
#pcStickyPrice{ font-size:26px; font-weight:800; color:var(--dark-text); }
.pc-sticky-currency{ font-size:13px; color:var(--dark-muted); }
#pcStickyDays{ font-size:12.5px; color:var(--dark-muted); }
#pcStickyDiscount{ font-size:12px; color:var(--sand-strong); font-weight:700; }
.pc-sticky-chips{ display:flex; gap:6px; flex-wrap:wrap; max-width:100%; }
.pc-chip{
  background:rgba(219,228,255,.08); border:1px solid rgba(219,228,255,.14); color:var(--dark-text);
  font-size:11.5px; padding:5px 11px; border-radius:999px; white-space:nowrap;
}
.pc-sticky-empty{ font-size:12.5px; color:var(--dark-muted); }
#pcStickyCta{ flex-shrink:0; }
#pcStickyCta:disabled{ opacity:.4; cursor:not-allowed; }
@media (max-width:640px){
  #pcStickyBar{ bottom:8px; padding:14px 16px; flex-direction:column; align-items:stretch; }
  .pc-sticky-chips{ display:none; }
  #pcStickyCta{ width:100%; }
}

/* ---------- Request modal ---------- */
.pc-modal-overlay{
  position:fixed; inset:0; background:rgba(35,21,14,.72); z-index:300;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.pc-modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.pc-modal{
  background:var(--paper); border-radius:24px; padding:32px 28px; max-width:480px; width:100%;
  max-height:88vh; overflow-y:auto; position:relative; box-shadow:0 30px 70px rgba(35,21,14,.35);
  transform:translateY(14px) scale(.97); transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
  color:var(--ink);
  scrollbar-width:thin; scrollbar-color:rgba(35,21,14,.28) transparent;
}
.pc-modal::-webkit-scrollbar{ width:8px; }
.pc-modal::-webkit-scrollbar-track{ background:transparent; }
.pc-modal::-webkit-scrollbar-thumb{
  background:rgba(35,21,14,.24); border-radius:999px;
  border:2px solid transparent; background-clip:padding-box;
}
.pc-modal::-webkit-scrollbar-thumb:hover{ background:rgba(35,21,14,.4); background-clip:padding-box; }

/* جميع أشرطة التمرير الجانبية — حواف ناعمة مستديرة مع الحفاظ على الأسلوب البصري */
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(35,21,14,.24); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(35,21,14,.36); background-clip:padding-box; }
*::-webkit-scrollbar-corner{ background:transparent; }
html{ scrollbar-width:thin; scrollbar-color:rgba(35,21,14,.28) transparent; }
.pc-modal-overlay.is-open .pc-modal{ transform:translateY(0) scale(1); }
.pc-modal-close{
  position:absolute; top:14px; left:14px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s;
}
.pc-modal-close:hover{ background:var(--paper-2); color:var(--ink); }
.pc-modal h3{ font-size:19px; margin:0 0 18px; }
.pc-modal-summary{
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:20px;
}
#pcModalSummaryList{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; }
#pcModalSummaryList li{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--muted); }
#pcModalSummaryList li span{ color:var(--ink); font-weight:700; white-space:nowrap; }
.pc-modal-summary-total{
  display:flex; justify-content:space-between; align-items:center; padding-top:10px;
  border-top:1px solid var(--line); font-weight:800; font-size:16px; color:var(--ink);
}
.pc-modal-summary-total small{ display:block; font-weight:500; font-size:12px; color:var(--muted); margin-top:2px; }
.pc-modal-form{ display:flex; flex-direction:column; gap:14px; }
.pc-modal-form .field{ display:flex; flex-direction:column; gap:6px; }
.pc-modal-error{ color:var(--danger, #23150E); font-size:13px; min-height:18px; }
.pc-modal-form .btn{ width:100%; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:10px; }

/* ---------- drag & drop attachments zone ---------- */
.pc-dropzone{
  border:1.5px dashed var(--card-border); border-radius:14px; padding:22px 16px;
  text-align:center; cursor:pointer; background:var(--paper-2); transition:border-color .2s ease, background .2s ease;
  font-size:13px; color:var(--muted); line-height:1.7;
}
.pc-dropzone-main{ font-weight:700; color:var(--ink); }
.pc-dropzone-hint{ display:block; font-size:11.5px; color:var(--muted); margin-top:4px; }
.pc-dropzone:hover, .pc-dropzone:focus-visible{ border-color:var(--sand-strong); background:var(--sand-bg); outline:none; }
.pc-dropzone.is-dragover{ border-color:var(--sand-strong); background:var(--sand-bg); transform:scale(1.01); }
.pc-file-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.pc-file-chip{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:10px; padding:8px 12px;
  font-size:12.5px; color:var(--ink);
}
.pc-file-chip-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-file-chip-name em{ font-style:normal; color:var(--muted); }
.pc-file-chip-remove{
  background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:14px;
  flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.pc-file-chip-remove:hover{ background:var(--sand); color:var(--ink-fixed); }

/* ---------- submit button loading spinner ---------- */
.pc-btn-spinner{
  width:16px; height:16px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--sand-bg); border-top-color:var(--text);
  animation:pc-spin .7s linear infinite;
}
@keyframes pc-spin{ to{ transform:rotate(360deg); } }

.pc-modal-success{ text-align:center; padding:6px 0; }
.pc-modal-success-icon{ font-size:44px; margin-bottom:10px; }
.pc-modal-success-icon svg{ width:44px; height:44px; color:var(--ink); }

/* ---------- central icon system (site-icons.js) ---------- */
.si, span[data-icon], div[data-icon]{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.si svg, span[data-icon] svg, div[data-icon] svg{ display:block; }
.pc-modal-success h3{ margin-bottom:6px; }
.pc-modal-success p{ font-size:14px; color:var(--muted); margin:0 0 6px; line-height:1.8; }
.pc-modal-success-num{
  font-size:22px !important; font-weight:800; letter-spacing:.5px;
  color:var(--ink-fixed) !important; background:var(--sand); border-radius:12px; padding:10px 16px;
  margin:8px 0 18px !important; display:inline-block;
}
.pc-modal-success-sub{ color:var(--muted); }

@media (max-width:520px){
  .pc-pkg-card.is-popular{ transform:none; }
  .pc-pkg-card.is-popular:hover{ transform:translateY(-4px); }
  .pc-modifiers{ padding:20px 18px; }
}

/* ================================================================
   صفحة الشروط والأحكام (terms.html)
   ================================================================ */
.terms-doc{ padding:56px 0 30px; }
.terms-updated{ font-size:12.5px; color:var(--muted); margin:0 0 6px; }
.terms-intro{ font-size:14.5px; color:var(--muted); line-height:1.9; margin:0 0 40px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.terms-section{ margin-bottom:34px; }
.terms-section h2{
  display:flex; align-items:center; gap:12px; font-size:19px; margin:0 0 12px;
}
.terms-num{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:32px; height:32px; border-radius:10px; background:var(--sand); color:var(--ink-fixed);
  font-size:13px; font-weight:800;
}
.terms-section p{ font-size:14.5px; color:var(--muted); line-height:1.9; margin:0 0 10px; }
.terms-section p:last-child{ margin-bottom:0; }
.terms-revision-list{
  list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px;
}
.terms-revision-list li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:12px 16px;
  font-size:13.5px;
}
.terms-revision-list li strong{ color:var(--ink); }
.terms-revision-list li span{ color:var(--muted); }
.terms-actions{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:44px; padding-top:28px; border-top:1px solid var(--line);
}
.terms-actions .btn{ flex:1; min-width:180px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
@media (max-width:520px){
  .terms-doc{ padding:36px 0 20px; }
  .terms-actions{ flex-direction:column; }
  .terms-actions .btn{ width:100%; }
}

/* ================================================================
   صفحات المُنشئ (Builder Pages) — builder-render.js يبني هذه العناصر
   ديناميكيًا على صفحة .html فارغة (راجع cms/api/builder.php للقالب).
   زر البلوك (.builder-button-block) لا يحتاج كلاسًا جديدًا هنا — يعيد
   استخدام .btn/.btn-sand/.btn-outline الموجودة فعليًا بالأعلى بلا تغيير.
   القيم (ألوان/مقاسات) نفسها المستخدمة بأقسام الموقع العادية (.section،
   .about-hero، .eyebrow) — لا تصميم موازٍ جديد.
   ================================================================ */
.builder-block{ padding:0; }
.builder-hero{
  padding:96px 0 64px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.builder-hero-inner{ max-width:720px; margin:0 auto; }
.builder-hero h1{ font-size:clamp(30px, 4vw, 46px); font-weight:800; margin:0 0 14px; }
.builder-hero p{ color:var(--muted); font-size:17px; max-width:600px; margin:0 auto; }

.builder-heading{ padding:56px 0 0; text-align:center; }
.builder-heading h2{ font-size:clamp(24px, 3vw, 32px); font-weight:700; margin:0; }

.builder-text{ padding:24px 0; }
.builder-text p{ color:var(--muted); font-size:16.5px; line-height:1.9; max-width:720px; margin:0 auto; white-space:pre-line; }

.builder-image{ padding:24px 0; }
.builder-image img{ display:block; width:100%; max-width:900px; margin:0 auto; border-radius:16px; }

.builder-button-block{ padding:32px 0 56px; }

/* بلوكَي الخدمات/الأعمال الديناميكيَّين (المرحلة 4) — .services-grid/
   .service-card/.svc-icon تُعاد استخدامها كما هي بلا أي تعديل (نفس
   المستخدمة بـservices.html/index.html). .builder-work-card* فقط جديدة
   كليًا — بطاقة مبسَّطة خاصة بصفحات المُنشئ (بلا Lightbox/شريط تفاعل،
   راجع تعليق workCardEl بـbuilder-render.js لسبب عدم إعادة استخدام
   .project-card/.work-card الأصليتين) بنفس ألوان/زوايا الموقع الحالية. */
.builder-services{ padding:56px 0; }
.builder-works{ padding:56px 0; }

.builder-work-card{
  display:block; border-radius:16px; overflow:hidden; background:var(--paper-2);
  border:1px solid var(--line); text-decoration:none; color:inherit;
  transition:transform .25s ease, box-shadow .25s ease;
}
.builder-work-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(35,21,14,.12); }
.builder-work-card-thumb{ aspect-ratio:4/3; overflow:hidden; background:var(--paper); }
.builder-work-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.builder-work-card-body{ padding:16px 18px; }
.builder-work-card-body h3{ font-size:16px; font-weight:700; margin:0 0 4px; }
.builder-work-card-body p{ font-size:13px; color:var(--muted); margin:0; }

/* ═══ حسم نهائي من العميل — بنر الصفحة الأولى ودوّاراته (أولوية صريحة) ═══
   نشرة إجبارية تُبطل أي طبقة لونية/وهج داخلي/ظل كان يغطي البنر فيبدو
   ككتلة فارغة بدل الصور، وتُبقي كل شريحة بجودتها الكاملة وبلا أي إضعاف:
   لا box-shadow نهائيًا على البنر ولا على الشرائح، ولا ::before/::after
   لوني فوق الصورة، ولا إخفاء لأي شريحة تحمل صورة. القاعدة أعلى من أي
   قاعدة سابقة في هذا الملف (وُضعت أخيرًا عمدًا — الأخيرة تفوز في CSS). */
html .top-banner-carousel,
html .top-banner-carousel *,
html .top-banner-carousel::before,
html .top-banner-carousel::after{
  box-shadow:none !important;
  text-shadow:none !important;
  background-image:none !important;
}
/* صورة البنر تبقى بجودتها الكاملة وبلا أي فلتر/تعتيم فوقها — إلزامًا.
   شريحة .banner-slide نفسها تُدار حصريًا بكلاس .is-active (تحريك الكاروسيل
   المتتابع فوق البنرات المسجلة في القيم) — لا تُفرَض شفافيتها/ظهورها
   إجبارًا ولا يُعطَّل تحوّلها، حتى لا تتراكب البنرات فوق بعضها. */
.top-banner-carousel .banner-slide img{
  object-fit:cover; width:100%; height:100%;
  filter:none !important;   /* لا تعتيم ولا تبييض ولا أي فلتر فوق الصورة */
}
/* أي شريحة مخفية (is-empty-slot — بلا صورة مسجلة لها) تختفي من دون إفساد
   التخطيط، والشريحة ذات الصورة تظهر دائمًا وفق ترتيب الكاروسيل. */
.top-banner-carousel .banner-slide.is-empty-slot,
.top-banner-carousel .banner-slide[hidden]{ display:none !important; }