/* ==========================================================================
   SBIC — base.css
   المتغيرات الأساسية + إعادة التصفير (Reset) + الخطوط (Typography)
   ملاحظة: هذا الملف يُحمَّل أولاً في كل صفحات الموقع (index, about, services, request)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) استيراد الخطوط
   Cairo تُستخدم للعناوين (تدعم العربية بشكل ممتاز)
   Tajawal تُستخدم للنصوص العادية (خط عربي واضح ومريح للقراءة)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800;900&family=Tajawal:wght@400;500;700&display=swap');

/* --------------------------------------------------------------------------
   2) المتغيرات العامة (Design Tokens)
   كل الألوان والقياسات المستخدمة في الموقع معرّفة هنا مرة واحدة فقط،
   حتى يسهل تعديل الهوية البصرية لاحقاً من مكان واحد.
   -------------------------------------------------------------------------- */
:root {
  /* الألوان الأساسية للهوية البصرية */
  --color-navy-950: #0A161B;   /* أغمق درجة من الأزرق الداكن — تُستخدم للظلال والتباين العالي */
  --color-navy-900: #0F2027;   /* اللون الأساسي: كحلي منتصف الليل (Deep Midnight Navy) */
  --color-navy-800: #16303A;   /* درجة أفتح قليلاً — تُستخدم في التدرجات (gradients) */
  --color-navy-700: #1E3C72;   /* أزرق داكن ثانوي — تُستخدم لحالات hover والتفاعلات */

  --color-gold-500: #C5A059;  /* اللون الذهبي المطفي الأساسي (Matte Premium Gold) */
  --color-gold-600: #B8914A;  /* درجة أغمق من الذهبي — لحالة الضغط (active) */
  --color-gold-400: #D4AF37;  /* درجة أفتح وأكثر لمعاناً — لحالة hover */

  --color-charcoal-900: #1A202C; /* رمادي فاحم عميق — مخصص للتوب بار فقط، مستقل عن الكحلي الأساسي */

  --color-alert-red: #D64550;    /* أحمر جاذب للانتباه — يُستخدم لزر "أرسل طلبك الآن" في شريط الهيرو السفلي */
  --color-alert-red-hover: #C23440;

  /* --------------------------------------------------------------------
     مجموعة هوية جديدة: "Soft Pink Accent + Dark Surfaces"
     مستخدمة حصراً في home.css (قسم الهيرو وبطاقات الخدمات/المنتجات).
     مستقلة تماماً عن --color-navy-* و --color-gold-* حتى لا يتأثر
     الهيدر أو الفوتر أو النوافذ المنبثقة الحالية بهذا التحديث.
     -------------------------------------------------------------------- */
  --color-accent-500: #E8636F;      /* أحمر فاتح مائل للوردي — اللون التمييزي الأساسي الجديد */
  --color-accent-400: #F17C87;      /* درجة أفتح — لحالة hover */
  --color-accent-600: #D14B57;      /* درجة أغمق — لحالة الضغط (active) */
  --color-accent-soft-bg: rgba(232, 99, 111, 0.12); /* خلفية وردية شفافة خفيفة جداً، للشارات (badges) */

  --color-surface-dark: #121417;       /* الخلفية شبه السوداء للبطاقات وحقول الإدخال */
  --color-surface-dark-alt: #1B1E23;   /* درجة أفتح قليلاً من الأسود — لتنويع الطبقات داخل البطاقة الداكنة */
  --color-border-dark: rgba(255, 255, 255, 0.1);

  --color-text-on-dark-strong: #FFFFFF;         /* نص أبيض كامل فوق الخلفيات شبه السوداء */
  --color-text-on-dark-soft: rgba(255, 255, 255, 0.72); /* نص وصفي أهدأ فوق نفس الخلفيات */

  --color-bg-soft-light: #FFF9FA; /* خلفية فاتحة مريحة بلمسة وردية خفيفة جداً لأقسام الصفحة الفاتحة */

  --shadow-pink-glow: 0 8px 24px rgba(232, 99, 111, 0.35); /* توهج وردي للأزرار والبطاقات عند التفاعل */

  /* درجات محايدة (رمادي/أبيض) للخلفيات والنصوص */
  --color-white: #FFFFFF;
  --color-off-white: #F8F9FA;   /* خلفية ناعمة بديلة عن الأبيض الخالص */
  --color-border-soft: #E3E8EC;

  --color-text-primary: #1D2B32;   /* لون النص الأساسي على الخلفيات الفاتحة */
  --color-text-secondary: #5B7280; /* لون النص الثانوي / الوصفي */
  --color-text-on-dark: #EAF0F2;   /* لون النص على الخلفيات الداكنة (الكحلي) */
  --color-text-muted-on-dark: rgba(234, 240, 242, 0.72);

  /* ألوان دلالية (نجاح / تنبيه / خطر) تُستخدم في النماذج لاحقاً */
  --color-success: #2E9E5B;
  --color-danger: #D64550;
  --color-whatsapp: #25D366;

  /* الطبقات الشفافة (للـ overlays والزجاجية glassmorphism) */
  --overlay-navy-92: rgba(15, 32, 39, 0.92);
  --overlay-navy-80: rgba(15, 32, 39, 0.80);
  --glass-bg-light: rgba(255, 255, 255, 0.85);
  --glass-border-light: rgba(255, 255, 255, 0.35);

  /* الخطوط */
  --font-heading: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --font-body: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;

  /* أحجام الخطوط الأساسية — بوحدة rem لضمان المرونة مع إعدادات المتصفح */
  --fs-root: 16px;         /* الحجم الأساسي الذي تُبنى عليه كل الـ rem */
  --fs-xs: 0.8rem;         /* 12.8px */
  --fs-sm: 0.9rem;         /* 14.4px */
  --fs-base: 1rem;         /* 16px */
  --fs-md: 1.1rem;         /* 17.6px */
  --fs-lg: 1.25rem;        /* 20px */
  --fs-xl: 1.5rem;         /* 24px */
  --fs-2xl: clamp(1.75rem, 4vw, 2.25rem);
  --fs-3xl: clamp(2rem, 5vw, 2.75rem);
  --fs-hero: clamp(2.2rem, 6.5vw, 3.8rem);

  /* المسافات (Spacing) — بوحدة rem لتتناسق مع حجم الخط */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* الانتقالات الحركية (Transitions) */
  --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: all 0.25s ease;

  /* الظلال (Shadows) */
  --shadow-soft: 0 10px 30px rgba(15, 32, 39, 0.08);
  --shadow-medium: 0 15px 35px rgba(15, 32, 39, 0.15);
  --shadow-strong: 0 20px 50px rgba(0, 0, 0, 0.3);
  --shadow-gold-glow: 0 8px 20px rgba(197, 160, 89, 0.3);

  /* نصف القطر (Border Radius) */
  --radius-sm: 0.4rem;
  --radius-md: 0.65rem;
  --radius-lg: 1rem;
  --radius-pill: 50px;

  /* أقصى عرض للحاويات */
  --container-max: 1280px;
  --container-padding: clamp(1rem, 5vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   3) إعادة التصفير (CSS Reset)
   نبدأ بقاعدة موحّدة لكل المتصفحات لتفادي أي اختلاف تلقائي غير متوقع.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box; /* كل عنصر يحسب الحشو (padding) والحدود (border) ضمن عرضه الكلي، وليس زيادة عليه */
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--fs-root); /* الأساس الذي تُبنى عليه كل وحدات rem في الموقع */
  scroll-behavior: smooth;
  height: 100%;
  -webkit-text-size-adjust: 100%; /* يمنع تكبير النص التلقائي على متصفحات آيفون عند تدوير الشاشة */
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  line-height: 1.7;
  overflow-x: hidden; /* يمنع ظهور تمرير أفقي غير مرغوب فيه بسبب أي عنصر يتجاوز عرض الشاشة */
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* إخفاء الأسهم الافتراضية داخل عناصر select على بعض المتصفحات لتنسيق أنظف لاحقاً */
select {
  appearance: none;
  -webkit-appearance: none;
}

