/* تعريف المتغيرات اللونية الأساسية المستخدمة في التصميم */
:root {
    --primary: #3498db;      /* اللون الأساسي (أزرق) */
    --secondary: #2c3e50;    /* اللون الثانوي (أزرق داكن) */
    --accent: #e74c3c;       /* لون التمييز (أحمر) */
    --light: #f8f9fa;        /* لون الخلفية الفاتح */
    --dark: #343a40;         /* لون النصوص الداكن */
    --gray: #6c757d;         /* اللون الرمادي */
}

/* إعادة تعيين الهوامش والحشو لجميع العناصر */
* {
    margin: 0;               /* إزالة الهوامش الخارجية */
    padding: 0;              /* إزالة الحشو الداخلي */
    box-sizing: border-box;  /* تضمين الحشو والحدود في حساب العرض والارتفاع */
}

/* تنسيقات عامة للصفحة */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* خط النص */
    background-color: var(--light); /* لون خلفية الصفحة */
    color: var(--dark);             /* لون النص الأساسي */
    line-height: 1.6;               /* ارتفاع السطر */
    padding-top: 20px;              /* حشو علوي للصفحة */
}

/* حاوية المحتوى الرئيسية */
.container {
    max-width: 1200px;       /* أقصى عرض للحاوية */
    margin: 0 auto;          /* توسيط الحاوية أفقياً */
    padding: 0 15px;         /* حشو جانبي للحاوية */
}

/* ترويسة الصفحة */
.page-header {
    text-align: center;      /* توسيط النص */
    margin-bottom: 30px;     /* هامش سفلي */
    padding: 20px;           /* حشو داخلي */
    background: linear-gradient(135deg, var(--primary), var(--secondary)); /* خلفية متدرجة */
    color: white;            /* لون النص */
    border-radius: 8px;      /* زوايا مدورة */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* ظل خفيف */
}

/* عنوان الترويسة */
.page-header h1 {
    font-size: 2.2rem;       /* حجم الخط */
    margin-bottom: 10px;     /* هامش سفلي */
}

/* نص الترويسة الفرعي */
.page-header p {
    font-size: 1.1rem;       /* حجم الخط */
    opacity: 0.9;            /* شفافية النص */
}

/* قسم الفئات */
.categories-section {
    background: white;       /* خلفية بيضاء */
    padding: 25px;           /* حشو داخلي */
    border-radius: 8px;      /* زوايا مدورة */
    box-shadow: 0 2px 15px rgba(0,0,0,0.05); /* ظل خفيف */
    margin-bottom: 30px;     /* هامش سفلي */
}

/* عنوان قسم الفئات */
.categories-section h2 {
    color: var(--secondary); /* لون النص */
    margin-bottom: 20px;     /* هامش سفلي */
    padding-bottom: 12px;    /* حشو سفلي */
    border-bottom: 2px solid var(--primary); /* خط سفلي */
    font-size: 1.5rem;       /* حجم الخط */
}

/* قائمة الفئات */
.categories-list {
    display: flex;           /* تخطيط مرن */
    flex-wrap: wrap;         /* السماح بالتفاف العناصر */
    gap: 12px;               /* مسافة بين العناصر */
}

/* عنصر الفئة الفردي */
.category-item {
    background: #e9ecef;     /* لون الخلفية */
    padding: 10px 20px;      /* حشو داخلي */
    border-radius: 25px;     /* زوايا مدورة بشكل دائري */
    font-size: 1rem;         /* حجم الخط */
    transition: all 0.3s ease; /* تأثير انتقالي */
    cursor: pointer;         /* مؤشر يد عند التمرير */
}

/* تأثيرات عند تمرير المؤشر على عنصر الفئة */
.category-item:hover {
    background: var(--primary); /* تغيير لون الخلفية */
    color: white;             /* تغيير لون النص */
    transform: translateY(-3px); /* تحريك العنصر لأعلى */
}

/* شبكة المنتجات */
.products-grid {
    display: grid;                           /* تخطيط شبكي */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* أعمدة متجاوبة */
    gap: 25px;                              /* مسافة بين العناصر */
    margin-bottom: 50px;                    /* هامش سفلي */
}

/* بطاقة المنتج */
.product-card {
    background: white;         /* خلفية بيضاء */
    border-radius: 10px;       /* زوايا مدورة */
    overflow: hidden;          /* إخفاء المحتوى الزائد */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* ظل خفيف */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* تأثيرات انتقالية */
    height: 100%;             /* ارتفاع كامل */
    display: flex;            /* تخطيط مرن */
    flex-direction: column;   /* اتجاه العمود */
}

