/**
 * دليل تخصيص الأزرار - Button Customization Guide
 * @package Lahzat_News
 * @version 25.8
 */

/*
==============================================
🎨 دليل تخصيص ألوان أزرار الهيدر
==============================================

يمكنك تخصيص ألوان الأزرار بسهولة عن طريق تغيير هذه المتغيرات:

*/

/* 🔹 الألوان الأساسية للأزرار - نفس لون الهيدر مع خطوط بيضاء */
:root {
    /* خلفية الزر العادية - نفس لون الهيدر */
    --button-bg: var(--primary, #1a1a1a);
    
    /* خلفية الزر عند التمرير - نفس اللون مع تأثير خفيف */
    --button-bg-hover: var(--primary, #1a1a1a);
    
    /* لون الحدود العادي - شفاف قليلاً */
    --button-border: rgba(255, 255, 255, 0.2);
    
    /* لون الحدود عند التمرير - أكثر وضوحاً */
    --button-border-hover: rgba(255, 255, 255, 0.4);
    
    /* لون النص/الأيقونة العادي - أبيض احترافي */
    --button-text: #ffffff;
    
    /* لون النص/الأيقونة عند التمرير - أبيض ناصع */
    --button-text-hover: #ffffff;
    
    /* حجم الأزرار */
    --button-size: 45px;
    
    /* انحناء الأطراف */
    --button-radius: 12px;
    
    /* الظلال العادية - ظل ناعم */
    --button-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    
    /* الظلال عند التمرير - ظل أقوى */
    --button-shadow-hover: 0 4px 15px rgba(0, 0, 0, 0.25);
}

/*
==============================================
🎨 أمثلة على تخصيصات مختلفة
==============================================
*/

/* 🟦 نمط أزرق */
.blue-theme {
    --button-bg: rgba(52, 152, 219, 0.1);
    --button-bg-hover: #3498db;
    --button-border: rgba(52, 152, 219, 0.2);
    --button-border-hover: #3498db;
    --button-text: #3498db;
    --button-text-hover: #ffffff;
    --button-shadow: 0 2px 8px rgba(52, 152, 219, 0.15);
    --button-shadow-hover: 0 4px 20px rgba(52, 152, 219, 0.3);
}

/* 🟪 نمط بنفسجي */
.purple-theme {
    --button-bg: rgba(155, 89, 182, 0.1);
    --button-bg-hover: #9b59b6;
    --button-border: rgba(155, 89, 182, 0.2);
    --button-border-hover: #9b59b6;
    --button-text: #9b59b6;
    --button-text-hover: #ffffff;
    --button-shadow: 0 2px 8px rgba(155, 89, 182, 0.15);
    --button-shadow-hover: 0 4px 20px rgba(155, 89, 182, 0.3);
}

/* 🟠 نمط برتقالي */
.orange-theme {
    --button-bg: rgba(230, 126, 34, 0.1);
    --button-bg-hover: #e67e22;
    --button-border: rgba(230, 126, 34, 0.2);
    --button-border-hover: #e67e22;
    --button-text: #e67e22;
    --button-text-hover: #ffffff;
    --button-shadow: 0 2px 8px rgba(230, 126, 34, 0.15);
    --button-shadow-hover: 0 4px 20px rgba(230, 126, 34, 0.3);
}

/* ⚫ نمط أسود أنيق */
.dark-elegant-theme {
    --button-bg: rgba(52, 58, 64, 0.1);
    --button-bg-hover: #343a40;
    --button-border: rgba(52, 58, 64, 0.2);
    --button-border-hover: #343a40;
    --button-text: #343a40;
    --button-text-hover: #ffffff;
    --button-shadow: 0 2px 8px rgba(52, 58, 64, 0.15);
    --button-shadow-hover: 0 4px 20px rgba(52, 58, 64, 0.3);
}

/* ⚪ نمط أبيض */
.white-theme {
    --button-bg: rgba(255, 255, 255, 0.95);
    --button-bg-hover: #ffffff;
    --button-border: rgba(0, 0, 0, 0.15);
    --button-border-hover: rgba(0, 0, 0, 0.25);
    --button-text: #1a1a1a;
    --button-text-hover: #000000;
    --button-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --button-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* 🔴 نمط أحمر */
.red-theme {
    --button-bg: rgba(231, 76, 60, 0.1);
    --button-bg-hover: #e74c3c;
    --button-border: rgba(231, 76, 60, 0.2);
    --button-border-hover: #e74c3c;
    --button-text: #e74c3c;
    --button-text-hover: #ffffff;
    --button-shadow: 0 2px 8px rgba(231, 76, 60, 0.15);
    --button-shadow-hover: 0 4px 20px rgba(231, 76, 60, 0.3);
}

/*
==============================================
📱 تخصيصات خاصة بالموبايل
==============================================
*/
@media (max-width: 768px) {
    :root {
        /* أزرار أصغر للموبايل */
        --button-size: 42px;
        --button-radius: 10px;
    }
}

/*
==============================================
🌙 تخصيصات الوضع المظلم
==============================================
*/
body.dark-mode {
    /* يمكنك تغيير ألوان الوضع المظلم هنا */
    --button-bg: rgba(0, 196, 110, 0.1);
    --button-bg-hover: #00c46e;
    --button-border: rgba(0, 196, 110, 0.3);
    --button-border-hover: #00c46e;
    --button-text: #00c46e;
    --button-text-hover: #0a0a0a;
    --button-shadow: 0 2px 8px rgba(0, 196, 110, 0.2);
    --button-shadow-hover: 0 4px 20px rgba(0, 196, 110, 0.4);
}

/*
==============================================
📝 كيفية الاستخدام
==============================================

1. لتطبيق نمط معين، أضف الكلاس المطلوب للعنصر <body>:
   <body class="blue-theme">

2. لتخصيص ألوانك الخاصة، غير قيم المتغيرات في :root

3. يمكنك إنشاء ألوان مخصصة عن طريق نسخ أحد الأنماط وتعديله

4. تأكد من اختبار الألوان في الوضعين: العادي والمظلم

==============================================
*/