/* Add custom CSS styles below */ 

/* main{
  background-color: black;
} */

.home-page main {
    background-color: var(--cb-bg-black);
}

/* بداية اللودر */


/* حاوية اللودر الرئيسية */
#custom-loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #0F0F0F; /* الأسود المطفي */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    transition: opacity 0.5s ease;
}

/* حاوية الشعار */
.logo-container {
    position: relative;
    width: 120px; /* تحكم في حجم الشعار من هنا */
    height: 120px;
    margin-bottom: 20px;
}

.logo-base, .logo-fill {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
}

/* الطبقة التي تسبب تأثير التعبئة */
.logo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%; /* تبدأ من الصفر */
    overflow: hidden;
    transition: height 0.3s ease;
    animation: fillLogo 2s infinite ease-in-out;
}

.logo-fill {
    bottom: 0;
    top: auto;
    height: 120px; /* يجب أن يطابق حجم الـ container */
}

/* أنميشن تعبئة الحرف من الأسفل للأعلى */
@keyframes fillLogo {
    0% { height: 0%; filter: drop-shadow(0 0 0px #C5A880); }
    50% { height: 100%; filter: drop-shadow(0 0 15px #C5A880); }
    100% { height: 0%; filter: drop-shadow(0 0 0px #C5A880); }
}

/* الخط الذهبي المتحرك تحت الشعار */
.loader-line {
    width: 100px;
    height: 2px;
    background: rgba(197, 168, 128, 0.2); /* ذهبي شفاف */
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 2px;
}

.loader-line::after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #C5A880; /* اللون الذهبي */
    animation: lineMove 1.5s infinite linear;
}

@keyframes lineMove {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* نهاية اللودر */

/* استبدال هيدر سلة */
/* إخفاء هيدر سلة الأصلي تماماً */
.store-header, #mainnav, .top-navbar { display: none !important; }

:root {
  --glow-yellow: rgba(255, 215, 0, 0.7); /* أصفر ذهبي مشبع */
  --glow-yellow-hover: rgba(255, 215, 0, 0.9); /* أصفر ذهبي مشبع جداً */
  --off-white-cream: #F8F4EA;
    --primary-gold: #C5A880;
    --bg-black: #0F0F0F;
    --card-gray: #1A1A1A;
    --text-white: #FFFFFF;
}

/* الهيدر المخصص */


/* --- إضافة خاصية السكرول للقائمة الرئيسية داخل السايد بار --- */

#main-menu-view {
    display: flex;
    flex-direction: column;
    height: 100%; /* تأخذ كامل ارتفاع السايد بار */
    overflow-y: auto; /* تفعيل السكرول العمودي عند الحاجة */
    padding-bottom: 40px; /* مساحة أمان في الأسفل */
    
    /* إخفاء شريط السكرول لجمالية التصميم (اختياري) */
    scrollbar-width: none; /* لمتصفح فايرفوكس */
    -ms-overflow-style: none; /* لمتصفح إيدج */
}

#main-menu-view::-webkit-scrollbar {
    display: none; /* لمتصفحات كروم وسفاري */
}

/* التأكد من أن السايد بار نفسه ثابت ولا يهتز */
.cb-sidebar {
    max-height: 100vh;
    overflow: hidden; /* نمنع السكرول الخارجي ونتركه فقط للمحتوى الداخلي */
}


/* إخفاء الواجهات الفرعية افتراضياً */
#faq-view, #about-view { display: none; color: white; }

/* حالات التفعيل للواجهات */
.faq-view-active #main-menu-view { display: none; }
.faq-view-active #faq-view { display: block; }

.about-view-active #main-menu-view { display: none; }
.about-view-active #about-view { display: block; }

/* فاصل روابط تهمك */
.cb-menu-divider {
    padding: 20px 20px 10px;
    font-size: 0.8rem;
    color: var(--primary-gold);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* محتوى من نحن */
.cb-about-content {
    padding: 20px;
    line-height: 1.8;
    color: #ccc;
    font-size: 1rem;
    text-align: right;

  /* حل مشكلة الاختفاء في الجوال */
    max-height: 85vh; /* يحدد أقصى ارتفاع بـ 85% من طول الشاشة */
    overflow-y: auto;  /* تفعيل التمرير العمودي داخل القسم نفسه */
    -webkit-overflow-scrolling: touch; /* تمرير ناعم على الآيفون */
    
    /* لضمان عدم وجود تداخلات */
    display: block !important;
    position: relative;
    box-sizing: border-box;

  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.cb-about-content::-webkit-scrollbar {
    display: none;
}

/* اسم الكوتش - فخم وبارز */
.brand-name {
    color: #C5A880; /* الذهبي */
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 5px;
    letter-spacing: -1px; /* شد خفيف */
}

/* التخصص - رمادي باهت يعطي عمق */
.specialty-tag {
    color: #888888;
    font-size: 1.1rem;
    margin-top: 20px;
    margin-bottom: 35px;
    border-right: 3px solid #C5A880; /* خط ذهبي جانبي */
    padding-right: 15px;
    font-weight: 500;
}

/* جسم النص - مشدود ومنسق من الطرفين */
.content-body p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
    
    /* شد النص من اليمين واليسار بالتساوي */
    text-align: justify;
    text-justify: inter-word;
    
    /* تقليل المسافات بين الحروف لزيادة التناسق */
    letter-spacing: -0.2px;
}

/* تمييز الفئة المستهدفة */
.target-audience {
    background: #1A1A1A; /* الرمادي الداكن للكروت */
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(197, 168, 128, 0.2); /* إطار ذهبي شفاف جداً */
    margin-top: 30px !important;
}

/* تمييز الأرقام بالذهبي */
.highlight {
    color: #C5A880;
    font-weight: bold;
    font-size: 1.2rem;
}

/* تأثير عند المرور (Hover) لإعطاء روح رياضية */
.cb-about-content p:hover {
    color: #FFFFFF;
    transition: 0.3s ease;
}


/* روابط السياسات الصغيرة */
.small-link {
    font-size: 0.85rem !important;
    padding: 15px 20px !important;
    justify-content: flex-start !important;
    gap: 10px;
}


.cb-custom-header {
    background-color: var(--bg-black);
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 199;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    direction: rtl;
}

/* الشعار في المنتصف دائماً */
.cb-logo-main {
    position: absolute;
    left: 50%;
    top: 50%; /* يضع بداية العنصر في منتصف الارتفاع */
    transform: translate(-50%, -50%); /* يزيح العنصر لنصف طوله وعرضه للخلف ليتوسط تماماً */
    
    white-space: nowrap;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text-white);
}

.cb-logo-main:hover {
    color: var(--primary-gold); /* أو اجعل الشفافية تقل قليلاً */
    opacity: 0.8;
}

/* حاوية الأيقونات (المستخدم والسلة) على اليمين */
.cb-right-tools {
    display: none;
    align-items: center;
    gap: 10px;
    order: 1; /* يضمن بقاءها يميناً في الرتل */
}

/* تعديل أيقونات سلة لتناسب التصميم الأسود */
.cb-right-tools salla-cart-summary, 
.cb-right-tools .header-btn {
    color: var(--text-white) !important;
    --tw-text-opacity: 1 !important;
}

.cb-right-tools svg, .cb-right-tools i {
    fill: var(--text-white) !important;
    color: var(--text-white) !important;
    width: 24px;
    height: 24px;
}

.s-cart-summary-count {
    background-color: var(--primary-gold) !important;
    color: #000 !important;
}

/* الهامبرغر على اليسار في الجوال */
.cb-menu-trigger {
    background: none;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: white;
    padding: 5px;
    cursor: pointer;
    order: 3;
}

/* --- السايد بار (الهامبرغر) --- */
.cb-sidebar {
    position: fixed; top: 0; right: -100%; width: 100%; height: 100%;
    background-color: var(--bg-black); z-index: 199;
    transition: 0.4s ease-in-out; padding: 25px;
    direction: rtl;
}
.cb-sidebar.active { right: 0; }

.cb-sidebar-header { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 40px; color: white;
}

.cb-sidebar-logo {
    display: flex;
    align-items: center;
    /* يمكنك التحكم في مكان اللوجو (يمين أو يسار) من هنا */
}

.cb-sidebar-logo img {
    height: 40px;      /* هذا الارتفاع مناسب جداً للهيدر */
    width: auto;       /* يحافظ على تناسب العرض مع الارتفاع */
    object-fit: contain;
    /* إذا أردت إضافة لمسة جمالية عند التحميل */
    transition: transform 0.3s ease;
}

/* تأثير اختياري عند تمرير الماوس */
.cb-sidebar-logo img:hover {
    transform: scale(1.05);
}

.cb-close-btn { background: none; border: none; color: white; font-size: 1.8rem; }

/* أزرار القائمة */
.cb-menu-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px; margin-bottom: 15px; 
    background: var(--card-gray); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 15px; color: white; cursor: pointer;
    font-weight: 700; text-decoration: none;
}

.icon-box { 
    width: 40px; height: 40px; background: rgba(197, 168, 128, 0.1); 
    border-radius: 10px; display: flex; align-items: center; 
    justify-content: center; border: 1px solid var(--primary-gold);
}

/* قسم الأسئلة داخل السايد بار */
#faq-view { display: none; color: white; }
.faq-view-active #main-menu-view { display: none; }
.faq-view-active #faq-view { display: block; }

/* تنسيق الأسئلة في الجوال */
.faq-item-mob {
    background: var(--card-gray); padding: 20px; border-radius: 15px;
    margin-bottom: 15px; border-right: 4px solid var(--primary-gold);
}

@media (min-width: 992px) {
  .cb-sidebar.active{
    width: 380px;
    right: 0px;
  }
    /* .cb-menu-trigger { display: none; } */
}




/* تنسيق حاوية الأسئلة الشائعة للويب */

/* الحاوية الرئيسية - مخفية افتراضياً وتظهر فقط في الشاشات الكبيرة */
#desktop-faq-container {
    display: none; /* إخفاء القسم في الموبايل */
    width: 100%;
    max-width: 100%;
    padding: 100px 5%;
    direction: rtl;
    background-color: #0F0F0F;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* إظهار القسم فقط في الشاشات الأكبر من 992 بكسل (الويب) */
@media (min-width: 992px) {
    #desktop-faq-container {
        display: block;
    }
}

/* عنوان القسم */
#desktop-faq-container h2 {
    text-align: center;
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 70px;
    color: #FFFFFF;
    letter-spacing: -1px;
}

/* توزيع الأسئلة في عمودين متساويين للويب */
#faq-desktop-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    width: 100%;
}

