@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

 * {
    font-family: 'Tajawal', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
           
        }


    .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }


:root {
  /* ───────────────  خلفية الموقع */
  --bg-site: #061018;  
  /* ───────────────────────────── الصفحة الرئيسية ───────────────────────────── */

  /* ─────────────── الهيدر ─────────────── */
  --bg-header: #101921 !important; /* لون خلفية الهيدر */
  --cr-header: #fff;               /* لون النصوص في الهيدر (اسم المتجر - الأقسام) */

  /* ─────────────── الرئيسية ─────────────── */
  --bg-hero: #061018;              /* لون خلفية قسم الرئيسية */
  --cr-hero-t1: #fff;              /* لون النص الرئيسي */
  --cr-hero-t2: #babcbf;           /* لون النص الثانوي */
  --bg-hero-btn1: #068df1;         /* لون خلفية زر تسجيل */
  --cr-hero-btn1: #fff;            /* لون نص زر تسجيل */
  --cr-hero-btn2: #068df1;         /* لون نص زر (تسجيل من خلال يودي) */

  /* ─────────────── المميزات ─────────────── */
  --bg-features: #061018;          /* لون خلفية قسم المميزات */
  --cr-features-t1: #fff;          /* لون النص الرئيسي */
  --cr-features-t2: #babcbf;       /* لون النص الثانوي */
  --bg-features-card: #068df1;     /* لون خلفية كل ميزة */
  --cr-features-card-t1: #fff;     /* لون النص الرئيسي للميزة */
  --cr-features-card-t2: #babcbf;  /* لون النص الثانوي للميزة */

  /* ─────────────── الباقات ─────────────── */
  --bg-packs: #061018;             /* لون خلفية قسم الباقات */
  --cr-packs-t1: #fff;             /* لون النص الرئيسي */
  --cr-packs-t2: #babcbf;          /* لون النص الثانوي */
  --bg-packs-card: #FFF8F9;        /* لون خلفية كل باقة */
  --bg-packs-card-type: #068df1;   /* لون خلفية نوع الباقة */
  --cr-packs-card-type: #fff;      /* لون نص نوع الباقة */
  --cr-packs-card-title: #068df1;  /* لون نص عنوان الباقة */
  --cr-packs-card-price: #061018;  /* لون نص سعر الباقة */
  --cr-packs-card-omlla: #061018;  /* لون نص عملة الباقة */
  --bg-packs-card-btn: #068df1;    /* لون خلفية زر الاشتراك */
  --cr-packs-card-btn: #fff;       /* لون نص زر الاشتراك */
  --cr-packs-card-features-divider: #068df1; /* لون الخط الفاصل */
  --cr-packs-card-featuresOfpack: #061018;   /* لون نص (مميزات الباقة) */
  --cr-packs-card-features-icon: #068df1;    /* لون أيقونة الميزة */
  --cr-packs-card-features-packs: #2b2b2b;   /* لون نص المميزات */

  /* ─────────────── المنتجات الرقمية ─────────────── */
  --bg-mntgat: #061018;                  /* لون خلفية قسم المنتجات */
  --cr-mntgat-t1: #fff;                  /* لون النص الرئيسي */
  --cr-mntgat-t2: #babcbf;               /* لون النص الثانوي */
  --bg-mntgat-card: #fff;                /* لون خلفية تصنيف المنتج */
  --cr-mntgat-card-title: #061018;       /* لون عنوان التصنيف */
  --cr-mntgat-card-description: #2b2b2b; /* لون وصف التصنيف */
  --cr-mntgat-card-go: #068df1;          /* لون زر (عرض المنتجات) */

  /* ─────────────── الأسئلة الشائعة ─────────────── */
  --bg-faq: #061018;            /* لون خلفية قسم الأسئلة */
  --cr-faq-t1: #fff;            /* لون النص الرئيسي */
  --cr-faq-t2: #babcbf;         /* لون النص الثانوي */
  --bg-faq-card: #181e24;       /* لون خلفية كل سؤال */
  --bg-faq-card-q: #fff;        /* لون نص السؤال */
  --bg-faq-card-a: #babcbf;     /* لون نص الجواب */

  /* ─────────────── الشروحات ─────────────── */
  --bg-tutorials: #061018;                /* لون خلفية قسم الشروحات */
  --cr-tutorials-t1: #fff;                /* لون النص الرئيسي */
  --cr-tutorials-t2: #fff;                /* لون النص الثانوي */
  --bg-tutorials-card: #fff;              /* لون خلفية كل شرح */
  --bg-tutorials-card-title: #061018;     /* لون عنوان الشرح */
  --bg-tutorials-card-description: #454545; /* لون وصف الشرح */

  /* ─────────────── الفوتر ─────────────── */
  --bg-footer: #101921;        /* لون خلفية الفوتر */
  --cr-footer-t1: #fff;        /* لون النص الرئيسي */
  --cr-footer-t2: #babcbf;     /* لون النص الثانوي */
  --bg-footer-social: #fff; /* لون خلفية أيقونة التواصل */
  --cr-footer-social: #068df1;    /* لون أيقونة التواصل */
  --cr-footer-divider: #babcbf;/* لون الخط الفاصل */
  --cr-footer-copy: #fff;      /* لون نص (جميع الحقوق) */

  /* ───────────────────────────── صفحة المنتجات الرقمية ───────────────────────────── */
  --bg-ofpage-products: #061018;        /* لون خلفية الصفحة */
  --products-enable: #fff;              /* لون نص عدد المنتجات */
  --bg-products-badge: #363d47;         /* لون خلفية الخصم */
  --cr-products-badge: #ff4162;         /* لون نص الخصم */
  --bg-products-card: #fff;             /* لون خلفيه المنتج */
  --cr-products-card-t1: #061018;       /* لون نص عنوان المنتج */
  --cr-products-card-new-price: #363d47;/* لون نص السعر الجديد */
  --cr-products-card-old-price: #ff4162;/* لون نص السعر القديم */
  --cr-products-card-in-stock: #061018; /* لون نص كمية متوفرة */
  --cr-products-card-low-stock: #ffc107;/* لون نص كمية محدودة */
  --cr-products-card-out-stock: #dc3545;/* لون نص نفذ المخزون */
  --bg-products-card-btn: #068df1;      /* لون خلفية زر عرض التفاصيل */
  --cr-products-card-btn: #fff;         /* لون نص زر عرض التفاصيل */

  /* ───────────────────────────── صفحة المنتج ───────────────────────────── */
  --bg-ofpage-product: #061018;              /* لون خلفية الصفحة */

  /* ─────────────── معومات المنتج ─────────────── */
  --bg-product-card: #fff;                   /* لون خلفية معلومات المنتج */
  --cr-product-card-t1: #061018;             /* لون نص عنوان المنتج */
  --cr-product-card-category: #363d47;       /* لون نص التصنيف */
  --cr-product-card-price-new: #363d47;      /* لون نص السعر الجديد */
  --cr-product-card-price-old: #363d47;      /* لون نص السعر القديم */
  --bg-product-card-badge: #363d47;          /* لون خلفية الخصم */
  --cr-product-card-badge: #fff;             /* لون نص الخصم */
  --bg-product-card-info-description: #dcdfe0; /* لون خلفية الوصف */
  --cr-product-card-in-stock: #061018;       /* لون نص كمية متوفرة */
  --cr-product-card-low-stock: #ffc107;      /* لون نص كمية محدودة */
  --cr-product-card-out-stock: #dc3545;      /* لون نص نفذ المخزون */
  --cr-product-card-description-t1: #061018; /* لون نص (وصف المنتج:) */
  --cr-product-card-descriptions: #061018;   /* لون نص وصف المنتج */
  --bg-product-card-btn-buy: #068df1;        /* لون خلفية زر شراء الآن */
  --cr-product-card-btn-buy: #fff;           /* لون نص زر شراء الآن */

  /* ─────────────── منتجات متشابهه ─────────────── */
  --cr-product-similar-products-t1: #fff;      /* لون نص (منتجات متشابهه) */
  --cr-product-similar-products-divider: #fff; /* لون الخط الفاصل */
  --bg-similar-products-badge: #6d1020;        /* لون خلفية الخصم */
  --cr-similar-products-badge: #ff4162;        /* لون نص الخصم */
  --bg-similar-products-card: #fff;            /* لون خلفيه المنتج */
  --cr-similar-products-card-t1: #061018;      /* لون نص عنوان المنتج */
  --cr-similar-products-card-new-price: #363d47; /* لون نص السعر الجديد */
  --cr-similar-products-card-old-price: #ff4162; /* لون نص السعر القديم */
  --cr-similar-products-card-in-stock: #061018;  /* لون نص كمية متوفرة */
  --cr-similar-products-card-low-stock: #ffc107; /* لون نص كمية محدودة */
  --cr-similar-products-card-out-stock: #dc3545; /* لون نص نفذ المخزون */
  --bg-similar-products-card-btn: #068df1;       /* لون خلفية زر عرض التفاصيل */
  --cr-similar-products-card-btn: #fff;          /* لون نص زر عرض التفاصيل */

  /* ───────────────────────────── صفحة تسجيل - تسجيل دخول ───────────────────────────── */
  --bg-pageof-lo-re: #061018;            /* لون خلفية الصفحة */
  --cr-pageof-lo-re-t1: #fff;            /* لون عنوان الصفحة */
  --cr-pageof-lo-re-alert-error: red;            /* لون ايقونه ونص اذا كان الرمز خطا  */
  
  --cr-pageof-lo-re-label: #fff;         /* لون نص العنوان فوق المدخل */
  --bg-pageof-lo-re-input-text: #fff;    /* لون خلفية المدخل */
  --cr-pageof-lo-re-input-text: #061018; /* لون نص المدخل */
  --cr-pageof-lo-re-icon: #068df1;       /* لون الايقونات */
  --bg-pageof-lo-re-btn: #068df1;        /* لون خلفيه الزر */
  --cr-pageof-lo-re-btn: #fff;           /* لون نص الزر */
  --cr-pageof-lo-re-login-p: #fff;       /* لون نص (لديك حساب/اوفق على) */
  --cr-pageof-lo-re-login-a: #babcbf;    /* لون نص (سجل الدخول/الشروط والاحكام) */

  /* ───────────────────────────── صفحة معلوماتي (حساب المستخدم) ───────────────────────────── */
  --bg-pageof-account: #061018;               /* لون خلفية الصفحة */
  --bg-pageof-account-card-account: #fff;             /* لون خلفية الكارد */
  --bg-pageof-account-card-account-icon: #068df1;     /* لون خلفية الايقونه */
  --cr-pageof-account-card-account-icon: #fff;        /* لون الايقونه */
  --cr-pageof-account-card-account-t1: #061018;       /* لون العنوان بجانب الايقونه */
  --cr-pageof-account-card-account-divider: #babcbf;  /* لون الفاصل */
  --cr-pageof-account-card-account-text: #061018;     /* لون النصوص */
  --bg-pageof-account-card-account-btn: #171d23;      /* لون زر (اضافه جهاز - استكشف) */
  --cr-pageof-account-card-account-btn: #fff;         /* لون نص الزر */
  --bg-pageof-account-card-account-logbtn: #068df1;   /* لون زر (تسجيل الخروج) */
  --cr-pageof-account-card-account-logbtn: #fff;      /* لون نص زر (تسجيل الخروج) */

  /* ─────────────── سجل المشتريات ─────────────── */
  --bg-pageof-account-purchase-history-year: #171d23;   /* خلفية السنة */
  --cr-pageof-account-purchase-history-year: #fff;      /* نص السنة */
  --bg-pageof-account-purchase-history-monuth: #171d23; /* خلفية الشهر */
  --cr-pageof-account-purchase-history-monuth: #171d23; /* نص الشهر */
  --bg-pageof-account-purchase-history-day: #171d23;    /* خلفية اليوم */
  --cr-pageof-account-purchase-history-day: #fff;       /* نص اليوم */
  --bg-pageof-account-purchase-history-day-content: #171d23; /* خلفية معلومات المنتج */
  --cr-pageof-account-purchase-history-day-content: #fff;    /* نص معلومات المنتج */

  /* ─────────────── حالة الدفع ─────────────── */
  --bg-pageof-account-purchase-history-day-content-success: #132628; /* خلفية مكتمل */
  --cr-pageof-account-purchase-history-day-content-success: #50c16f; /* نص مكتمل */
  --bg-pageof-account-purchase-history-day-content-pending: #cd6a08; /* خلفية قيد الانتظار */
  --cr-pageof-account-purchase-history-day-content-pending: #f79a16; /* نص قيد الانتظار */
  --bg-pageof-account-purchase-history-day-content-failed: #6d1020;  /* خلفية فشلت */
  --cr-pageof-account-purchase-history-day-content-failed: #ff4162;  /* نص فشلت */

  /* ─────────────── الكود ونسخ الكود ─────────────── */
  --bg-pageof-account-purchase-history-day-content-code-section: #fff;   /* خلفية قسم الكود */
  --cr-pageof-account-purchase-history-day-content-code-section: #363d47;/* نص الكود */
  --bg-pageof-account-purchase-history-day-content-code-section-btn: #068df1; /* خلفية زر نسخ */
  --cr-pageof-account-purchase-history-day-content-code-section-btn: #fff;    /* نص زر نسخ */

  /* ───────────────────────────── صفحة الشروط والخصوصيه ───────────────────────────── */
  --bg-pageof-terms-page: #061018;              /* لون خلفية الصفحة */
  --cr-pageof-terms-page-t1: #fff;              /* النص الرئيسي */
  --cr-pageof-terms-page-t2: #babcbf;           /* النص الثانوي */
  --bg-pageof-terms-page-card: #fff;            /* خلفية كل شرط */
  --bg-pageof-terms-page-card-icon: #068df1;    /* خلفية الايقونه */
  --cr-pageof-terms-page-card-icon: #fff;       /* لون الايقونه */
  --cr-pageof-terms-page-card-title: #061018;   /* لون نص الشرط */
  --cr-pageof-terms-page-card-divider: #363d47; /* لون الفاصل */
  --cr-pageof-terms-page-card-dot: #068df1;     /* لون النقطه */
  --cr-pageof-terms-page-card-dot-dec: #061018; /* نص الفقرة */

  /* ───────────────────────────── صفحة عرض التطبيقات ───────────────────────────── */
  --bg-pageof-apps: #061018;             /* لون خلفية الصفحة */
  --bg-count-apps: #fff;             /* لون خلفية عدد التطبيقات */
  --cr-count-apps: #061018;             /* لون نص عدد التطبيقات */
  --bg-pageof-apps-card: #fff;           /* لون خلفية التطبيق */
  --cr-pageof-apps-card-name: #068df1;   /* لون اسم التطبيق */
  --cr-pageof-apps-card-ver: #061018;    /* لون اصدار التطبيق */
  --cr-pageof-apps-card-dec: #000;       /* لون وصف التطبيق */
  --cr-pageof-apps-card-more: #068df1;   /* لون زر عرض المزيد */
  --cr-pageof-apps-card-date: #000;      /* لون تاريخ التطبيق */

  /* ───────────────────────────── صفحة حالة المشترك - تثبيت المتجر ───────────────────────────── */
  --bg-pageof-stutsDown: #061018;              /* خلفية الصفحة */
  --cr-pageof-stutsDown-loadingText: #fff; /* لون نص (جاري تجهيز المتجر يرجى الانتضار) */
  --bg-pageof-stutsDown-card1: #fff;           /* خلفية كارد حالة المشترك */
  --cr-pageof-stutsDown-card1-t1: #061018;     /* نص (حالة المشترك) */
  --cr-pageof-stutsDown-card1-t2: #061018;     /* نص حالة المشترك */
  --cr-pageof-stutsDown-card1-icon-ok: #068df1;/* ايقونة مفعل */
  --cr-pageof-stutsDown-card1-icon-band: #ff9800; /* ايقونة محظور */
  --cr-pageof-stutsDown-card1-icon-certNo: #f44336; /* ايقونة شهادة محضورة */
  --bg-pageof-stutsDown-card1-btnDown: #068df1; /* زر تثبيت المتجر */
  --cr-pageof-stutsDown-card1-btnDown: #fff;    /* نص زر تثبيت المتجر */
  --bg-pageof-stutsDown-card1-status-timer: #f5f7fa; /* خلفية المؤقت */
  --cr-pageof-stutsDown-card1-status-timer: #061018; /* نص المؤقت */
  --cr-pageof-stutsDown-user-section-title: #fff; /* نص (المعلومات الشخصية) */
  --bg-pageof-stutsDown-card2: #fff;           /* خلفية كارد معلومات المستخدم */
  --cr-pageof-stutsDown-card2-t1: #061018;     /* نص رئيسي للمعلومات */
  --cr-pageof-stutsDown-card2-t2: #061018;     /* نص ثانوي للمعلومات */
  --cr-pageof-stutsDown-card2-icon: #fff;      /* لون الايقونه */
  --bg-pageof-stutsDown-card2-bg1: #068df1;    /* خلفية ايقونة الاسم */
  --bg-pageof-stutsDown-card2-bg2: #068df1;    /* خلفية ايقونة التاريخ */
  --bg-pageof-stutsDown-card2-bg3: #068df1;    /* خلفية ايقونة رقم المجموعة */
  --bg-pageof-stutsDown-card2-bg4: #068df1;    /* خلفية ايقونة رقم الهاتف */
  --bg-pageof-stutsDown-card2-bg5: #068df1;    /* خلفية ايقونة معرف الجهاز */
  

  --primary: #5e35b1;
  --primary-light: #7e57c2;
  --primary-dark: #4527a0;
  --secondary: #00bcd4;
  --secondary-light: #26c6da;
  --secondary-dark: #0097a7;
  --accent: #f72585;

  --success: #4caf50;
  --warning: #ff9800;
  --error: #f44336;
  --red: #dc3545;
  --blue: #007bff;
  --indigo: #6610f2;
  --white: #ffffff;
  --out-of-stock-color: #6c757d;
  --products-enablle: red;

  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --gray: #9e9e9e;
  --gray-light: #f5f7fa;

  --text-primary: #212121;
  --text-secondary: #757575;

  --light: #f5f5f5;
  --dark: #212529;

  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
  --gradient-success: linear-gradient(135deg, var(--success) 0%, #2e7d32 100%);
  --gradient-warning: linear-gradient(135deg, var(--warning) 0%, #ff6d00 100%);
  --gradient-error: linear-gradient(135deg, var(--error) 0%, #d32f2f 100%);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
  --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --box-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.15);
--border-radius: 12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

        

  
.alert-error{
  color: var(--cr-pageof-lo-re-alert-error);

}
/* ───────────── الهيدر الرئيسي ───────────── */
header {
    background: var(--bg-header);
    backdrop-filter: blur(10px);
    color: var(--cr-header);
    padding: 15px 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* ───────────── اللوغو ───────────── */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    color: var(--cr-header);
    order: 0;
}

.logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    vertical-align: middle;
}

.brand-name {
    font-weight: 600;
}

/* ───────────── الأزرار ───────────── */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    order: 2;
}
.card-account {
background: var(--bg-pageof-account-card);
border-radius: var(--border-radius);
padding: 25px;
margin-bottom: 25px;
box-shadow: var(--shadow);
transition: var(--transition);
}

/* زر تسجيل الدخول */
.sign-in {
    padding: 8px 12px;
    border: 2px solid var(--cr-header);
    border-radius: 30px;
    background: transparent;
    color: var(--cr-header);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sign-in:hover {
    background: var(--cr-header);
    color: var(--bg-header);
    transform: translateY(-2px);
}

/* زر القائمة على الأجهزة الصغيرة */
.mobile-menu-btn {
    display: none; /* مخفي افتراضياً */
    background: none;
    border: none;
    color: var(--cr-header);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    margin-right: 5px;
}

.mobile-menu-btn iconify-icon {
    margin-top: 5px;
}

/* ───────────── القائمة الرئيسية ───────────── */
nav {
    display: flex;
    align-items: center;
    gap: 20px;
    order: 1;
}

#nav-menu {
    display: flex;
    list-style: none;
    gap: 20px;
    margin: 0;
    padding: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

#nav-menu li a {
    color: var(--cr-header);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    padding: 8px 0;
    position: relative;
    transition: var(--transition);
}

#nav-menu li a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    right: 0;
    background-color: var(--cr-header);
    transition: var(--transition);
}

