/* ============================================================
   نظام المتغيرات المركزي - Design Tokens System
   موقع: أسامة للعسل والمكسرات
   
   الغرض: توحيد جميع الألوان والخطوط والتنسيقات في مكان واحد
   الاستخدام: يتم استيراد هذا الملف قبل أي ملف CSS آخر
   
   ملاحظة: أي تغيير هنا سينعكس تلقائياً على الموقع بأكمله
   ============================================================ */

:root {
    /* ============================================================
       القسم الأول: الألوان الأساسية - Primary Colors
       ============================================================ */

    /* اللون الأساسي (البرتقالي المميز للموقع) */
    --primary: #F28123;
    --primary-hover: #d66d16;
    /* لون أغمق عند التمرير بالماوس */
    --primary-light: #ffb84d;
    /* لون فاتح للتأثيرات الخفيفة */

    /* اللون الثانوي (الأسود العميق) */
    --secondary: #051922;
    --secondary-light: #0a2a38;
    /* درجة أفتح قليلاً */

    /* ============================================================
       القسم الثاني: ألوان الخلفيات - Background Colors
       ============================================================ */

    --bg-white: #ffffff;
    /* خلفية بيضاء نقية */
    --bg-light: #fdfdfd;
    /* خلفية فاتحة جداً (للصفحات) */
    --bg-gray: #f5f5f5;
    /* خلفية رمادية فاتحة (للبطاقات) */
    --bg-dark: #051922;
    /* خلفية داكنة (للفوتر والهيدر) */

    /* ============================================================
       القسم الثالث: ألوان النصوص - Text Colors
       ============================================================ */

    --text-main: #051922;
    /* لون النص الرئيسي (العناوين والفقرات) */
    --text-muted: #555555;
    /* لون النص الباهت (النصوص الثانوية) */
    --text-light: #ffffff;
    /* نص أبيض (على الخلفيات الداكنة) */
    --text-gray: #777777;
    /* نص رمادي (للتفاصيل الصغيرة) */

    /* ============================================================
       القسم الرابع: ألوان الحالات - Semantic Colors
       (للرسائل والتنبيهات)
       ============================================================ */

    --success: #28a745;
    /* أخضر للنجاح */
    --error: #dc3545;
    /* أحمر للأخطاء */
    --warning: #ffc107;
    /* أصفر للتحذيرات */
    --info: #17a2b8;
    /* أزرق للمعلومات */

    /* ============================================================
       القسم الخامس: الخطوط - Typography
       ============================================================ */

    /* الخط الأساسي (Cairo - خط عربي احترافي) */
    --font-main: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-secondary: 'Cairo', sans-serif;

    /* أحجام الخطوط - Font Sizes */
    --fs-h1: 3rem;
    /* 48px - للعناوين الكبيرة جداً */
    --fs-h2: 2.25rem;
    /* 36px - للعناوين الرئيسية */
    --fs-h3: 1.75rem;
    /* 28px - للعناوين الفرعية */
    --fs-h4: 1.5rem;
    /* 24px */
    --fs-body: 1rem;
    /* 16px - حجم النص العادي */
    --fs-small: 0.875rem;
    /* 14px - للنصوص الصغيرة */
    --fs-tiny: 0.75rem;
    /* 12px - للتفاصيل الدقيقة */

    /* أوزان الخطوط - Font Weights */
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* ============================================================
       القسم السادس: الأشكال والانحناءات - Border Radius
       ============================================================ */

    --radius-none: 0;
    /* بدون انحناء */
    --radius-sm: 4px;
    /* انحناء صغير */
    --radius-md: 8px;
    /* انحناء متوسط */
    --radius-lg: 15px;
    /* انحناء كبير */
    --radius-xl: 20px;
    /* انحناء كبير جداً */
    --radius-full: 9999px;
    /* دائري كامل (للأزرار) */

    /* ============================================================
       القسم السابع: الظلال - Box Shadows
       ============================================================ */

    --shadow-none: none;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* ظل خفيف جداً */
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* ظل متوسط */
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* ظل كبير */
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.2);
    /* ظل كبير جداً */

    /* ظلال ملونة (للتأثيرات الخاصة) */
    --shadow-primary: 0 8px 20px rgba(242, 129, 35, 0.3);
    /* ظل برتقالي */

    /* ============================================================
       القسم الثامن: المسافات - Spacing
       (للـ Padding و Margin)
       ============================================================ */

    --space-xs: 0.25rem;
    /* 4px */
    --space-sm: 0.5rem;
    /* 8px */
    --space-md: 1rem;
    /* 16px */
    --space-lg: 1.5rem;
    /* 24px */
    --space-xl: 2rem;
    /* 32px */
    --space-2xl: 3rem;
    /* 48px */
    --space-3xl: 4rem;
    /* 64px */

    /* ============================================================
       القسم التاسع: الانتقالات - Transitions
       ============================================================ */

    --transition-fast: all 0.15s ease-in-out;
    /* سريع جداً */
    --transition-base: all 0.3s ease;
    /* عادي */
    --transition-slow: all 0.5s ease;
    /* بطيء */

    /* ============================================================
       القسم العاشر: عروض الحاويات - Container Widths
       ============================================================ */

    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
}