/* تأثيرات عند تمرير المؤشر على بطاقة المنتج */
.product-card:hover {
    transform: translateY(-10px); /* تحريك البطاقة لأعلى */
    box-shadow: 0 12px 25px rgba(0,0,0,0.15); /* زيادة الظل */
}

/* صورة المنتج */
.product-image {
    height: 220px;           /* ارتفاع ثابت للصورة */
    display: flex;           /* تخطيط مرن */
    align-items: center;     /* توسيط عمودي */
    justify-content: center; /* توسيط أفقي */
    background: #f8f9fa;     /* لون خلفية */
    padding: 15px;           /* حشو داخلي */
    position: relative;      /* تحديد الوضع النسبي */
    overflow: hidden;        /* إخفاء المحتوى الزائد */
}

/* صورة المنتج داخل الحاوية */
.product-image img {
    max-height: 100%;        /* أقصى ارتفاع */
    max-width: 100%;         /* أقصى عرض */
    object-fit: contain;     /* احتواء الصورة دون تشويه */
    transition: transform 0.5s ease; /* تأثير انتقالي */
}

/* تأثير تكبير الصورة عند تمرير المؤشر على البطاقة */
.product-card:hover .product-image img {
    transform: scale(1.05);  /* تكبير الصورة */
}

/* نمط عند عدم وجود صورة للمنتج */
.no-image {
    display: flex;                  /* تخطيط مرن */
    flex-direction: column;         /* اتجاه العمود */
    align-items: center;            /* توسيط أفقي */
    justify-content: center;        /* توسيط عمودي */
    color: var(--gray);             /* لون النص */
    text-align: center;             /* توسيط النص */
    padding: 20px;                 /* حشو داخلي */
    height: 100%;                  /* ارتفاع كامل */
    width: 100%;                   /* عرض كامل */
}

/* أيقونة عدم وجود صورة */
.no-image i {
    font-size: 3rem;               /* حجم الأيقونة */
    margin-bottom: 15px;           /* هامش سفلي */
    color: #d1d5db;                /* لون الأيقونة */
}

/* نص عدم وجود صورة */
.no-image-text {
    font-size: 1.1rem;             /* حجم الخط */
    font-weight: 500;              /* سمك الخط */
}

/* معلومات المنتج */
.product-info {
    padding: 20px;           /* حشو داخلي */
    flex-grow: 1;            /* التمدد لملء المساحة المتاحة */
    display: flex;           /* تخطيط مرن */
    flex-direction: column;  /* اتجاه العمود */
}

/* اسم المنتج */
.product-name {
    font-weight: bold;       /* نص غامق */
    margin-bottom: 12px;     /* هامش سفلي */
    font-size: 1.2rem;       /* حجم الخط */
    color: var(--secondary); /* لون النص */
    min-height: 60px;        /* حد أدنى للارتفاع */
}

/* وصف المنتج */
.product-description {
    color: var(--gray);      /* لون النص */
    font-size: 0.95rem;      /* حجم الخط */
    margin-bottom: 20px;     /* هامش سفلي */
    flex-grow: 1;            /* التمدد لملء المساحة المتاحة */
}

/* سعر المنتج */
.product-price {
    font-weight: bold;       /* نص غامق */
    color: var(--accent);    /* لون النص */
    font-size: 1.4rem;       /* حجم الخط */
    margin-bottom: 15px;     /* هامش سفلي */
    display: flex;           /* تخطيط مرن */
    align-items: center;     /* توسيط عمودي */
    gap: 10px;               /* مسافة بين العناصر */
}

/* أيقونة السعر */
.price-icon {
    background: #fdecea;     /* لون الخلفية */
    width: 36px;             /* عرض ثابت */
    height: 36px;            /* ارتفاع ثابت */
    border-radius: 50%;      /* شكل دائري */
    display: flex;           /* تخطيط مرن */
    align-items: center;     /* توسيط عمودي */
    justify-content: center; /* توسيط أفقي */
}

/* أزرار الإجراءات للمنتج */
.product-actions {
    display: flex;           /* تخطيط مرن */
    gap: 10px;               /* مسافة بين الأزرار */
}

