/* ============================================================
   SHUTTER GOLD — public site, redesigned to match the ERP's own
   design system (backend/shared/public/css/design-system.css):
   same tokens, same flat panel/border language, same button system,
   same typography. Previously this file shared only color tokens
   with the backend and kept its own glow/gradient/hover-lift
   "marketing site" aesthetic — that's what this rewrite removes.
   Nav/hero/gallery/chat widget stay public-site-specific (the ERP
   has no equivalent — a sidebar/rail nav makes no sense for 5 public
   pages), but every one of them is now built from the same flat
   panel + hairline border + colored-accent-stripe language as the
   ERP's .panel/.kpi-card, not a separate visual system that happens
   to share a color palette.
   ============================================================ */

/* ===================== DESIGN TOKENS ===================== */
:root{
  --black:#0B0B0C;
  --panel:#151517;
  --panel-2:#1D1E21;
  --panel-3:#232427;
  --metal-line:#323337;
  --metal-line-soft:#26272a;
  --accent:#C9A961;
  --accent-dim:#A3813F;
  --accent-soft:rgba(201,169,97,.14);
  --accent-logo:var(--accent);
  /* Text-safe gold — same as --accent in dark mode (plenty of contrast on near-black surfaces),
     but a deliberately deeper shade in light mode so small/body-sized gold text still clears
     WCAG AA (~4.5:1) against white/off-white panels instead of washing out. Use for gold TEXT;
     keep plain --accent for fills, borders, and large brand-signature numbers. */
  --accent-text:var(--accent);
  --text:#F2F1ED;
  --text-muted:#9C9CA1;
  --text-faint:#6C6C71;
  --green:#22c55e; --red:#ef4444; --blue:#3b82f6; --yellow:#eab308;
  --radius-lg:14px;
  --radius-md:8px;
  --radius-sm:4px;
  --font-display:'IBM Plex Sans Arabic','Cairo',sans-serif;
  --font-body:'Cairo','IBM Plex Sans Arabic',sans-serif;
  --font-prose:'Tajawal','Cairo',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --hero-overlay-rgb:11,11,12;
  color-scheme: dark;
}

/* ===================== LIGHT MODE (existing toggle — kept, restyled to the same precision) ===================== */
html[data-theme="light"]{
  --black:#F3F1EC; --panel:#FFFFFF; --panel-2:#F7F6F2; --panel-3:#EFEDE6;
  --metal-line:#DDDAD1; --metal-line-soft:#E9E7E0;
  --accent:#C9A961; --accent-dim:#A3813F; --accent-soft:rgba(201,169,97,.10);
  --accent-logo:color-mix(in srgb, var(--accent), white 35%);
  --accent-text:#8A6B22;
  --text:#1B1A18; --text-muted:#5C5A55; --text-faint:#8A8781;
  --hero-overlay-rgb:243,241,236;
  color-scheme: light;
}
*, *::before, *::after{transition: background-color .2s ease, border-color .2s ease, color .2s ease;}

.theme-toggle-btn{
  width:38px; height:38px; border-radius:var(--radius-md);
  border:1px solid var(--metal-line); background:var(--panel-2); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  cursor:pointer; transition:border-color .15s ease, color .15s ease;
  flex-shrink:0;
}
.theme-toggle-btn:hover{border-color:var(--accent); color:var(--accent);}
.theme-toggle-btn .fa-sun{display:none;}
html[data-theme="light"] .theme-toggle-btn .fa-sun{display:inline-block;}
html[data-theme="light"] .theme-toggle-btn .fa-moon{display:none;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--text);
  font-family:var(--font-body);
  /* overflow-x:clip (not hidden) — hidden on one axis forces the browser to compute the other
     axis as a scroll container too, which silently breaks position:sticky for every descendant
     (the process-scenes cinematic sections rely on sticky). clip has no such side effect while
     still preventing horizontal scroll bleed. */
  overflow-x:clip;
  direction:rtl;
  unicode-bidi:plaintext;
  text-align:right;
}
h1,h2,h3,h4,.display-font{font-family:var(--font-display); font-weight:800;}
.mono{font-family:var(--font-mono);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

::selection{background:var(--accent); color:#0f0d06;}

a{color:inherit; text-decoration:none;}
button{font-family:var(--font-body); cursor:pointer;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:var(--metal-line); border-radius:10px;}
.container-xl{max-width:1280px;}

/* ===================== NAVBAR — flat panel, no blur/glow (matches .topbar) ===================== */
.navbar-original{
  background:rgba(var(--hero-overlay-rgb),.97);
  border-bottom:1px solid var(--metal-line);
  padding:14px 0;
  position:fixed;
  top:0; right:0; left:0;
  z-index:1000;
  transition:box-shadow .2s ease, padding .2s ease;
}
.navbar-original.scrolled{
  box-shadow:0 12px 28px -18px rgba(0,0,0,.5);
  padding:10px 0;
}

/* Live text wordmark — no raster logo image, no decorative motif beside it.
   ".sh" always follows --text (white on dark, black on light); ".gd" follows
   --accent-logo (full accent in dark, a lightened tint in light — see :root). */
.brand-mark{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.55rem;
  letter-spacing:.2px;
  display:flex;
  align-items:baseline;
  gap:.32em;
  /* No forced direction:ltr — that was needed only for the old Latin-text logo ("SHUTTER GOLD"
     spans), which no longer exists (real PNG logos now). Left in place, it made the logo render
     flush at the box's LEFT edge even where .brand-mark stretches full-width (e.g. the footer
     column), while the RTL paragraph below it starts at the RIGHT — a visible misalignment.
     Removing it lets flex-start resolve to the page's real RTL direction (= right), matching
     both the navbar and the footer paragraph's own start edge. */
}
.brand-mark .sh{color:var(--text);}
.brand-mark .gd{color:var(--accent-logo);}
/* شعار PNG حقيقي بدل النص — نسختين (فاتحة/داكنة) بنفس منطق data-theme الموجود، الجزء الذهبي
   في الملفين نفسه بالظبط (GOLD يفضل ذهبي في الوضعين)، مفيش لون بيتغيّر برمجيًا */
.brand-logo{height:32px; width:auto; display:block;}
.brand-logo.for-light{display:none;}
html[data-theme="light"] .brand-logo.for-dark{display:none;}
html[data-theme="light"] .brand-logo.for-light{display:block;}
.ltr-num{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
}
.nav-link-custom{
  color:var(--text-muted) !important;
  font-weight:600;
  font-size:.9rem;
  padding:8px 14px !important;
  border-radius:var(--radius-sm);
  transition:color .15s ease, background .15s ease;
}
.nav-link-custom:hover, .nav-link-custom.active{color:var(--text) !important; background:var(--panel-2);}

/* Mobile menu panel — Bootstrap's collapse has no background of its own, so below the
   navbar-expand-lg breakpoint it was rendering see-through (hero content bled through behind
   the links). Give it the same solid navbar surface + comfortable spacing/touch targets. */
@media (max-width:991.98px){
  .navbar-original .navbar-collapse{
    background:var(--black);
    border:1px solid var(--metal-line);
    border-radius:var(--radius-lg);
    margin-top:12px;
    padding:14px 16px 18px;
    box-shadow:0 16px 36px -14px rgba(0,0,0,.5);
  }
  .navbar-original .navbar-nav{gap:2px !important;}
  .navbar-original .nav-link-custom{padding:12px 14px !important; font-size:.95rem;}
  .navbar-original .navbar-collapse > div{flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--metal-line); margin-top:8px;}
  .navbar-original .navbar-collapse .btn-accent, .navbar-original .navbar-collapse .btn-outline-line{flex:1; justify-content:center;}
}

/* ===================== BUTTONS — gradient/glow/scale treatment (2026 redesign pass) ===================== */
.btn-accent, .btn-outline-line{
  border-radius:10px;
  padding:11px 22px;
  font-weight:700;
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .15s ease, color .15s ease, background .25s ease;
  border:none;
}
.btn-accent{
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent), white 18%) 0%, var(--accent-dim) 100%);
  color:#171207;
  box-shadow:0 8px 26px -8px var(--accent-soft), 0 2px 8px -2px rgba(0,0,0,.35);
}
.btn-accent:hover{transform:scale(1.045); box-shadow:0 12px 34px -8px var(--accent-soft), 0 4px 12px -2px rgba(0,0,0,.4); color:#171207;}
.btn-accent:active{transform:scale(.97);}
.btn-outline-line{border:1px solid var(--metal-line); color:var(--text); background:transparent; font-weight:600;}
.btn-outline-line:hover{border-color:var(--accent); color:var(--accent); transform:scale(1.03); background:var(--accent-soft);}
.btn-outline-line:active{transform:scale(.97);}
.btn-accent.lg, .btn-outline-line.lg{padding:14px 28px; font-size:.98rem;}
.btn-accent.sm, .btn-outline-line.sm{padding:8px 16px; font-size:.8rem;}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  padding-top:132px;
  overflow:hidden;
  /* Theme-aware — no pinned/hardcoded palette. Uses the real :root / [data-theme="light"] tokens
     directly so the Hero switches with the rest of the site (per explicit requirement: no part of
     the page may hardcode black/white and block the theme toggle). */
  background:var(--black);
  color:var(--text);
}
/* ============================================================
   HERO BACKGROUND — the factory photo now lives here as a subtle, low-opacity atmospheric
   texture (not a standalone banner): photo → legibility scrim (opaque over the text column,
   fading out toward the empty side) → technical grid → scanlines → warm accent glow on top.
   Theme-aware via CSS vars throughout. Purely decorative, sits behind .hero-inner (z-index:2).
   ============================================================ */
