/* --- 0. المتغيرات والثوابت الأساسية (مجموعة واحدة موحدة) --- */
:root {
    /* الألوان الأساسية */
    --primary-purple: #7b1fa2;
    /* البنفسجي الأساسي (للعناوين والأزرار البنفسجية) */
    --light-purple: #a872cc;
    /* بنفسجي فاتح للنصوص الثانوية والظلال */
    --primary-orange: #ff7f00;
    /* البرتقالي الأساسي (لأزرار الإجراء والـ CTA) */
    --highlight-green: #2ecc71;
    /* لون تمييز للأرقام الكبيرة */
    --text-dark: #333;
    /* لون النصوص الداكنة */
    --contrast-dark: #444;
    /* **إضافة**: لون نص ثانوي أغمق لتحسين التباين */
    --white: #ffffff;
    --navbar-bg: #1a1a1a;
    /* خلفية النافبار الداكنة والفوتر */
    --form-bg: #7b1fa2;
    /* خلفية بطاقة تسجيل الدخول */

    /* التدرجات اللونية */
    --purple-gradient: linear-gradient(135deg, #7a1ba8 0%, #4a0072 100%);
    --orange-gradient: linear-gradient(90deg, #ff9d00 0%, #ff6a00 100%);
    --bg-light-gradient: linear-gradient(180deg, #fdfaff 0%, #ffffff 100%);
    /* خلفية جسم الصفحة */

    /* الأشكال والزوايا */
    --radius-lg: 15px;
    --radius-md: 10px;
    --radius-pill: 50px;
    --radius-box: 15px;
}

/* --- 0. التنسيقات العامة والـ Reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Cairo', sans-serif;
    /* يجب التأكد من ربط هذا الخط */
    background: var(--bg-light-gradient);
    color: var(--text-dark);
    direction: rtl;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

section {
    padding: 40px 20px;
    text-align: center;
}

.section-header {
    color: var(--primary-purple);
    font-weight: 800;
    font-size: 2.2rem;
    margin-bottom: 40px;
}

/* ======================================================= */
/* --- 1. الهيدر (Header) والقائمة الجانبية (Offcanvas) --- */
/* ======================================================= */
/*
================================
1. تحديد الحركات (Keyframes) - بثبات أقوى
================================
*/

/* حركة الهبوط من الأعلى */
@keyframes flyInFromTop {

    /* بداية الحركة: غير مرئي وبعيد جدًا للأعلى */
    0% {
        opacity: 0;
        transform: translateY(-200px);
        /* زيادة المسافة من 100px إلى 200px لقوة التأثير */
    }

    /* نهاية الحركة: مرئي تمامًا وفي مكانه الطبيعي (translateY(0)) */
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* حركة الانزلاق من اليمين (مناسب لتصميم RTL) */
@keyframes slideInFromRight {

    /* بداية الحركة: غير مرئي وبعيد جدًا لليمين */
    0% {
        opacity: 0;
        transform: translateX(200px);
        /* زيادة المسافة من 100px إلى 200px لقوة التأثير */
    }

    /* نهاية الحركة: مرئي تمامًا وفي مكانه الطبيعي (translateX(0)) */
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*
================================
2. الحالات الأولية للعناصر قبل الحركة
================================
*/
/* هذا الكلاس سيتم إضافته مبدئيًا لكل عنصر مستهدف بواسطة JavaScript */
.initial-hidden {
    opacity: 0 !important;
    /* نستخدم الآن فقط الإخفاء الأولي، الحركة القوية تبدأ في keyframes */
    transition: none !important;
}


/*
================================
3. كلاسات الظهور (مجرد ما تُضاف، تبدأ الحركة)
================================
*/

/* حركة الدخول من الأعلى */
.animate-top-show {
    /* استخدام cubic-bezier قوي لـ "Impact" عند الوصول */
    animation: flyInFromTop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* حركة الدخول من اليمين */
.animate-right-show {
    /* استخدام cubic-bezier قوي لـ "Impact" عند الوصول */
    animation: slideInFromRight 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* --- 1.1. تنسيق الهيدر (Header) --- */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--white);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.main-header .logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    /* **تعديل**: لإزالة خط تحت اللوجو إذا كان رابطاً */
}

.main-header .store-name {
    color: var(--primary-purple);
    font-weight: 800;
    font-size: 1.3rem;
}

.main-header .menu-btn {
    color: var(--primary-purple);
    font-size: 1.5rem;
    cursor: pointer;
    border: none;
    background: none;
}

.main-header .profile-icon img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--primary-purple);
}

/* --- 1.2. تنسيق النافبار الجانبي (Offcanvas) --- */
.offcanvas.custom-sidebar {
    background-color: var(--navbar-bg);
    width: 80%;
    max-width: 350px;
}

.custom-offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-sidebar .offcanvas-title {
    color: white !important;
}

.custom-sidebar .btn-close.text-reset {
    filter: invert(1);
    opacity: 1;
}

.custom-nav-list .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.custom-nav-list .nav-link {
    color: white;
    padding: 15px 20px;
    text-align: right;
    transition: background-color 0.2s, color 0.2s;
}

.custom-nav-list .nav-link:hover {
    color: var(--primary-purple);
    background-color: rgba(255, 255, 255, 0.08);
    /* **تعديل**: زيادة تباين لون الخلفية عند التحويم */
}

.sidebar-footer-input {
    background: #333;
    padding: 15px;
    border-radius: var(--radius-lg);
    margin: 20px;
}

.sidebar-footer-input label {
    color: white !important;
    font-size: 0.8rem;
}

.sidebar-footer-input .form-control {
    background-color: #444;
    color: white;
    text-align: right;
}

.sidebar-footer-input .btn {
    background: #e78235 !important;
    /* لون برتقالي مختلف قليلاً في القائمة */
    color: white !important;
    transition: background-color 0.3s;
    /* **تحسين**: إضافة انتقال */
}

.sidebar-footer-input .btn:hover {
    /* **تحسين**: إضافة حالة تحويم */
    background: var(--primary-orange) !important;
}


/* ======================================================= */
/* --- 2. محتوى تسجيل الدخول (Auth Container) --- */
/* ======================================================= */
.auth-container {
    padding: 20px;
    text-align: center;
}

.main-title-header {
    color: var(--primary-purple);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 10px;
}

.main-title-sub {
    color: var(--contrast-dark);
    /* **تعديل**: استخدام المتغير الجديد لتحسين التباين (من #666 إلى #444) */
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.avatars-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #555;
    margin-top: 10px;
}

.avatars-row i {
    font-size: 1.7rem;
    color: #ccc;
    margin: 0 -5px;
    border: 2px solid white;
    border-radius: 50%;
}

/* بطاقة تسجيل الدخول */
.auth-card {
    background: var(--form-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 30px 20px;
    max-width: 450px;
    width: 100%;
    margin: 30px auto;
}

.auth-card h2 {
    color: white;
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 30px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-label {
    display: block;
    text-align: right;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
    padding-right: 5px;
}

.auth-input {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    text-align: right;
    outline: none;
}

.submit-btn.orange-bg-btn {
    background: var(--primary-orange);
    color: var(--white);
    padding: 15px;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(255, 127, 0, 0.6);
    transition: transform 0.2s, box-shadow 0.2s;
    /* **تحسين**: إضافة انتقال */
}

.submit-btn.orange-bg-btn:hover {
    /* **تحسين**: إضافة تأثير عند التحويم */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 127, 0, 0.8);
}

.form-links-login {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
    text-align: center;
}

.form-links-login a {
    color: white;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s;
    /* **تحسين**: إضافة انتقال */
}

.form-links-login a:hover {
    /* **تحسين**: إضافة تأثير عند التحويم */
    color: var(--primary-orange);
}

.form-links-login .register-link {
    font-weight: bold;
}

/* ======================================================= */
/* --- 3. شريط التواصل الاجتماعي والإحصائيات --- */
/* ======================================================= */

/* --- شريط التواصل الاجتماعي --- */
.social-bar {
    text-align: center;
    padding: 15px 0;
    color: #888;
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.social-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.2s;
}

.social-box:hover {
    transform: scale(1.1);
}

/* تنسيقات ألوان الشبكات الاجتماعية جيدة */
.tiktok {
    background-color: #000000;
}

.twitter,
.x-twitter {
    background-color: #000;
}

.telegram {
    background-color: #2AABEE;
}

.youtube {
    background-color: #FF0000;
}

.snapchat {
    background-color: #FFFC00;
}

.facebook {
    background-color: #1877F2;
}

.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* --- الإحصائيات (المربعات البنفسجية) --- */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 0 20px;
    margin-top: 20px;
}

.stat-box {
    background: var(--primary-purple);
    border-radius: var(--radius-lg);
    padding: 15px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stat-box h3 {
    font-size: 1.5rem;
    font-weight: bolder;
    margin-bottom: 5px;
    z-index: 2;
}

.stat-box .number {
    font-size: 1rem;
    font-weight: bold;
    z-index: 2;
    margin-bottom: 30px;
}

.stat-box .bg-icon {
    opacity: 0.4;
    /* **تعديل**: تقليل الشفافية قليلاً لتقليل التشتيت البصري (من 0.6 إلى 0.4) */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 100px;
    z-index: 1;
}

/* ======================================================= */
/* --- 4. ما يميزنا (Features) --- */
/* ======================================================= */
.features-section {
    padding: 30px 20px;
    text-align: center;
    background: linear-gradient(180deg, #ffffff, #f7f0ff);
}

.features-row {
    display: flex;
    /* **تعديل**: تغيير الإعدادات لتمكين التمرير الأفقي على الشاشات الصغيرة (Mobile-first) */
    justify-content: flex-start;
    /* تبدأ من اليمين (في RTL) */
    flex-wrap: nowrap;
    /* منع الالتفاف */
    overflow-x: auto;
    /* تمكين التمرير الأفقي */
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    /* لتحسين التمرير في iOS */
    gap: 15px;
    direction: rtl;
}

/* **إضافة**: إخفاء شريط التمرير على المتصفحات التي تدعمه */
.features-row::-webkit-scrollbar {
    display: none;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    /* **تعديل**: زيادة البادينغ لجعله مربعاً دائرياً أكثر وضوحاً */
    background-color: white;
    border-radius: 50%;
    /* دائري */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    min-width: 280px;
    max-width: 33.33%;
    height: 280px;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    /* **تعديل**: لتمكين التمرير وعدم الانكماش */
    aspect-ratio: 1 / 1;
    /* **تحسين**: التأكد من أنه مربع تماماً */
    transition: transform 0.3s;
    /* **تحسين**: إضافة انتقال */
}

.feature-item:hover {
    transform: translateY(-5px);
}

.feature-item.guaranteed-quality {
    min-width: 280px;
    /* **تعديل**: توحيد الحجم مع البقية لتمكين التمرير المتناسق */
    height: 280px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.feature-circle {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 32px;
}

.feature-item.instant-speed .feature-circle i {
    color: #32CD32;
}

.feature-item.guaranteed-quality .feature-circle i {
    color: #FF4500;
}

.feature-item.competitive-prices .feature-circle i {
    color: #FFD700;
}

.feature-item h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #4b0082;
    margin-bottom: 5px;
}

.feature-item p {
    font-size: 0.9rem;
    color: var(--contrast-dark);
    /* **تعديل**: استخدام المتغير الجديد لتحسين التباين */
    line-height: 1.5;
    text-align: center;
    padding: 0 10px;
    margin-top: 5px;
}

@media (max-width: 768px) {
    .features-row {
        /* **تعديل**: إبقاء flex-direction: row لتفعيل التمرير الأفقي على الجوال */
        flex-direction: row;
        gap: 30px;
        /* **تعديل**: لضمان أن تظهر العناصر كبيرة بما يكفي للتمرير */
        justify-content: flex-start;
    }

    .feature-item,
    .feature-item.guaranteed-quality {
        min-width: 85%;
        /* **تعديل**: لتمكين ظهور جزء من العنصر التالي كدليل للتمرير */
        max-width: 85%;
        flex: 0 0 85%;
        /* **تعديل**: لتحديد حجم العنصر بدقة */
        height: 280px;
        /* **تعديل**: إبقاء الارتفاع ثابتاً لـ 50% */
        border-radius: 50%;
        /* **تعديل**: التأكد من الحفاظ على الشكل الدائري */
        padding: 30px 20px;
    }
}


/* ======================================================= */
/* --- 5. خدماتنا (Services) --- */
/* ======================================================= */
.social-icons-services {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.service-carousel-container {
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    display: flex;
    justify-content: flex-start;
    padding-bottom: 30px;
    scroll-snap-type: x mandatory;
    /* **إضافة**: إخفاء شريط التمرير على المتصفحات التي تدعمه */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.service-carousel-container::-webkit-scrollbar {
    display: none;
}

.service-card {
    min-width: 80%;
    max-width: 80%;
    scroll-snap-align: center;
    height: 500px;
    background: linear-gradient(135deg, #7b1fa2, #4a148c);
    border-radius: 20px;
    padding: 30px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    box-sizing: border-box;
    transition: transform 0.3s, opacity 0.3s;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    flex: 0 0 auto;
    /* **تحسين**: لمنع الانكماش في Flexbox */
}

.service-carousel-container>.service-card:not(.active) {
    opacity: 0.7;
    transform: scale(0.95);
}

.arrow-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    color: white;
    z-index: 20;
    transition: background 0.2s;
    /* **تحسين**: إضافة انتقال */
}

.arrow-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.left-arrow {
    right: 5px;
}

.right-arrow {
    left: 5px;
}

@media (max-width: 600px) {
    .service-card {
        min-width: 95%;
        height: 450px;
        margin: 0 5px;
    }

    .arrow-nav {
        display: none;
    }
}


/* ======================================================= */
/* --- 6. النتائج (Results Before/After) --- */
/* ======================================================= */
.results-section {
    text-align: center;
    padding: 30px 20px;
}

.result-card {
    background: white;
    border-radius: var(--radius-box);
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 450px;
    margin: 0 auto;
}

.toggle-switch {
    display: inline-flex;
    background: black;
    border-radius: var(--radius-pill);
    margin-bottom: 30px;
}

.toggle-btn {
    padding: 10px 30px;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
    border: none;
    /* **إضافة**: التأكد من عدم وجود حدود افتراضية */
}

/* ======================================================= */
/* --- 6. النتائج (Results Before/After) --- */
/* ======================================================= */
.results-section {
    text-align: center;
    padding: 30px 20px;
}

.result-card {
    background: white;
    border-radius: var(--radius-box);
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 450px;
    width: 100%;
    /* **تحسين**: التأكد من أنها تتجاوب بشكل كامل داخل الحاوية */
    margin: 0 auto;
}

.toggle-switch {
    display: inline-flex;
    background: black;
    border-radius: var(--radius-pill);
    margin-bottom: 30px;
}

.toggle-btn {
    padding: 10px 30px;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
    border: none;
    /* **تعديل**: إضافة border: none لضمان عدم وجود حدود افتراضية */
}

.toggle-btn.active {
    background: var(--primary-orange);
    color: white;
}

.toggle-btn.inactive {
    color: white;
    background: transparent;
}

/* --- تنسيقات الإحصائيات الفرعية (Counter) --- */
.stats-counter-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    /* **تحسين**: لضمان نزول العناصر في حال ضاقت الشاشة (جوال) */
}

.counter-box {
    flex-basis: 30%;
    /* **تحسين**: لمنحها مرونة أكبر داخل الصف */
}

.counter-box h4 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 5px;
    color: var(--text-dark);
    /* **تحسين**: استخدام المتغير للنص الداكن */
}

.counter-box p {
    font-size: 0.9rem;
    color: var(--contrast-dark);
    /* **تعديل**: استخدام المتغير الجديد للنص الثانوي */
    margin: 0;
}

.counter-box .highlight-number {
    color: var(--highlight-green);
    font-size: 1.4rem;
}

/* --- تنسيقات تفاصيل الحساب (Account Info) --- */
.account-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    margin-bottom: 15px;
    padding-right: 15px;
}

.profile-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--white);
    /* **تحسين**: استخدام المتغير */
    box-shadow: 0 0 0 3px var(--primary-purple);
    /* **تعديل**: استخدام لون أرجواني للإطار لتحسين الرؤية */
    object-fit: cover;
    /* **تحسين**: لضمان عرض الصورة بشكل صحيح */
}

.account-details {
    /* **إضافة**: حاوية جديدة لتفاصيل الاسم والوصف */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
    /* **تعديل**: إزالة الهامش من .account-name ونقله هنا */
}

.account-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-dark);
    /* **تحسين**: استخدام المتغير */
    margin: 0;
}