/* تنسيق الكرت (السؤال) */
.acc-item {
    background: #1A1A1A;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: fit-content;
}

/* تأثير عند تمرير الماوس */
.acc-item:hover {
    border-color: #C5A880;
    transform: translateY(-5px);
    background: #222;
}

/* رأس السؤال */
.acc-header {
    padding: 30px;
    font-weight: 800;
    font-size: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFFFFF;
}

/* علامة الزائد الذهبية */
.acc-header span {
    color: #C5A880;
    font-size: 1.8rem;
    font-weight: 300;
    transition: transform 0.5s ease;
}

/* منطقة الجواب */
.acc-content {
    padding: 0 30px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    color: #999;
    line-height: 1.8;
    font-size: 1.05rem;
}

/* حالة التفعيل (عند الضغط) */
.acc-item.active {
    border-color: #C5A880;
    background: #1f1f1f;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.acc-item.active .acc-content {
    padding-bottom: 35px;
    max-height: 600px; /* يسمح بمساحة كافية للنص */
}

/* تدوير الزائد لتصبح علامة إغلاق */
.acc-item.active .acc-header span {
    transform: rotate(45deg);
    color: #FFFFFF;
}



/* تنسيق قسم الهيرو الرئيسي */
.cb-hero {
    width: 100%;
    height: 85vh; /* يأخذ 85% من ارتفاع الشاشة */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* خلفية متدرجة مع صورة رياضية احترافية */
    background: linear-gradient(to bottom, rgba(15, 15, 15, 0.01), #0F0F0F), 
                url('https://cdn.files.salla.network/homepage/409647145/55efac24-cf75-495d-9f3d-8cd2574bddbb.webp');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 20px;
    direction: rtl;
}

.cb-hero h1 {
  font-size: clamp(3.5rem, 12vw, 6rem);    font-weight: 900;
    font-style: italic;
    margin-bottom: 25px;
    color: #FFFFFF;
    line-height: 1.1;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.cb-hero h1 span {
    color: var(--primary-gold); /* كلمة مميزة باللون الذهبي */
}

/* الأوسمة (Tags) */
.cb-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 30px; /* المسافة بين العناصر */
    padding: 20px;
    direction: rtl;
}
.cb-icon-svg {
    width: 22px; /* تحديد الحجم */
    height: 22px;
    color: #C5A880; /* لون ذهبي باهت */
}

.cb-item {
    display: flex;
    flex-direction: column; /* لجعل الأيقونة فوق النص */
    align-items: center;
    gap: 8px; /* المسافة بين الأيقونة والنص */
    position: relative;
}

/* الخط الفاصل الصغير بين العناصر (اختياري كما في الصورة) */
.cb-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: -15px;
    bottom: 5px;
    width: 1px;
    height: 15px;
    background-color: rgba(255, 255, 255, 0.2);
}

.cb-icon {
    font-size: 1.5rem;
    color: #C5A880; /* لون ذهبي باهت مثل الصورة */
    opacity: 0.9;
}

.cb-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.5px;
}

/* الزر الرئيسي */
.cb-btn {
    background-color: var(--primary-gold);
    color: #000000 !important;
    padding: 20px 80px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px 5px var(--glow-yellow);
}