#nav-menu li a:hover:after {
    width: 100%;
}

/* ───────────── Media Queries ───────────── */

/* الشاشات الكبيرة (ديسكتوب) - 1025px فما فوق */
@media (min-width: 1025px) {
    .header-container {
        justify-content: space-between;
    }

    .logo {
        order: 0;
    }

    nav {
        order: 2;
        display: flex !important;
        position: static;
        flex-direction: row;
        padding: 0;
        box-shadow: none;
    }



    #nav-menu {
       
      
        left: 0;
        right: 0;
         display: flex !important;
        position: static;
        flex-direction: row;
       padding: 0;
        box-shadow: none;
    }
  
    .header-actions {
        order: 1;
        gap: 10px;
    }

    .mobile-menu-btn {
        display: none !important;
    }

    .sign-in {
        padding: 8px 12px;
        font-size: 0.95rem;
    }
}

/* الشاشات المتوسطة والصغيرة (تابلت وموبايل) - 1024px فما دون */
@media (max-width: 1024px) {
    .header-container {
        justify-content: space-between;
        position: relative;
    }

    .logo {
        order: 0;
    }

    nav {
        order: 3;
        width: 100%;
        position: static;
    }

    #nav-menu {
        display: none;
        position: fixed;
        top: 100%;
      
        left: 0;
        right: 0;
        background: var(--bg-header);
        flex-direction: column;
        padding: 20px;
      margin: 0;
      width:100%;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        gap: 15px;
        z-index: 999;
    }

    #nav-menu.active {
        display: flex !important;
    }

    .header-actions {
        order: 1;
        gap: 8px;
    }

    .mobile-menu-btn {
        display: block !important;
        order: 2;
    }

    .sign-in {
        padding: 6px 10px;
        font-size: 0.9rem;
    }
}