/* يضمن عدم كسر النصوص الطويلة (روابط، بريد إلكتروني) لصفوف الجدول أو البطاقات */
p, h1, h2, h3, h4, h5, h6, span, a {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   4) الطباعة العامة (Typography Defaults)
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-navy-900);
  line-height: 1.3;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

p {
  font-size: var(--fs-base);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   5) عناصر عامة مشتركة بين كل الصفحات (Container / Section Heading / Buttons)
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section-heading {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.section-label {
  display: block;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-gold-500);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.section-heading h2 {
  font-size: var(--fs-3xl);
}

/* --------------------------------------------------------------------------
   6) الأزرار (Buttons) — أنماط مشتركة تُستخدم في كل الصفحات
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.8em 2em;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--fs-base);
  transition: var(--transition-smooth);
  cursor: pointer;
  border: 2px solid transparent;
  background: none;
  line-height: 1.4;
}

.btn--primary {
  background-color: var(--color-navy-900);
  color: var(--color-white);
  border-color: var(--color-navy-900);
}
.btn--primary:hover {
  background-color: var(--color-navy-700);
  border-color: var(--color-navy-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-navy-900);
  border-color: var(--color-navy-900);
}
.btn--secondary:hover {
  background-color: var(--color-navy-900);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-navy-900);
  border-color: var(--color-border-soft);
}
.btn--outline:hover {
  border-color: var(--color-gold-500);
  color: var(--color-gold-600);
}

.btn--outline-light {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.5);
}
.btn--outline-light:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
  transform: translateY(-2px);
}

.btn--gold {
  background-color: var(--color-gold-500);
  color: var(--color-white);
  border-color: var(--color-gold-500);
}
.btn--gold:hover {
  background-color: var(--color-gold-400);
  border-color: var(--color-gold-400);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-glow);
}

.btn--whatsapp {
  background-color: var(--color-whatsapp);
  color: var(--color-white);
  border-color: var(--color-whatsapp);
  border-radius: var(--radius-pill);
  padding: 0.7em 1.5em;
}
.btn--whatsapp:hover {
  background-color: #1DA851;
  border-color: #1DA851;
  transform: translateY(-2px);
}

/* الزر الجديد بالهوية الوردية/الحمراء الفاتحة — لا يحذف btn--gold، بل يضيف بديلاً
   له لاستخدامه في الأقسام التي تعتمد الهوية الجديدة (الهيرو وبطاقات الخدمات) */
.btn--accent {
  background-color: var(--color-accent-500);
  color: var(--color-white);
  border-color: var(--color-accent-500);
}
.btn--accent:hover {
  background-color: var(--color-accent-400);
  border-color: var(--color-accent-400);
  transform: translateY(-2px);
  box-shadow: var(--shadow-pink-glow);
}

/* --------------------------------------------------------------------------
   7) أدوات مساعدة صغيرة (Utilities)
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* شارة صغيرة (Tag/Badge) تُستخدم فوق البطاقات لتوضيح نوع القسم
   (مثال: "خدمة"، "قطاع"، "منتج") — بلون وردي فاتح شفاف */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.9em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  background-color: var(--color-accent-soft-bg);
  color: var(--color-accent-600);
  border: 1px solid rgba(232, 99, 111, 0.3);
}

/* نسخة الشارة المخصصة للاستخدام فوق الخلفيات الداكنة (البطاقات السوداء) */
.badge--on-dark {
  background-color: rgba(232, 99, 111, 0.18);
  color: var(--color-accent-400);
  border-color: rgba(232, 99, 111, 0.35);
}