.cb-btn:hover {
    transform: translateY(-5px);
    background-color: #d4b890;
    box-shadow: 0 0 30px 10px var(--glow-yellow-hover);
}

/* تأثير بسيط لجعل الهيرو يظهر بسلاسة عند التحميل */
/* @keyframes fadeInHero {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.cb-hero { animation: fadeInHero 1s ease-out; } */


/* تنسيق الجوال */
@media (max-width: 768px) {
    .cb-hero {
        /* استبدل الرابط أدناه برابط الصورة الطولية المناسبة للجوال */
        background: linear-gradient(to bottom, rgba(15, 15, 15, 0.3), #0F0F0F), 
                    url('https://cdn.files.salla.network/homepage/409647145/94b945e4-041b-404b-bb29-fee638d2ab5b.webp');
        
        height: 70vh; /* اختياري: تقليل الارتفاع قليلاً ليناسب الجوال */
        background-size: cover;
        background-position: center;
    }
}


/* قسم النتائج */

.cb-results { 
    padding: 80px 0; 
    text-align: center; 
    width: 100%; 
    background-color: #0F0F0F; /* لضمان استمرارية الخلفية السوداء */
    direction: rtl;
}

.cb-results h2 {
    color: #FFFFFF;
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.results-subtitle {
    color: var(--primary-gold); /* تأكد من تعريف المتغير في :root */
    margin-bottom: 30px;
    font-weight: 700;
    font-style: italic;
}


/* حاوية السلايدر */
.cb-slider { 
    display: flex; 
    overflow-x: auto; 
    scroll-snap-type: x mandatory; 
  padding: 40px 4% 20px 4%;  
    gap: 25px; 
    scrollbar-width: none; /* إخفاء السكرول بار في فايرفوكس */
}

/* إخفاء السكرول بار في كروم وسفاري */
.cb-slider::-webkit-scrollbar { 
    display: none; 
}

/* الكرت الواحد */
.cb-card { 
    flex: 0 0 85%; /* في الموبايل يأخذ 85% من العرض */
    scroll-snap-align: center; 
    max-width: 450px; /* الحجم الأقصى في الويب */
    transition: transform 0.3s ease;
}

/* تأثير عند تمرير الماوس في الويب */
@media (min-width: 992px) {
    .cb-card:hover {
        transform: translateY(-10px);
    }
    /* .cb-slider { */
        /* justify-content: center; */
        /* overflow-x: visible; */
    /* } */
  .cb-results {
        overflow: visible;
    }
    .cb-card {
        flex: 0 0 400px;
    }
}

/* مجموعة الصور (قبل وبعد) */
.cb-media-group { 
    display: flex; 
    gap: 12px; 
    margin-bottom: 20px; 
}

/* صندوق الصورة */
.cb-media-box { 
    flex: 1; 
    position: relative; 
    border-radius: 20px; 
    aspect-ratio: 2/3; 
    background: #1A1A1A; 
    border: 1px solid rgba(255,255,255,0.05);
    overflow: visible; 
}

.cb-media-box img, 
.cb-media-box video, 
.cb-media-box iframe { 
    width: 100%; 
    height: 100%; 
    border-radius: 20px;
    object-fit: cover; 
    filter: brightness(0.9);
}

/* حاوية داخلية للفيديو والصورة - هي التي تقص الزوائد */
.cb-inner-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden; /* تقص الفيديو عند التكبير وتمنحه زوايا دائرية */
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #1A1A1A;
}

/* تنسيق الفيديو (يوتيوب) داخل الحاوية الجديدة */
.cb-inner-wrapper iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    /* تكبير لتغطية الفراغات مع الحفاظ على التوسيط */
    transform: translate(-50%, -50%) scale(1.7); 
    border: none;
    pointer-events: none;
}

/* تنسيق الصور العادية داخل الحاوية */
.cb-inner-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9);
}

/* طبقة الحماية الشفافة */
.cb-inner-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

/* التاج (قبل / بعد) */
.cb-badge { 
    position: absolute; 
    /* التعديل الرئيسي هنا: تغيير bottom لـ top */
    top: -15px; 
    
    left: 50%; 
    transform: translateX(-50%); 
    
    /* تغيير لون الخلفية للون فاتح يقارب الأبيض كما في الصورة، أو اتركه var(--primary-gold) إذا كنت تفضل لونك */
    background:var(--off-white-cream);
    color: #000; 
    
    padding: 6px 20px; /* تعديل طفيف ليتناسب مع شكل الصورة */
    border-radius: 12px; 
    font-weight: 900; 
    font-size: 0.75rem; 
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* معلومات النتيجة */
.cb-result-info { 
    background: #1A1A1A; 
    padding: 25px; 
    border-radius: 20px; 
    border: 1px solid rgba(255,255,255,0.05);
    text-align: center;
}

.cb-result-info h3 {
    color: #FFFFFF;
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 800;
    font-style: italic;
}

.cb-result-info p {
    margin: 0;
    font-weight: 600;
}

/* تنسيق إرشاد السحب */
.cb-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.4); /* لون رمادي باهت */
    font-size: 0.85rem;
    font-weight: 500;
    pointer-events: none; /* عشان ما يضايق المستخدم وقت السحب */
}

/* الأسهم الجانبية */
.cb-scroll-hint svg {
    width: 18px;
    height: 18px;
    stroke: rgba(255, 255, 255, 0.3);
}

/* إخفاء الإرشاد في الويب إذا كانت الكروت لا تحتاج سحب */
@media (min-width: 992px) {
    .cb-scroll-hint {
        display: none; 
    }
}



/* --- قسم البرامج --- */
/* --- قسم البرامج (تعديل الويب والجوال) --- */
.cb-programs-section { 
    background-color: #FFFFFF; 
    color: #0F0F0F; 
    padding: 60px 20px; 
    width: 100%; 
    direction: rtl;
    position: relative;
    z-index: 5;
    /* الحواف الناعمة فقط في الجوال */
    border-radius: 40px 40px 0 0; 
    margin-top: -40px; 
}

/* تعديل الويب: قسم عادي بدون حواف وبدون تداخل */
@media (min-width: 992px) {
    .cb-programs-section {
        border-radius: 0; 
        margin-top: 0;
        padding: 100px 5%;
    }
    .cb-programs-container { 
        flex-direction: row !important; /* النص يمين والصور يسار */
        justify-content: space-between;
        align-items: center;
        gap: 50px;
    }
    .cb-programs-content { text-align: right; flex: 1; }
    .cb-device-showcase { flex: 1; margin-top: 0 !important; }
}