/* ============================================================
   تطبيق المتغيرات على العناصر الأساسية
   ============================================================ */

/* تطبيق الخط على كامل الموقع */
body {
    font-family: var(--font-main);
    color: var(--text-main);
    background-color: var(--bg-light);
    font-size: var(--fs-body);
    line-height: 1.8;
}

/* تطبيق الخط على جميع العناوين */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-main);
    color: var(--text-main);
    font-weight: var(--fw-bold);
}

/* الكلاسات المساعدة - Utility Classes */
.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.bg-secondary {
    background-color: var(--secondary) !important;
}

/* كلاس خاص للنص البرتقالي (مستخدم في الموقع) */
.orange-text {
    color: var(--primary) !important;
}

/* ============================================================
   ملاحظات للمطور:
   
   1. لتغيير اللون الأساسي للموقع:
      غيّر قيمة --primary في السطر 19
   
   2. لتغيير الخط:
      غيّر قيمة --font-main في السطر 67
   
   3. لإضافة لون جديد:
      أضفه في القسم المناسب واستخدمه بـ var(--اسم-اللون)
   
   4. هذا الملف يجب أن يُحمّل قبل أي ملف CSS آخر
   ============================================================ */

/* ============================================================
   الوضع الداكن - Dark Mode
   يتم تفعيله عند إضافة data-theme="dark" إلى عنصر html
   ============================================================ */

:root[data-theme="dark"] {
    /* ============================================================
       الألوان الأساسية - Primary Colors (Dark Mode)
       ============================================================ */

    /* اللون الأساسي (البرتقالي يبقى كما هو - هوية الموقع) */
    --primary: #F28123;
    --primary-hover: #ffb84d;
    /* أفتح قليلاً للتباين */
    --primary-light: #ffa726;

    /* اللون الثانوي (معكوس - فاتح بدلاً من داكن) */
    --secondary: #e0e0e0;
    --secondary-light: #f5f5f5;

    /* ============================================================
       ألوان الخلفيات - Background Colors (Dark Mode)
       ============================================================ */

    --bg-white: #1e1e1e;
    /* "أبيض" داكن - للبطاقات */
    --bg-light: #121212;
    /* خلفية رئيسية داكنة جداً */
    --bg-gray: #2a2a2a;
    /* رمادي داكن - للمناطق المميزة */
    --bg-dark: #0a0a0a;
    /* أسود عميق - للهيدر والفوتر */

    /* ============================================================
       ألوان النصوص - Text Colors (Dark Mode)
       ============================================================ */

    --text-main: #e8e8e8;
    /* نص رئيسي فاتح */
    --text-muted: #b0b0b0;
    /* نص باهت فاتح */
    --text-light: #ffffff;
    /* أبيض نقي */
    --text-gray: #999999;
    /* رمادي فاتح */

    /* ============================================================
       ألوان الحالات - Semantic Colors (Dark Mode)
       نفس الألوان لكن بدرجات أفتح قليلاً للتباين
       ============================================================ */

    --success: #4caf50;
    /* أخضر أفتح */
    --error: #f44336;
    /* أحمر أفتح */
    --warning: #ffb300;
    /* أصفر أفتح */
    --info: #29b6f6;
    /* أزرق أفتح */

    /* ============================================================
       الظلال - Box Shadows (Dark Mode)
       ظلال أخف وأكثر نعومة للوضع الداكن
       ============================================================ */

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
    --shadow-primary: 0 8px 20px rgba(242, 129, 35, 0.4);
}