/* تحسينات إضافية للموبايل الصغير */
@media (max-width: 480px) {
    header {
        padding: 12px 15px;
    }
    
    .logo {
        font-size: 1.1rem;
    }
    
    .logo img {
        width: 40px;
        height: 40px;
    }
    
    .mobile-menu-btn {
        font-size: 1.3rem;
    }
    
    .sign-in {
        padding: 5px 8px;
        font-size: 0.85rem;
    }
}

   /* شاشة التحميل */
        #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-hero);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 99999;
            transition: opacity 0.5s ease-out;
        }

        #loading-screen.hide {
            opacity: 0;
            pointer-events: none;
        }

        /* دائرة التحميل */
        .spinner {
            width: 50px;
            height: 50px;
            border: 4px solid  var(--cr-hero-t1);
            border-top: 4px solid var(--cr-hero-t2);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading-text {
          display: none;
            margin-top: 20px;
            color: #333;
            font-size: 16px;
            font-family: Arial, sans-serif;
        }

        /* إخفاء المحتوى حتى يتم تحميله */
        .section-header {
            opacity: 0;
            transition: opacity 0.3s ease-in;
        }

        .section-header.loaded {
            opacity: 1;
        }

        /* إخفاء الشبكات حتى تمتلئ بالمحتوى */
        .features-grid,
        .packs-grid,
        .categories-grid,
        .faq-container,
        .tutorials-grid {
            opacity: 0;
            transition: opacity 0.3s ease-in;
        }

        .features-grid.loaded,
        .packs-grid.loaded,
        .categories-grid.loaded,
        .faq-container.loaded,
        .tutorials-grid.loaded {
            opacity: 1;
        }
/* ───────────── الفوتر ───────────── */


footer {
    background: var(--bg-footer);
    color: var(--cr-footer-t1);
    padding: 60px 0 30px;
    position: relative;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-about h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: white;
}

.footer-about p {
    color: var(--cr-footer-t2);
    margin-bottom: 20px;
    line-height: 1.8;
}

.footer-social {
    display: flex;
    gap: 15px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
      color: var(--cr-footer-social);
    background: var(--bg-footer-social);

    text-decoration: none;
    transition: var(--transition);
}

.social-link:hover {
     background: var(--cr-footer-social);
    color: var(--bg-footer-social);
    transform: translateY(-5px);
}





:root {
 --transition: all 0.3s ease;

}



        body {
            background-color: var(--bg-site);
          
        }

    

        section {
            padding: 80px 0;
        }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-header h2 {
            font-size: 2.5rem;
    color: var(--cr-features-t1); /* لكل قسم له متغيراته */
            margin-bottom: 15px;
            font-weight: 800;
            position: relative;
            display: inline-block;
        }

        .section-header h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
        
            border-radius: 2px;
        }

        .section-header p {
            font-size: 1.2rem;
              color: var(--cr-features-t2); /* لكل قسم له متغيراته */

            max-width: 700px;
            margin: 20px auto 0;
        }

        /* أنماط الهيدر الجديدة */
      
        /* أنماط قسم البطل الجديدة */
           .hero {
            background:  var(--bg-hero);
            color: white;
            padding: 120px 0 80px;
            position: relative;
            overflow: hidden;
        }


        .hero-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 2;
            flex-direction: row-reverse; /* النص على اليمين والصورة على اليسار */
        }

        .hero-text {
            flex: 1;
            max-width: 600px;
            text-align: right; /* محاذاة النص لليمين */
            order: 2; /* النص يأتي ثانيًا (على اليمين) */
        }

        .hero-text h1 {
          color: var(--cr-hero-t1);
            font-size: 3.2rem;
            margin-bottom: 20px;
            font-weight: 900;
            line-height: 1.2;
        }

        .hero-text p {
          color: var(--cr-hero-t2);
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }

        .hero-buttons {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: flex; /* محاذاة الأزرار لليمين */
        }

        .hero-image {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            order: 1; /* الصورة تأتي أولاً (على اليسار) */
        }

        .hero-image img {
            max-width: 320px;
            filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3));
           
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 14px 32px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            cursor: pointer;
            border: none;
            font-size: 1rem;
            gap: 8px;
        }

        .btn-code {
            background-color: var(--bg-hero-btn1);
            color: var(--cr-hero-btn);
           
        }

        .btn-code:hover {
            background-color: var(--cr-hero-btn1);
          color: var(--bg-hero-btn1);
            transform: translateY(-3px);
           
        }

        .btn-install {
            background-color: var(--bg-hero);
            color: var(--cr-hero-btn2);
            border: 2px solid var(--cr-hero-btn2);
            backdrop-filter: blur(10px);
        }

        .btn-install:hover {
            background-color: var(--cr-hero-btn2);;
            color: var(--bg-hero);
            transform: translateY(-3px);
            
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        /* التعديلات للشاشات الصغيرة */
        @media (max-width: 992px) {
            .hero-content {
                flex-direction: column; /* الصورة فوق والنص تحت */
            }
            
            .hero-text {
                order: 2; /* النص يأتي ثانيًا (في الأسفل) */
                text-align: center; /* مركزة النص في الشاشات الصغيرة */
                margin-bottom: 40px;
            }
            
            .hero-buttons {
                justify-content: center; /* مركزة الأزرار في الشاشات الصغيرة */
            }
            
            .hero-image {
                order: 1; /* الصورة تأتي أولاً (في الأعلى) */
                margin-bottom: 40px;
            }
            
            .hero-text h1 {
                font-size: 2.2rem;
            }
        }

        @media (max-width: 576px) {
            .hero-text h1 {
                font-size: 1.8rem;
            }
            
            .hero-buttons {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
                text-align: center;
            }
        }
        /* أنماط قسم الميزات */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}
      #features-t1 {
          color: var(--cr-features-t1);
            font-size: 3.2rem;
            margin-bottom: 10px;
            font-weight: 400;
            line-height: 1.2;
        }

        #features-t2 {
          color: var(--cr-features-t2);
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }
#features {
  background: var(--bg-features);
}
   
.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.feature-card {
    background: var(--bg-features-card);
    width: 5rem;
    height: 5rem;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}



.feature-card iconify-icon {
    font-size: 2rem;
    color: white;
}

.feature-content h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--cr-features-card-t1);
}

.feature-content p {
    color: var(--cr-features-card-t2);
    line-height: 1.6;
}

  /* أنماط قسم الباقات المعدلة */

      #packs-t1 {
          color: var(--cr-packs-t1);
            font-size: 2.3rem;
            margin-bottom: 10px;
            font-weight: 400;
            line-height: 1.2;
        }

        #packs-t2 {
          color: var(--cr-packs-t2);
            font-size: 1.1rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }
#packs {
  background: var(--bg-packs);
}

.packs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 300px)); /* تحديد الحد الأقصى للبطاقات */
    gap: 20px;
    justify-content: center; /* يضع البطاقات في الوسط عند وجود فراغ */
}




.packs-grid::-webkit-scrollbar {
    height: 8px; /* ارتفاع شريط التمرير الأفقي */
}

.packs-grid::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;
}

.pack-card {
    flex: 0 0 auto; /* منع تغيير حجم البطاقات تلقائيًا */
    width: 100%; /* بدل 300px */
      max-width: 300px; /* يحافظ على الحد الأقصى */

   background: var(--bg-packs-card);
            border-radius: 20px;
    padding: 20px; /* تقليل padding يمين/يسار لإحساس أفضل بالتوازن */
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .pack-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }

        .pack-badge {
            position: absolute;
            top: 20px;
            left: 20px;
         background: var(--bg-packs-card-type);
    color: var(--cr-packs-card-type);
            padding: 5px 15px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
            z-index: 2;
        }

        .pack-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .pack-title {
    color: var(--cr-packs-card-title);
            font-weight: 700;
            font-size: 20px;
            margin-bottom: 12px;
            text-align: right;
        }

        .pack-price {
            font-size: 32px;
            font-weight: 800;
    color: var(--cr-packs-card-price);
            margin: 0;
            text-align: right;
        }
#pack-omlaa {
    font-size: 30px;
            font-weight: 600;
    color: var(--cr-packs-card-price);
            margin: 0;
            text-align: right;
}


      

        .pack-button {
            margin-bottom: 20px;
        }

        .pack-button .btn {
            display: block;
            width: 100%;
          background: var(--bg-packs-card-btn);
    color: var(--cr-packs-card-btn);
            font-weight: 700;
            font-size: 16px;
            padding: 12px;
            text-align: center;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .pack-button .btn:hover {
           background: var(--cr-packs-card-btn);
    color: var(--bg-packs-card-btn);
        }

        .pack-divider {
            border: none;
    border-top: 1px solid var(--cr-packs-card-features-divider);
            margin: 20px 0;
        }

        .pack-features-title {
            font-weight: 700;
            font-size: 16px;
            margin-bottom: 12px;
    color: var(--cr-packs-card-featuresOfpack);
            text-align: right;
        }

        .pack-features {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: right;
        }

        .pack-features li {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 15px;
    color: var(--cr-packs-card-features-packs);
            margin-bottom: 12px;
        }

        .pack-features li iconify-icon {
    color: var(--cr-packs-card-features-icon);
            font-weight: bold;
            margin-left: 8px;
            font-size: 18px;
        }

        /* أنماط قسم المنتجات الرقمية */
#mntgat-t1 {
    color: var(--cr-mntgat-t1);
    font-size: 2.3rem;
    margin-bottom: 10px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
}