.account-tag {
    /* **إضافة**: كلاس لوسم/تاريخ الحساب (إذا كان موجوداً) */
    font-size: 0.8rem;
    color: var(--light-purple);
}

.account-description {
    text-align: right;
    padding: 0 15px;
}

.account-description p {
    font-size: 0.9rem;
    color: var(--contrast-dark);
    /* **تعديل**: استخدام المتغير الجديد للنص الثانوي */
    line-height: 1.6;
    margin-bottom: 10px;
}

/* **إضافة**: تنسيق إضافي لمرونة الجوال (يُطبق داخل نتيجة البطاقة فقط) */
@media (max-width: 400px) {
    .account-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-right: 0;
    }

    .account-details {
        align-items: center;
        margin-left: 0;
        margin-top: 10px;
    }

    .account-description {
        padding: 0 5px;
    }

    .stats-counter-row {
        gap: 10px;
    }

    .counter-box {
        flex-basis: 45%;
        /* يصبح عمودين في الصف */
    }
}

/* ======================================================= */
/* --- 7. آراء العملاء (Reviews) --- */
/* ======================================================= */
.reviews-section {
    padding: 40px 20px;
    /* **تعديل**: زيادة البادينغ قليلاً ليتوافق مع باقي الأقسام */
    background: linear-gradient(180deg, #f7f0ff 0%, #ffffff 100%);
    text-align: center;
}

.section-intro-text {
    font-size: 0.95rem;
    /* **تعديل**: زيادة حجم الخط قليلاً لتحسين القراءة */
    color: var(--contrast-dark);
    /* **تعديل**: استخدام المتغير للنص الثانوي */
    margin-bottom: 25px;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.review-card {
    background: var(--white);
    /* **تحسين**: استخدام المتغير */
    border-radius: var(--radius-md);
    /* **تحسين**: استخدام المتغير (كان 15px) */
    padding: 20px;
    /* **تعديل**: زيادة البادينغ الداخلي قليلاً */
    margin: 15px auto;
    max-width: 450px;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    /* **تعديل**: زيادة قوة الظل قليلاً */
    transition: transform 0.3s;
    /* **تحسين**: إضافة انتقال */
}

.review-card:hover {
    /* **إضافة**: تأثير التحويم لتمييز البطاقة */
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.12);
}

.client-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    width: 70px;
    margin-top: 5px;
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 5px;
    border: 3px solid var(--primary-orange);
    /* **تعديل**: إطار برتقالي للتمييز */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    /* **تحسين**: لضمان عرض الصورة بشكل صحيح */
}