/* ============================================================
   انتقال سلس بين الأوضاع - Smooth Transition
   ============================================================ */

:root {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* جميع العناصر تنتقل بسلاسة */
* {
    transition: background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* ============================================================
   تنسيقات زر التبديل - Theme Toggle Button Styles
   ============================================================ */

.theme-toggle-btn {
    position: relative;
    background: transparent;
    border: 2px solid var(--primary);
    border-radius: var(--radius-full);
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-main);
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
}

.theme-toggle-btn:hover {
    background: var(--primary);
    color: var(--text-light);
    transform: scale(1.05);
    box-shadow: var(--shadow-primary);
}

.theme-toggle-btn:active {
    transform: scale(0.95);
}

/* إخفاء/إظهار الأيقونات حسب الوضع */
.theme-toggle-btn .fa-sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle-btn .fa-moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle-btn .fa-sun {
    display: inline-block;
}

/* تنسيق خاص للموبايل */
.mobile-top-btn.theme-toggle {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    transition: all 0.3s ease;
}

.mobile-top-btn.theme-toggle:hover {
    background: var(--primary);
    color: var(--text-light);
}

/* ============================================================
   تخطيط شبكة المنتجات المتجاوب - Responsive Product Grid Layout
   🖥️ كمبيوتر (≥992px): 3 أعمدة
   📱 تابلت (768px-991px): 2 عمود
   📱 موبايل (<768px): 1 عمود
   ============================================================ */

/* صف المنتجات - Product Row */
.product-lists .row,
.products-grid .row,
.latest-products .row {
    display: flex;
    flex-wrap: wrap;
}

/* 🖥️ الكمبيوتر: 3 أعمدة (الافتراضي) */
.product-lists .row>[class*="col-"],
.products-grid .row>[class*="col-"],
.latest-products .row>[class*="col-"] {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

/* 📱 التابلت: 2 عمود */
@media (max-width: 991px) {

    .product-lists .row>[class*="col-"],
    .products-grid .row>[class*="col-"],
    .latest-products .row>[class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* 📱 الموبايل: 1 عمود */
@media (max-width: 767px) {

    .product-lists .row>[class*="col-"],
    .products-grid .row>[class*="col-"],
    .latest-products .row>[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /*مسافات بين الكروت في الموبايل */
    .single-product-item {
        margin-bottom: 25px !important;
    }
}

/* ============================================================
   مسافات بين البطاقات - Card Spacing
   لجميع الأحجام: موبايل، تابلت، كمبيوتر
   ============================================================ */

/* مسافات عامة لجميع بطاقات المنتجات */
.single-product-item {
    margin: 15px !important;
}

/* مسافات محسّنة للموبايل */
@media (max-width: 767px) {
    .single-product-item {
        margin: 12px 8px !important;
    }
}

/* مسافات محسّنة للتابلت */
@media (min-width: 768px) and (max-width: 991px) {
    .single-product-item {
        margin: 15px 10px !important;
    }
}

/* مسافات محسّنة للكمبيوتر */
@media (min-width: 992px) {
    .single-product-item {
        margin: 18px 12px !important;
    }
}

/* ظلال الأقسام في الوضع العادي */
.product-section,
.testimonail-section {
    box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.05);
}

/* مسافات بين الكروت في الموبايل */
@media (max-width: 767px) {

    /* مسافات وظل للكروت في الموبايل */
    .single-product-item {
        margin-bottom: 30px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12),
            0 0 10px rgba(242, 129, 35, 0.1) !important;
    }

    /* تحسين الصف */
    .product-lists .row,
    .products-grid .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .product-lists .row>[class*="col-"],
    .products-grid .row>[class*="col-"] {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* ============================================================
   تحسين عام للشبكة - General Grid Enhancement
   ============================================================ */

/* التأكد من تساوي ارتفاع البطاقات */
.single-product-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* محتوى البطاقة يملأ المساحة المتاحة */
.single-product-item .product-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}