/**
 * ملف التنسيقات الرئيسي - الصفحة الرئيسية
 * Main Stylesheet for Index Page
 * 
 * يحتوي على جميع تنسيقات الصفحة الرئيسية لعرض أسعار الذهب
 * مع دعم الوضع الليلي والنهاري والتجاوب مع جميع الأجهزة
 */

/* ============================================
   تعريف الخط السعودي
   Saudi Font Definition
   ============================================ */

/* الخط السعودي العادي - يستخدم في النصوص العادية */
@font-face {
    font-family: 'Saudi';
    src: url('../fonts/SaudiWeb-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* الخط السعودي العريض - يستخدم في العناوين والنصوص المهمة */
@font-face {
    font-family: 'Saudi';
    src: url('../fonts/SaudiWeb-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

/* ============================================
   إعادة تعيين الأنماط الافتراضية
   Reset Default Styles
   ============================================ */

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

/* ============================================
   متغيرات الألوان
   Color Variables
   ============================================ */

/* تعريف الألوان كمتغيرات لسهولة التعديل والاستخدام */
:root {
    /* ألوان الخلفية */
    --bg-light: #f5f5f5;              /* خلفية الوضع النهاري - رمادي فاتح */
    --bg-dark: #1a1a1a;               /* خلفية الوضع الليلي - أسود */
    
    /* ألوان البطاقات */
    --card-light: #ffffff;            /* بطاقات الوضع النهاري - أبيض */
    --card-dark: #2d2d2d;             /* بطاقات الوضع الليلي - رمادي غامق */
    
    /* ألوان النصوص */
    --text-light: #333333;            /* نص الوضع النهاري - رمادي غامق */
    --text-dark: #ffffff;             /* نص الوضع الليلي - أبيض */
    --text-secondary-light: #666666;  /* نص ثانوي للوضع النهاري */
    --text-secondary-dark: #aaaaaa;   /* نص ثانوي للوضع الليلي */
    
    /* ألوان العلامة التجارية */
    --gold: #D4AF37;                  /* ذهبي غامق - اللون الأساسي */
    --gold-light: #FFD700;            /* ذهبي فاتح - للتأثيرات */
    
    /* ألوان الحالات */
    --green: #10b981;                 /* أخضر - للزيادة والنجاح */
    --red: #ef4444;                   /* أحمر - للنقصان والخطأ */
    
    /* ألوان الحدود */
    --border-light: #e5e5e5;          /* حدود الوضع النهاري */
    --border-dark: #404040;           /* حدود الوضع الليلي */
}

/* ============================================
   تنسيقات الجسم الأساسية
   Body Base Styles
   ============================================ */

body {
    font-family: 'Saudi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* الخط السعودي مع بدائل احتياطية */
    background: var(--bg-light);      /* الخلفية الافتراضية - وضع نهاري */
    color: var(--text-light);         /* لون النص الافتراضي */
    transition: background 0.3s, color 0.3s; /* انتقال سلس عند تغيير الوضع */
    line-height: 1.6;                 /* مسافة بين الأسطر لسهولة القراءة */
}

/* تطبيق ألوان الوضع الليلي عند إضافة class="dark-mode" */
body.dark-mode {
    background: var(--bg-dark);
    color: var(--text-dark);
}

/* ============================================
   الحاوية الرئيسية
   Main Container
   ============================================ */

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

/* ============================================
   الهيدر (رأس الصفحة)
   Header Section
   ============================================ */

.header {
    /* خلفية متدرجة مع صورة الذهب */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/header-bg.jpg');
    background-size: cover;          /* تغطية كامل المساحة */
    background-position: center;     /* توسيط الصورة */
    color: white;                    /* لون النص أبيض */
    padding: 60px 20px;              /* مسافة داخلية */
    text-align: center;              /* محاذاة النص للوسط */
    position: relative;              /* لوضع الأزرار بشكل مطلق */
}

/* زر تبديل الوضع الليلي/النهاري */
.theme-toggle {
    position: absolute;              /* وضع مطلق */
    top: 20px;                       /* مسافة من الأعلى */
    left: 20px;                      /* مسافة من اليسار */
    background: rgba(255,255,255,0.2); /* خلفية شفافة */
    border: none;                    /* بدون حدود */
    color: white;                    /* لون النص */
    width: 50px;                     /* العرض */
    height: 50px;                    /* الارتفاع */
    border-radius: 50%;              /* دائري */
    cursor: pointer;                 /* مؤشر اليد عند التمرير */
    font-size: 24px;                 /* حجم الأيقونة */
    transition: background 0.3s;     /* انتقال سلس للخلفية */
    backdrop-filter: blur(10px);     /* تأثير ضبابي */
}

/* تأثير عند التمرير على زر الوضع */
.theme-toggle:hover {
    background: rgba(255,255,255,0.3); /* خلفية أكثر وضوحاً */
}

/* زر الدخول إلى لوحة الإدارة */
.admin-link {
    position: absolute;              /* وضع مطلق */
    top: 20px;                       /* مسافة من الأعلى */
    right: 20px;                     /* مسافة من اليمين */
    background: rgba(255,255,255,0.2); /* خلفية شفافة */
    border: none;                    /* بدون حدود */
    color: white;                    /* لون النص */
    padding: 12px 20px;              /* مسافة داخلية */
    border-radius: 25px;             /* حواف دائرية */
    cursor: pointer;                 /* مؤشر اليد */
    font-size: 14px;                 /* حجم الخط */
    text-decoration: none;           /* بدون تسطير */
    transition: background 0.3s;     /* انتقال سلس */
    backdrop-filter: blur(10px);     /* تأثير ضبابي */
    font-family: 'Saudi', sans-serif; /* الخط السعودي */
    font-weight: bold;               /* عريض */
}

/* تأثير عند التمرير على زر الإدارة */
.admin-link:hover {
    background: rgba(255,255,255,0.3);
    color: white;                    /* الحفاظ على اللون الأبيض */
}

/* عنوان الموقع الرئيسي */
.site-title {
    font-size: 2.5rem;               /* حجم كبير */
    font-weight: bold;               /* عريض */
    margin-bottom: 10px;             /* مسافة سفلية */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* ظل للنص لوضوح أفضل */
}

/* التاريخ واليوم */
.date-time {
    font-size: 1.1rem;               /* حجم متوسط */
    opacity: 0.95;                   /* شفافية خفيفة */
}

/* ============================================
   بطاقات الأسعار
   Price Cards Section
   ============================================ */

.price-cards {
    display: grid;                   /* شبكة مرنة */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* أعمدة تلقائية */
    gap: 20px;                       /* مسافة بين البطاقات */
    margin: -40px 0 40px 0;          /* رفع البطاقات فوق الهيدر */
    position: relative;              /* للتحكم في الترتيب */
    z-index: 10;                     /* فوق العناصر الأخرى */
}

/* تنسيق البطاقة الواحدة */
.price-card {
    background: var(--card-light);   /* خلفية بيضاء في الوضع النهاري */
    border-radius: 15px;             /* حواف دائرية */
    padding: 25px;                   /* مسافة داخلية */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* ظل خفيف */
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s; /* انتقالات سلسة */
    text-align: center;              /* محاذاة للوسط */
}

/* بطاقة في الوضع الليلي */
body.dark-mode .price-card {
    background: var(--card-dark);    /* خلفية غامقة */
    box-shadow: 0 5px 20px rgba(0,0,0,0.3); /* ظل أقوى */
}

/* تأثير عند التمرير على البطاقة */
.price-card:hover {
    transform: translateY(-5px);     /* رفع البطاقة 5 بكسل */
    box-shadow: 0 8px 30px rgba(0,0,0,0.15); /* ظل أكبر */
}

/* تسمية العيار (24، 21، 18) */
.karat-label {
    font-size: 1.2rem;               /* حجم متوسط */
    font-weight: bold;               /* عريض */
    color: var(--gold);              /* لون ذهبي */
    margin-bottom: 15px;             /* مسافة سفلية */
}

/* قيمة السعر */
.price-value {
    font-size: 2.5rem;               /* حجم كبير */
    font-weight: bold;               /* عريض */
    color: var(--text-light);        /* لون النص */
    margin-bottom: 5px;              /* مسافة سفلية */
    display: flex;                   /* عرض مرن */
    align-items: center;             /* محاذاة عمودية */
    justify-content: center;         /* محاذاة أفقية */
    gap: 8px;                        /* مسافة بين الرقم والرمز */
}

/* قيمة السعر في الوضع الليلي */
body.dark-mode .price-value {
    color: var(--text-dark);         /* لون أبيض */
}

/* رمز الريال السعودي */
.sar-symbol {
    width: 32px;                     /* العرض */
    height: 32px;                    /* الارتفاع */
    filter: brightness(0) saturate(100%); /* تحويل إلى أسود */
}

/* رمز الريال في الوضع الليلي */
body.dark-mode .sar-symbol {
    filter: brightness(0) saturate(100%) invert(1); /* تحويل إلى أبيض */
}

/* النص التوضيحي تحت السعر */
.price-subtitle {
    color: var(--text-secondary-light); /* لون رمادي */
    font-size: 0.9rem;               /* حجم صغير */
}

/* النص التوضيحي في الوضع الليلي */
body.dark-mode .price-subtitle {
    color: var(--text-secondary-dark);
}

/* ============================================
   قسم جدول التغير
   Change Table Section
   ============================================ */

.change-section {
    background: var(--card-light);   /* خلفية بيضاء */
    border-radius: 15px;             /* حواف دائرية */
    padding: 30px;                   /* مسافة داخلية */
    margin-bottom: 30px;             /* مسافة سفلية */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* ظل خفيف */
    transition: background 0.3s;     /* انتقال سلس */
}

/* قسم التغير في الوضع الليلي */
body.dark-mode .change-section {
    background: var(--card-dark);
}

/* عنوان القسم */
.section-title {
    font-size: 1.5rem;               /* حجم كبير */
    font-weight: bold;               /* عريض */
    margin-bottom: 20px;             /* مسافة سفلية */
    text-align: center;              /* محاذاة للوسط */
}

/* أزرار اختيار العيار */
.karat-tabs {
    display: flex;                   /* عرض مرن */
    justify-content: center;         /* محاذاة للوسط */
    gap: 10px;                       /* مسافة بين الأزرار */
    margin-bottom: 25px;             /* مسافة سفلية */
    flex-wrap: wrap;                 /* التفاف في حالة الشاشات الصغيرة */
}

/* تنسيق زر العيار */
.karat-tab {
    background: transparent;         /* خلفية شفافة */
    border: 2px solid var(--border-light); /* حدود */
    color: var(--text-light);        /* لون النص */
    padding: 10px 25px;              /* مسافة داخلية */
    border-radius: 25px;             /* حواف دائرية */
    cursor: pointer;                 /* مؤشر اليد */
    font-size: 1rem;                 /* حجم الخط */
    font-weight: bold;               /* عريض */
    transition: all 0.3s;            /* انتقال سلس */
    font-family: 'Saudi', sans-serif; /* الخط السعودي */
}

/* زر العيار في الوضع الليلي */
body.dark-mode .karat-tab {
    border-color: var(--border-dark);
    color: var(--text-dark);
}

/* زر العيار النشط (المختار) */
.karat-tab.active {
    background: var(--gold);         /* خلفية ذهبية */
    border-color: var(--gold);       /* حدود ذهبية */
    color: white;                    /* نص أبيض */
}

/* تأثير عند التمرير على زر العيار */
.karat-tab:hover {
    border-color: var(--gold);       /* حدود ذهبية */
}

/* ============================================
   جدول التغير
   Change Table
   ============================================ */

.change-table {
    width: 100%;                     /* عرض كامل */
    border-collapse: collapse;       /* دمج الحدود */
}

/* خلايا الجدول */
.change-table th,
.change-table td {
    padding: 15px;                   /* مسافة داخلية */
    text-align: center;              /* محاذاة للوسط */
    border-bottom: 1px solid var(--border-light); /* حد سفلي */
}

/* خلايا الجدول في الوضع الليلي */
body.dark-mode .change-table th,
body.dark-mode .change-table td {
    border-bottom-color: var(--border-dark);
}

/* رأس الجدول */
.change-table th {
    font-weight: bold;               /* عريض */
    color: var(--text-secondary-light); /* لون رمادي */
    font-size: 0.9rem;               /* حجم صغير */
}

/* رأس الجدول في الوضع الليلي */
body.dark-mode .change-table th {
    color: var(--text-secondary-dark);
}

/* محتوى الجدول */
.change-table td {
    font-size: 1.1rem;               /* حجم متوسط */
}

/* أيقونة السهم القديمة (Emoji) */
.change-icon {
    font-size: 1.5rem;               /* حجم كبير */
}

/* الأسهم الجديدة (▲ ▼) */
.change-arrow {
    font-size: 1.2rem;               /* حجم متوسط */
    font-weight: bold;               /* عريض */
}

/* سهم الارتفاع (أخضر) - ثابت في جميع الأوضاع */
.arrow-up {
    color: #10b981 !important;       /* أخضر ثابت */
}

/* سهم الانخفاض (أحمر) - ثابت في جميع الأوضاع */
.arrow-down {
    color: #ef4444 !important;       /* أحمر ثابت */
}

/* لون الزيادة (أخضر) */
.change-up {
    color: var(--green);
}

/* لون النقصان (أحمر) */
.change-down {
    color: var(--red);
}

/* قيمة التغير */
.change-value {
    font-weight: bold;               /* عريض */
}

/* ============================================
   قسم الحاسبة
   Calculator Section
   ============================================ */

.calculator-section {
    background: var(--card-light);   /* خلفية بيضاء */
    border-radius: 15px;             /* حواف دائرية */
    padding: 30px;                   /* مسافة داخلية */
    margin-bottom: 30px;             /* مسافة سفلية */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* ظل خفيف */
    transition: background 0.3s;     /* انتقال سلس */
}

/* الحاسبة في الوضع الليلي */
body.dark-mode .calculator-section {
    background: var(--card-dark);
}

/* حقول الإدخال */
.calculator-inputs {
    display: grid;                   /* شبكة مرنة */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* أعمدة تلقائية */
    gap: 20px;                       /* مسافة بين الحقول */
    margin-bottom: 20px;             /* مسافة سفلية */
}

/* مجموعة الحقل */
.input-group {
    display: flex;                   /* عرض مرن */
    flex-direction: column;          /* عمودي */
}

/* تسمية الحقل */
.input-group label {
    margin-bottom: 8px;              /* مسافة سفلية */
    font-weight: bold;               /* عريض */
    color: var(--text-secondary-light); /* لون رمادي */
}

/* تسمية الحقل في الوضع الليلي */
body.dark-mode .input-group label {
    color: var(--text-secondary-dark);
}

/* حقل الإدخال */
.input-group input {
    padding: 12px;                   /* مسافة داخلية */
    border: 2px solid var(--border-light); /* حدود */
    border-radius: 8px;              /* حواف دائرية */
    font-size: 1rem;                 /* حجم الخط */
    background: var(--bg-light);     /* خلفية فاتحة */
    color: var(--text-light);        /* لون النص */
    font-family: 'Saudi', sans-serif; /* الخط السعودي */
    transition: border-color 0.3s, background 0.3s; /* انتقال سلس */
}

/* حقل الإدخال في الوضع الليلي */
body.dark-mode .input-group input {
    background: var(--bg-dark);
    color: var(--text-dark);
    border-color: var(--border-dark);
}

/* حقل الإدخال عند التركيز */
.input-group input:focus {
    outline: none;                   /* إزالة الحد الافتراضي */
    border-color: var(--gold);       /* حد ذهبي */
}

/* حقل الإدخال للقراءة فقط */
.input-group input:read-only {
    background: var(--border-light); /* خلفية رمادية */
    cursor: not-allowed;             /* مؤشر الممنوع */
}

/* حقل القراءة فقط في الوضع الليلي */
body.dark-mode .input-group input:read-only {
    background: var(--border-dark);
}

/* حاوية الحقل مع زر التحرير */
.input-with-edit {
    position: relative;              /* وضع نسبي */
}

/* زر التحرير */
.edit-btn {
    position: absolute;              /* وضع مطلق */
    left: 10px;                      /* مسافة من اليسار */
    top: 50%;                        /* في المنتصف عمودياً */
    transform: translateY(-50%);     /* توسيط دقيق */
    background: var(--gold);         /* خلفية ذهبية */
    border: none;                    /* بدون حدود */
    color: white;                    /* نص أبيض */
    width: 30px;                     /* العرض */
    height: 30px;                    /* الارتفاع */
    border-radius: 50%;              /* دائري */
    cursor: pointer;                 /* مؤشر اليد */
    font-size: 14px;                 /* حجم الأيقونة */
    transition: background 0.3s;     /* انتقال سلس */
}

/* زر التحرير عند التمرير */
.edit-btn:hover {
    background: var(--gold-light);   /* لون أفتح */
}

/* محدد العيار في الحاسبة */
.karat-selector {
    display: flex;                   /* عرض مرن */
    gap: 10px;                       /* مسافة بين الأزرار */
    margin-bottom: 20px;             /* مسافة سفلية */
    flex-wrap: wrap;                 /* التفاف */
}

/* مجموعة الـ checkbox */
.checkbox-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* تسمية الـ checkbox */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: bold;
    color: var(--text-light);
    margin: 0;
}

/* تسمية الـ checkbox في الوضع الليلي */
body.dark-mode .checkbox-label {
    color: var(--text-dark);
}

/* الـ checkbox */
.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--gold);
}

/* زر الحساب */
.calculate-btn {
    width: 100%;
    padding: 15px;
    background: var(--gold);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    font-family: 'Saudi', sans-serif;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    margin-bottom: 20px;
}

/* زر الحساب عند التمرير */
.calculate-btn:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
}