#mntgat-t2 {
    color: var(--cr-mntgat-t2);
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
    text-align: center;
}

#mntgat {
    background: var(--bg-mntgat);
    padding: 40px 20px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
    gap: 25px;
    justify-content: center;
}

.category-card {
    background: var(--bg-mntgat-card);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
}

.category-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.category-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--bg-mntgat-card-type);
    color: var(--cr-mntgat-card-type);
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2;
}

.category-image {
    height: auto;
    overflow: hidden;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: contian;
    transition: transform 0.3s ease;
}

.category-card:hover .category-image img {
    transform: scale(1.1);
}

.category-content {
    padding: 20px;
}

.category-name {
    font-size: 1.3rem;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--cr-mntgat-card-title);
  
}

.category-description {
    color: var(--cr-mntgat-card-description);
    margin-bottom: 15px;
    line-height: 1.5;
    text-align: center;
    font-size: 0.95rem;
}

.category-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cr-mntgat-card-go);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
    gap: 5px;
}

.category-link iconify-icon {
    transition: transform 0.3s ease;
}

.category-link:hover {
    color: var(--accent-color);
}

.category-link:hover iconify-icon {
    transform: translateX(5px);
}

/* تجاوب الموبايل */
@media (max-width: 500px) {
    .categories-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .category-card {
        border-radius: 15px;
    }

   
}


        /* أنماط قسم الأسئلة الشائعة */
   
      #faq-t1 {
          color: var(--cr-faq-t1);
            font-size: 2.3rem;
            margin-bottom: 10px;
            font-weight: 400;
            line-height: 1.2;
        }

        #faq-t2 {
          color: var(--cr-faq-t2);
            font-size: 1.1rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }
#faq {
  background: var(--bg-faq);
}
.faq-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
    background: var(--bg-faq-card);
            border-radius: var(--border-radius);
            margin-bottom: 20px;
            box-shadow: var(--box-shadow);
            overflow: hidden;
            transition: var(--transition);
        }

        .faq-item:hover {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .faq-question {
            padding: 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            font-size: 1.1rem;
              color: var(--bg-faq-card-q);

        }

        .faq-question iconify-icon {
            transition: var(--transition);
        }

        .faq-answer {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: var(--transition);
               color: var(--bg-faq-card-a);

            line-height: 1.8;
        }

        .faq-item.active .faq-answer {
            padding: 0 20px 20px;
            max-height: 500px;
        }

        .faq-item.active .faq-question iconify-icon {
            transform: rotate(180deg);
        }

        /* أنماط قسم الشروحات */

     #tutorials-t1 {
          color: var(--cr-tutorials-t1);
            font-size: 2.3rem;
            margin-bottom: 10px;
            font-weight: 400;
            line-height: 1.2;
        }

        #tutorials-t2 {
          color: var(--cr-tutorials-t2);
            font-size: 1.1rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }
#tutorials {
  background: var(--bg-tutorials);
}