.cb-programs-container { 
    max-width: 1150px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.cb-programs-content h2 {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 35px;
    color: #000;
}

/* قائمة المميزات: الأيقونات على اليمين */
.cb-features-list { 
    list-style: none; 
    padding: 0;
    width: 100%; 
    max-width: 500px; 
}

.cb-features-list li { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 22px; 
    font-weight: 700; 
    font-size: 1.05rem; 
    color: #333;
    justify-content: flex-start; /* يضمن بقاء الأيقونة يمين النص */
}

.cb-check-circle { 
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    border: 1.5px solid #C5A880; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #C5A880;
    font-size: 0.75rem;
    flex-shrink: 0;
    order: -1; /* يضمن ظهورها أول عنصر على اليمين */
}

/* عرض الأجهزة المتداخلة */
.cb-device-showcase {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 450px;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cb-phone {
    position: absolute;
    width: 170px;
    height: 340px;
    border-radius: 25px;
    overflow: hidden;
    border: 6px solid #000;
    background: #000;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

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

.phone-1 { transform: translateX(85px) translateY(30px) rotate(6deg); z-index: 1; filter: brightness(0.85); }
.phone-2 { transform: translateX(-85px) translateY(30px) rotate(-6deg); z-index: 1; filter: brightness(0.85); }
.phone-main { z-index: 3; transform: scale(1.05); box-shadow: 0 25px 50px rgba(0,0,0,0.15); }

/* الساعة الذكية */
/* 1. الحالة الافتراضية (قبل ظهور القسم) */
.cb-watch {
    position: absolute;
    bottom: 55px; 
    right: 15px;
    width: 105px;
    height: 105px;
    z-index: 4;
    border-radius: 22px;
    overflow: hidden;
    
    /* الخصائص المسؤولة عن الأنميشن والميلان */
    opacity: 0;
    transform: scale(0.5) rotate(-15deg); 
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* 2. الحالة عند تفعيل القسم (Active) */
.active .cb-watch {
    opacity: 1;
    /* الميلان المطلوب زي الصورة تماماً */
    transform: scale(1.1) rotate(-12deg) translateX(-5px); 
    transition-delay: 0.8s;
    /* تشغيل حركة الاهتزاز المستمرة */
    animation: watchFloat 4s ease-in-out infinite 1.6s;
}

/* 3. حركة الاهتزاز (Floating) لجعلها حيوية */
@keyframes watchFloat {
    0%, 100% { 
        transform: scale(1.1) rotate(-12deg) translateX(-5px); 
    }
    50% { 
        transform: scale(1.1) rotate(-9deg) translateY(-8px) translateX(-2px); 
    }
}

/* الهواتف: اجعلها تتجمع في المنتصف وتختفي قليلاً */
.phone-1, .phone-2, .phone-main{
    opacity: 0;
    transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* القائمة: اجعل الأسطر تنزاح لليمين وتختفي */
.cb-features-list li {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.6s ease-out;
}

/* --- تأثيرات التحريك عند ظهور القسم (Active State) --- */

/* تباعد الهواتف الجانبية */
.active .phone-1 { 
    opacity: 0.85; 
    transform: translateX(85px) translateY(30px) rotate(6deg); 
    transition-delay: 0.4s;
}
.active .phone-2 { 
    opacity: 0.85; 
    transform: translateX(-85px) translateY(30px) rotate(-6deg); 
    transition-delay: 0.4s;
}

/* ظهور الهاتف الرئيسي من الأسفل */
.active .phone-main { 
    opacity: 1; 
    transform: scale(1.05) translateY(0); 
    transition-delay: 0.2s;
}

/* ظهور أسطر القائمة بالتتالي */
.active .cb-features-list li { opacity: 1; transform: translateX(0); }
.active .cb-features-list li:nth-child(1) { transition-delay: 0.2s; }
.active .cb-features-list li:nth-child(2) { transition-delay: 0.4s; }
.active .cb-features-list li:nth-child(3) { transition-delay: 0.6s; }
.active .cb-features-list li:nth-child(4) { transition-delay: 0.8s; }
.active .cb-features-list li:nth-child(5) { transition-delay: 1.0s; }

/* حركة اهتزاز خفيفة مستمرة للهاتف الرئيسي ليعطي حيوية */
@keyframes floatMain {
    0%, 100% { transform: scale(1.05) translateY(0); }
    50% { transform: scale(1.05) translateY(-10px); }
}
.active .phone-main {
    animation: floatMain 4s ease-in-out infinite 1.2s;
}



/* آراء العملاء */

/* 1. الحاوية الرئيسية لقسم الآراء */
.cb-testimonials {
    padding: 60px 20px;
    background: #0F0F0F;
    text-align: center;
    direction: rtl;
    overflow: hidden;
}

.cb-testimonials h2 {
    color: #FFF;
    margin-bottom: 30px;
    font-size: 2rem;
    font-weight: 900;
}

/* 2. السلايدر - تحسين السحب السلس */
.cb-testimonials .cb-slider {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 20px 10px;
    scroll-snap-type: x mandatory; /* يجعل البطاقة تقف في المنتصف تماماً عند السحب */
    scrollbar-width: none; /* إخفاء السكرول بار للمتصفحات الحديثة */
    -ms-overflow-style: none;
}

.cb-testimonials .cb-slider::-webkit-scrollbar {
    display: none; /* إخفاء السكرول بار لكروم وسفاري */
}

/* 3. بطاقة الرأي */
.cb-testimonial-card {
    scroll-snap-align: center; /* مغناطيس التوقف */
    min-width: 320px;
    max-width: 350px;
    background: #1A1A1A;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    text-align: right;
    transition: transform 0.3s ease;
}

/* 4. أيقونة الاقتباس المائية */
.cb-quote-icon {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 60px;
    color: var(--primary-gold);
    opacity: 0.15;
    font-family: serif;
    line-height: 1;
    pointer-events: none;
}

/* 5. تنسيق النجوم المتقدم */
.cb-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 15px;
    direction: ltr; /* لضمان عرض النجوم 5-4-3-2-1 */
    justify-content: flex-end;
}

.star { 
    font-size: 1.2rem; 
    color: #444; 
}

.star.fill { 
    color: #FFD700; 
}

.star.half {
    /* تلوين نصف النجمة بدقة 90 درجة */
    background: linear-gradient(90deg, #FFD700 50%, #444 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 6. نص التقييم */
.cb-comment {
    font-size: 0.95rem;
    color: #EEE;
    line-height: 1.7;
    margin-bottom: 20px;
    min-height: 90px;
    font-weight: 300;
}

/* 7. الخط الفاصل المتدرج */
.cb-divider {
    height: 1px;
    background: linear-gradient(to left, rgba(255,215,0,0.3), transparent);
    margin: 0 0 20px 0;
}

/* 8. بيانات العميل */
.cb-client-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cb-client-avatar {
    width: 48px;
    height: 48px;
    background: #222;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: var(--primary-gold);
    border: 1px solid rgba(255,215,0,0.2);
    font-size: 1.1rem;
}

.cb-client-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,215,0,0.2);
}

.cb-client-details h4 {
    font-size: 1rem;
    margin: 0;
    color: #FFF;
    font-weight: 700;
}

.cb-client-details span {
    font-size: 0.8rem;
    color: var(--primary-gold);
    display: block;
    margin-top: 2px;
}

/* 9. تلميح السحب (Scroll Hint) مع أنيميشن */
.cb-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    color: #888;
    font-size: 0.85rem;
}

.cb-scroll-hint svg {
    width: 18px;
    height: 18px;
    opacity: 0.6;
    stroke: var(--primary-gold);
    animation: sideBounce 2s infinite ease-in-out;
}

@keyframes sideBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-8px); } /* ارتداد بسيط لليسار */
}