/* زر الحساب عند الضغط */
.calculate-btn:active {
    transform: translateY(0);
}

/* نتائج الحاسبة */
.calculator-results {
    display: grid;                   /* شبكة */
    grid-template-columns: 1fr 1fr;  /* عمودين متساويين */
    gap: 20px;                       /* مسافة بينهما */
    margin-top: 25px;                /* مسافة علوية */
}

/* صندوق النتيجة */
.result-box {
    padding: 20px;                   /* مسافة داخلية */
    border-radius: 10px;             /* حواف دائرية */
    text-align: center;              /* محاذاة للوسط */
}

/* صندوق سعر الشراء (أخضر) */
.result-box.buy {
    background: rgba(16, 185, 129, 0.1); /* خلفية خضراء شفافة */
    border: 2px solid var(--green);  /* حدود خضراء */
}

/* صندوق سعر البيع (أحمر) */
.result-box.sell {
    background: rgba(239, 68, 68, 0.1); /* خلفية حمراء شفافة */
    border: 2px solid var(--red);    /* حدود حمراء */
}

/* تسمية النتيجة */
.result-label {
    font-size: 0.9rem;               /* حجم صغير */
    margin-bottom: 10px;             /* مسافة سفلية */
    font-weight: bold;               /* عريض */
}