.hero-bg{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.hero-bg-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.16; filter:grayscale(.55) contrast(1.05);
}
html[data-theme="light"] .hero-bg-photo{opacity:.11; filter:grayscale(.4) contrast(1.02);}
.hero-bg-scrim{
  position:absolute; inset:0;
  /* Solid near the text column (RTL start = right), fading out toward the empty/ambient side,
     plus a soft vertical fade so the photo never touches the hero's top/bottom edges. */
  background:
    linear-gradient(to left, var(--black) 0%, var(--black) 38%, transparent 82%),
    linear-gradient(to bottom, var(--black) 0%, transparent 20%, transparent 80%, var(--black) 100%);
}
.hero-bg-grid{
  position:absolute; inset:0; opacity:.035;
  background-image:linear-gradient(var(--accent) 1px,transparent 1px),linear-gradient(90deg,var(--accent) 1px,transparent 1px);
  background-size:70px 70px;
}
.hero-bg-scanlines{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(to bottom, rgba(201,169,97,.05) 0, rgba(201,169,97,.05) 1px, transparent 1px, transparent calc(100%/14));
}
.hero-bg-glow{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 60% 30%, var(--accent-soft) 0%, transparent 70%);
}
.hero-edge-line{position:absolute; top:0; bottom:0; width:1px; z-index:1;}
.hero-edge-line.left{left:0; background:linear-gradient(180deg,transparent 10%,var(--accent-soft) 50%,transparent 90%);}
.hero-edge-line.right{right:0; background:linear-gradient(180deg,transparent 10%,var(--accent-soft) 50%,transparent 90%);}

/* ============================================================
   HERO INNER — editorial column anchored to the RTL start edge (right), not centered on the
   page: badge → heading → lead → tags → CTAs → stats. A comfortable reading measure keeps the
   paragraph from stretching too wide; the empty side carries the ambient photo/texture.
   ============================================================ */
.hero-inner{max-width:680px; margin-inline-start:0; margin-inline-end:auto; text-align:right; position:relative; z-index:2; padding-bottom:72px;}
.hero-eyebrow{
  color:var(--accent-text);
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
}
.hero-eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);display:inline-block;}

/* Pill badge — rounded-full, translucent gold, pulsing dot (matches the Figma hero badge) */
.hero-badge{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--accent-soft); border:1px solid rgba(201,169,97,.28);
  color:var(--accent-text); border-radius:999px; padding:8px 18px;
  font-size:.78rem; font-weight:700; margin-bottom:18px;
}
.hero-badge .pulse-dot{width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulseDot 1.8s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(1.3);}}
@media (prefers-reduced-motion: reduce){.hero-badge .pulse-dot{animation:none;}}
.hero h1{
  font-weight:900;
  font-size:clamp(2.4rem, 4.8vw, 4.1rem);
  line-height:1.12;
  margin:6px 0 6px;
  text-wrap:balance;
}
.hero h1 .accent-word{color:var(--accent);}
.hero .lead-sub{
  color:var(--text-muted);
  font-size:1.08rem;
  max-width:560px;
  margin-top:14px;
  line-height:1.85;
  font-family:var(--font-prose);
}
/* نفس مكوّن .chip بالظبط من الـERP (design-system.css) — شكل حبة دواء مسطح، مفيش أيقونة زجاجية قديمة */
.hero-cta-row{display:flex; flex-wrap:wrap; justify-content:flex-start; gap:14px; margin-top:30px;}
.hero-tags{display:flex; flex-wrap:wrap; justify-content:flex-start; gap:10px; margin:22px 0 32px;}
.hero-tags span{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--panel-3); border:1px solid var(--metal-line);
  color:var(--text-muted); border-radius:999px; padding:7px 16px;
  font-size:.82rem; font-weight:600;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.hero-tags span:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}

/* صف إحصائيات مضمّن (بديل اللوحة الجانبية السابقة) — رقم كبير ذهبي + تسمية صغيرة، زي تركيبة V5 */
.hero-stats-inline{margin-top:38px;}
.hero-stats-inline-caption{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--text-faint); font-size:.82rem; font-weight:700; margin-bottom:18px;
}
.hero-stats-inline-caption i{color:var(--accent-text);}
.hero-stats-inline-row{display:flex; flex-wrap:wrap; justify-content:flex-start; gap:34px 48px;}
.hero-stat-inline{text-align:center;}
.hero-stat-inline .num{font-family:var(--font-mono); font-size:1.6rem; font-weight:800; color:var(--accent); line-height:1;}
.hero-stat-inline .label{color:var(--text-muted); font-size:.78rem; margin-top:6px;}