/* تحسينات للشاشات الكبيرة */
@media (min-width: 1024px) {
    /* .cb-testimonials .cb-slider {
        justify-content: center; /* توسيط البطاقات إذا كان عددها قليل 
        overflow-x: hidden; /* إلغاء السكرول إذا كانت البطاقات تكفي الشاشة 
    } */
    
    .cb-testimonial-card:hover {
        transform: translateY(-10px);
        border-color: rgba(255, 215, 0, 0.2);
    }
}



















/* الفوتر */


/* --- تصميم الفوتر المخصص --- */
.cb-footer {
    background-color: #0F0F0F; /* الأسود الأساسي */
    padding: 60px 20px 30px;
    text-align: center;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    direction: rtl;
}

.cb-footer-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 35px;
}

.footer-b-logo {
    width: 45px;      /* تحكم في عرض الشعار من هنا */
    height: auto;     /* ليحافظ على أبعاد الصورة */
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-b-logo img {
    width: 100%;      /* لتأخذ الصورة كامل حجم الحاوية */
    height: auto;
    object-fit: contain; /* لضمان عدم تمدد الصورة بشكل خاطئ */
}

.footer-divider { 
    width: 1.5px; 
    height: 40px; 
    background-color: rgba(255, 255, 255, 0.2); 
}

.footer-name-wrap { 
    text-align: right; 
    line-height: 1.1; 
}

.footer-name-top { 
    font-weight: 900; 
    font-size: 1.2rem; 
    color: #FFFFFF; 
    display: block; 
}

.footer-name-bot { 
    color: var(--primary-gold); 
    font-size: 0.9rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

/* تنسيق أيقونات التواصل الاجتماعي (باستخدام أيقونات سلة) */
.cb-social-links { 
    display: flex; 
    justify-content: center; 
    gap: 25px; 
    margin-bottom: 40px; 
}

.cb-social-links a { 
    color: #FFFFFF;
    text-decoration: none; 
    transition: all 0.3s ease; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.cb-social-links svg {
    width: 24px;
    height: 24px;
    fill: currentColor; /* ليأخذ اللون الأبيض أو الذهبي عند الهوفر */
}

.cb-social-links a:hover { 
    color: var(--primary-gold); 
    transform: translateY(-5px); 
}

.cb-copyright { 
    color: #666; 
    font-size: 0.8rem; 
    border-top: 1px solid rgba(255, 255, 255, 0.05); 
    padding-top: 25px; 
    width: 100%; 
    max-width: 400px; 
    font-weight: 500;
}





/* سجل الان */

/* 
:root {
    --cb-primary-gold: #d4af37;
    --cb-bg-black: #0a0a0a;
    --cb-card-gray: #1a1a1a;
    --cb-input-bg: #252525;
}

 Modal Overlay 
.cb-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--cb-bg-black);
    z-index: 9999;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* التحريك من الأسفل للأعلى في الجوال 
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.cb-modal-overlay.active {
    display: flex;
    animation: slideUp 0.4s cubic-bezier(0, 0, 0.2, 1);
}

.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px; position: sticky; top: 0; background: var(--cb-bg-black); z-index: 10;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.modal-close, .modal-back {
    background: var(--cb-card-gray); color: white; border: none; 
    width: 35px; height: 35px; border-radius: 50%; 
    font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.modal-title { font-weight: 900; font-size: 1.1rem; flex-grow: 1; text-align: center; color: #fff; }

.modal-content { padding: 20px; max-width: 500px; margin: 0 auto; width: 100%; }

/* بطاقات الباقات 
.package-card {
    background: var(--cb-card-gray); border-radius: 16px; padding: 20px; margin-bottom: 15px;
    display: flex; justify-content: space-between; align-items: center;
    border: 2px solid transparent; cursor: pointer; position: relative;
    transition: all 0.3s ease;
}

.package-card:active { transform: scale(0.98); }
.package-card.featured { border-color: var(--cb-primary-gold); box-shadow: 0 0 15px rgba(212, 175, 55, 0.2); }

.featured-badge { 
    position: absolute; top: -12px; left: 20px; 
    background: var(--cb-primary-gold); color: black; 
    font-size: 0.65rem; font-weight: 900; padding: 4px 12px; border-radius: 20px; 
    text-transform: uppercase;
}

.pkg-info h3 { margin: 0; font-size: 1.2rem; font-weight: 800; color: #fff; }
.pkg-info p { margin: 4px 0 0; font-size: 0.85rem; color: #888; }

.pkg-price { text-align: left; }
.price-val { font-size: 1.5rem; font-weight: 900; color: #fff; display: block; }
.currency { font-size: 0.7rem; color: var(--cb-primary-gold); font-weight: bold; }

/* الاستبيان 
.step-view { display: none; }
.step-view.active { display: block; animation: fadeIn 0.3s ease; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.form-group { margin-bottom: 18px; text-align: right; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--cb-primary-gold); font-size: 0.85rem; }

.form-group input, .form-group select {
    width: 100%; background: var(--cb-input-bg); border: 1px solid rgba(255,255,255,0.1);
    padding: 14px; border-radius: 12px; color: white; font-size: 0.95rem; outline: none;
    transition: border 0.3s;
}

.form-group input:focus { border-color: var(--cb-primary-gold); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* حقل الإصابة (يظهر عند الطلب) 
#injury_desc_wrapper { display: none; margin-top: 10px; }

/* الشروط والأحكام 
.terms-wrapper {
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(255,255,255,0.03); padding: 12px; border-radius: 10px; margin-top: 20px;
}
.terms-wrapper input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--cb-primary-gold); cursor: pointer; }
.terms-text { font-size: 0.75rem; color: #bbb; line-height: 1.4; }

/* الدفع 
.summary-box { background: var(--cb-card-gray); padding: 25px; border-radius: 20px; margin-bottom: 20px; text-align: center; }
.payment-option {
    background: var(--cb-input-bg); padding: 16px; border-radius: 12px;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.05); cursor: pointer;
}
.payment-option.selected { border-color: var(--cb-primary-gold); background: rgba(212, 175, 55, 0.05); }

/* زر سجل الآن (Hero) 
.cb-btn {
    background: var(--cb-primary-gold); color: black; padding: 16px 32px;
    border-radius: 50px; text-decoration: none; font-weight: 900;
    display: inline-block; transition: transform 0.2s; border: none; cursor: pointer;
}
.cb-btn:active { transform: scale(0.95); } */



/* صفحة المنتج */

/* 1. إخفاء شريط المسار */
nav.breadcrumbs.w-full.py-5 {
    display: none !important;
}

/* 2. إخفاء حاوية الصورة */
div.sidebar.md\:sticky.w-full.md\:\!w-2\/4 {
    display: none !important;
}

/* 3. تعديل حاوية معلومات المنتج لتصبح بعرض كامل */
div.main-content.md\:sticky.w-full.md\:w-2\/4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* 4. إلغاء تأثير الـ Flex في الحاوية الأب لضمان عدم وجود فراغ جانبي */
.flex.flex-col.items-start.md\:flex-row {
    display: block !important;
}


/* 1. إخفاء حاوية "منتجات قد تعجبك" داخل الـ main */
/* نستهدف الـ container الثاني الذي يحتوي على السلايدر */
#main-content .container:has(salla-products-slider) {
    display: none !important;
}

/* في حال كان المتصفح لا يدعم :has، نستخدم استهدافاً مباشراً للسلايدر */
salla-products-slider[block-title*="منتجات قد تعجبك"] {
    display: none !important;
}

/* 2. إخفاء قسم التعليقات */
salla-comments {
    display: none !important;
}



/* 1. إخفاء اسم المنتج (العنوان الرئيسي) */
h1.text-xl.md\:text-2xl.leading-10.font-bold.mb-6.text-gray-800 {
    display: none !important;
}

/* 2. إخفاء قسم السعر بالكامل */
div.flex.whitespace-nowrap.gap-4.items-center {
    display: none !important;
}

/* 3. إخفاء وصف المنتج */
div.product__description.p-2.px-5.sm\:p-1.leading-7.mb-3 {
    display: none !important;
}

/* 4. إخفاء أزرار المشاركة الاجتماعية */
div.flex.rtl\:space-x-reverse.space-x-3:has(salla-social-share) {
    display: none !important;
}

/* حل بديل للمشاركة في حال عدم دعم :has */
salla-social-share {
    display: none !important;
}


/* إخفاء خيار المنتج الأول بواسطة الـ ID */
div.s-product-options-option-container[data-option-id="448367440"] {
    display: none !important;
}

/* إخفاء خيار المنتج الثاني بواسطة الـ ID */
div.s-product-options-option-container[data-option-id="1504445869"] {
    display: none !important;
}

/* السعر */
section.flex.bg-white.p-5.sm\:pb-0.rounded-md.rounded-b-none {
    display: none !important;
}

/* الكمية */
div.sticky-product-bar__quantity.center-between.mb-5 {
    display: none !important;
}

/* الباقة */

/* إخفاء القائمة المنسدلة الأصلية */
select#option-963796398 {
    display: none !important;
}

/* الحاوية الرئيسية */
.custom-plan-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
    direction: rtl; /* لضمان الاتجاه العربي */
}