.user-avatar.placeholder-avatar {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-purple);
    /* **تعديل**: استخدام لون بنفسجي فاتح للأيقونة الافتراضية */
    font-size: 1.8rem;
}

.client-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--text-dark);
    /* **تعديل**: استخدام المتغير */
    margin: 0;
}

.client-date {
    margin: 0;
    font-size: 0.7rem;
    color: var(--light-purple);
    /* **تعديل**: استخدام المتغير للنصوص الأصغر */
}

.user-info {
    flex-grow: 1;
    text-align: right;
}

.review-text {
    font-size: 0.95rem;
    color: var(--contrast-dark);
    /* **تعديل**: استخدام المتغير للنص الأساسي داخل البطاقة */
    line-height: 1.5;
    margin-bottom: 8px;
    font-weight: 500;
}

.stars {
    color: #ffc107;
    /* اللون الذهبي القياسي */
    font-size: 1rem;
    margin-top: 5px;
    display: block;
    /* **تحسين**: لضمان أنه يأخذ سطرًا كاملاً للتنسيق */
}

.add-review-btn {
    background: var(--primary-purple);
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 15px 40px;
    border: none;
    border-radius: var(--radius-lg);
    /* **تعديل**: استخدام المتغير */
    cursor: pointer;
    margin-top: 25px;
    /* **تعديل**: زيادة الهامش العلوي للفصل بين المحتوى والزر */
    transition: background 0.3s, transform 0.2s;
    box-shadow: 0 4px 15px rgba(123, 31, 162, 0.4);
}

.add-review-btn:hover {
    background: #5a127a;
    transform: translateY(-2px);
    /* **إضافة**: تأثير حركة عند التحويم */
}