.tutorials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
        }

        .tutorial-card {
    background: var(--bg-tutorials-card);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--box-shadow);
            transition: var(--transition);
        }

        .tutorial-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }

        .tutorial-video {
            position: relative;
            padding-top: 56.25%; /* نسبة 16:9 */
            background: #000;
        }

        .tutorial-video iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .tutorial-content {
            padding: 20px;
        }

        .tutorial-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
    color: var(--bg-tutorials-card-title);
        }

        .tutorial-description {
    color: var(--bg-tutorials-card-description);
            line-height: 1.6;
        }

       
        /* أنماط الاستجابة للشاشات المختلفة */
        @media (max-width: 992px) {
            .hero-content {
                flex-direction: column;
                text-align: center;
            }
            
            .hero-text {
                margin-bottom: 40px;
            }
            
            .hero-buttons {
                justify-content: center;
            }
            
            .section-header h2 {
                font-size: 2rem;
            }
        }

     
        @media (max-width: 576px) {
            .hero-text h1 {
                font-size: 1.8rem;
            }
            
            .hero-buttons {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
                text-align: center;
            }
            
            .section-header h2 {
                font-size: 1.8rem;
            }
            
            .section-header p {
                font-size: 1rem;
            }
        }

        .hidden {
            display: none !important;
        }

        /* تأثيرات التمرير */
    

    #loadingText {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 16px;
      color: var(--down-page-textTjhez);
    }
    
    .truncate-description {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

 

 

            nav.active {
                display: flex;
               z-index:1242;
              
            
        }
        
      
        
    
        
        .card {
            background: var(--bg-pageof-lo-re);
            border-radius: var(--border-radius);
            transition: var(--transition);
            padding: 2rem;
            overflow: hidden;
            position: relative;
        }
        
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 5px;
        }
        
        .grid-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        
        .header-section {
            text-align: center;
            margin-bottom: 0.2rem;
            grid-column: 1 / -1;
        }
        
        .icon-container {
            width: 5rem;
            height: 5rem;
            background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.2rem;
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.2);
        }
        
    
        
        .title {
            font-size: 2rem;
            font-weight: 800;
            color: var(--cr-pageof-lo-re-t1);
            margin: 0;
            background: var(--cr-pageof-lo-re-t1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .form-section {
            grid-column: 1 / -1;
        }
        
        .form-group {
            margin-bottom: 0.5rem;
            position: relative;
        }
        
        .form-label {
            display: block;
            color: var(--cr-pageof-lo-re-label);
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .input-field {
            transition: var(--transition);
            border-radius: 10px;
            padding: 0.85rem 1rem;
            display: flex;
            align-items: center;
            background: var(--bg-pageof-lo-re-input-text);
            position: relative;
           color: var(--cr-pageof-lo-re-input-text);
        }
        
        .input-field input, 
        .input-field select {
            width: 100%;
            outline: none;
            background: transparent;
            border: none;
            font-size: 1rem;
            color: var(--cr-pageof-lo-re-input-text);
        }
        
        .input-field:focus-within {
         border-color: var(--cr-pageof-lo-re-icon);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
        }
   
        
        .input-field select {
            appearance: none;
        }
        
        /* التصميم الجديد لحقل الهاتف المدمج */
        .phone-field-container {
            display: flex;
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            transition: var(--transition);
        }
        
        .phone-field-container:focus-within {
            border-color: var(--cr-pageof-lo-re-icon);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
        }
        
        .country-select-container {
            flex: 0 0 30%; /* 30% من المساحة */
            position: relative;
            border-left: 1px solid var(--gray-300);
        }
        
        .phone-input-container {
            flex: 0 0 70%; /* 70% من المساحة */
        }
        
        .country-select-container .input-field {
            border: none;
            border-radius: 0;
            padding-right: 0.5rem;
        }
        
        .phone-input-container .input-field {
            border: none;
            border-radius: 0;
        }
        
        .phone-input-container .input-field input {
            padding-right: 0;
        }
        
        .country-select-container::after {
            content: '\25BC';
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray-500);
            pointer-events: none;
            font-size: 12px;
        }
        
        .device-info {
            background: linear-gradient(to bottom, var(--gray-100) 0%, var(--white) 100%);
            padding: 1.5rem;
            border-radius: var(--border-radius);
            border: 1px solid var(--gray-300);
            grid-column: 1 / -1;
            margin-bottom: 1rem;
            position: relative;
        }
        
        .device-info::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(to bottom, var(--primary), var(--secondary));
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
        }
        
        .device-info-title {
            font-weight: 700;
            color: var(--gray-800);
            margin-bottom: 1rem;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            grid-column: 1 / -1;
        }
        
   
        
        .form-fields {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            grid-column: 1 / -1;
        }
        
        .full-width {
            grid-column: 1 / -1;
        }
        
        .error-message {
            color: var(--red);
            font-size: 0.85rem;
            margin-top: 0.5rem;
            display: none;
            font-weight: 500;
        }
        
    
        .terms-container {
            display: flex;
            align-items: flex-start;
            padding: 1.2rem;
            border-radius: var(--border-radius);
            grid-column: 1 / -1;
            margin: 1rem 0;
            border: 1px solid rgba(0, 123, 255, 0.1);
        }
        
        .terms-checkbox {
            
            margin-left: 0.4rem;
            accent-color: red;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        
        .terms-label {
            font-size: 0.9rem;
            color: var(--cr-pageof-lo-re-login-p);
            line-height: 1.5;
        }
        
        .terms-label a {
            color: var(--cr-pageof-lo-re-login-a);
            font-weight: 600;
            text-decoration: none;
            transition: var(--transition);
        }
        
        .terms-label a:hover {
            text-decoration: underline;
            color: var(--secondary);
        }
        
        .btn-primary {
            background: var(--bg-pageof-lo-re-btn);
            transition: var(--transition);
            color: var(--cr-pageof-lo-re-btn);
            width: 100%;
            padding: 1rem 1.5rem;
            border-radius: var(--border-radius);
            font-weight: 600;
            font-size: 1.1rem;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            grid-column: 1 / -1;
            margin-top: 1rem;
            position: relative;
            overflow: hidden;
        }
        
        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-pageof-lo-re-btn);
            opacity: 0;
            transition: var(--transition);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
             
        }
        
        .btn-primary:hover::before {
            opacity: 1;
        }
        
        .btn-primary span {
            position: relative;
            z-index: 1;
        }
        
    
        
        .hidden {
            display: none;
        }
        
        .loader {
            width: 24px;
            height: 24px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-left: 0.5rem;
            position: relative;
            z-index: 1;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* تحسينات للانتقال بين الحقول */
        .input-field, .btn-primary, .card, .terms-container {
            transition: var(--transition);
        }
        
        /* تصميم متجاوب محسن */
        @media (min-width: 768px) {
            .grid-layout {
                grid-template-columns: 1fr 1fr;
            }
            
            .header-section {
                grid-column: 1 / -1;
            }
            
            .form-fields {
                grid-template-columns: 1fr 1fr;
            }
            
            .device-info {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1.5rem;
            }
        }
        
        @media (min-width: 992px) {
            .grid-layout {
                grid-template-columns: 1fr 1fr;
            }
            
            .header-section {
                grid-column: 1 / -1;
            }
            
            .form-section {
                grid-column: 1 / -1;
            }
            
            .device-info {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        @media (max-width: 480px) {
            .card {
                padding: 1.5rem;
            }
            
            .input-field {
                padding: 0.75rem;
            }
            
            .btn-primary {
                padding: 0.9rem;
            }
            
            .title {
                font-size: 1.7rem;
            }
            
            /* تكييف حقل الهاتف للشاشات الصغيرة */
            .phone-field-container {
                flex-direction: column;
            }
            
            .country-select-container {
                flex: 0 0 auto;
                border-left: none;
                border-bottom: 1px solid var(--gray-300);
            }
            
            .phone-input-container {
                flex: 0 0 auto;
            }
        }
        
        /* تحسينات للتركيز على العناصر */
        input:focus, select:focus {
            outline: none;
        }
            .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* تأثيرات للعناصر عند التمرير */
        .fade-in-login {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* تنسيق خاص لحقل كود التفعيل */
        #activationCodeField {
            transition: var(--transition);
        }
        
        /* تنسيق للأجهزة اللوحية */
        @media (min-width: 768px) and (max-width: 991px) {
            .container {
                max-width: 90%;
            }
        }
        
        .login-link {
            text-align: center;
            padding-top: 1.5rem;
            border-top: 1px solid var(--cr-pageof-lo-re-login-a);
        }
        
        .login-link p {
            color: var(--cr-pageof-lo-re-login-p);
            margin: 0;
        }
        
        .login-link a {
            color: var(--cr-pageof-lo-re-login-a);
            text-decoration: none;
            font-weight: 600;
        }
        
        .login-link a:hover {
            text-decoration: underline;
        }
        
        /* رسالة التحديد التلقائي */
        .auto-detection {
            background-color: rgba(67, 97, 238, 0.1);
            border: 1px solid rgba(67, 97, 238, 0.2);
            border-radius: 8px;
            padding: 0.75rem 1rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            font-size: 0.9rem;
        }
        
   
        
        .location-loading {
            display: flex;
            align-items: center;
        }
        
        .location-loading .loader {
            width: 16px;
            height: 16px;
            margin-left: 0.5rem;
        }
        
        .btn-secondary {
            background: var(--gray-200);
            color: var(--gray-700);
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
        }
        
        .btn-secondary:hover {
            background: var(--gray-300);
        }
        
        .btn-secondary.small {
            padding: 0.4rem 0.8rem;
            font-size: 0.85rem;
        }
   

iconify-icon {
    vertical-align: middle; /* محاذاة عمودية في المنتصف */
    font-size: 1.2em;       /* حجم مقارب للنص */
}

/* تحسين محاذاة الأيقونات في الأزرار */
.btn-primary iconify-icon,
.btn-secondary iconify-icon {
    vertical-align: middle;
    font-size: 1.1em;
    margin-left: 8px;
    margin-right: 0;
}

/* تحسين محاذاة الأيقونات في حقول الإدخال */
.input-field iconify-icon {
    vertical-align: middle;
    font-size: 1.1em;
    margin-left: 8px;
    margin-right: 0;
}

/* تحسين محاذاة الأيقونات في رسائل الخطأ */
.error-message iconify-icon {
    vertical-align: middle;
    font-size: 1em;
    margin-left: 5px;
    margin-right: 0;
}

/* تحسين محاذاة الأيقونات في رسائل التحديد التلقائي */
.auto-detection iconify-icon {
    vertical-align: middle;
    font-size: 1.1em;
    margin-left: 8px;
    margin-right: 0;
}

/* تحسين محاذاة النص في الأزرار */
.btn-primary span,
.btn-secondary span {
    vertical-align: middle;
    line-height: normal;
}

/* تحسين محاذاة النص في العناوين */
.device-info-title iconify-icon {
    vertical-align: middle;
    font-size: 1.2em;
    margin-left: 8px;
    margin-right: 0;
}

 
        /* تحسينات للرأس وتصميم العنوان */
        .page-header {
            background: var(--bg-header);
            color: var(--cr-header);
            padding: 25px 0;
            margin-bottom: 20px;
            border-radius: 0 0 var(--border-radius) var(--border-radius);
            box-shadow: var(--box-shadow);
        }
        
        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            font-size: 0.9rem;
            flex-wrap: wrap;
        }
        
        .breadcrumb a {
            color: var(--cr-header);
            text-decoration: none;
            transition: var(--transition);
        }
        
        .breadcrumb a:hover {
            color: white;
            text-decoration: underline;
        }
        
        .breadcrumb span {
            color: white;
        }
        
        .breadcrumb iconify-icon {
            font-size: 0.7rem;
        }
        
        .page-title {
            font-size: 1.8rem;
            font-weight: 800;
            margin: 0;
        }
        
        .page-subtitle {
          color: red;
            font-size: 1rem;
            opacity: 0.9;
            margin-top: 8px;
            font-weight: 300;
        }
   
        /* تحسين قسم البحث والتصفية */
        .search-filter-box {
            background: none;
        
        }
        
        .search-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            flex-wrap: wrap;
            gap: 12px;
        }
        
        .search-title {
            font-size: 1.2rem;
              color: var(--products-enable) !important;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
        }
        
    .search-results {
    color: var(--products-enable) !important;
    font-size: 0.9rem !important;
}

        
        .filter-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .filter-label {
            font-weight: 600;
            color: red;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .filter-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-btn {
            padding: 8px 14px;
            background: var(--products-enable) !important;

            border: 1px solid var(--products-enable) !important;
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--products-enable);
            flex: 1;
            min-width: 0;
            justify-content: center;
        }
        
        .filter-btn:hover {
            background: #e9ecef;
            border-color: #ced4da;
        }
        
        .filter-btn.active {
            background: var(--products-enable) !important;
            color:var(--products-enable) !important;
            border-color: var(--primary-color);
            box-shadow: 0 4px 10px rgba(67, 97, 238, 0.25);
        }
        
        .select-wrapper {
            
            position: relative;
        }
        
        .select-wrapper iconify-icon {
          
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color:var(--products-enable) !important;
            pointer-events: none;
            font-size: 0.9rem;
        }
        
        .sort-select, .category-select {
            padding: 10px 15px 10px 40px;
            border: 1px solid var(--products-enable) !important;
            border-radius: var(--border-radius-sm);
             background: var(--bg-ofpage);
            width: 100%;
            font-size: 0.9rem;
            color: var(--products-enable) !important;
            appearance: none;
            transition: var(--transition);
        }
        
        .sort-select:focus, .category-select:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
        }
        
        /* تحسين شبكة المنتجات للأجهزة الصغيرة */
.products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* الحد الأقصى 5 منتجات في السطر */
    gap: 15px;
    padding: 10px 0 40px;
}

.product-card {
    background: var(--bg-products-card);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--light-gray);
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--box-shadow-hover);
}

.product-image {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-products-card);
    position: relative;
    padding: 10px;
}

.product-image img {
    width: 100%;
  object-fit: cover;
    border-radius: 8px;
    transition: var(--transition);
}

/* تجاوب للشاشات المتوسطة والصغيرة */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 منتجات في السطر */
    }
}