/* تصميم البطاقة */
.plan-card {
    background: #111111;
    border: 2px solid #282828; /* إطار افتراضي غامق */
    border-radius: 14px;
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between; /* توزيع العناصر (نص يمين، سعر يسار) */
    align-items: center;
    transition: all 0.25s ease-in-out;
    position: relative;
    color: #ffffff;
}

/* حالة البطاقة المختارة (Active) */
.plan-card.active {
    border-color: #ba9e6b !important; /* لون الإطار الذهبي عند التحديد */
    background: #1a1a1a;
    box-shadow: 0 4px 15px rgba(186, 158, 107, 0.1);
}

/* تأثير مرور الماوس */
.plan-card:hover {
    border-color: #555555; /* يتغير الإطار للرمادي عند الحوّمة */
    background: #161616;   /* تفتيح بسيط للخلفية */
    transform: translateY(-2px); /* حركة بسيطة للأعلى تعطي شعوراً بالتفاعل */
}

/* لضمان عدم تأثر البطاقة النشطة (المختارة) بتأثير الحوّمة بشكل مزعج */
.plan-card.active:hover {
    border-color: #ba9e6b !important; /* يحافظ على اللون الذهبي حتى لو حركت الماوس */
    transform: none; /* إلغاء الارتفاع للبطاقة المختارة فعلياً */
}

/* النصوص (جهة اليمين) */
.plan-info {
    display: flex;
    flex-direction: column;
    text-align: right;
    order: 1; /* يضمن بقاءها في البداية (اليمين في RTL) */
}

.plan-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.plan-sub {
    font-size: 0.85rem;
    color: #777;
}

/* السعر (جهة اليسار) */
.plan-price {
    font-size: 1.4rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 5px;
    order: 2; /* يضمن بقاءها في النهاية (اليسار في RTL) */
}

.plan-price span {
    font-size: 0.8rem;
    color: #ba9e6b;
}

/* شارة "الأكثر طلباً" (أعلى اليمين) */
.most-popular {
    position: absolute;
    top: -12px;
    right: 25px; /* تثبيتها على اليمين */
    background: #ba9e6b;
    color: #000;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 12px;
    border-radius: 50px;
    z-index: 10;
}


/* الاستبيان */
/* تنسيق الحاوية الكبيرة لكل خيار */
.s-product-options-option-container {
    background: #111 !important;
    border-radius: 12px;
    padding: 15px !important;
    margin-bottom: 15px !important;
    /* border: 1px solid #222; */
}

/* تنسيق العناوين (Label) */
.s-product-options-option-label b {
    color: #ba9e6b !important; /* اللون الذهبي للعنوان */
    font-size: 1rem;
    display: block;
    margin-bottom: 8px;
}

/* تنسيق حقول الإدخال (Inputs & Textarea) */
.s-form-control, .s-product-options-textarea textarea {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 12px !important;
    transition: 0.3s;
}

.s-form-control:focus {
    border-color: #ba9e6b !important;
    box-shadow: 0 0 5px rgba(186, 158, 107, 0.2) !important;
}

/* جعل "رقم الجوال" و "العمر" يظهران بجانب بعضهما في الشاشات الواسعة */
@media (min-width: 768px) {
    /* سنستخدم JavaScript لإضافة كلاس wrap-row لهذين العنصرين */
    .options-row-flex {
        display: flex;
        gap: 15px;
    }
    .options-row-flex > div {
        flex: 1;
    }
}

/* تنسيق قسم الإقرار الطبي */
[data-option-id="139761745"] {
    background: #151515 !important;
    border: 1px dashed #ba9e6b !important;
}



/* زر انتقال للدفع */

/* 1. إخفاء حاوية زر إضافة للسلة تماماً */
salla-button.s-button-wrap {
    display: none !important;
}

/* 2. تعديل حاوية الزر الكبيرة لتناسب العرض الكامل */
.s-add-product-button-main {
   display: flex !important;
    width: 100% !important;
}

salla-mini-checkout-widget {
    width: 100% !important;
}