/* ===================== PROCESS SCENES — cinematic scroll-driven illustrations (js/process-scenes.js) =====================
   Fully theme-aware — the SVG artwork itself is rebuilt by JS on theme toggle (MutationObserver on
   data-theme in process-scenes.js); this CSS layer covers the chrome around it (stage backgrounds,
   text, the truck scene's CSS-only road). Colors mirror the Figma source's own dark/light pairs. */
.scene-wrap{position:relative; height:320vh;}
.scene-wrap.scene-truck-wrap{height:280vh;}
.scene-wrap.scene-villa-wrap{height:300vh;}
.scene-stage{
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
  background:#0B0A08;
}
.scene-wrap.scene-assembly-wrap .scene-stage{background:#0A0C0A;}
.scene-wrap.scene-truck-wrap .scene-stage{background:#0D0C0A;}
.scene-wrap.scene-villa-wrap .scene-stage{background:#0C0B08;}
html[data-theme="light"] .scene-stage{background:#EEEADE;}
html[data-theme="light"] .scene-wrap.scene-assembly-wrap .scene-stage{background:#ECEADC;}
html[data-theme="light"] .scene-wrap.scene-truck-wrap .scene-stage{background:#EDE5D4;}
html[data-theme="light"] .scene-wrap.scene-villa-wrap .scene-stage{background:#EEE8D8;}
.scene-stage::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,.35),transparent);
}
.scene-stage::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,.25),transparent);
}
.scene-inner{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative;}
.scene-eyebrow{text-align:center; margin-bottom:24px; opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease;}
.scene-eyebrow-label{font-family:var(--font-mono); color:#C9A84C; letter-spacing:.4em; font-size:.72rem; text-transform:uppercase; margin-bottom:8px;}
html[data-theme="light"] .scene-eyebrow-label{color:#8A6B22;}
.scene-title{font-family:var(--font-display); font-weight:900; font-size:clamp(1.8rem,4vw,2.9rem); color:#F0EAD6;}
html[data-theme="light"] .scene-title{color:#1A140A;}
.scene-svg-wrap{width:min(760px,92vw); padding:0 8px;}
.scene-svg-wrap svg{width:100%; height:auto; display:block;}
.scene-footnotes{
  display:flex; flex-wrap:wrap; justify-content:center; gap:40px;
  margin-top:18px; padding:0 20px; text-align:center;
  opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;
}
.scene-footnotes .fn-t{font-family:var(--font-display); font-weight:700; font-size:.9rem; color:#C9A84C;}
html[data-theme="light"] .scene-footnotes .fn-t{color:#8A6B22;}
.scene-footnotes .fn-d{font-family:var(--font-prose); font-size:.76rem; color:#6A6058; margin-top:2px;}
html[data-theme="light"] .scene-footnotes .fn-d{color:#8A7050;}
[data-scene-caption].is-visible{opacity:1; transform:translateY(0);}

/* Truck delivery scene — aerial road, CSS-driven (position/lane-offset updated by JS) */
.truck-road-scene{position:relative; overflow:hidden; border-radius:14px; width:min(440px,92vw); height:430px; box-shadow:0 0 60px rgba(201,168,76,.06);}
.truck-road-surface{position:absolute; inset:0; background:#1A1814;}
html[data-theme="light"] .truck-road-surface{background:#AEAA92;}
.truck-road-side{position:absolute; inset-block:0; width:88px; background:#0E0D0A;}
.truck-road-side.left{left:0; border-right:3px solid #242018;}
.truck-road-side.right{right:0; border-left:3px solid #242018;}
html[data-theme="light"] .truck-road-side{background:#C8C4A8;}
html[data-theme="light"] .truck-road-side.left{border-right-color:#B8B498;}
html[data-theme="light"] .truck-road-side.right{border-left-color:#B8B498;}
.truck-lane-edge{position:absolute; inset-block:0; width:3px; background-image:repeating-linear-gradient(to bottom, rgba(201,168,76,.18) 0, rgba(201,168,76,.18) 22px, transparent 22px, transparent 42px);}
.truck-lane-edge.left{left:88px;}
.truck-lane-edge.right{right:88px;}
html[data-theme="light"] .truck-lane-edge{background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.6) 0, rgba(255,255,255,.6) 22px, transparent 22px, transparent 42px);}
.truck-lane-center{position:absolute; inset-block:0; width:3px; left:calc(50% - 4px); background-image:repeating-linear-gradient(to bottom, rgba(201,168,76,.55) 0, rgba(201,168,76,.55) 34px, transparent 34px, transparent 56px);}
.truck-lane-center.r{left:calc(50% + 1px);}
.truck-lane-dash{position:absolute; inset-block:0; width:2px; background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.12) 0, rgba(255,255,255,.12) 24px, transparent 24px, transparent 50px);}
.truck-lane-dash.l{left:calc(50% - 68px);}
.truck-lane-dash.r{left:calc(50% + 68px);}
html[data-theme="light"] .truck-lane-dash{background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.55) 0, rgba(255,255,255,.55) 24px, transparent 24px, transparent 50px);}
.truck-fade{position:absolute; inset-inline:0; height:80px; pointer-events:none;}
.truck-fade.top{top:0; background:linear-gradient(to bottom, #0D0C0A, transparent);}
.truck-fade.bottom{bottom:0; background:linear-gradient(to top, #0D0C0A, transparent);}
html[data-theme="light"] .truck-fade.top{background:linear-gradient(to bottom, #EDE5D4, transparent);}
html[data-theme="light"] .truck-fade.bottom{background:linear-gradient(to top, #EDE5D4, transparent);}
.truck-pos-outer{position:absolute; left:50%; transform:translateX(-50%); width:128px;}
.truck-pos-inner{position:relative; width:128px; height:306px;}
.truck-logo{position:absolute; top:11%; left:12%; width:76%; height:60%; display:flex; align-items:center; justify-content:center; pointer-events:none;}
.truck-logo img{width:90%; height:auto; object-fit:contain; opacity:.82; filter:drop-shadow(0 0 4px rgba(201,168,76,.45));}
.scene-truck-caption{text-align:center; margin-top:22px; padding:0 20px; opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease;}
.scene-truck-caption p{font-family:var(--font-prose); font-size:1rem; color:#8A8070;}
html[data-theme="light"] .scene-truck-caption p{color:#6A5A3A;}
@media (max-width:600px){
  .scene-title{font-size:1.5rem;}
  /* الـ3 عناصر (القص الآلي/شرائح الشاتر/الأمان أولاً، وبالمثل في مرحلة التجميع) كانت بتتلف على
     سطرين (2 فوق + 1 لوحده تحت) لأن الـgap الأصلي (40px) + عرض المحتوى الحر بيتخطى عرض الموبايل.
     nowrap + توزيع متساوي (flex:1) يضمن صف واحد بس بالـ3 عناصر جنب بعض دايمًا — وصف كل عنصر
     (fn-d) لسه بيلف طبيعي جوه عموده الضيق لو النص طويل، ده متوقع ومقبول، المطلوب بس إن العناصر
     التلاتة نفسها متبقاش صف وصف زي ما كانت */
  .scene-footnotes{gap:10px; flex-wrap:nowrap;}
  .scene-footnotes > div{flex:1; min-width:0;}
  .scene-footnotes .fn-t{font-size:.76rem;}
  .scene-footnotes .fn-d{font-size:.66rem; line-height:1.35;}
  /* المرحلة الأولى (القص) والثانية (التجميع) — الرسم نفسه جوه الـviewBox مش متمركز أفقيًا
     (فيه مساحة فاضية أكبر على اليمين من الشمال)، فبيبان منحرف شمال على الموبايل حيث الصورة بتاخد
     العرض شبه كامل. تصحيح بـtransform بس (من غير أي تعديل على الرسم نفسه في process-scenes.js)
     عشان الديسكتوب (اللي مش متأثر بالمشكلة دي بصريًا) يفضل زي ما هو تمامًا. النسب محسوبة من حدود
     الرسم الفعلية جوه كل SVG. المرحلة الثالثة (الشحن) متمركزة صح بالفعل من الأساس — من غير أي لمس */
  .scene-cutting-wrap .scene-svg-wrap svg{transform:translateX(7.5%);}
  .scene-assembly-wrap .scene-svg-wrap svg{transform:translateX(2%);}
}
@media (prefers-reduced-motion: reduce){.scene-wrap{height:auto;} .scene-stage{position:relative; height:auto; padding:60px 0;}}

/* ===================== FEATURES STRIP ===================== */
.features-strip{
  background:var(--panel);
  border-top:1px solid var(--metal-line);
  border-bottom:1px solid var(--metal-line);
  padding:36px 0;
}
.feature-item{display:flex; align-items:center; gap:14px; padding:10px 4px;}
.feature-item .icon-box{
  width:42px; height:42px;
  border-radius:var(--radius-md);
  background:var(--accent-soft);
  color:var(--accent-text);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
  flex-shrink:0;
}
.feature-item h6{margin:0; font-weight:700; font-size:.92rem; font-family:var(--font-display);}
.feature-item small{color:var(--text-faint); font-size:.78rem;}

/* ===================== SECTION HEADERS (matches the ERP's .section-title voice) ===================== */
.section{padding:88px 0;}
.section-eyebrow{
  font-family:var(--font-mono);
  color:var(--accent-text);
  letter-spacing:.32em;
  font-size:.74rem;
  font-weight:600;
  text-transform:uppercase;
}
.section-title{
  font-weight:800;
  font-size:clamp(1.7rem, 2.8vw, 2.3rem);
  margin-top:8px;
  text-wrap:balance;
}
.section-desc{color:var(--text-muted); max-width:620px; font-size:1rem; line-height:1.85; font-family:var(--font-prose);}

/* ===================== BENEFIT / SERVICE CARDS — .panel + colored stripe, exactly the kpi-card pattern ===================== */
.benefit-card{
  position:relative;
  background:var(--panel-2);
  border:1px solid var(--metal-line);
  border-radius:var(--radius-lg);
  padding:26px 24px;
  height:100%;
  overflow:hidden;
  transition:border-color .25s ease, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.benefit-card::before{
  content:"";
  position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
  background:var(--accent);
}
.benefit-card:hover{border-color:var(--accent); transform:translateY(-3px) scale(1.015); box-shadow:0 16px 34px -18px rgba(0,0,0,.55);}
.benefit-card .b-icon{
  width:48px; height:48px;
  border-radius:var(--radius-md);
  background:var(--accent-soft);
  color:var(--accent-text);
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem;
  margin-bottom:16px;
}
.benefit-card h5{font-weight:800; margin-bottom:8px; font-family:var(--font-display); font-size:1.02rem;}
.benefit-card p{color:var(--text-muted); font-size:.9rem; line-height:1.8; margin:0; font-family:var(--font-prose);}
.benefit-card .placeholder-note{display:none;}
.benefit-card .step-num{position:absolute; top:16px; left:20px; font-size:1.3rem; font-weight:800; color:var(--metal-line);}

/* Filled circular step badge (gold circle + number) — used to number grouped form sections,
   e.g. the order calculator's "بيانات العميل / الموقع / ..." headers */
.step-circle{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:var(--accent-soft); color:var(--accent-text);
  font-size:.8rem; font-weight:800; font-family:var(--font-display);
}
.calc-section-title{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1rem; margin-bottom:16px; color:var(--accent-text); font-family:var(--font-display);}

/* ===================== STATS STRIP — compact numbers row before the calculator ===================== */
.stats-strip{background:var(--panel); border-top:1px solid var(--metal-line); border-bottom:1px solid var(--metal-line); padding:40px 0;}
.stats-strip-row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.stats-strip .num{font-family:var(--font-display); font-weight:900; font-size:clamp(1.6rem,3vw,2.3rem); color:var(--accent);}
.stats-strip .label{color:var(--text-faint); font-size:.8rem; margin-top:4px; font-family:var(--font-prose);}
@media (max-width:600px){.stats-strip-row{grid-template-columns:1fr 1fr; gap:20px;}}

/* ===================== ORDER CALCULATOR — reuses the ERP's .panel/.field language ===================== */
.calc-wrap{
  background:var(--panel-2);
  border:1px solid var(--metal-line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.calc-header{padding:28px 32px 8px; border-bottom:1px solid var(--metal-line);}
.calc-body{padding:28px 32px;}
.form-label-custom{font-size:.82rem; font-weight:700; color:var(--text-muted); margin-bottom:8px; display:block;}
.form-control-custom, .form-select-custom{
  background:var(--panel);
  border:1px solid var(--metal-line);
  color:var(--text);
  border-radius:10px;
  padding:10px 14px;
  font-family:var(--font-body);
  font-size:.9rem;
  width:100%;
  transition:border-color .15s ease;
}
.form-control-custom:focus, .form-select-custom:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--panel);
  color:var(--text);
}
.form-control-custom:hover, .form-select-custom:hover{border-color:var(--accent-dim);}
.form-control-custom::placeholder{color:var(--text-faint);}
.calc-divider{height:1px; background:var(--metal-line); margin:26px 0;}
.calc-item-card{
  border:1px solid var(--metal-line-soft); border-radius:12px; padding:16px; margin-bottom:14px;
  background:var(--panel); transition:border-color .2s ease, box-shadow .2s ease;
}
.calc-item-card:hover{border-color:var(--accent); box-shadow:0 10px 26px -16px rgba(0,0,0,.5);}
.readout-row{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--panel);
  border:1px solid var(--metal-line);
  border-radius:10px;
  padding:13px 18px;
  margin-bottom:10px;
}
.readout-row .label{color:var(--text-muted); font-size:.88rem; font-weight:600;}
.readout-row .value{font-family:var(--font-mono); font-weight:700; color:var(--text);}
.readout-row.area .value{color:var(--accent-text); font-size:1.05rem;}

#aiResultBox{display:none;}
.ai-tag{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-soft); color:var(--accent-text);
  border-radius:999px; padding:6px 16px; font-size:.78rem; font-weight:700;
  margin-bottom:16px;
}
.ai-tag i{font-size:.82rem;}
.ai-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
@media (max-width:576px){.ai-grid{grid-template-columns:1fr;}}
.ai-item{background:var(--panel); border:1px solid var(--metal-line); border-radius:10px; padding:14px 16px;}
.ai-item .k{color:var(--text-faint); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;}
.ai-item .v{font-weight:700; font-size:.96rem;}
.ai-item .v.mono{font-family:var(--font-mono); color:var(--accent-text);}
.ai-note{
  border-inline-start:3px solid var(--accent);
  padding:12px 16px;
  background:var(--panel);
  border-radius:8px;
  color:var(--text-muted);
  font-size:.88rem;
  line-height:1.8;
  margin-top:14px;
}

.totals-box{background:var(--panel); border:1px solid var(--metal-line); border-radius:var(--radius-md); padding:18px; max-width:340px; margin-inline-start:auto;}
.totals-box .trow{display:flex; justify-content:space-between; padding:6px 0; font-size:.88rem; color:var(--text-muted);}
.totals-box .trow.grand{border-top:1px solid var(--metal-line); margin-top:8px; padding-top:12px; font-weight:800; color:var(--text); font-size:1.05rem;}
.totals-box .trow .mono{font-family:var(--font-mono); color:var(--text);}

.price-table{width:100%; margin-top:16px;}
.price-table tr{border-bottom:1px solid var(--metal-line);}
.price-table td{padding:11px 4px; color:var(--text-muted); font-size:.92rem;}
.price-table td:last-child{text-align:left; font-family:var(--font-mono); color:var(--text); font-weight:600;}
.price-table tr.grand td{color:var(--text); font-weight:800; font-size:1.1rem; border-bottom:none; padding-top:16px;}
.price-table tr.grand td:last-child{color:var(--accent-text); font-family:var(--font-mono);}
.shipping-note{font-size:.76rem; color:var(--text-faint); margin-top:6px; display:flex; gap:6px; align-items:flex-start;}

/* ===================== PROJECTS — shared between projects.html's full gallery and the homepage highlights section ===================== */
.filter-pills{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px;}
.filter-pill{
  border:1px solid var(--metal-line); background:var(--panel-3); color:var(--text-muted);
  border-radius:999px; padding:9px 20px; font-size:.88rem; font-weight:700; cursor:pointer;
  transition:transform .2s cubic-bezier(.22,1,.36,1), border-color .15s ease, color .15s ease, background .15s ease;
}
.filter-pill:hover{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); transform:scale(1.04);}
.filter-pill.active{
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent), white 18%) 0%, var(--accent-dim) 100%);
  border-color:transparent; color:#171207;
}

.project-card{
  background:var(--panel-2); border:1px solid var(--metal-line);
  border-radius:var(--radius-lg); overflow:hidden; height:100%;
  transition:border-color .25s ease, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.project-card:hover{border-color:var(--accent); transform:translateY(-4px) scale(1.015); box-shadow:0 18px 36px -18px rgba(0,0,0,.55);}
.project-thumb img{transition:transform .5s ease;}
.project-card:hover .project-thumb img{transform:scale(1.05);}
.project-thumb{
  height:230px; background:var(--panel-3);
  display:flex; align-items:center; justify-content:center;
  font-size:3.4rem; color:var(--metal-line);
  position:relative; border-bottom:1px solid var(--metal-line);
  overflow:hidden;
}
.project-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.project-thumb .year-tag{
  position:absolute; top:12px; left:12px;
  background:var(--accent); color:#171207; font-family:var(--font-mono);
  font-size:.75rem; font-weight:700; padding:5px 12px; border-radius:var(--radius-sm);
}
.project-thumb .cat-tag{
  position:absolute; top:12px; right:12px;
  background:rgba(var(--hero-overlay-rgb),.85); color:var(--text); font-size:.72rem; font-weight:700;
  padding:5px 12px; border-radius:999px;
}
.project-body{padding:22px;}
.project-body h5{font-weight:800; margin-bottom:4px; font-family:var(--font-display);}
.project-body .loc{color:var(--accent-text); font-size:.85rem; font-weight:600; margin-bottom:10px;}
.project-body p{color:var(--text-muted); font-size:.88rem; line-height:1.85; margin:0;}

/* ===================== PAGE HEADER BANNER — shared across the 4 inner pages (about/contact/projects/track-order) ===================== */
.page-header{
  position:relative;
  padding:150px 0 64px;
  background:var(--panel);
  border-bottom:1px solid var(--metal-line);
}
.page-header h1{
  font-weight:800;
  font-size:clamp(2rem, 4vw, 2.9rem);
  margin:14px 0 10px;
}

/* ===================== FOOTER — flat panel, same border language as the topbar ===================== */
/* Branches/map strip — first thing inside <footer>, matching the Figma Footer component exactly:
   photo backdrop + dark gradient + centered "فروعنا" heading + real branch-name pills.
   Same photo the Figma source itself uses (an aerial/map-style Unsplash shot, not brand imagery). */
.footer-branches-strip{
  position:relative; height:280px; overflow:hidden;
}
.footer-branches-strip .fbs-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28;
}
.footer-branches-strip .fbs-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(var(--hero-overlay-rgb),.94) 0%, rgba(var(--hero-overlay-rgb),.5) 100%);
}
.footer-branches-strip .fbs-content{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.footer-branches-strip .fbs-inner{text-align:center; padding:0 20px;}
.footer-branches-strip .fbs-eyebrow{font-family:var(--font-mono); color:var(--accent-text); font-size:.72rem; letter-spacing:.4em; text-transform:uppercase; margin-bottom:8px;}
.footer-branches-strip h3{font-family:var(--font-display); font-weight:900; font-size:clamp(1.2rem,2.6vw,1.7rem); color:var(--text); margin-bottom:18px;}
.footer-branches-strip .fbs-pills{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.footer-branches-strip .fbs-pills span{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--accent-soft); border:1px solid rgba(201,169,97,.28);
  color:var(--accent-text); border-radius:999px; padding:6px 15px;
  font-size:.78rem; font-weight:700;
}
@media (min-width:576px){.footer-branches-strip{height:340px;}}
footer{
  background:var(--panel);
  border-top:1px solid var(--metal-line);
  padding:56px 0 22px;
  color:var(--text-muted);
}
footer .brand-mark{margin-bottom:8px;}
/* The 3 side columns (Quick Links / Services / Contact) sit ~1cm lower than the Brand column, to
   balance visually against the map strip above — Brand column itself is untouched. */
footer .container > .row > div:not(:first-child){margin-top:38px;}
@media (max-width:991px){footer .container > .row > div:not(:first-child){margin-top:20px;}}
/* Column headings — gold, bold, Cairo (matches the Figma Footer's h4 exactly: text-sm font-bold, #C9A84C, Cairo) */
footer h6{color:var(--accent-text); font-weight:700; margin-bottom:16px; font-size:.875rem; font-family:var(--font-body);}
/* Quick Links column — real nav links, Cairo, muted -> gold on hover */
footer a.footer-link{color:var(--text-muted); font-size:.875rem; font-family:var(--font-body); display:block; margin-bottom:8px; transition:color .15s;}
footer a.footer-link:hover{color:var(--accent);}
/* Services column — plain inert labels in Figma (not links), Tajawal, no hover state */
footer .footer-service{color:var(--text-muted); font-size:.875rem; font-family:var(--font-prose); display:block; margin-bottom:8px;}
/* Contact column icons — clear gap before the text instead of sitting flush against it */
footer .footer-contact-icon{color:var(--accent-text); margin-inline-end:10px; width:14px; text-align:center;}
.social-icon{
  width:36px; height:36px; border-radius:var(--radius-md);
  border:1px solid var(--metal-line);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-muted); margin-left:8px; transition:border-color .15s, color .15s;
}
.social-icon:hover{border-color:var(--accent); color:var(--accent);}
/* Gold, not the previous neutral gray — --accent-text handles the light/dark split (see :root). */
.footer-bottom{border-top:1px solid var(--metal-line); margin-top:36px; padding-top:18px; font-size:.8rem; text-align:center; color:var(--accent-text);}

/* ===================== FLOATING ACTION CLUSTER — flat shadow, no pulsing glow ===================== */
.float-actions{
  position:fixed; bottom:26px; left:26px; z-index:900;
  display:flex; flex-direction:column-reverse; align-items:flex-start; gap:12px;
}
.float-btn{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:#fff; border:none; cursor:pointer;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.5);
  transition:transform .15s ease;
  opacity:0; transform:translateY(10px) scale(.85);
  pointer-events:none;
}
.float-actions.open .float-btn{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.float-actions.open .float-btn:nth-child(2){transition-delay:.03s;}
.float-actions.open .float-btn:nth-child(3){transition-delay:.06s;}
.float-actions.open .float-btn:nth-child(4){transition-delay:.09s;}
.float-btn:hover{transform:scale(1.06) !important;}
.float-btn.wa{background:#1e9e56;}
.float-btn.call{background:#2563eb;}
.float-btn.mail{background:#52525b;}

.fab-main{
  width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:#171207; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; cursor:pointer;
  box-shadow:0 6px 18px -4px rgba(0,0,0,.55);
  position:relative;
  transition:transform .15s ease;
}
.fab-main .icon-plus, .fab-main .icon-close{transition:opacity .15s, transform .2s;}
.fab-main .icon-close{position:absolute; opacity:0; transform:rotate(-90deg);}
.float-actions.open .fab-main .icon-plus{opacity:0; transform:rotate(90deg);}
.float-actions.open .fab-main .icon-close{opacity:1; transform:rotate(0);}
.float-actions.open .fab-main{background:var(--panel-3); border:1px solid var(--metal-line); color:var(--text);}

.chat-toggle-btn{
  width:56px; height:56px; border-radius:50%;
  background:var(--accent); color:#171207; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; cursor:pointer;
  box-shadow:0 6px 18px -4px rgba(0,0,0,.55);
  position:fixed; bottom:26px; right:26px; z-index:900;
  transition:transform .15s ease;
}
.chat-toggle-btn:hover{background:var(--accent-dim); transform:scale(1.04);}
.chat-toggle-btn .unread-dot{
  position:absolute; top:2px; right:2px;
  width:12px; height:12px; border-radius:50%;
  background:var(--green); border:2px solid var(--black);
  display:none;
}
.chat-toggle-btn.has-unread .unread-dot{display:block;}

.reveal{opacity:0; transform:translateY(20px);}

/* ===================== AI CHAT WIDGET ===================== */
.chat-panel{
  position:fixed; bottom:96px; right:26px; left:auto; z-index:950;
  width:min(360px, calc(100vw - 40px));
  height:min(500px, calc(100vh - 150px));
  background:var(--panel-2);
  border:1px solid var(--metal-line);
  border-radius:var(--radius-lg);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7);
  display:none;
  flex-direction:column;
  overflow:hidden;
}
.chat-panel.open{display:flex;}
.chat-panel-header{
  background:var(--panel-3);
  border-bottom:1px solid var(--metal-line);
  padding:15px 18px;
  display:flex; align-items:center; justify-content:space-between;
}
.chat-panel-header .who{display:flex; align-items:center; gap:10px;}
.chat-panel-header .avatar{
  width:36px; height:36px; border-radius:var(--radius-md);
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.chat-panel-header h6{margin:0; font-weight:800; font-size:.9rem; font-family:var(--font-display);}
.chat-panel-header small{color:var(--text-faint); font-size:.72rem; display:flex; align-items:center; gap:5px;}
.chat-panel-header small .dot{width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block;}
.chat-close-btn{background:none; border:none; color:var(--text-muted); font-size:1.05rem; cursor:pointer;}
.chat-close-btn:hover{color:var(--accent);}
.chat-back-btn{background:none; border:none; color:var(--text-muted); font-size:.95rem; cursor:pointer; padding:0;}
.chat-back-btn:hover{color:var(--accent);}

/* ============ Multi-conversation: list view + thread view (بطلب صريح — أكتر من محادثة لكل حساب) ============ */
.chat-list-view{flex:1; min-height:0; display:flex; flex-direction:column; background:var(--black); padding:12px;}
.chat-thread-view{flex:1; min-height:0; display:flex; flex-direction:column;}
.chat-new-btn{
  background:var(--accent); color:#171207; border:none; border-radius:10px; padding:10px 14px;
  font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; gap:8px;
  margin-bottom:10px; cursor:pointer; flex-shrink:0;
}
.chat-new-btn:hover{background:var(--accent-dim);}
#chatConvList{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px;}
.chat-conv-item{
  background:var(--panel-2); border:1px solid var(--metal-line); border-radius:10px; padding:11px 13px;
  cursor:pointer; position:relative; transition:border-color .15s ease;
}
.chat-conv-item:hover{border-color:var(--accent);}
.chat-conv-item .cc-top{display:flex; justify-content:space-between; gap:8px; align-items:baseline;}
.chat-conv-item .cc-subject{font-weight:700; font-size:.84rem;}
.chat-conv-item .cc-time{font-size:.66rem; color:var(--text-faint); font-family:var(--font-mono); flex-shrink:0;}
.chat-conv-item .cc-preview{font-size:.76rem; color:var(--text-faint); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chat-conv-item .cc-badge{position:absolute; top:10px; left:10px; background:var(--accent); color:#171207; font-size:.62rem; font-weight:800; min-width:16px; height:16px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px;}
.chat-list-empty{color:var(--text-faint); font-size:.83rem; text-align:center; padding:30px 10px;}

.chat-attach-btn{background:none; border:none; color:var(--text-muted); font-size:1rem; cursor:pointer; padding:0 4px; flex-shrink:0;}
.chat-attach-btn:hover{color:var(--accent);}
.msg img.chat-img{max-width:100%; border-radius:8px; display:block; margin-top:4px; cursor:pointer;}
.msg.system{align-self:center; background:var(--panel-3); border:1px dashed var(--metal-line); text-align:center; max-width:92%;}
.msg .wa-cta-btn{display:inline-flex; align-items:center; gap:7px; background:#22c55e; color:#fff; padding:8px 15px; border-radius:8px; font-weight:700; text-decoration:none; font-size:.8rem; margin-top:8px;}

.chat-messages{
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:10px;
  background:var(--black);
}
.msg{max-width:82%; padding:10px 14px; border-radius:var(--radius-md); font-size:.86rem; line-height:1.65;}
.msg.bot{align-self:flex-start; background:var(--panel-2); border:1px solid var(--metal-line);}
.msg.user{align-self:flex-end; background:var(--accent); color:#171207;}
.msg.typing{align-self:flex-start; display:flex; gap:5px; align-items:center; background:var(--panel-2); border:1px solid var(--metal-line); padding:12px 16px;}
.msg.typing span{width:6px; height:6px; border-radius:50%; background:var(--text-faint); animation:typingBounce 1.2s infinite ease-in-out;}
.msg.typing span:nth-child(2){animation-delay:.15s;}
.msg.typing span:nth-child(3){animation-delay:.3s;}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}

.chat-input-row{border-top:1px solid var(--metal-line); padding:12px; display:flex; gap:8px; background:var(--panel-2);}
.chat-input-row input{
  flex:1; background:var(--panel); border:1px solid var(--metal-line); color:var(--text);
  border-radius:10px; padding:10px 14px; font-family:var(--font-body); font-size:.86rem;
}
.chat-input-row input:focus{outline:none; border-color:var(--accent);}
.chat-send-btn{
  width:42px; height:42px; border-radius:10px;
  background:var(--accent); color:#171207; border:none;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; cursor:pointer; transition:background .15s;
}
.chat-send-btn:hover{background:var(--accent-dim);}
.chat-send-btn:disabled{opacity:.5; cursor:not-allowed;}

/* ===================== IMAGE SKELETON LOADING (main.js toggles .loaded on <img> load) ===================== */
img.img-skeleton{background:linear-gradient(100deg, var(--panel-2) 30%, var(--panel-3) 50%, var(--panel-2) 70%); background-size:200% 100%; animation:imgShimmer 1.4s ease-in-out infinite;}
img.img-skeleton.loaded{animation:none; background:none;}
@keyframes imgShimmer{0%{background-position:200% 0;} 100%{background-position:-200% 0;}}

/* ===================== PAGE FADE-IN — pure CSS, no JS dependency (never leaves the page blank if a script fails) ===================== */
body{animation:pageFadeIn .4s ease both;}
@keyframes pageFadeIn{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion: reduce){ body{animation:none;} }

/* ===================== RESPONSIVE / MOBILE FIXES ===================== */
html{overflow-x:clip; max-width:100%;}
body{overflow-x:clip; max-width:100%;}
img, svg, iframe{max-width:100%;}
.price-table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}

@media (max-width:991px){
  .hero{padding-top:120px;}
  .hero-inner{padding-bottom:52px;}
  .hero-stats-inline{margin-top:28px;}
  .section{padding:60px 0;}
  .calc-header, .calc-body{padding:22px 18px;}
}

@media (max-width:767px){
  .hero{padding-top:104px;}
  .hero-inner{max-width:none; padding-bottom:40px;}
  .hero h1{font-size:clamp(1.9rem, 7.2vw, 2.4rem); line-height:1.2;}
  .hero .lead-sub{font-size:.96rem; line-height:1.7; max-width:none;}
  .hero-badge{font-size:.72rem; padding:7px 14px;}
  .hero-tags{gap:8px; margin:18px 0 26px;}
  .hero-tags span{font-size:.76rem; padding:6px 13px;}
  .btn-accent, .btn-outline-line{padding:11px 18px; font-size:.88rem;}
  /* أزرار الـHero على الموبايل — Full-width متساوية الحجم، Stack عمودي بمسافة واضحة (بدل ما تتلزق
     جنب بعضها بأحجام مختلفة حسب طول النص) */
  .hero-cta-row{flex-direction:column; align-items:stretch; gap:12px; margin-top:22px;}
  .hero-cta-row .btn-accent, .hero-cta-row .btn-outline-line{width:100%; justify-content:center;}
  /* على الموبايل النص بياخد العرض كله تقريبًا، فالـscrim الأفقي (مصمم لعمود نص ضيق ع اليمين على
     الديسكتوب) مش لازم — تغطية رأسية واسعة + شفافية أقل للصورة يخلوا القراءة مريحة من غير ما
     الصورة تتنافس مع النص */
  .hero-bg-photo{opacity:.08;}
  html[data-theme="light"] .hero-bg-photo{opacity:.06;}
  .hero-bg-scrim{background:linear-gradient(to bottom, var(--black) 0%, transparent 14%, transparent 86%, var(--black) 100%);}
  .ceo-card{padding:24px 18px;}
  .ceo-photo{width:140px; height:140px; font-size:3rem;}
  .branch-map{height:180px;}
}

@media (max-width:480px){
  .chat-panel{right:12px; left:12px; bottom:90px; width:auto; height:calc(100vh - 140px);}
  .chat-toggle-btn{right:16px; bottom:16px; width:50px; height:50px; font-size:1.15rem;}
  .float-actions{left:16px; bottom:16px;}
  .fab-main{width:46px; height:46px; font-size:1.1rem;}
  .float-btn{width:46px; height:46px; font-size:1.1rem;}
  .hero-eyebrow{font-size:.7rem;}
  .hero h1{font-size:clamp(1.65rem, 8vw, 2rem);}
  .hero .lead-sub{font-size:.92rem;}
  .hero-stats-inline-row{gap:22px 30px;}
  .hero-stat-inline .num{font-size:1.25rem;}
  .calc-header h4, .price-cat-header h5{font-size:1rem;}
  .readout-row{padding:12px 14px; flex-wrap:wrap; gap:6px;}
  .price-table td{font-size:.84rem; padding:10px 4px;}
}

@media (max-width:340px){
  /* عند أضيق العروض (320px) الصف الأفقي لـ4 إحصائيات كان بيلف لسطرين غير متوازنين (3 + عنصر
     واحد لوحده تحت بفراغ واضح) — grid ثابت 2×2 يضمن توزيع متساوي دايمًا بدل الاعتماد على
     flex-wrap اللي بيلف بشكل عشوائي حسب عرض المحتوى الفعلي */
  .hero-stats-inline-row{display:grid; grid-template-columns:1fr 1fr; gap:18px 16px;}
}

/* ============================================================
   MERCHANT AREA (/merchant) — نفس الهوية والمكوّنات بالظبط (panel/badge/table/timeline)،
   مش نظام تصميم منفصل. الصفحة نفسها بتستخدم نفس navbar-original/chat widget الموجودين.
   ============================================================ */
/* ============================================================
   PROFILE NAV — بديل زر "تسجيل الدخول" لما يكون فيه حساب مسجّل دخول (عميل/تاجر)، شوف
   js/main.js::initAuthNav. Active/Selected state واضح للـType picker في merchant.html كمان هنا.
   ============================================================ */
.profile-nav{position:relative;}
.profile-nav-btn{width:38px; height:38px; border-radius:50%; border:1px solid var(--metal-line); background:var(--panel-2); cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;}
.profile-nav-btn:hover{border-color:var(--accent);}
.profile-nav-avatar{width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-dim)); color:#1a1508; font-weight:800; font-size:.85rem; display:flex; align-items:center; justify-content:center;}
.profile-nav-menu{position:absolute; top:calc(100% + 10px); left:0; min-width:180px; background:var(--panel-2); border:1px solid var(--metal-line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.4); padding:6px; display:none; z-index:1100;}
.profile-nav-menu.open{display:block;}
.profile-nav-name{padding:10px 12px 8px; font-size:.85rem; font-weight:700; border-bottom:1px solid var(--metal-line-soft); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.profile-nav-menu a, .profile-nav-menu button{display:block; width:100%; text-align:right; padding:9px 12px; border-radius:8px; border:none; background:none; color:var(--text); font-size:.85rem; font-family:inherit; cursor:pointer;}
.profile-nav-menu a:hover, .profile-nav-menu button:hover{background:var(--panel-3); color:var(--accent);}

/* Type picker (عميل/تاجر) — حالة الاختيار واضحة جدًا: حد ذهبي كامل + خلفية + علامة صح، مش مجرد
   تغيير لون خفيف كان ممكن يتلخبط */
.m-type-card{position:relative;}
.m-type-card.active{border-width:2px; border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent);}
.m-type-card.active::after{content:"\2713"; position:absolute; top:8px; left:10px; width:18px; height:18px; border-radius:50%; background:var(--accent); color:#171207; font-size:.7rem; font-weight:800; display:flex; align-items:center; justify-content:center;}
.m-type-card:not(.active){opacity:.6;}

.m-shell{max-width:1100px; margin:0 auto; padding:150px 20px 80px;}
.m-tabs{display:flex; gap:4px; border-bottom:1px solid var(--metal-line); margin-bottom:26px; overflow-x:auto;}
.m-tabs button{background:none; border:none; color:var(--text-muted); font-weight:700; font-size:.9rem; padding:12px 16px; border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer; font-family:inherit;}
.m-tabs button.active{color:var(--accent-text); border-bottom-color:var(--accent);}
.m-tabs button:hover{color:var(--text);}
.m-view{display:none;}
.m-view.active{display:block;}

.m-panel{background:var(--panel-2); border:1px solid var(--metal-line); border-radius:var(--radius-lg); padding:22px;}
.m-panel + .m-panel{margin-top:16px;}
.m-panel-title{display:flex; align-items:center; gap:9px; margin:0 0 16px; font-size:.98rem; font-weight:800; font-family:var(--font-display);}
.m-panel-title .dot{width:8px; height:8px; border-radius:2px; background:var(--accent); flex-shrink:0;}

.m-grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.m-grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media (max-width:820px){.m-grid2,.m-grid4{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.m-grid2,.m-grid4{grid-template-columns:1fr;}}
.m-stat{background:var(--panel-2); border:1px solid var(--metal-line); border-radius:var(--radius-lg); padding:17px 19px; position:relative; overflow:hidden;}
.m-stat::before{content:'';position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--accent);}
.m-stat.c-blue::before{background:var(--blue,#3b82f6);} .m-stat.c-green::before{background:var(--green,#22c55e);} .m-stat.c-yellow::before{background:var(--yellow,#eab308);}
.m-stat .num{font-family:var(--font-mono); font-size:1.4rem; font-weight:800; color:var(--text);}
.m-stat .label{color:var(--text-muted); font-size:.78rem; margin-top:4px;}

.m-badge{display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:.74rem; font-weight:700;}
.m-badge.status-active{background:rgba(34,197,94,.14); color:#22c55e;}
.m-badge.status-inactive, .m-badge.status-disabled{background:rgba(239,68,68,.14); color:#f87171;}
.m-badge.status-pending{background:rgba(234,179,8,.14); color:#eab308;}
.m-stage{padding:4px 11px; border-radius:999px; font-size:.72rem; font-weight:700; white-space:nowrap;}
.m-stage.s-approved{background:rgba(59,130,246,.14); color:#3b82f6;}
.m-stage.s-invoice, .m-stage.s-production{background:rgba(234,179,8,.14); color:#eab308;}
.m-stage.s-cutting{background:var(--accent-soft); color:var(--accent-text);}
.m-stage.s-ready_for_pickup{background:rgba(34,197,94,.14); color:#22c55e;}
.m-stage.s-picked_up{background:rgba(55,65,81,.2); color:#9ca3af;}

.m-table-wrap{border:1px solid var(--metal-line); border-radius:var(--radius-lg); overflow:hidden; background:var(--panel-2);}
.m-table-wrap .ov{overflow-x:auto;}
.m-table-wrap table{width:100%; border-collapse:collapse; font-size:.87rem; min-width:560px;}
.m-table-wrap th{text-align:right; color:var(--text-faint); font-size:.71rem; text-transform:uppercase; letter-spacing:.03em; padding:11px 16px; border-bottom:1px solid var(--metal-line); white-space:nowrap;}
.m-table-wrap td{text-align:right; padding:12px 16px; border-bottom:1px solid var(--metal-line-soft); vertical-align:middle;}
.m-table-wrap tr:last-child td{border-bottom:none;}
.m-table-wrap tr.tr-link{cursor:pointer;}
.m-table-wrap tr.tr-link:hover{background:var(--panel-3);}

.m-timeline{position:relative; padding-inline-start:26px;}
.m-timeline::before{content:'';position:absolute; inset-inline-start:9px; top:6px; bottom:6px; width:2px; background:var(--metal-line);}
.m-t-step{position:relative; padding-bottom:20px;}
.m-t-step:last-child{padding-bottom:0;}
.m-t-dot{position:absolute; inset-inline-start:-26px; top:2px; width:20px; height:20px; border-radius:50%; background:var(--panel); border:2px solid var(--metal-line); display:flex; align-items:center; justify-content:center; font-size:.6rem; color:var(--text-faint);}
.m-t-step.done .m-t-dot{background:var(--accent); border-color:var(--accent); color:#171207;}
.m-t-step.current .m-t-dot{border-color:var(--accent); color:var(--accent-text); box-shadow:0 0 0 4px var(--accent-soft);}
.m-t-label{font-weight:700; font-size:.87rem;}
.m-t-step.done .m-t-label, .m-t-step.current .m-t-label{color:var(--accent-text);}
.m-t-date{font-size:.74rem; color:var(--text-faint); margin-top:2px;}
.m-eta{margin-top:16px; border-inline-start:3px solid var(--accent); background:var(--panel); border-radius:8px; padding:12px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.m-eta .k{color:var(--text-faint); font-size:.78rem;}
.m-eta .v{font-weight:800; font-family:var(--font-mono); color:var(--accent-text); font-size:.92rem;}

.m-type-pick{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px;}
.m-type-card{border:1px solid var(--metal-line); border-radius:12px; padding:16px 12px; text-align:center; cursor:pointer; background:var(--panel); transition:border-color .2s ease, background .2s ease, transform .2s cubic-bezier(.22,1,.36,1);}
.m-type-card:hover{border-color:var(--accent); transform:scale(1.02);}
.m-type-card .ic{font-size:1.4rem; margin-bottom:8px;}
.m-type-card .t{font-weight:800; font-size:.88rem;}
.m-type-card .s{font-size:.7rem; color:var(--text-faint); margin-top:3px; line-height:1.6;}
.m-type-card.active{border-color:var(--accent); background:var(--accent-soft);}

.m-pending{padding:40px 10px; text-align:center; max-width:480px; margin:0 auto;}
.m-pending-icon{width:64px; height:64px; border-radius:50%; background:rgba(234,179,8,.14); color:#eab308; display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 18px;}
.m-msg{padding:12px 16px; border-radius:10px; font-size:.87rem; margin-bottom:16px; display:none;}
.m-msg.err{background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.4); color:#f87171; display:block;}
.m-msg.ok{background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.4); color:#4ade80; display:block;}

@media (max-width:600px){
  .m-shell{padding:130px 14px 60px;}
  .m-panel{padding:16px;}
}