/* تسمية سعر الشراء */
.result-box.buy .result-label {
    color: var(--green);             /* أخضر */
}

/* تسمية سعر البيع */
.result-box.sell .result-label {
    color: var(--red);               /* أحمر */
}

/* قيمة النتيجة */
.result-value {
    font-size: 2rem;                 /* حجم كبير */
    font-weight: bold;               /* عريض */
    display: flex;                   /* عرض مرن */
    align-items: center;             /* محاذاة عمودية */
    justify-content: center;         /* محاذاة أفقية */
    gap: 8px;                        /* مسافة بين الرقم والرمز */
}

/* قيمة سعر الشراء */
.result-box.buy .result-value {
    color: var(--green);             /* أخضر */
}

/* قيمة سعر البيع */
.result-box.sell .result-value {
    color: var(--red);               /* أحمر */
}

/* ============================================
   الفوتر (أسفل الصفحة)
   Footer Section
   ============================================ */

.footer {
    text-align: center;              /* محاذاة للوسط */
    padding: 30px 20px;              /* مسافة داخلية */
    color: var(--text-secondary-light); /* لون رمادي */
    border-top: 1px solid var(--border-light); /* حد علوي */
    margin-top: 40px;                /* مسافة علوية */
}

/* الفوتر في الوضع الليلي */
body.dark-mode .footer {
    color: var(--text-secondary-dark);
    border-top-color: var(--border-dark);
}

/* ============================================
   التجاوب مع الشاشات الصغيرة
   Responsive Design for Mobile
   ============================================ */

/* للشاشات أصغر من 768 بكسل (الجوال والتابلت الصغير) */
@media (max-width: 768px) {
    /* تصغير عنوان الموقع */
    .site-title {
        font-size: 1.8rem;
    }
    
    /* تصغير قيمة السعر */
    .price-value {
        font-size: 2rem;
    }
    
    /* جعل نتائج الحاسبة عمودية */
    .calculator-results {
        grid-template-columns: 1fr;  /* عمود واحد */
    }
    
    /* تصغير قيمة النتيجة */
    .result-value {
        font-size: 1.5rem;
    }
    
    /* تصغير زر الوضع */
    .theme-toggle {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    /* تصغير زر الإدارة */
    .admin-link {
        padding: 8px 15px;
        font-size: 12px;
    }
    
    /* تصغير الجدول */
    .change-table {
        font-size: 0.9rem;
    }
    
    /* تقليل المسافات في الجدول */
    .change-table th,
    .change-table td {
        padding: 10px 5px;
    }
}