/* تنسيق عام للأزرار */
.btn {
    padding: 12px;           /* حشو داخلي */
    border-radius: 8px;       /* زوايا مدورة */
    font-weight: bold;       /* نص غامق */
    cursor: pointer;         /* مؤشر يد عند التمرير */
    transition: all 0.3s ease; /* تأثير انتقالي */
    border: none;            /* إزالة الحدود */
    font-size: 1rem;         /* حجم الخط */
    display: flex;           /* تخطيط مرن */
    align-items: center;     /* توسيط عمودي */
    justify-content: center; /* توسيط أفقي */
    gap: 8px;                /* مسافة بين العناصر */
}

/* زر أساسي (إضافة للسلة) */
.btn-primary {
    background: var(--primary); /* لون الخلفية */
    color: white;             /* لون النص */
    flex-grow: 1;            /* التمدد لملء المساحة المتاحة */
}

/* تأثيرات عند تمرير المؤشر على الزر الأساسي */
.btn-primary:hover {
    background: #2980b9;     /* تغيير لون الخلفية */
    transform: translateY(-2px); /* تحريك الزر لأعلى */
}

/* زر ثانوي (المشاركة) */
.btn-secondary {
    background: var(--secondary); /* لون الخلفية */
    color: white;             /* لون النص */
    width: 50px;              /* عرض ثابت */
}

/* تأثيرات عند تمرير المؤشر على الزر الثانوي */
.btn-secondary:hover {
    background: #1a252f;     /* تغيير لون الخلفية */
    transform: translateY(-2px); /* تحريك الزر لأعلى */
}

/* حالة عدم وجود منتجات */
.no-products {
    text-align: center;      /* توسيط النص */
    padding: 40px;           /* حشو داخلي */
    grid-column: 1 / -1;     /* امتداد عبر جميع الأعمدة */
    background: white;       /* خلفية بيضاء */
    border-radius: 8px;      /* زوايا مدورة */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* ظل خفيف */
}

/* أيقونة عدم وجود منتجات */
.no-products i {
    font-size: 4rem;         /* حجم الأيقونة */
    color: #dee2e6;          /* لون الأيقونة */
    margin-bottom: 20px;     /* هامش سفلي */
}

/* عنوان عدم وجود منتجات */
.no-products h3 {
    font-size: 1.8rem;       /* حجم الخط */
    color: var(--secondary); /* لون النص */
    margin-bottom: 15px;     /* هامش سفلي */
}

/* شريط الإحصائيات */
.stats-bar {
    display: flex;                  /* تخطيط مرن */
    justify-content: space-around;  /* توزيع العناصر بالتساوي */
    background: var(--secondary);   /* لون الخلفية */
    color: white;                   /* لون النص */
    padding: 20px;                  /* حشو داخلي */
    border-radius: 10px;            /* زوايا مدورة */
    margin-bottom: 40px;            /* هامش سفلي */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* ظل خفيف */
}

/* عنصر إحصائي فردي */
.stat-item {
    text-align: center;      /* توسيط النص */
    padding: 0 15px;         /* حشو جانبي */
}

/* الرقم الإحصائي */
.stat-number {
    font-size: 2rem;         /* حجم الخط */
    font-weight: bold;       /* نص غامق */
    color: var(--primary);   /* لون النص */
    margin-bottom: 5px;      /* هامش سفلي */
}

/* تسمية الإحصائية */
.stat-label {
    font-size: 1.1rem;       /* حجم الخط */
    opacity: 0.9;            /* شفافية النص */
}

/* أنماط النوافذ المنبثقة (Modals) */

/* نافذة اختيار طريقة التواصل (إضافة للسلة) */
.selection-modal {
    display: none;           /* مخفية بشكل افتراضي */
    position: fixed;         /* وضع ثابت */
    z-index: 1000;           /* ترتيب الطبقات */
    left: 10;                 /* بداية من أقصى اليسار */
    top: 0;                  /* بداية من أعلى الصفحة */
    width: 90%;             /* عرض كامل */
    height: 90%;            /* ارتفاع كامل */
    background-color: rgba(0, 0, 0, 0.7); /* خلفية شبه شفافة */
    margin-top: 2px;
    max-width: 500px
    top: 30;
    
    
}

/* نافذة المشاركة */
.share-modal {
    display: none;           /* مخفية بشكل افتراضي */
    position: fixed;         /* وضع ثابت */
    z-index: 1000;           /* ترتيب الطبقات */
    left: 10;                 /* بداية من أقصى اليسار */
    top: 0;                  /* بداية من أعلى الصفحة */
    width: 90%;             /* عرض كامل */
    height: 80%;            /* ارتفاع كامل */
    background-color: rgba(0, 0, 0, 0.7); /* خلفية شبه شفافة */
}