@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 منتجات في السطر */
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 منتجات في السطر */
    }
}


 
        .product-card:hover .product-image img {
            transform: scale(1.05);
        }
        
        .product-badge {
            position: absolute;
            top: 10px;
            left: 10px;
           
            padding: 4px 8px;
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: bold;
            z-index: 2;
        }
        
        .product-content {
            padding: 15px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .product-name {
            font-size: 1rem;
           
            color: var(--cr-products-card-t1);
            font-weight: 700;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 2.6em;
        }
        
      .product-price-container {
    display: flex;
    flex-direction: column;
    
   
}
        
        .product-price {
            font-size: 1.1rem;
            font-weight: bold;
            color: var(--cr-products-card-new-price);
        
        }
        
        .previous-price {
            font-size: 0.9rem;
            color: var(--cr-products-card-old-price);
             
            text-decoration: line-through; /* إضافة خط على السعر السابق */
        }
        
        .product-meta {
            display: flex;
            justify-content: space-between;
            color: var(--gray-color);
            font-size: 0.8rem;
            margin-bottom: 15px;
        }
        
        .stock-info {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .in-stock {
            color: var(--cr-products-card-in-stock);
            font-weight: bold;
        }
        
        .low-stock {
            color: var(--cr-products-card-low-stock);
            font-weight: bold;
        }
        
        .out-of-stock {
            color: var(--cr-products-card-out-stock);
            font-weight: bold;
        }
        
        .product-button {
            display: block;
            width: 100%;
            padding: 10px;
            background: var(--bg-products-card-btn);
            color: var(--cr-products-card-btn);
            text-align: center;
            border-radius: var(--border-radius-sm);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            margin-top: auto;
            font-size: 0.9rem;
        }
        
        .product-button:hover {
           background: var(--cr-products-card-btn);
    color: var(--bg-product-card-btn);
        }
  

        
        .product-button:disabled {
            background: var(--cr-products-card-out-stock);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .product-button:disabled:hover {
            background: var(--cr-product-card-out-stock);
            transform: none;
        }
        
        .out-of-stock-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.55);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 10;
          margin: 10px;
            padding: 15px;
        }
       .out-of-stock-overlay:hover {

        transform: scale(1.05);
      }
        
        .out-of-stock-icon {
            font-size: 2rem;
            color: var(--out-of-stock-color);
            margin-bottom: 10px;
        }
        
        .out-of-stock-text {
            font-size: 1.1rem;
            font-weight: bold;
            color: var(--out-of-stock-color);
            text-align: center;
        }
        
        .loading {
            text-align: center;
            padding: 40px 0;
            font-size: 1rem;
            color: var(--gray-color);
        }
        
        .loading-spinner {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 15px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .error {
            text-align: center;
            padding: 40px 0;
            color: #dc3545;
            font-size: 1rem;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .pagination-btn {
            padding: 8px 12px;
            background: var(--bg-products-card-btn);
          color: var(--cr-products-card-btn);
            border: 1px solid var(--light-gray);
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 4px;
            font-weight: 500;
            font-size: 0.9rem;
            min-width: 40px;
            justify-content: center;
        }
        
        .pagination-btn:hover {
            background: #f8f9fa;
            border-color: #ced4da;
        }
        
        .pagination-btn.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .no-products {
            text-align: center;
            padding: 40px 0;
            grid-column: 1 / -1;
          color: var(--products-enable) !important;
        }
        
        .no-products iconify-icon {
            font-size: 3rem;
          color: var(--products-enable) !important;
            margin-bottom: 15px;
        }
        
        /* تحسينات للاستجابة على الأجهزة المختلفة */
        @media (min-width: 480px) {
          
        }
        
        @media (min-width: 640px) {
            .container {
                padding: 0 20px;
            }
            
            .filter-grid {
                grid-template-columns: 1fr 1fr;
                gap: 20px;
            }
            
        
        }
        
        @media (min-width: 768px) {
            .page-header {
                padding: 30px 0;
                margin-bottom: 30px;
            }
            
            .breadcrumb {
                font-size: 0.95rem;
                gap: 10px;
                margin-bottom: 15px;
            }
            
            .page-title {
                font-size: 2rem;
            }
            
            .page-subtitle {
                font-size: 1.1rem;
            }
            
            .search-filter-box {
                padding: 25px;
            }
            
            .search-header {
                margin-bottom: 20px;
                gap: 15px;
            }
            
            .search-title {
                font-size: 1.3rem;
            }
            
            .filter-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .filter-btn {
                padding: 10px 18px;
                flex: none;
            }
            
        
            
            .product-content {
                padding: 20px;
            }
            
            .product-name {
                font-size: 1.1rem;
            }
            
            .product-price {
                font-size: 1.3rem;
            }
        }
        
        @media (min-width: 1024px) {
          
        }
        
        /* تحسينات خاصة للشاشات الضيقة جداً */
        @media (max-width: 360px) {
         
            .product-content {
                padding: 12px;
            }
            
            .product-name {
                font-size: 0.9rem;
            }
            
            .product-price {
                font-size: 1.1rem;
            }
            
            .product-button {
                padding: 8px;
                font-size: 0.85rem;
            }
            
            .filter-buttons {
                flex-direction: column;
            }
            
            .filter-btn {
                width: 100%;
            }
        }
        
        /* تحسينات للوضع الأفقي على الهواتف */
        @media (max-height: 500px) and (orientation: landscape) {
            
            
            .product-name {
                font-size: 0.9rem;
                -webkit-line-clamp: 1;
                min-height: 1.8em;
            }
            
            .product-description {
                -webkit-line-clamp: 1;
            }
        }
      
      .product-badge {
color: var(--cr-products-badge);
        background: var(--bg-products-badge);
      }
      
  
   


        .product-details {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }

        @media (min-width: 992px) {
            .product-details {
                grid-template-columns: 1fr 1fr;
            }
        }

        .product-gallery {
            position: relative;
        }

        .main-image {
            width: 100%;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--box-shadow);
            margin-bottom: 15px;
            
        }

        .main-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: var(--transition);
        }

        .thumbnail-container {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 10px;
        }

        .thumbnail {
            width: 80px;
            height: 80px;
            border-radius: var(--border-radius-sm);
            overflow: hidden;
            cursor: pointer;
            border: 2px solid transparent;
            transition: var(--transition);
            flex-shrink: 0;
            background: red;
        }

        .thumbnail.active {
            border-color: var(--primary-color);
        }

        .thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-info {
            padding: 25px;
            background: var(--bg-product-card);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }

        .product-title {
            font-size: 1.8rem;
            font-weight: 800;
            margin-bottom: 10px;
            color: var(--cr-product-card-t1);
        }

        .product-category {
            color: var(--cr-product-card-category);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
.product-price-container {
    display: flex;
    flex-direction: column; /* يخلي الترتيب عمودي */
    align-items: flex-start; /* أو flex-end حسب المحاذاة اللي تبيها */
    gap: 8px;
    margin-bottom: 20px;
}

.price-row {
    display: flex;
    align-items: center;
    gap: 15px; /* مسافة بين السعر الجديد والقديم */
}

.current-price {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--cr-product-card-price-new);
}

.old-price {
    font-size: 1.2rem;
    color: var(--cr-product-card-price-old);
    text-decoration: line-through;
}

.discount-badge {
    background: var(--bg-product-card-badge);
    color: var(--cr-product-card-badge);
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: bold;
}

        .stock-info {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
            padding: 12px;
            border-radius: var(--border-radius-sm);
            background: var(--bg-product-card-info-description);
        }

        .in-stock {
            color: var(--cr-product-card-in-stock);
            font-weight: bold;
        }

        .low-stock {
            color: var(--cr-product-card-low-stock);
            font-weight: bold;
        }

        .out-of-stock {
            color: var(--cr-product-card-out-stock);
            font-weight: bold;
        }

        .product-description {
            margin-bottom: 25px;
            line-height: 1.8;
            padding: 15px;
            background: var(--bg-product-card-info-description);
            border-radius: var(--border-radius-sm);
        }

        .product-description h3 {
            margin-bottom: 10px;
            color: var(--cr-product-card-description-t1);
        }
  .product-description p {
           
            color: var(--cr-product-card-descriptions);
        }
        .action-buttons {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .buy-button, .cart-button {
            padding: 12px 25px;
            border-radius: var(--border-radius);
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            border: none;
        }

        .buy-button {
            background: var(--bg-product-card-btn-buy);
            color: var(--cr-product-card-btn-buy);
            flex: 1;
            justify-content: center;
        }

        .buy-button:hover {
            background: var(--cr-product-card-btn-buy);
            color: var(--bg-product-card-btn-buy);
            transform: translateY(-2px);
        }

        .cart-button {
            background: white;
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
        }

        .cart-button:hover {
            background: var(--light-gray);
        }

        .buy-button:disabled, .cart-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .buy-button:disabled:hover, .cart-button:disabled:hover {
            transform: none;
        }

        .product-meta {
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px solid var(--light-gray);
        }

        .meta-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid var(--light-gray);
        }

        .meta-item:last-child {
            border-bottom: none;
        }

        .meta-label {
            font-weight: 600;
            color: var(--dark-color);
        }

        .meta-value {
            color: var(--gray-color);
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--cr-product-similar-products-divider);
        }
 .similar-products h2 {
   color: var(--cr-product-similar-products-t1);
            
        }
        /* تنسيق أفقي للمنتجات المشابهة */
        .similar-products-horizontal {
            width: 100%;
            overflow-x: auto;
            padding: 10px 0 30px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }

        .similar-products-horizontal::-webkit-scrollbar {
            height: 6px;
        }

        .similar-products-horizontal::-webkit-scrollbar-thumb {
            background: var(--primary-light);
            border-radius: 10px;
        }

        .horizontal-products-container {
            display: inline-flex;
            gap: 15px;
            padding: 5px;
        }

        /* تنسيق بطاقة المنتج - نفس التصميم الأصلي */
        .product-card {
            background: var(--bg-similar-products-card);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--box-shadow);
            transition: var(--transition);
            position: relative;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--light-gray);
            width: 250px;
            flex-shrink: 0;
        }

        .product-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--box-shadow-hover);
        }

        .product-image {
            width: 100%;
            aspect-ratio: 1/1;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-similar-products-card);
            position: relative;
            padding: 10px;
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
            transition: var(--transition);
        }

        .product-card:hover .product-image img {
            transform: scale(1.05);
        }
        
        .product-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: var(--bg-similar-products-badge);
            color: var(--cr-similar-products-badge);
          
            padding: 4px 8px;
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: bold;
            z-index: 2;
        }
        
        .product-content {
            padding: 15px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .product-name {
            font-size: 1rem;
            color: var(--cr-similar-products-card-t1);
            font-weight: 700;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 2.6em;
            margin-bottom: 10px;
        }
        
        .product-price-container-card {
            display: flex;
            flex-direction: column;
            align-items: flex-end; /* محاذاة السعر لليمين */
            margin-top: -15px;
            direction: ltr;
        }
        
        .product-price {
            font-size: 1.1rem;
            font-weight: bold;
            color: var(--cr-similar-products-card-new-price);
        }
        
        .previous-price {
            font-size: 0.9rem;
            color: var(--cr-similar-products-card-old-price);
            text-decoration: line-through;
        }
        
        .product-meta-card {
            display: flex;
            justify-content: space-between;
            color: var(--gray-color);
            font-size: 0.8rem;
            margin-bottom: 15px;
        }
        
        .stock-info-card {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .in-stock {
            color: var(--cr-similar-products-card-in-stock);
            font-weight: bold;
        }
        
        .low-stock {
            color: var(--cr-similar-products-card-low-stock);
            font-weight: bold;
        }
        
        .out-of-stock {
            color: var(--cr-similar-products-card-out-stock);
            font-weight: bold;
        }
        
        .product-button {
            display: block;
            width: 100%;
            padding: 10px;
            background: var(--bg-similar-products-card-btn);
            color: var(--cr-similar-products-card-btn);
            text-align: center;
            border-radius: var(--border-radius-sm);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            margin-top: auto;
            font-size: 0.9rem;
        }
        
        .product-button:hover {
            background: var(--cr-similar-products-card-btn);
            color: var(--bg-similar-products-card-btn);
            border: 1px solid var(--bg-product-card-btn);
        }
  
        .product-button:disabled {
            background: var(--cr-similar-products-card-out-stock);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .product-button:disabled:hover {
            background: var(--cr-similar-products-card-out-stock);
            transform: none;
        }
        
        .out-of-stock-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 10;
            padding: 15px;
        }
        
        .out-of-stock-icon {
            font-size: 2rem;
            color: var(--out-of-stock-color);
            margin-bottom: 10px;
        }
        
        .out-of-stock-text {
            font-size: 1.1rem;
            font-weight: bold;
            color: var(--out-of-stock-color);
            text-align: center;
        }

        /* تلميح للتمرير الأفقي */
        .scroll-hint {
            text-align: center;
            color: var(--gray-color);
            font-size: 0.9rem;
            margin-top: -15px;
            margin-bottom: 20px;
            display: none;
        }

        @media (max-width: 768px) {
            .scroll-hint {
                display: block;
            }
            
            .product-card {
                width: 220px;
            }
            
            .product-title {
                font-size: 1.5rem;
            }
            
            .current-price {
                font-size: 1.5rem;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            .buy-button, .cart-button {
                width: 100%;
                justify-content: center;
            }
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            background: var(--success-color);
            color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow-hover);
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 10px;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }

        .notification.show {
            transform: translateX(0);
        }

iconify-icon {
  
  margin-top: -5px;      /* مسافة صغيرة يمين النص */
}


   

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .card-account {
            background: var(--bg-pageof-account-card-account);
            border-radius: var(--border-radius);
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: var(--shadow);
            transition: var(--transition);
      
        }

     

        .card-account-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--cr-pageof-account-card-account-divider);
        }

        .card-account-title {
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--cr-pageof-account-card-account-t1);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-account-header iconify-icon {
            color: var(--cr-pageof-account-card-account-icon);
            font-size: 1.3rem;
            background: var(--bg-pageof-account-card-account-icon);
            padding: 10px;
            border-radius: 12px;
        }

        .info-group {
            margin-bottom: 18px;
            position: relative;
        }

        .label {
            color: var(--cr-pageof-account-card-account-text);
            font-size: 0.9rem;
            margin-bottom: 6px;
            font-weight: 500;
        }

        .value {
            font-size: 1.1rem;
            font-weight: 600;
           color: var(--cr-pageof-account-card-account-text);
        }

        .device-item {
            background: #f8fafc;
            border-radius: 12px;
            padding: 18px;
            margin-bottom: 18px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
            border: 1px solid #e2e8f0;
            transition: var(--transition);
        }

        .device-item:hover {
            background: #f1f5f9;
            transform: translateX(5px);
        }

        .device-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .device-name {
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--cr-pageof-account-card-account-text);
        }

        .device-detail {
            color: var(--cr-pageof-account-card-account-text);
            font-size: 0.9rem;
            margin-bottom: 8px;
            word-break: break-all;
        }

        /* تنسيق جديد لسجل المشتريات */
        .purchase-history {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .year-section {
            margin-bottom: 5px;
            border: 1px solid #e2e8f0;
            border-radius: var(--border-radius);
            overflow: hidden;
            background: yellow;
        }

        .year-header {
            background:  var(--bg-pageof-account-purchase-history-year);
            color: var(--cr-pageof-account-purchase-history-year);
            padding: 15px 20px;
            font-weight: 700;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }

        .year-header iconify-icon {
            transition: var(--transition);
        }

        .year-header.collapsed iconify-icon {
            transform: rotate(180deg);
        }

        .year-content {
            max-height: 5000px;
            overflow: hidden;
            transition: max-height 0.5s ease;
        }

        .year-content.collapsed {
            max-height: 0;
        }

        .month-section {
            background: var(--bg-pageof-account-purchase-history-monuth);
          color: var(--cr-pageof-account-purchase-history-monuth);
            border-bottom: 1px solid #e2e8f0;
        }

        .month-header {
            padding: 12px 20px;
           
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: var(--transition);
        }

        
        .month-header iconify-icon {
            transition: var(--transition);
        }

        .month-header.collapsed iconify-icon {
            transform: rotate(180deg);
        }

        .month-content {
            max-height: 5000px;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }

        .month-content.collapsed {
            max-height: 0;
        }

        .day-section {
            border-bottom: 1px solid #e2e8f0;
        }

        .day-section:last-child {
            border-bottom: none;
        }

        .day-header {
            padding: 12px 20px;
            background: var(--bg-pageof-account-purchase-history-day);
            font-weight: 600;
            color: var(--cr-pageof-account-purchase-history-day);
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: var(--transition);
        }

     

        .day-header iconify-icon {
            transition: var(--transition);
        }

        .day-header.collapsed iconify-icon {
            transform: rotate(180deg);
        }

        .purchase-count {
          display: none;
            background: var(--cr-pageof-account-purchase-history-day);
            color: var(--bg-pageof-account-purchase-history-day);
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .day-content {
            max-height: 5000px;
            overflow: hidden;
            transition: max-height 0.3s ease;
            background: var(--bg-pageof-account-purchase-history-day-content);
          color: var(--cr-pageof-account-purchase-history-day-content)
        }

        .day-content.collapsed {
            max-height: 0;
        }

        .purchase-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            transition: var(--transition);
        }

        .purchase-item:last-child {
            border-bottom: none;
        }

 

        .purchase-summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .purchase-name {
            font-weight: 600;
            color: var(--cr-pageof-account-purchase-history-day-content);
            display: flex;
            align-items: center;
            gap: 8px;
        }

       

        .purchase-amount {
            font-weight: 700;
            color: var(--cr-pageof-account-purchase-history-day-content);
        }

        .purchase-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px;
            padding: 15px;
            background: none;
           color: var(--cr-pageof-account-purchase-history-day-content);
            border-radius: 10px;
            margin-top: 10px;
            
            display: none;
        }

        .purchase-details.expanded {
            display: grid;
        }

        .purchase-detail {
            display: flex;
            flex-direction: column;
        }

        .detail-label {
            font-size: 0.8rem;
            color: var(--cr-pageof-account-purchase-history-day-content);
            margin-bottom: 5px;
            font-weight: 500;
        }

        .detail-value {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--cr-pageof-account-purchase-history-day-content);
        }

        .purchase-status {
            display: inline-block;
            padding: 5px 8px;
            border-radius: 18px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-top: 5px;
            width: fit-content;
        }

        .status-completed {
            background-color: var(--bg-pageof-account-purchase-history-day-content-success);
            color: var(--cr-pageof-account-purchase-history-day-content-success);
        }

        .status-pending {
               background-color: var(--bg-pageof-account-purchase-history-day-content-pending);
            color: var(--cr-pageof-account-purchase-history-day-content-pending);
        }

        .status-failed {
            background-color: var(--bg-pageof-account-purchase-history-day-content-failed);
            color: var(--cr-pageof-account-purchase-history-day-content-failed);
        }

        .code-section {
            background: var(--bg-pageof-account-purchase-history-day-content-code-section);
            border-radius: 10px;
            padding: 12px;
            margin-top: 12px;
            border: 1px dashed var(--bg-pageof-account-purchase-history-day-content-code-section);
            grid-column: 1 / -1;
        }

        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .code-title {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--cr-pageof-account-purchase-history-day-content-code-section);
            display: flex;
            align-items: center;
            gap: 8px;
        }

       

        .code-container {
            display: flex;
            align-items: center;
            background:var(--bg-pageof-account-purchase-history-day-content-code-section);
            padding: 10px;
            border-radius: 8px;
        }

        .code-value {
            flex: 1;
      
            font-size: 0.9rem;
            padding: 6px;
            background: white;
            border-radius: 6px;
            border: none;
            font-weight: 600;
            color: var(--cr-pageof-account-purchase-history-day-content-code-section);
            direction: ltr;
            text-align: left;
        }

        .copy-btn {
            background: var(--bg-pageof-account-purchase-history-day-content-code-section-btn);
            color: var(--cr-pageof-account-purchase-history-day-content-code-section-btn);
            border: none;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            margin-right: 8px;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 600;
            font-size: 0.85rem;
        }

        .copy-btn:hover {
        
            transform: translateY(-2px);
        }

        .copy-tooltip {
            position: relative;
            display: inline-block;
        }

        .copy-tooltip .tooltiptext {
            visibility: hidden;
            width: 80px;
            background-color: #4a5568;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -40px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 0.75rem;
        }

        .copy-tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #4a5568 transparent transparent transparent;
        }

        .copy-tooltip.show .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        .btn-account {
            display: block;
            width: 100%;
            text-align: center;
            background: var(--bg-pageof-account-card-account-btn);
            color: var(--cr-pageof-account-card-account-btn);
            padding: 12px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: bold;
            margin-top: 12px;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(108, 43, 217, 0.2);
        }

        .btn-account:hover {
            opacity: 0.9;
            transform: translateY(-3px);
            box-shadow: 0 6px 14px rgba(108, 43, 217, 0.3);
        }

        .btn-secondary {
          
            background: var(--bg-pageof-account-card-account-btn);
            color: var(--cr-pageof-account-card-account-btn);
            box-shadow: 0 4px 10px rgba(219, 234, 254, 0.4);
        }

        .btn-danger {
            background: var(--bg-pageof-account-card-account-logbtn);
            color: var(--cr-pageof-account-card-account-logbtn);
            box-shadow: 0 4px 10px rgba(254, 226, 226, 0.4);
        }

        .empty-state {
            text-align: center;
            padding: 30px 20px;
            color:var(--cr-pageof-account-card-account-text);
        }

        .empty-state iconify-icon {
            font-size: 3rem;
            margin-bottom: 15px;
        color:var(--cr-pageof-account-card-account-text);
            opacity: 0.7;
        }

        .empty-state p {
            font-size: 1.1rem;
            margin-bottom: 20px;
        }

        /* تخطيط متجاوب */
        @media (min-width: 768px) {
            .card-account-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }
            
            .card-account-full {
                grid-column: span 2;
            }
        }

        @media (min-width: 1024px) {
            .card-account-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .card-account-full {
                grid-column: span 3;
            }
        }

        @media (max-width: 768px) {
            .purchase-details {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 15px;
            }
            
            .card-account {
                padding: 20px;
            }
            
            .card-account-title {
                font-size: 1.2rem;
            }
            
            .value {
                font-size: 1rem;
            }
            
            .code-container {
                flex-direction: column;
                gap: 10px;
            }
            
            .copy-btn {
                width: 100%;
                justify-content: center;
            }
            
            .purchase-summary {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .year-header, .month-header, .day-header {
                padding: 10px 15px;
            }
        }

        /* أنماط جديدة لتغيير الاسم */
        .edit-form {
            display: none;
            margin-top: 15px;
            padding: 15px;
            background: none;
            border-radius: 12px;
           
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #cbd5e0;
            border-radius: 8px;
            font-size: 1rem;
        }
        
        .form-actions {
            display: flex;
            gap: 10px;
        }
        
        .btn-sm {
            padding: 8px 15px;
            font-size: 0.9rem;
        }
        
        .btn-success {
            background: #10b981;
            color: white;
        }
        
        .btn-success:hover {
            background: #059669;
        }
        
        .edit-btn {
            background: var(--primary-light);
            color: var(--primary-color);
            border: none;
            padding: 8px 15px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 600;
            font-size: 0.9rem;
            margin-top: 10px;
            transition: var(--transition);
        }
        
        .edit-btn:hover {
            background: #e0e7ff;
        }
        
        iconify-icon {
            vertical-align: middle;
          
        }

  
        .main-title-terms-page {
            font-size: clamp(2.2rem, 5vw, 3.8rem);
            font-weight: 600;
            color: var(--cr-pageof-terms-page-t1);
            margin-bottom: 15px;
           
        }

        .subtitle-terms-page {
            font-size: 1.2rem;
            color: var(--cr-pageof-terms-page-t2);
            font-weight: 400;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .terms-page-section {
            background: var(--bg-pageof-terms-page-card);
            border-radius: 20px;
            padding: 35px;
            margin-bottom: 30px;
            box-shadow: var(--shadow);
         
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .terms-page-section::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 5px;
            height: 100%;
            background: var(--bg-pageof-terms-page-card);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

  

        .terms-page-section:hover::before {
            opacity: 1;
        }

        .section-header-terms {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            gap: 20px;
        }

        .section-icon {
            width: 60px;
            height: 60px;
            background: var(--bg-pageof-terms-page-card-icon);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
box-shadow: 0 4px 10px var(--cr-pageof-terms-page-card-icon);
        }

        .section-icon iconify-icon {
            color: var(--cr-pageof-terms-page-card-icon);
            font-size: 28px;
        }

        .section-title {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--primary-color);
            margin: 0;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--cr-pageof-terms-page-card-divider);
            width: 100%;
        }

     

        .terms-page-list {
            list-style: none;
        }

        .terms-page-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 5px;
            padding: 1px 0;
            transition: all 0.3s ease;
            border-bottom: 1px dashed #e2e8f0;
        }

        .terms-page-item:last-child {
            margin-bottom: 0;
            border-bottom: none;
        }

   