/* 3. تنسيق زر "اشتري الآن" ليصبح "الانتقال للدفع" باللون الذهبي */
.s-add-product-button-mini-checkout-content {
    background-color: #ba9e6b !important; /* اللون الذهبي */
    color: #000 !important;              /* نص أسود لتباين واضح */
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 15px !important;
    height: 50px; /* ارتفاع مناسب */
    border-radius: 12px !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
}

/* تأثير عند الضغط أو الحوم */
.s-add-product-button-mini-checkout-content:hover {
    background-color: #d4af37 !important; /* درجة أفتح قليلاً */
    transform: scale(0.98);
}

/* إخفاء الأيقونة إذا أردت النص فقط (اختياري) */
.s-add-product-button-mini-checkout-content svg {
    display: none !important;
}

/* إزالة أي هوامش أو خلفيات بيضاء من القسم الأب ليتناسب مع التصميم الداكن */
.sticky-product-bar {
    background: transparent !important;
    padding: 10px 0 !important;
}




/* التحويل لنظام ويزرد */



/* إخفاء الخيارات الأصلية لتجنب التكرار قبل تشغيل السكريبت */
.s-product-options-wrapper { opacity: 0; }
.s-product-options-wrapper.hydrated { opacity: 1; }


/* منع ظهور الويزرد إلا في صفحة المنتج */
body:not(.product-single) #customWizard {
    display: none !important;
}

/* ================================
   1. إعدادات الويزرد الأساسية
   ================================ */
.custom-wizard-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  display: none;
  z-index: 198;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  touch-action: none;
}

body.wizard-open { overflow: hidden; }