/* محتوى النافذة المنبثقة */
.modal-content {
    background-color: #fff;  /* خلفية بيضاء */
    margin: 10% auto;        /* توسيط عمودي وأفقي */
    padding: 5px;           /* حشو داخلي */
    border-radius: 15px;     /* زوايا مدورة */
    box-shadow: 0 5px 25px rgba(0,0,0,0.3); /* ظل */
    width: 90%;              /* عرض نسبي */
    max-width: 400px;        /* أقصى عرض */
    text-align: center;      /* توسيط النص */
    position: relative;      /* وضع نسبي */
    animation: modalFade 0.3s; /* تأثير الظهور */
    margin-top: 2px;        /* هامش علوي */
}

/* تأثير ظهور النافذة المنبثقة */
@keyframes modalFade {
    from {opacity: 0; transform: translateY(-50px);} /* البداية: شفاف وأعلى */
    to {opacity: 1; transform: translateY(0);}       /* النهاية: ظاهر وفي مكانه */
}

/* زر إغلاق النافذة */
.close-modal {
    position: absolute;      /* وضع مطلق */
    top: 0px;               /* مسافة من الأعلى */
    left: 90%;              /* مسافة من اليسار */
    font-size: 28px;         /* حجم الخط */
    font-weight: bold;       /* نص غامق */
    color: red;             /* لون الخط */
    cursor: pointer;         /* مؤشر يد */
    transition: color 0.3s;  /* تأثير انتقالي للون */
}

/* تأثير عند تمرير المؤشر على زر الإغلاق */
.close-modal:hover {
    color: #e74c3c;         /* تغيير لون الخط */
}

/* عنوان النافذة المنبثقة */
.modal-title {
    font-size: 1.5rem;       /* حجم الخط */
    color: var(--secondary); /* لون النص */
    margin-bottom: 5px;     /* هامش سفلي */
    padding-bottom: 5px;    /* حشو سفلي */
    border-bottom: 2px solid var(--primary); /* خط سفلي */
}

/* حاوية الخيارات في النوافذ المنبثقة */
.options-container {
    display: flex;           /* تخطيط مرن */
    flex-wrap: wrap;         /* السماح بالتفاف العناصر */
    justify-content: center; /* توسيط أفقي */
    gap: 5px;               /* مسافة بين العناصر */
    margin-top: 2px;        /* هامش علوي */
    width: 100%;              /* عرض نسبي */
    height: 90%;             /* ارتفاع نسبي */
    padding: 5px;
}

/* بطاقة خيار فردي */
.option-card {
    background: #f8f9fa;     /* لون الخلفية */
    border-radius: 12px;     /* زوايا مدورة */
    padding: 5px;           /* حشو داخلي */
    width: 180px;            /* عرض ثابت */
    cursor: pointer;         /* مؤشر يد */
    transition: all 0.3s ease; /* تأثير انتقالي */
    border: 2px solid transparent; /* حدود شفافة */
    text-align: center;      /* توسيط النص */
}

/* تأثيرات عند تمرير المؤشر على بطاقة الخيار */
.option-card:hover {
    transform: translateY(-8px); /* تحريك لأعلى */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* ظل */
    border-color: var(--primary); /* لون الحدود */
    background: #fff;        /* لون الخلفية */
}

/* أيقونة الخيار */
.option-icon {
    font-size: 2rem;         /* حجم الأيقونة */
    margin-bottom: 5px;     /* هامش سفلي */
    margin-top: 5px;
    display: block;          /* عنصر كتلة */
}

/* تلوين أيقونة واتساب */
.whatsapp-option .option-icon {
    color: #25D366;          /* لون أخضر لواتساب */
}

/* تلوين أيقونة الرسالة الفورية */
.contact-option .option-icon {
    color: var(--primary);   /* اللون الأساسي */
}

/* تلوين أيقونة فيسبوك */
.facebook-option .option-icon {
    color: #1877F2;          /* لون أزرق للفيسبوك */
}

/* تلوين أيقونة تويتر */
.twitter-option .option-icon {
    color: #1DA1F2;          /* لون أزرق لتويتر */
}

/* تلوين أيقونة نسخ الرابط */
.copy-option .option-icon {
    color: var(--secondary); /* اللون الثانوي */
}

/* عنوان الخيار */
.option-title {
    font-weight: bold;       /* نص غامق */
    font-size: 1.2rem;       /* حجم الخط */
    color: var(--secondary); /* لون النص */
    margin-bottom: 10px;     /* هامش سفلي */
}