.bullet {
  width: 14px;
  height: 14px;
  background: transparent; /* 🔥 خليها شفافة */
  border: 2px solid var(--cr-pageof-terms-page-card-dot); /* إطار ملون */
  border-radius: 50%;
  margin-left: 20px;
  margin-top: 10px;
  flex-shrink: 0;
  position: relative;
}

.bullet::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--cr-pageof-terms-page-card-dot); /* النقطة الداخلية */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

        .term-page-text {
            flex: 1;
            font-size: 1.1rem;
            line-height: 1.8;
            font-weight: 400;
            color: var(--cr-pageof-terms-page-card-dec);
        }

        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            flex-direction: column;
        }

     

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

      

        .error-message {
            text-align: center;
            color: #dc2626;
            background: #fef2f2;
            padding: 40px;
            border-radius: 20px;
            border: 1px solid #fecaca;
            margin: 30px 0;
            box-shadow: var(--shadow);
        }

        .error-icon {
            font-size: 3rem;
            margin-bottom: 20px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }

            .header {
                padding: 40px 20px;
                margin-bottom: 40px;
            }

            .main-title {
                font-size: 2.4rem;
            }

            .terms-page-section {
                padding: 25px;
            }

            .section-header-terms {
                gap: 15px;
                margin-bottom: 25px;
            }

            .section-icon {
                width: 50px;
                height: 50px;
            }

            .section-icon iconify-icon {
                font-size: 24px;
            }

            .section-title {
                font-size: 1.4rem;
            }

            .terms-page-item:hover {
                padding: 18px 15px;
                margin: 10px -10px 15px -10px;
            }

            .bullet {
                width: 12px;
                height: 12px;
                margin-left: 15px;
                margin-top: 8px;
            }

            .term-page-text {
                font-size: 1.05rem;
            }
        }

        @media (max-width: 480px) {
            body {
                font-size: 16px;
            }

      
        }
        /* زر التثبيت الجديد */
        .download-btn {
            background: var(--bg-pageof-stutsDown-card1-btnDown);
            color: var(--cr-pageof-stutsDown-card1-btnDown);
            border: none;
            padding: 15px 25px;
            border-radius: var(--radius-md);
            font-family: inherit;
            font-weight: 600;
            font-size: 1.1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: var(--transition);
            margin-top: 20px;
            width: 100%;
            box-shadow: var(--shadow-md);
        }
        
   
        
        .download-btn:active {
            transform: translateY(0);
        }
        
        .download-btn iconify-icon {
            font-size: 1.5rem;
        }
       
        /* Animations */
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.9; }
        }

        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        .animate-pulse {
            animation: pulse 2s ease-in-out infinite;
        }

        /* Utilities */
        .text-center {
            text-align: center;
        }

        .mt-20 {
            margin-top: 20px;
        }

        .mb-20 {
            margin-bottom: 20px;
        }

        /* Loading */

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-secondary);
        }

        .empty-state iconify-icon {
            font-size: 3rem;
            margin-bottom: 15px;
            opacity: 0.5;
        }
        
        #loadingText {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: 30px 40px;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
            border: 1px solid rgba(0, 0, 0, 0.06);
            z-index: 9999;
        }

     #loadingText h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--cr-pageof-stutsDown-loadingText);
    margin: 0;
    white-space: nowrap;   /* يمنع النص من النزول لسطر جديد */
    display: inline-block; /* يجعل النص يتعامل كوحدة واحدة */
}

        .app {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .main {
            flex: 1;
            padding: 40px 0;
        }

        .dashboard {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
        }

        @media (min-width: 992px) {
            .dashboard {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* Status Card */
        .status-section {
            margin-bottom: 30px;
        }

        .status-card {
            background: var(--bg-pageof-stutsDown-card1);
            border-radius: var(--radius-lg);
            padding: 30px;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .status-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }

        .status-card::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 5px;
            height: 100%;
        }

        .status-card.error::after {
         background: var(--cr-pageof-stutsDown-card1-icon-certNo);
        }

        .status-card.warning::after {
            background: var(--cr-pageof-stutsDown-card1-icon-band);
        }

        .status-card.success::after {
             background: var(--cr-pageof-stutsDown-card1-icon-ok);
        }

        .status-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .status-icon {
            font-size: 2.5rem;
            margin-left: 15px;
            flex-shrink: 0;
        }

        .status-card.error .status-icon {
            color: var(--cr-pageof-stutsDown-card1-icon-certNo);
        }

        .status-card.warning .status-icon {
            color: var(--cr-pageof-stutsDown-card1-icon-band);
        }

        .status-card.success .status-icon {
            color: var(--cr-pageof-stutsDown-card1-icon-ok);
        }

        .status-title {
            font-size: 1.5rem;
          color: var(--cr-pageof-stutsDown-card1-t1);
            font-weight: normal;
            margin-bottom: 5px;
        }

        .status-description {
           color: var(--cr-pageof-stutsDown-card1-t2);
        
            font-size: 0.9rem;
        }

        .status-content {
            margin-top: auto;
        }
       .status-content p {
color: var(--cr-pageof-stutsDown-card1-t2);
      }

        .status-timer {
            background: var(--bg-pageof-stutsDown-card1-status-timer);
          color: var(--cr-pageof-stutsDown-card1-status-timer);
            padding: 15px;
            border-radius: var(--radius-md);
            margin-top: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
        }

        /* User Info */
        .user-section {
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: normal;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--cr-pageof-stutsDown-user-section-title);
        }

        .user-info {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        @media (min-width: 768px) {
            .user-info {
                grid-template-columns: 1fr 1fr;
            }
        }

        .info-card {
            background: var(--bg-pageof-stutsDown-card2);
            border-radius: var(--radius-md);
            padding: 20px;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .info-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }

        .info-icon {
         
            width: 50px;
            height: 50px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
            color: var(--cr-pageof-stutsDown-card2-icon);
        }
        .info-icon    iconify-icon {
         
            width: 50px;
            height: 50px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
            color: var(--cr-pageof-stutsDown-card2-icon);
        }

        .info-icon.name { background: var(--bg-pageof-stutsDown-card2-bg1); }
        .info-icon.date { background: var(--bg-pageof-stutsDown-card2-bg2); }
        .info-icon.group { background: var(--bg-pageof-stutsDown-card2-bg3);  }
        .info-icon.creator { background: var(--bg-pageof-stutsDown-card2-bg4);}
        .info-icon.device { background: var(--bg-pageof-stutsDown-card2-bg5); }

        .info-content {
            flex: 1;
        }

        .info-label {
            font-size: 0.8rem;
            color: var(--cr-pageof-stutsDown-card2-t1);
            margin-bottom: 5px;
        }

        .info-value {
            font-size: 1rem;
            font-weight: 500;
                      color: var(--cr-pageof-stutsDown-card2-t1);

            word-break: break-word;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-top: 5px;
        }

        .badge-warning {
            background: rgba(255, 152, 0, 0.1);
            color: var(--warning);
        }

        /* إضافة أنماط جديدة للزر والنموذج */
        .edit-button {
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: var(--radius-md);
            font-family: inherit;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition);
            margin: 20px 0;
        }
        
        .edit-button:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            padding: 30px;
            border-radius: var(--radius-lg);
            width: 90%;
            max-width: 500px;
            box-shadow: var(--shadow-lg);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .form-group input-download {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: var(--radius-sm);
            font-family: inherit;
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        
        .btn-donload {
            padding: 10px 20px;
            border-radius: var(--radius-sm);
            border: none;
            font-family: inherit;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .btn-primary-download {
            background: var(--gradient-primary);
            color: white;
        }
        
        .btn-secondary-download {
            background: #f5f5f5;
            color: #333;
        }
        
        .alert {
            padding: 15px;
            border-radius: var(--radius-sm);
            margin-bottom: 20px;
        }
        
        .alert-success {
            background: rgba(76, 175, 80, 0.1);
            color: var(--success);
            border: 1px solid rgba(76, 175, 80, 0.2);
        }
        
        .alert-error {
            background: rgba(244, 67, 54, 0.1);
            color: var(--error);
            border: 1px solid rgba(244, 67, 54, 0.2);
        }
       
        /* Animations */
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.9; }
        }

        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        .animate-pulse {
            animation: pulse 2s ease-in-out infinite;
        }

        /* Utilities */
        .text-center {
            text-align: center;
        }

        .mt-20 {
            margin-top: 20px;
        }

        .mb-20 {
            margin-bottom: 20px;
        }

        /* Loading */
     

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-secondary);
        }

        .empty-state iconify-icon {
            font-size: 3rem;
            margin-bottom: 15px;
            opacity: 0.5;
        }