.wizard-content {
  background: #121212;
  color: #fff;
  width: 95%;
  max-width: 450px;
  border-radius: 25px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

/* شريط التمرير */
.wizard-content::-webkit-scrollbar { width: 4px; }
.wizard-content::-webkit-scrollbar-thumb {
  background: #C5A880;
  border-radius: 10px;
}
.wizard-content::-webkit-scrollbar-track { background: #1A1A1A; }

/* خطوات الويزرد */
.wizard-step { display: none; }
.wizard-step.active {
  display: block;
  animation: fadeIn 0.3s;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* إخفاء شريط السلة الأصلي */
.sticky-product-bar { display: none !important; }
.step-final .sticky-product-bar {
  display: block !important;
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
}

/* ================================
   2. تنسيقات الحقول العامة
   ================================ */
.wizard-step select,
.wizard-step input,
.wizard-step textarea {
  background: #2a2a2a !important;
  border: 1px solid #444 !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 12px !important;
  width: 100% !important;
  margin-bottom: 15px;
}

.wizard-btn-next,
.wizard-btn-prev {
  background: #d4b483;
  color: #000;
  border: none;
  padding: 12px 25px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
  margin-top: 10px;
}
.wizard-btn-prev {
  background: transparent;
  color: #aaa;
  border: 1px solid #444;
}

/* ================================
   3. تنسيقات الخطوة الثانية (Grid Layout)
   ================================ */
#step2 { padding-bottom: 20px; }

/* إخفاء النصوص الصغيرة ما عدا الشروط */
#step2 .s-product-options-option-label small { display: none; }

/* حاوية الشبكة */
#container-step2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  padding: 10px;
}

/* عناصر كاملة المساحة */
[data-option-id="281283090"],   /* الاسم */
[data-option-id="1472759151"],  /* الإصابة */
[data-option-id="1152156156"],  /* تفاصيل الإصابة */
[data-option-id="139761745"]    /* الإقرار الطبي */
{
  grid-column: span 2 !important;
}

/* عناصر نصف المساحة */
[data-option-id="1479570974"],  /* الجوال */
[data-option-id="382516320"],   /* العمر */
[data-option-id="1621744481"],  /* نوع الرياضة */
[data-option-id="1580742764"]   /* المركز الرياضي */
{
  grid-column: span 1 !important;
}

/* استجابة للشاشات الصغيرة */
/* @media (max-width: 480px) {
  #container-step2 {
    grid-template-columns: 1fr !important;
  }
  [data-option-id] {
    grid-column: span 1 !important;
  }
} */

/* إزالة أي تنسيقات داخلية تفرضها المنصة */
.s-product-options-option {
  display: block !important;
  width: 100% !important;
}
.s-product-options-option-container {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 5px !important;
}

/* تنسيق الحقول */
.s-form-control {
  background: #1A1A1A !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  height: 45px !important;
  width: 100% !important;
  display: block !important;
}

.s-product-options-option-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin-bottom: 10px !important;
}
.s-product-options-option-label b {
  color: #C5A880;
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.s-product-options-option-content{
  overflow: hidden;
}


/* خدمة التدريب الشخصي */
/* تنسيق الحقول */
.s-form-control {
  background: #1A1A1A !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  height: 45px !important;
  width: 100% !important;
  display: block !important;
}

/* تنسيق العنوان العلوي */
.service-main-header {
    text-align: center;
    margin-bottom: 15px;
}
.service-title {
    font-size: 1.1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
}

/* قائمة المميزات */
.service-features-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.feature-item {
    background: #1A1A1A !important; /* نفس درجة اللون في الصورة */
    border: 1px solid #222;
    border-radius: 12px;
    padding: 10px 15px;
    display: flex;
    justify-content: flex-start; /* لدفع الأيقونة لليسار والنص لليمين */
    align-items: center;
    direction: rtl; /* ضمان الترتيب العربي */
}

.feature-item span {
    font-size: 0.85rem;
    color: #d1d1d1;
    line-height: 1.4;
}

.feature-icon-svg {
    /* font-style: normal;
    font-size: 0.9rem;
    opacity: 0.8; */

  width: 24px;
  height: 24px;
  fill: none;
  stroke: #ba9e6b; 
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-left: 20px;
}

/* تعديل بسيط لعنوان "اختر باقتك" ليناسب التصميم الجديد */
#wizardTitle {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 10px;
}

.wizard-content:has(#step2.active) .service-main-header,
.wizard-content:has(#step2.active) .service-features-list {
    display: none;
}




/* ================================
   4. الإقرار الطبي [139761745]
   ================================ */
[data-option-id="139761745"] {
  background: #121212 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 20px !important;
  padding: 25px !important;
  margin-top: 20px;
  width: 100% !important;
  display: block !important;
}

/* العنوان مع خط تحته */
[data-option-id="139761745"] .s-product-options-option-label b {
  visibility: hidden;
  position: relative;
  display: block;
  margin-bottom: 25px;
}
[data-option-id="139761745"] .s-product-options-option-label b::before {
  content: "إقرار طبي";
  visibility: visible;
  position: absolute;
  right: 0;
  color: #C5A880;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 8px;
}

/* نص الإقرار الطويل */
[data-option-id="139761745"] .s-product-options-option-label::after {
  content: "أقر أنا المتدرب بأنني لا أعاني من أي مشاكل صحية تمنعني من ممارسة النشاط البدني العالي، وأتحمل المسؤولية الكاملة عن صحتي أثناء تنفيذ البرنامج التدريبي، كما أتعهد بالإفصاح عن أي طارئ صحي للمدرب فوراً.";
  display: block;
  color: #FFFFFF;
  font-size: 0.85rem;
  line-height: 1.6;
  text-align: right;
  margin: 10px 0 20px;
  font-weight: normal;
}

/* إخفاء العناصر الأصلية */
#option-139761745,
[data-option-id="139761745"] .s-product-options-option-label small {
  display: none !important;
}

/* Checkbox مخصص */
[data-option-id="139761745"] .s-product-options-option-content {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row-reverse;
  gap: 12px;
  margin-top: 15px;
  cursor: pointer;
  overflow: visible !important;
  height: auto !important;
}

[data-option-id="139761745"] .s-product-options-option-content::before {
  content: "أوافق وأقر بما ورد في الإقرار الطبي أعلاه";
  color: #FFFFFF;
  font-size: 0.6rem;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
}

[data-option-id="139761745"] .s-product-options-option-content::after {
  content: "";
  width: 22px;
  height: 22px;
  border: 2px solid #FFFFFF;
  border-radius: 6px;
  display: inline-block;
  flex-shrink: 0;
  background: transparent;
  transition: all 0.2s ease;
}

/* حالة التحديد */
[data-option-id="139761745"].is-checked .s-product-options-option-content::after,
[data-option-id="139761745"] .s-product-options-option-content.is-checked::after {  background-color: #FFFFFF !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

/* ================================
   5. سؤال الإصابة [1472759151] + التفاصيل [1152156156]
   ================================ */
[data-option-id="1472759151"] {
  background: #121212 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 20px !important;
  padding: 25px !important;
  margin-bottom: 15px !important;
  overflow: visible !important;
  display: block !important;
}

[data-option-id="1472759151"] .s-product-options-option-label b {
  color: #C5A880 !important;
  display: block;
  margin-bottom: 20px;
  text-align: right;
}

/* إخفاء العناصر الأصلية */
#option-1472759151,
[data-option-id="1472759151"] .s-product-options-option-label small {
  display: none !important;
}

/* أزرار الراديو المخصصة */
.custom-radio-group {
  display: flex !important;
  justify-content: flex-start;
  gap: 40px;
  direction: rtl;
  align-items: center;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.radio-circle {
  width: 22px;
  height: 22px;
  border: 2px solid #555;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  transition: all 0.2s;
}

.radio-item.active .radio-circle {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  box-shadow: inset 0 0 0 4px #121212;
}

.radio-label {
  color: #FFF;
  font-weight: bold;
  font-size: 1rem;
}

/* صندوق تفاصيل الإصابة */
[data-option-id="1152156156"] {
  background: #121212 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 20px !important;
  padding: 25px !important;
  margin-top: 15px !important;
}

[data-option-id="1152156156"] .s-product-options-option-label b {
  color: #C5A880 !important;
  font-size: 0.95rem;
}

#option-1152156156 {
  background: #1A1A1A !important;
  border: 1px solid #333 !important;
  border-radius: 12px !important;
  color: #FFF !important;
  padding: 15px !important;
  min-height: 100px !important;
  resize: vertical !important;
  line-height: 1.6;
  margin-top: 10px;
  width: 100%;
  overflow-y: hidden;
}

[data-option-id="1152156156"] small {
  display: none !important;
}

/* ================================
   6. زر الدفع النهائي
   ================================ */
.s-add-product-button-main button {
  background-color: #C5A880 !important;
  color: #0F0F0F !important;
  font-weight: bold !important;
  border-radius: 15px !important;
  height: 55px !important;
  width: 100% !important;
  font-size: 1.1rem !important;
  box-shadow: 0 4px 15px rgba(197, 168, 128, 0.3) !important;
}





/* النتائج الي بتشوفها */



.cb-results-header {
    text-align: center;
    padding-top: 20px;
}

.cb-results-header h2 {
    font-size: 2rem !important;
    font-weight: 900 !important;
    margin-bottom: 5px !important;
}

.cb-performance-milestones {
    color: #C5A880;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
}

/* الحاوية الرئيسية */
.cb-results-standalone {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    direction: rtl;
}

/* توزيع الشبكة */
.cb-results-grid-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 20px;
}

/* البطاقة: لها خلفية خفيفة ثابتة ولا يتغير لونها بالكامل */
.cb-result-card-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #fcfcfc; /* خلفية خفيفة جداً ثابتة */
    border: 1px solid #f1f1f1; /* حدود ناعمة جداً */
    border-radius: 12px;
    padding: 10px 18px;
    flex: 0 1 auto;
    /* min-width: 260px; */
  min-width: 340px;
    transition: transform 0.3s ease; /* حركة بسيطة فقط للبطاقة */
    cursor: pointer;
}

/* الأيقونة: هي التي ستتغير عند التفاعل */
.cb-icon-box-v2 {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* خلفية شفافة في الحالة العادية */
    border-radius: 10px;
    color: #C5A880; /* لون ذهبي للأيقونة */
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.cb-icon-box-v2 svg {
    width: 24px;
    height: 24px;
}

/* نصوص البطاقة */
.cb-card-info-v2 h3 {
    /* font-size: 0.95rem; */
    font-weight: 800;
    margin: 0 0 2px 0;
    color: #000;
}

.cb-card-info-v2 p {
    font-size: 0.8rem;
    color: #777;
    margin: 0;
}

/* --- التفاعل المخصص للأيقونة فقط --- */

/* عند مرور الماوس على البطاقة: الأيقونة فقط هي التي تكتسي باللون الذهبي */
.cb-result-card-v2:hover .cb-icon-box-v2 {
    background-color: #C5A880; /* تلون الصندوق الصغير للأيقونة فقط */
    color: #000; /* تحول الأيقونة للأبيض للتباين */
}

/* حركة بسيطة للبطاقة لتعطي إحساس بالضغط */
.cb-result-card-v2:active {
    transform: scale(0.98);
}

/* إذا أردت أن يظل اللون ثابت بعد الضغط (اختياري عبر JS لاحقاً) */
.cb-result-card-v2.is-active .cb-icon-box-v2 {
    background-color: #C5A880;
    color: #ffffff;
}







/* الحاوية الخارجية لضمان التوسيط */
.cb-single-device-wrapper {
    width: 100%;
    max-width: 640px; /* يمكنك تكبير أو تصغير الحجم من هنا */
    margin: 40px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

/* تنسيق الصورة الواحدة */
.cb-hero-device-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* إضافة ظل خفيف ليعطي عمق للصورة */
    /* filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1)); */
    /* انيميشن دخول ناعم عند تحميل الصفحة */
    animation: fadeInDevice 1.5s ease-out;
}

/* انيميشن بسيط للظهور */
@keyframes fadeInDevice {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* تنسيق خاص للجوال لضمان عدم صغر الصورة بزيادة */
@media (max-width: 768px) {
    .cb-single-device-wrapper {
        margin: 20px auto;
        padding: 0 10px;
    }
}