/* ======================================================= */
/* --- 8. طرق الدفع (Payments) --- */
/* ======================================================= */
.payment-section {
    padding: 40px 20px;
    /* **تعديل**: توحيد البادينغ */
    text-align: center;
    background: linear-gradient(180deg, #ffffff, #f7f0ff);
}

.payment-intro-text {
    font-size: 0.95rem;
    /* **تعديل**: توحيد حجم الخط */
    color: var(--contrast-dark);
    /* **تعديل**: استخدام المتغير للنص الثانوي */
    margin-bottom: 30px;
    padding: 0 10px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.payment-logos {
    display: grid;
    /* **تحسين**: تحديد حجم اللوجو 80px لزيادة وضوحه على الجوال */
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 20px 15px;
    max-width: 800px;
    /* **تعديل**: زيادة الحد الأقصى للعرض قليلاً */
    margin: 20px auto;
}

.pay-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: transform 0.2s;
    height: 35px;
}

.pay-logo:hover {
    transform: translateY(-2px);
}

.pay-logo img {
    /* **إضافة**: تنسيق صورة اللوجو الافتراضية */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pay-logo.small-logo {
    width: 80px;
    /* **تعديل**: توحيد العرض لـ 80px */
    height: 65px;
    border: 1px solid #ddd;
    border-radius: var(--radius-md);
    /* **تحسين**: استخدام المتغير */
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    padding: 5px;
    /* **تعديل**: إضافة بادينغ بسيط للتحكم في الألوان الخلفية */
}

.pay-logo.small-logo.skrill-bg {
    background-color: #88c83a;
    border-color: #88c83a;
}

.pay-logo.small-logo.trustly-bg {
    background-color: #0076a8;
    border-color: #0076a8;
}

.pay-logo.small-logo.payoneer-bg {
    background-color: black;
    border-color: black;
}

/* **تعديل**: استعلام وسائط جديد يعكس حجم الـ minmax في grid */
@media (max-width: 600px) {
    .payment-logos {
        gap: 15px 10px;
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
        /* تصغير قليلاً للجوال */
    }

    .pay-logo {
        height: 28px;
    }

    .pay-logo.small-logo {
        width: 70px;
        height: 60px;
    }
}

/* ======================================================= */
/* --- 9. الفوتر والدعوة لاتخاذ إجراء (Footer & CTA) --- */
/* ======================================================= */
.footer-cta {
    padding: 30px 20px;
    /* **تعديل**: زيادة البادينغ العلوي قليلاً */
    padding-bottom: 50px;
    /* **تعديل**: زيادة البادينغ السفلي */
    background: var(--navbar-bg);
    color: white;
    text-align: center;
}

.cta-card {
    background: var(--orange-gradient);
    border-radius: var(--radius-lg);
    /* **تعديل**: استخدام المتغير */
    padding: 25px;
    position: relative;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(255, 106, 0, 0.6);
    transition: transform 0.3s;
    /* **تحسين**: إضافة انتقال */
}

.cta-card:hover {
    transform: translateY(-5px);
    /* **إضافة**: تأثير حركة عند التحويم */
}

.cta-card h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-weight: 900;
    color: white;
}

.cta-card p {
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

.btn-start {
    background: var(--primary-purple);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: var(--radius-md);
    /* **تعديل**: توحيد نصف القطر (كان 12px) */
    font-weight: bold;
    width: 80%;
    max-width: 300px;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(123, 31, 162, 0.7);
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
    /* **تحسين**: إضافة انتقال */
}

.btn-start:hover {
    background: #5a127a;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(123, 31, 162, 0.9);
    /* **تحسين**: زيادة قوة الظل عند التحويم */
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-top: 20px;
    /* **تحسين**: إضافة بادينغ للفصل */
}

.store-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

.tools-text {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.6;
    max-width: 350px;
    margin: 0 auto;
}

.contact-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.contact-header {
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    margin: 0;
}

.footer-social-icons {
    /* **تعديل**: كلاس جديد للتحكم بتنسيقات الأيقونات في الفوتر */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* **تعديل**: تم نقل تنسيق الأيقونات إلى .footer-social-icons .social-box لجعلها دائرية وحدودية */
.footer-social-icons .social-box {
    background: transparent;
    border: 1px solid #555;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    /* **تحسين**: لضمان تمركز الأيقونة */
    align-items: center;
    justify-content: center;
    transition: background 0.3s, border-color 0.3s;
    color: white;
    /* **تحسين**: لضمان لون الأيقونة */
}

.footer-social-icons .social-box:hover {
    background: var(--primary-purple);
    border-color: var(--primary-purple);
    transform: scale(1.05);
}

.support-btn {
    background: transparent;
    border: 1px solid var(--light-purple);
    /* **تعديل**: استخدام المتغير (كان #555) */
    color: #eee;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    transition: all 0.3s;
}

.support-btn:hover {
    border-color: var(--primary-purple);
    color: white;
    background: rgba(123, 31, 162, 0.15);
    /* **تعديل**: زيادة الشفافية قليلاً */
}

.footer-copy {
    /* **إضافة**: تنسيق حقوق النشر */
    font-size: 0.8rem;
    color: #777;
    margin-top: 30px;
}

/* ===================================== */
/* 4. تنسيقات قسم المدونة (Blog Section) */
/* ===================================== */

.blog-container {
    padding: 40px 20px;
    /* **تعديل**: توحيد البادينغ مع الأقسام الأخرى */
    background-color: #f7f0ff;
    /* **تعديل**: استخدام لون أفتح ومتناسق (من التدرج البنفسجي) */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blog-cards-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 420px;
    /* لتحديد عرض البطاقات في المنتصف */
}

.blog-card {
    border-radius: var(--radius-lg);
    /* **تعديل**: استخدام المتغير (كان 20px) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
}

/* --- 4.1. البطاقة التمهيدية (العلوية) --- */

.blog-intro-card {
    padding: 0;
    box-shadow: none;
    background: none;
}

.card-image-header {
    background-size: cover;
    background-position: center;
    min-height: 180px;
    /* **تعديل**: زيادة الارتفاع قليلاً */
    padding: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    border-radius: var(--radius-lg);
    /* **تعديل**: استخدام المتغير */
    position: relative;
}

.card-image-header::before {
    /* **إضافة**: طبقة علوية (Overlay) لتحسين وضوح النص */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* تدرج من الأسفل للأعلى (أسود شفاف) */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.card-image-header p {
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: right;
    margin: 0;
    line-height: 1.5;
    z-index: 2;
    /* **تعديل**: ليكون فوق الـ Overlay */
    background-color: transparent;
    /* **تعديل**: إزالة الخلفية السوداء الشفافة المكررة */
    width: 100%;
    padding: 0;
    /* **تعديل**: إزالة البادينغ الداخلي غير الضروري */
    border-radius: 0;
}

/* --- 4.2. بطاقات المقالات (البنفسجية) --- */

.blog-article-card {
    background-color: var(--primary-purple);
    padding: 20px;
    color: white;
    /* **تحسين**: إضافة انتقال وتأثير حركة عند التحويم */
    transition: transform 0.3s;
}

.blog-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.article-image-container {
    background-color: transparent;
    width: 120px;
    height: 120px;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px auto;
}

.article-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    max-width: none;
    max-height: none;
}

.article-title {
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.article-snippet {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
    padding: 0 5px;
    color: #fefefe;
    /* **تعديل**: إبقاء اللون الأبيض الناصع تقريباً */
}

.read-more-btn {
    /* زر "اقرأ المزيد" - برتقالي */
    background-color: var(--primary-orange);
    color: white;
    font-weight: bold;
    padding: 12px 30px;
    border: none;
    border-radius: var(--radius-md);
    /* **تعديل**: استخدام المتغير (كان 10px) */
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    transition: background-color 0.3s, transform 0.2s;
    /* **تحسين**: إضافة انتقال حركة */
}

.read-more-btn:hover {
    background-color: #e57e00;
    transform: translateY(-1px);
    /* **إضافة**: تأثير حركة عند التحويم */
}

/* ===================================== */
/* 5. تنسيقات صفحة إنشاء الحساب النهائية */
/* ===================================== */

/* 1. التنسيقات العامة للحجم والتجاوب */
.register-page-container {
    padding: 0;
    /* لجعل البطاقة تغطي العرض بشكل جيد على الهاتف */
    max-width: 500px;
    margin: 0 auto;
    /* **تحسين**: تطبيق خلفية التدرج الفاتح على هذه الحاوية لتبدو كصفحة كاملة */
    background: var(--bg-light-gradient, #f7f0ff);
    min-height: 100vh;
    /* **تحسين**: لضمان أن الخلفية تغطي كامل ارتفاع الشاشة */
}

/* 2. بطاقة النموذج (الخلفية البنفسجية) */
.register-card-wrapper {
    background: var(--primary-purple, #6a1b9a);
    /* البنفسجي الغامق */
    border-radius: 0;
    box-shadow: none;
    padding: 20px 0;
    /* بادينغ عمودي للنموذج بالكامل */
    width: 100%;
    /* **تحسين**: التأكد من أنها تأخذ العرض الكامل */
    box-sizing: border-box;
    /* **تحسين**: لضمان أن البادينغ لا يزيد العرض الكلي */
}

/* 3. العناوين */
.register-header-title {
    padding: 0 20px 10px;
    margin-top: 0;
    text-align: center;
}

.register-header-title .main-title-header {
    font-size: 1.6rem;
    font-weight: 800;
    color: white;
    margin-bottom: 5px;
}

.register-header-title .main-title-sub {
    font-size: 0.9rem;
    color: #f0f0f0;
    margin: 0;
}

/* 4. النموذج والحقول */
.register-form {
    padding: 10px 20px 20px 20px;
    text-align: right;
    /* **تحسين**: استخدام فليكس للتحكم في المسافات بين الحقول بشكل موحد */
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* **إضافة**: مسافات موحدة بين الحقول */
}

/* التسميات (Labels) */
.register-form .input-label {
    display: block;
    font-weight: 600;
    color: white;
    margin-bottom: 5px;
    font-size: 1rem;
    text-align: right;
    width: 100%;
}

/* **إضافة**: تنسيق حقل الإدخال (يُفترض وجود كلاس .auth-input في HTML) */
.register-form .auth-input {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: var(--radius-md);
    /* **تعديل**: استخدام المتغير */
    font-size: 1rem;
    text-align: right;
    /* لتناسب اللغة العربية */
    outline: none;
    box-sizing: border-box;
}

/* **إضافة**: تنسيق زر الإرسال (يُفترض وجود كلاس .submit-btn في HTML) */
.register-form .submit-btn {
    background: var(--primary-orange);
    color: var(--white);
    padding: 15px;
    border: none;
    border-radius: var(--radius-md);
    /* **تعديل**: استخدام المتغير */
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(255, 127, 0, 0.6);
    transition: transform 0.2s, box-shadow 0.2s;
}

.register-form .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 127, 0, 0.8);
}

/* ======================================================= */
/* --- 5. تنسيقات حقول إدخال النموذج (Inputs) --- */
/* ======================================================= */

/* مجموعة الإدخال (العنصر الأب الذي يحتوي على الأيقونة والحقل) */
.input-group-form {
    position: relative;
    display: flex;
    align-items: center;
    /* **تحسين**: تم نقل الهامش إلى الأب (.register-form) باستخدام gap */
    width: 100%;
}

/* الأيقونة البنفسجية داخل الحقل */
.register-form .input-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-purple, #6a1b9a);
    font-size: 1.2rem;
    z-index: 2;
    cursor: default;
}

/* حقل الإدخال نفسه (الخلفية البيضاء) */
.register-form .auth-input {
    background: white;
    color: var(--primary-purple, #6a1b9a);
    padding: 12px 15px;
    /* **تعديل**: توحيد البادينغ العمودي */
    padding-right: 45px;
    /* مسافة للأيقونة */
    border: none;
    border-radius: var(--radius-md);
    /* **تعديل**: استخدام المتغير (كان 10px) */
    height: 50px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    /* **تحسين**: لضمان أن البادينغ لا يزيد العرض الكلي */
}

.register-form .auth-input::placeholder {
    color: var(--contrast-light);
    /* **تعديل**: استخدام المتغير للنص الثانوي */
    font-size: 0.95rem;
}

/* ======================================================= */
/* --- 6. تنسيق حقل الهاتف المقسم (Phone Input) --- */
/* ======================================================= */

.phone-input-row {
    /* **تحسين**: تم الاعتماد على الـ gap في .register-form للتباعد العمودي */
    width: 100%;
}

/* فصل تسمية الهاتف والرمز على سطر واحد */
.phone-label-container {
    display: flex;
    /* **تعديل**: استخدام flex-end ليتوافق مع RTL */
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.phone-code-label {
    /* **تحسين**: إزالة الهامش الكبير وتعديله ليناسب التباعد البصري */
    margin-right: 15px;
    font-size: 0.9rem;
    color: #f0f0f0;
}

.phone-input-group {
    display: flex;
    /* **تحسين**: عكس الترتيب ليتوافق مع RTL (الرمز على اليمين، الرقم على اليسار) */
    flex-direction: row-reverse;
    width: 100%;
}

.phone-field-wrapper {
    flex-grow: 1;
    position: relative;
    /* **إضافة**: لضمان أن حدود الحقل المجاور لا تظهر */
    overflow: hidden;
}

/* ======================================================= */
/* --- 5. تنسيق حقل الهاتف المقسم (Phone Input) [تكملة] --- */
/* ======================================================= */

.phone-input {
    /* **تحسين**: توحيد التنسيقات مع .auth-input */
    width: 100%;
    height: 50px;
    font-size: 1rem;
    box-sizing: border-box;
    background: white;
    color: var(--primary-purple);
    border: none;

    /* **تعديل النصف القطري**: إزالة الزوايا المجاورة للرمز */
    border-radius: var(--radius-md);
    /* استخدام المتغير */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    padding: 12px 15px;
    /* **تعديل**: توحيد البادينغ */
    padding-left: 15px;
}

.country-code-select-wrapper {
    /* مربع الرمز */
    width: 90px;
    /* **تعديل**: زيادة الحجم قليلاً للتجاوب (كان 80px) */
    flex-shrink: 0;
    height: 50px;
    z-index: 10;
    overflow: hidden;
}

.country-code-select {
    appearance: none;
    background-color: white;
    color: var(--primary-purple, #6a1b9a);
    font-weight: bold;
    font-size: 1rem;
    /* **تعديل**: تصغير الحجم قليلاً ليكون متناسقاً */
    height: 100%;
    width: 100%;
    border: none;

    /* **تعديل النصف القطري**: إزالة الزوايا المجاورة للرقم */
    border-radius: var(--radius-md);
    /* استخدام المتغير */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    /* **تحسين**: وضع السهم على اليسار (في RTL) */
    direction: ltr;
    padding: 0 5px;
    text-align: center;

    /* **تحسين لـ Select Icon**: محاكاة سهم منسدل مخصص */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%236A1B9A" d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: left 5px center;
    padding-left: 20px;
    /* مسافة للسهم */
    box-sizing: border-box;
}

/* ======================================================= */
/* --- 6. زر إنشاء الحساب والرابط السفلي --- */
/* ======================================================= */
.register-submit-btn {
    width: 100%;
    margin-top: 20px;
    height: 55px;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    /* **تعديل**: استخدام المتغير (كان 10px) */
    background-color: var(--primary-orange, #ff6b00);
    color: white;
    /* **إضافة**: لون النص الأبيض */
    border: none;
    /* **إضافة**: لإزالة الحدود الافتراضية */
    cursor: pointer;
    /* **إضافة**: لتوضيح أنه زر */
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.5);
    /* **إضافة**: ظل للتمييز */
    transition: transform 0.2s, box-shadow 0.2s;
}

.register-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.7);
}

.form-links-register-footer {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 20px;
    /* **إضافة**: هامش سفلي للفصل */
}

.form-links-register-footer .switch-link-text {
    color: white;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
}

.form-links-register-footer .switch-tab-link {
    color: var(--primary-orange, #ff6b00);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    display: inline;
    transition: color 0.2s;
    /* **إضافة**: انتقال لوني */
}

.form-links-register-footer .switch-tab-link:hover {
    color: #e57e00;
    /* لون برتقالي أغمق عند التحويم */
}


/* ======================================================= */
/* --- 7. التجاوب (Media Queries) --- */
/* ======================================================= */
@media (min-width: 576px) {
    .register-card-wrapper {
        border-radius: var(--radius-lg);
        /* **تعديل**: استخدام المتغير (كان 20px) */
        margin: 20px auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .register-page-container {
        padding: 20px;
        min-height: auto;
        /* **تعديل**: لإلغاء الـ 100vh عندما تكون البطاقة أصغر */
    }
}


/* ======================================================= */
/* --- 8. تنسيقات صفحة الخدمات (Services Page) --- */
/* ======================================================= */

.services-page-container {
    padding: 30px 20px;
    /* **تعديل**: توحيد البادينغ */
    max-width: 800px;
    /* **تعديل**: زيادة العرض قليلاً */
    margin: 0 auto;
    text-align: right;
    /* **إضافة**: ليتناسب مع الاتجاه العام */
}

.services-header {
    text-align: center;
    margin-bottom: 30px;
}

.services-header .main-title-header {
    font-size: 2rem;
    /* **تعديل**: زيادة حجم الخط */
    font-weight: 800;
    color: var(--primary-purple, #6a1b9a);
}

.platform-section {
    margin-bottom: 40px;
    /* **تعديل**: زيادة الهامش للفصل بين الأقسام */
}

.platform-title {
    font-size: 1.5rem;
    /* **تعديل**: زيادة حجم الخط */
    font-weight: 700;
    color: var(--primary-purple, #6a1b9a);
    text-align: right;
    margin-bottom: 5px;
}

.platform-sub-title {
    font-size: 1rem;
    /* **تعديل**: زيادة حجم الخط */
    color: var(--contrast-dark, #666);
    text-align: right;
    margin-bottom: 15px;
}

/* ======================================================= */
/* --- 9. تنسيقات جدول الخدمات (Services Table) --- */
/* ======================================================= */

/* 1. رأس الجدول (الخلفية الفاتحة) */
.services-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    /* **تعديل**: زيادة البادينغ قليلاً */
    background-color: #f0f0f0;
    border-radius: var(--radius-sm);
    /* **تعديل**: استخدام المتغير (كان 5px) */
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    /* **تعديل**: زيادة حجم الخط قليلاً */
    color: var(--text-dark, #333);
    /* **تعديل**: استخدام المتغير */
    text-align: right;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* **إضافة**: ظل خفيف للتمييز */
}

.services-table-header .package-col {
    width: 15%;
    text-align: right;
}

.services-table-header .desc-col {
    width: 45%;
    text-align: right;
    padding-right: 5px;
}

.services-table-header .price-col {
    width: 20%;
    text-align: center;
}

.services-table-header .btn-col {
    width: 20%;
    text-align: center;
}

/* 2. بطاقة الخدمة (الخلفية البنفسجية) */
.service-package-card {
    display: flex;
    align-items: center;
    background: var(--primary-purple, #6a1b9a);
    border-radius: var(--radius-md);
    /* **تعديل**: استخدام المتغير (كان 10px) */
    padding: 12px 10px;
    /* **تعديل**: زيادة البادينغ العمودي */
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: white;
    transition: transform 0.3s, box-shadow 0.3s;
    /* **إضافة**: انتقال للحركة */
    cursor: pointer;
}

.service-package-card:hover {
    /* **إضافة**: تأثير حركة عند التحويم */
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.package-name {
    width: 15%;
    font-weight: 700;
    flex-shrink: 0;
    text-align: right;
    font-size: 1rem;
    /* **تعديل**: زيادة حجم الخط قليلاً */
}

.package-description {
    width: 45%;
    margin: 0;
    font-size: 0.85rem;
    /* **تعديل**: زيادة حجم الخط قليلاً */
    line-height: 1.4;
    padding: 0 8px;
    /* **تعديل**: زيادة البادينغ الجانبي */
    text-align: right;
    font-weight: 500;
    color: #f0f0f0;
    /* **إضافة**: لون أبيض مائل للرمادي لتباين أفضل على البنفسجي */
}

.package-price {
    width: 20%;
    font-weight: 800;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.1rem;
    /* **تعديل**: زيادة حجم الخط للسعر */
}

.package-btn {
    width: 20%;
    display: block;
    padding: 7px 0;
    /* **تعديل**: زيادة البادينغ العمودي */
    text-align: center;
    font-size: 0.95rem;
    /* **تعديل**: زيادة حجم الخط قليلاً */
    font-weight: 600;
    border-radius: 30px;
    background-color: var(--primary-orange, #ff6b00);
    color: white;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.3s, transform 0.2s;
    /* **إضافة**: انتقال للحركة */
}

.package-btn:hover {
    /* **إضافة**: تأثير حركة عند التحويم */
    background-color: #e57e00;
    transform: scale(1.05);
}

/* **إضافة**: التجاوب الأساسي للجدول على الجوال */
@media (max-width: 600px) {

    .services-table-header,
    .service-package-card {
        padding: 10px;
        /* **تحسين**: توزيع الأعمدة بالتساوي تقريباً */
        gap: 5px;
    }

    .services-table-header .package-col,
    .package-name {
        width: 20%;
        /* زيادة عرض عمود الباكدج */
    }

    .services-table-header .desc-col,
    .package-description {
        width: 40%;
        /* تقليل عرض عمود الوصف */
        font-size: 0.75rem;
    }

    .services-table-header .price-col,
    .services-table-header .btn-col,
    .package-price,
    .package-btn {
        width: 20%;
        font-size: 0.9rem;
    }
}

/* ======================================================= */
/* --- 1. متغيرات الألوان (Palette) [التعديل والتوحيد] --- */
/* ======================================================= */
:root {
    /* **توحيد المتغيرات** - مطابقة لما تم استخدامه في الأجزاء السابقة */
    --primary-purple: #6A1B9A;
    /* البنفسجي الأساسي (غامق) */
    --light-purple: #9C27B0;
    /* البنفسجي الفاتح */
    --primary-orange: #FF6B00;
    /* البرتقالي الأساسي (كان #FF6F00) */

    --navbar-bg: #4A148C;
    /* خلفية النافبار (أغمق من الأساسي) */

    --bg-light-gradient: linear-gradient(135deg, #f7f0ff 0%, #ede7f6 100%);
    --orange-gradient: linear-gradient(45deg, #ff9800 0%, #ff5722 100%);

    --text-dark: #222222;
    --text-light: #ffffff;
    --contrast-light: #a0a0a0;

    --radius-sm: 5px;
    --radius-md: 12px;
    --radius-lg: 20px;
}

/* ======================================================= */
/* --- 2. إزالة الخط تحت اللوجو واسم المتجر (FINAL OVERRIDE) --- */
/* ======================================================= */

/* استهداف رابط الشعار مباشرة */
.logo-link,
.logo-link:hover,
.logo-link:focus {
    text-decoration: none !important;
    /* إزالة خط الرابط بقوة */
    color: inherit;
}

/* استهداف أي رابط داخل منطقة اللوجو بشكل عام */
.main-header a,
.main-header a:hover {
    text-decoration: none !important;
}

/* استهداف نص اسم المتجر داخل الرابط */
.logo-link .store-name {
    text-decoration: none !important;
}


/* ======================================================= */
/* --- 3. تنسيقات بطاقات الميزات الدائرية (.feature-item) --- */
/* ======================================================= */

.feature-item {
    /* تحويل الشكل لدائرة */
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
    /* بيخلي العرض قد الطول بالظبط عشان تبقى دايرة مش بيضاوية */

    /* توسيط الكلام جوه الدايرة */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    /* تظبيط المسافات */
    padding: 30px;
    margin: 0 auto;
    background: var(--text-light, #fff);
    /* **تعديل**: استخدام متغير اللون الأبيض */

    /* تحديد حجم أقصى */
    max-width: 350px;
    width: 100%;

    /* ضل خفيف عشان تبرز */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
    /* **إضافة**: انتقال للحركة */
}

.feature-item:hover {
    /* **إضافة**: تأثير حركة عند التحويم */
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* ======================================================= */
/* --- 4. التجاوب: تمرير أفقي لبطاقات الميزات على الجوال --- */
/* ======================================================= */

@media (max-width: 768px) {
    .features-row {
        display: flex !important;
        flex-direction: row !important;
        /* يجبرهم يجوا جنب بعض */
        flex-wrap: nowrap !important;
        /* يمنعهم ينزلوا سطر جديد نهائي */
        overflow-x: auto !important;
        /* يشغل السكرول */
        justify-content: flex-start !important;
        /* يبدأ من اليمين للشمال */
        gap: 20px !important;
        padding-bottom: 20px;
        -webkit-overflow-scrolling: touch;
    }

    .feature-item {
        /* التلاتة دول مع بعض عشان نضمن العرض ميتغيرش */
        min-width: 85% !important;
        width: 85% !important;
        flex: 0 0 85% !important;

        max-width: 85% !important;
        margin-bottom: 0 !important;
        /* يلغي أي مسافات رأسية قديمة */
    }

    /* إخفاء السكرول بار */
    .features-row::-webkit-scrollbar {
        display: none;
    }

    .features-row {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* ======================================================= */
/* --- 2. تنسيق سكشن الخدمات (Services Section) [MODERN] --- */
/* ======================================================= */
.services-section-modern {
    /* **تعديل**: استخدام المتغيرات الموحدة للخلفية والخط */
    background-color: var(--bg-light, #f5f5f5);
    /* استخدام المتغير الفاتح */
    padding: 60px 20px;
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    text-align: center;
}

.main-title {
    color: var(--primary-purple);
    /* **تعديل**: استخدام المتغير (كان --main-purple) */
    font-weight: 800;
    font-size: 32px;
    margin-bottom: 15px;
}

.main-desc {
    color: var(--contrast-dark, #666);
    /* **تعديل**: استخدام المتغير */
    font-size: 16px;
    max-width: 650px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* شريط الأيقونات العلوية */
.platform-icons-bar {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.platform-icons-bar img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s;
    cursor: pointer;
}

.platform-icons-bar img:hover {
    transform: scale(1.15);
}

/* حاوية الكاروسيل */
.carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

/* الكروت (الشرائح) */
.cards-viewport {
    width: 100%;
    max-width: 500px;
    height: 420px;
    position: relative;
    overflow: visible;
    margin: 0 20px;
}

.service-slide {
    background-color: var(--primary-purple);
    /* **تعديل**: استخدام المتغير (كان --main-purple) */
    border-radius: var(--radius-lg);
    /* **تعديل**: استخدام المتغير (كان 30px) */
    padding: 30px;
    color: var(--text-light);
    /* **تعديل**: استخدام المتغير */
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    transform: scale(0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(106, 13, 173, 0.3);
    /* ظل بنفسجي */
}

.service-slide.active-slide {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
}

/* أيقونة المنصة المتدرجة داخل الكارت */
.icon-header-gradient {
    width: 70px;
    height: 70px;
    border-radius: var(--radius-md);
    /* **تعديل**: استخدام المتغير (كان 18px) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    color: var(--text-light);
    margin-bottom: 20px;
    /* تأثير الزجاج الشفاف */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* التدرجات اللونية للأيقونات (اختياري لجمال الشكل) */
/* **تعديل**: استخدام الألوان الموحدة بدلاً من المتغيرات إذا لم تكن معرفة بـ :root */
.instagram-gradient {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.tiktok-gradient {
    background: #000;
}

.youtube-gradient {
    background: #ff0000;
}

.facebook-gradient {
    background: #1877f2;
}

/* نصوص الكارت */
.service-slide h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--text-light);
    border-bottom: 2px solid var(--primary-orange);
    /* **تعديل**: استخدام المتغير */
    padding-bottom: 8px;
    display: inline-block;
}

.service-slide p {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

/* الأسهم الجانبية */
.nav-arrow {
    background: none;
    border: none;
    color: var(--primary-orange);
    /* **تعديل**: استخدام المتغير */
    font-size: 50px;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.2s, color 0.2s;
    z-index: 10;
    outline: none;
}

.nav-arrow:hover {
    color: #e65100;
    transform: scale(1.2);
}

/* نقاط التنقل السفلية */
.carousel-indicators-custom {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.dot {
    height: 12px;
    width: 12px;
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active-dot {
    background-color: var(--primary-orange);
    /* **تعديل**: استخدام المتغير */
    width: 35px;
    /* شكل كبسولة */
    border-radius: var(--radius-md);
    /* **تعديل**: استخدام المتغير (كان 10px) */
}

/* التجاوب مع الموبايل */
@media (max-width: 600px) {
    .carousel-wrapper {
        width: 100%;
    }

    .cards-viewport {
        height: 480px;
        /* زيادة الطول للنص */
        max-width: 100%;
        margin: 0;
    }

    .nav-arrow {
        font-size: 35px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /* **تحسين**: استخدام خلفية شفافة ومظللة قليلاً */
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        /* **إضافة**: ظل خفيف للبروز */
    }

    /* **تعديل**: في سياق RTL، السهم السابق هو على اليمين واللاحق على اليسار */
    .prev-arrow {
        right: 5px;
    }

    .next-arrow {
        left: 5px;
    }
}

/* ======================================================= */
/* --- 3. تنسيقات قسم آراء العملاء (Reviews Section) --- */
/* ======================================================= */

/* تنسيق السكشن العام */
.reviews-section {
    background-color: var(--bg-light, #fcfcfc);
    /* **تعديل**: استخدام المتغير */
    padding: 60px 20px;
    text-align: center;
    direction: rtl;
}

.section-header {
    color: var(--primary-purple);
    /* **تعديل**: استخدام المتغير (كان #6A0DAD) */
    font-weight: 800;
    font-size: 28px;
    margin-bottom: 10px;
}

.section-intro-text {
    color: var(--contrast-dark, #777);
    /* **تعديل**: استخدام المتغير */
    margin-bottom: 40px;
    font-size: 1rem;
    /* **تحسين**: توحيد حجم الخط */
}

/* تنسيق الكارت (مطابق للصورة) */
.review-card {
    background: var(--text-light, #fff);
    border: 1px solid #eee;
    border-radius: var(--radius-lg);
    /* **تعديل**: استخدام المتغير (كان 20px) */
    padding: 25px;
    margin-bottom: 20px;
    display: flex;
    /* **تحسين**: عكس الترتيب (row-reverse) لوضع العميل (Client) على اليمين والمحتوى على اليسار */
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s, box-shadow 0.3s;
    max-width: 900px;
    /* **إضافة**: تحديد عرض أقصى للكارت */
    margin-left: auto;
    margin-right: auto;
}

.review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* تفاصيل العميل (على اليمين) */
.client-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    margin-left: 20px;
    /* **تعديل**: الهامش يجب أن يكون على اليسار لجهة RTL */
    margin-right: 0;
    text-align: center;
    flex-shrink: 0;
    /* **إضافة**: لمنع تصغير هذا العمود */
}

.user-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--primary-purple);
    /* **تعديل**: استخدام المتغير */
    padding: 2px;
}

.client-name {
    font-weight: 700;
    color: var(--text-dark, #333);
    /* **تعديل**: استخدام المتغير */
    font-size: 15px;
    /* **تعديل**: زيادة الحجم قليلاً */
    margin: 5px 0 2px;
}

.client-date {
    font-size: 12px;
    color: var(--contrast-light, #999);
    /* **تعديل**: استخدام المتغير */
}

/* محتوى التقييم (على اليسار) */
.review-content {
    flex: 1;
    text-align: right;
}

.review-text {
    font-size: 15px;
    color: var(--text-dark, #444);
    line-height: 1.6;
    margin-bottom: 10px;
    font-weight: 600;
}

.stars-static {
    color: #FFD700;
    font-size: 16px;
    /* **تعديل**: زيادة حجم النجوم قليلاً */
}

/* زر إضافة تقييم (البنفسجي العريض) */
.add-review-btn {
    background-color: var(--primary-purple);
    /* **تعديل**: استخدام المتغير */
    color: var(--text-light);
    width: 100%;
    max-width: 600px;
    padding: 15px;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    /* **تعديل**: استخدام وحدة متجاوبة (كان 18px) */
    font-weight: 700;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(106, 13, 173, 0.3);
    transition: background 0.3s;
    /* **إضافة**: لضمان تمركز الزر عند استخدام max-width */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.add-review-btn:hover {
    background-color: #5500b3;
}

/* ======================================================= */
/* --- 4. تنسيق النافذة المنبثقة لإضافة تقييم (Modal) [FINAL] --- */
/* ======================================================= */

.modal-overlay {
    /* **إضافة**: يتم إخفائها افتراضياً وتظهر عبر JavaScript باستخدام كلاس is-visible */
    display: flex;
    opacity: 0;
    pointer-events: none;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    direction: rtl;
    transition: opacity 0.3s ease;
}

/* كلاس يتم إضافته عبر JavaScript لإظهار النافذة */
.modal-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background: var(--text-light, #fff);
    padding: 30px;
    border-radius: var(--radius-lg);
    /* **توحيد**: استخدام المتغير (كان 20px) */
    width: 90%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    /* تأثير الحركة */
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.is-visible .modal-content {
    transform: translateY(0);
}

.modal-content h3 {
    color: var(--primary-purple);
    /* **توحيد**: استخدام المتغير (كان #6A0DAD) */
    margin-bottom: 20px;
    font-weight: 800;
}

.modal-content textarea {
    width: 100%;
    height: 120px;
    border: 1px solid var(--contrast-light, #ddd);
    /* **توحيد**: استخدام المتغير */
    border-radius: var(--radius-md);
    /* **توحيد**: استخدام المتغير (كان 15px) */
    padding: 15px;
    margin-bottom: 20px;
    font-family: 'Cairo', sans-serif;
    resize: none;
    box-sizing: border-box;
}

/* نظام النجوم في الإدخال */
.star-rating-input {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    /* الترتيب الصحيح لـ RTL */
    margin-bottom: 20px;
}

.star-rating-input input {
    display: none;
}

.star-rating-input label {
    font-size: 30px;
    color: var(--contrast-light, #ddd);
    /* **توحيد**: استخدام المتغير */
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.2s;
}

.star-rating-input input:checked~label,
.star-rating-input label:hover,
.star-rating-input label:hover~label {
    color: #FFD700;
    /* اللون الذهبي */
}

/* أزرار الإجراءات */
.modal-actions {
    display: flex;
    gap: 10px;
}

.btn-submit {
    flex: 1;
    background: var(--primary-purple);
    /* **توحيد**: استخدام المتغير */
    color: var(--text-light);
    border: none;
    padding: 12px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s, transform 0.2s;
}

.btn-submit:hover {
    background: #5500b3;
    transform: translateY(-1px);
}

.btn-cancel {
    flex: 1;
    background: var(--bg-light, #eee);
    color: var(--text-dark, #333);
    border: none;
    padding: 12px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

.btn-cancel:hover {
    background: #ccc;
}

/* ======================================================= */
/* --- نظام النجوم (Star Rating Input) --- */
/* ======================================================= */
.star-rating-input {
    display: flex;
    justify-content: center;
    /* الترتيب الصحيح لـ RTL (الخمس نجوم على اليمين) */
    flex-direction: row-reverse;
    margin-bottom: 20px;
}

.star-rating-input input {
    display: none;
    /* إخفاء حقول الراديو */
}

.star-rating-input label {
    font-size: 30px;
    color: var(--contrast-light, #ddd);
    /* **توحيد**: استخدام المتغير */
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.2s;
}

/* تأثير اللون الذهبي عند التحديد أو التحويم */
.star-rating-input input:checked~label,
.star-rating-input label:hover,
.star-rating-input label:hover~label {
    color: #FFD700;
    /* اللون الذهبي */
}

/* ======================================================= */
/* --- أزرار الإجراءات (Modal Actions) --- */
/* ======================================================= */
.modal-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    /* ضمان ملء الحاوية */
}

.btn-submit {
    flex: 1;
    background: var(--primary-purple);
    /* **توحيد**: استخدام المتغير (كان #6A0DAD) */
    color: var(--text-light, #fff);
    border: none;
    padding: 12px;
    border-radius: 50px;
    /* شكل كبسولة */
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s, transform 0.2s;
    /* **إضافة**: تأثير حركة */
}

.btn-submit:hover {
    background: #5500b3;
    /* بنفسجي أغمق عند التحويم */
    transform: translateY(-1px);
}

.btn-cancel {
    flex: 1;
    background: var(--bg-light, #eee);
    /* **توحيد**: استخدام المتغير */
    color: var(--text-dark, #333);
    border: none;
    padding: 12px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

.btn-cancel:hover {
    background: #ccc;
}