/* وصف الخيار */
.option-description {
    color: var(--gray);      /* لون النص */
    font-size: 0.9rem;       /* حجم الخط */
}

/* أنماط خاصة بنافذة المشاركة */

/* محتوى نافذة المشاركة */
.share-modal .modal-content {
   max-width: 400px; /* أقصى عرض */
              
    padding: 5px;           /* حشو داخلي */
    margin: 5% auto;         /* توسيط عمودي وأفقي */
}

/* حاوية الخيارات في نافذة المشاركة */
.share-modal .options-container {
    display: grid;                         /* تخطيط شبكي */
    grid-template-columns: repeat(2, 1fr); /* عمودين متساويين */
    gap: 5px;                              /* مسافة بين العناصر */
}

/* بطاقة خيار في نافذة المشاركة */
.share-modal .option-card {
    padding: 5px;           /* حشو داخلي */
    width: auto;             /* عرض تلقائي */
    min-width: 0;            /* عرض أدنى صفر */
}

/* أيقونة الخيار في نافذة المشاركة */
.share-modal .option-icon {
    font-size: 2rem;         /* حجم أصغر للأيقونة */
    margin-bottom: 10px;     /* هامش سفلي أقل */
}

/* عنوان الخيار في نافذة المشاركة */
.share-modal .option-title {
    font-size: 1rem;         /* حجم أصغر للخط */
    margin-bottom: 5px;      /* هامش سفلي أقل */
}

/* وصف الخيار في نافذة المشاركة */
.share-modal .option-description {
    font-size: 0.8rem;       /* حجم أصغر للخط */
}

/* استعلامات الوسائط للشاشات متوسطة الحجم (768px فأقل) */
@media (max-width: 768px) {
    /* شبكة المنتجات للشاشات المتوسطة */
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* أعمدة أصغر */
        gap: 10px;          /* مسافة أقل بين العناصر */
    }
    
    /* عنوان الترويسة للشاشات المتوسطة */
    .page-header h1 {
        font-size: 1.8rem;  /* حجم أصغر للخط */
    }
    
    /* شريط الإحصائيات للشاشات المتوسطة */
    .stats-bar {
        flex-direction: column; /* اتجاه عمودي */
        gap: 20px;          /* مسافة بين العناصر */
    }
    
    /* عنصر الفئة للشاشات المتوسطة */
    .category-item {
        padding: 8px 15px;  /* حشو أقل */
        font-size: 0.95rem; /* حجم أصغر للخط */
    }
    
    /* حاوية الخيارات للشاشات المتوسطة */
    .options-container {
        flex-direction: column; /* اتجاه عمودي */
        align-items: center;  /* توسيط أفقي */
    }
    
    /* بطاقة الخيار للشاشات المتوسطة */
    .option-card {
        width: 90%;         /* عرض نسبي */
        max-width: 280px;   /* أقصى عرض */
    }
}

/* استعلامات الوسائط للشاشات الصغيرة (380px فأقل) */
@media (max-width: 380px) {
    /* حاوية الخيارات في نافذة المشاركة للشاشات الصغيرة */
    .share-modal .options-container {
        grid-template-columns: 1fr; /* عمود واحد */
    }
    
    /* محتوى نافذة المشاركة للشاشات الصغيرة */
    .share-modal .modal-content {
        margin: 2% auto;    /* هامش علوي أقل */
        padding: 15px;      /* حشو داخلي أقل */
    }
}

/* أنماط الإشعارات */
.notification {
    position: fixed;         /* وضع ثابت */
    bottom: 20px;            /* مسافة من الأسفل */
    right: 20px;             /* مسافة من اليمين */
    background-color: #27ae60; /* لون الخلفية */
    color: white;            /* لون النص */
    padding: 15px 25px;      /* حشو داخلي */
    border-radius: 8px;      /* زوايا مدورة */
    z-index: 1000;           /* ترتيب الطبقات */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* ظل */
    animation: fadeIn 0.3s, fadeOut 0.3s 2.7s; /* تأثيرات الظهور والاختفاء */
    animation-fill-mode: forwards; /* الحفاظ على الحالة النهائية */
}

/* تأثير ظهور الإشعار */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); } /* البداية: شفاف وأسفل */
    to { opacity: 1; transform: translateY(0); }      /* النهاية: ظاهر وفي مكانه */
}

/* تأثير اختفاء الإشعار */
@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }    /* البداية: ظاهر وفي مكانه */
    to { opacity: 0; transform: translateY(20px); }   /* النهاية: شفاف وأسفل */
}