/* Add custom CSS styles below */ 

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

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

.text-primary {
  color: black;
}
/* بداية اللودر */
#custom-loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    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: rgb(244 244 244 / 20%);
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 2px;
}

.loader-line::after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--primary-gold); /* اللون الذهبي */
    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, 255, 255, 0.2); 
  --glow-yellow-hover: rgba(255, 255, 255, 0.4); 

  /* تعديل الألوان الثابتة لتناسب تدرجات الأبيض والرمادي الفاتح */
  --off-white-cream: #FFFFFF;    /* أبيض نقي */
  --primary-gold: #F2F2F2;       /* رمادي فاتح جداً (بديل للذهبي) */
  
  /* الحفاظ على درجات الأسود كما هي لأنها تخدم الهوية الجديدة */
  --bg-black: #0F0F0F;           /* الخلفية السوداء الأساسية */
  --card-gray: #1A1A1A;          /* خلفية الكروت (رمادي غامق جداً) */
  
  /* تدرجات النصوص */
  --text-white: #FFFFFF;
  --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: 100dvh;
    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: 85dvh; /* يحدد أقصى ارتفاع بـ 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: var(--white); /* الذهبي */
    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 var(--white); /* خط ذهبي جانبي */
    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: #727474;
    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: #727474;
    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: #ffffff;
    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: #727474;
    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: 85dvh; /* يأخذ 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/601059322/a4c4f1ae-a957-436b-b747-71865897b343.webp');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 20px;
    direction: rtl;
}

.cb-hero h1 {
  font-size: clamp(1.5rem, 9vw, 6rem);    font-weight: 900;
    font-style: italic;
    margin-bottom: 5px;
    color: var(--text-white);
    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-subtitle {
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 15px;
    opacity: 0.9;
}
.cb-hero-divider {
    width: 60px; 
    height: 4px;
    background-color: var(--white); /* أو استخدم لون الهوية القديم إذا أردت لمسة ذهبية */
    margin: 0 auto 30px auto; /* يوسط الخط ويضيف مسافة تحت */
    border-radius: 1px;
}

/* حاوية الأيقونات */
.cb-social-container {
    display: flex;
    gap: 12px;
    margin-bottom: 35px;
}

/* تنسيق الأيقونة الواحدة (المربع الشفاف المنحني) */
.cb-social-item {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1); /* شفافية خلفية الأيقونة */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px; /* حواف منحنية كالصورة */
    color: var(--white);
    font-size: 1.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px); /* تأثير التغبيش */
}

.cb-social-item svg {
    width: 20px; /* حجم الأيقونة مناسب */
    height: 20px;
}
.cb-social-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    color: var(--primary-gold);
}

.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 100px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px 5px rgb(233 231 218 / 70%);
}

.cb-btn:hover {
    transform: scale(1.03);
    background-color: var(--white);
    box-shadow: 0 10px 35px rgba(255, 255, 255, 0.25);
}

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


/* تنسيق الجوال */

/* fecfcbe3-d80a-4261-823b-3d8b17c4ea9a.webp */
@media (max-width: 768px) {
    .cb-hero {
        /* استبدل الرابط أدناه برابط الصورة الطولية المناسبة للجوال */
        background: linear-gradient(to bottom, rgba(15, 15, 15, 0.02), #0F0F0F), 
                    url('https://cdn.files.salla.network/homepage/601059322/f0af4b69-ee6e-4d3d-9c37-24a1c28c6d17.webp');
        
        height: 90dvh; /* اختياري: تقليل الارتفاع قليلاً ليناسب الجوال */
        background-size: cover;
        background-position: center;
      padding-top: 114px;
    }
    /* .cb-hero h1{
      font-size: clamp(1.5rem, 9vw, 6rem);
    } */
    .cb-subtitle{
       font-size: 0.7rem;
        font-weight: 600;
    }
 
}


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

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

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

/* حاوية السلايدر */
.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; 
}



/* تأثير عند تمرير الماوس في الويب */
@media (min-width: 992px) {
  .cb-results {
    overflow: visible;
  }
}

/* الحاوية الأساسية للبطاقة (الإطار الخارجي) */
.cb-card-v3 {
    flex: 0 0 85%; /* للموبايل */
    max-width: 320px; /* الحجم الأقصى للبطاقة */
    aspect-ratio: 3 / 4; /* نسبة الطول للعرض */
    border-radius: 36px;
    border: 1.5px solid rgba(255, 255, 255, 0.7); /* إطار خفيف جداً */
    scroll-snap-align: center;
    transition: transform 0.3s ease;
    
    /* سر اللقطة: هذا هو الفراغ الداخلي بين الإطار والصورة */
    padding: 20px; 
    
    /* لضمان توسيط الصورة إذا كانت أصغر */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* للموازنة في الويب والتأثير */
@media (min-width: 992px) {
    .cb-card-v3 {
        flex: 0 0 300px;
    }
    .cb-card-v3:hover {
        transform: scale(1.02);
    }
}

/* حاوية الصورة الداخلية (لضبط الزوايا الدائرية) */
.cb-media-inner {
    width: 100%;
    height: 100%;
    border-radius: 24px; /* زوايا دائرية أصغر من الإطار الخارجي */
    overflow: hidden; /* لتقص الصورة بداخل الزوايا الدائرية */
}

/* تنسيق الصورة الفعلي */
.cb-media-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* لملء الحاوية الداخلية مع قص الأطراف إذا لزم الأمر للحفاظ على النسبة */
    display: block;
}

/* تنسيق إرشاد السحب */
.cb-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    color: var(--text-white); /* لون رمادي باهت */
    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-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-section-header {
    margin-bottom: 40px;
    text-align: right;
    width: 100%;
}

.cb-section-header h2 {
    font-size: 1.89rem;
    font-weight: 900;
    color: #000;
    margin: 0;
    text-transform: uppercase;
}

.cb-sub-headline {
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: #888;
    margin-top: 5px;
}

/* حاوية المميزات */
.cb-features-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

/* العنصر الواحد - السر في الترتيب العربي */
.cb-feature-item {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* يضمن بقاء الأيقونة يمين النص */
    gap: 20px;
    text-align: right;
    width: 100%;
}

/* صندوق الأيقونة */
.cb-feature-icon {
    width: 55px;
    height: 55px;
    background-color: #1a1a1a; /* خلفية سوداء */
    color: #fff; /* لون الأيقونة */
    border-radius: 15px; /* حواف ناعمة */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    
    /* ترتيب العنصر ليكون الأول على اليمين (اختياري، flex-start تكفي) */
    order: -1; 
}

/* تنسيق الـ SVG */
.cb-feature-icon svg {
    width: 24px;
    height: 24px;
    fill: none; /* لضمان عمل currentColor */
}

/* نصوص الميزة */
.cb-feature-text {
    flex: 1; /* تأخذ باقي المساحة المتاحة */
}

.cb-feature-text h3 {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #000;
}

.cb-feature-text p {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    font-weight: 500;
}

/* --- التجاوب (Responsive) --- */

/* في الويب: النص والصورة بجانب بعض */
@media (min-width: 992px) {
    .cb-programs-container {
        flex-direction: row !important; /* النص يمين والصورة يسار */
        align-items: flex-start;
        gap: 50px;
    }
    
    .cb-programs-content {
        flex: 1;
        text-align: right;
    }
    
    .cb-single-device-wrapper {
        flex: 1;
        margin-top: 0;
    }
}

/* في الجوال: النص فوق والصورة تحت مع الحفاظ على ترتيب الأيقونة والنص */
@media (max-width: 991px) {
    .cb-programs-container {
        flex-direction: column !important;
    }
    
    .cb-programs-content {
        text-align: right;
        width: 100%;
        margin-bottom: 40px;
    }
    
    /* في الجوال لا نغير الترتيب الداخلي للميزة (الأيقونة تظل يميناً) */
    .cb-feature-item {
        justify-content: flex-start; 
        text-align: right;
    }
    .cb-sub-headline {
      text-align: center;
    }
}

/* 1. الحالة الافتراضية (قبل ظهور القسم) */
.cb-feature-item {
    opacity: 0;
    transform: translateX(30px); /* إزاحة لليمين قليلاً */
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* حركة ناعمة جداً */
}

/* 2. الحالة عند تفعيل القسم (Active) */
.active .cb-feature-item {
    opacity: 1;
    transform: translateX(0);
}

/* 3. تأثير التوالي (Stagger Effect) */
/* كل عنصر يتأخر قليلاً عن الذي قبله ليعطي مظهر احترافي */
.active .cb-feature-item:nth-child(1) { transition-delay: 0.2s; }
.active .cb-feature-item:nth-child(2) { transition-delay: 0.4s; }
.active .cb-feature-item:nth-child(3) { transition-delay: 0.6s; }
.active .cb-feature-item:nth-child(4) { transition-delay: 0.8s; }

/* 4. حركة إضافية للأيقونة (اختياري) */
/* تجعل الأيقونة تكبر قليلاً عند ظهور العنصر */
.cb-feature-icon {
    transform: scale(0.8);
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.active .cb-feature-item .cb-feature-icon {
    transform: scale(1);
}



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



/* الحاوية الخارجية للفيديو */
.cb-single-device-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
   
    perspective: 1000px; 
}

/* إطار الفيديو الطولي (أبعاد Shorts) */
.cb-video-frame {
    position: relative;
    width: 280px; /* عرض مناسب للموبايل والويب كفيديو طولي */
    aspect-ratio: 9 / 16; /* الحفاظ على أبعاد الجوال */
    background: #000;
    border-radius: 40px; /* حواف جوال دائرية */
    border: 8px solid #1a1a1a; /* إطار الهاتف */
    overflow: hidden;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.5);
    z-index: 2;
}

/* حاوية الـ iframe لضمان القص الصحيح */
.cb-video-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cb-video-inner iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    /* لعمل زووم بسيط يغطي أي حواف سوداء لليوتيوب */
    transform: translate(-50%, -50%) scale(1.15); 
    pointer-events: none; /* لمنع المستخدم من إيقاف الفيديو بالخطأ */
    filter: brightness(1.1) contrast(1.05); /* تحسين ألوان الفيديو */
}

/* شارة فخمة فوق الفيديو */
.cb-video-badge {
    position: absolute;
    top: 20px;
    right: -10px;
    background: #a11212;
    color: #fff;
    padding: 5px 15px;
    font-size: 0.7rem;
    font-weight: 900;
    border-radius: 5px;
    z-index: 10;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(212, 255, 0, 0.3);
}

/* تأثير التوهج خلف الفيديو (Glow Effect) */
.cb-video-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(212, 255, 0, 0.15) 0%, transparent 70%);
    top: 0;
    left: 0;
    z-index: 1;
    filter: blur(40px);
    animation: pulseGlow 4s infinite alternate;
}

@keyframes pulseGlow {
    from { opacity: 0.5; transform: scale(1); }
    to { opacity: 1; transform: scale(1.2); }
}

/* --- التجاوب (Responsive) --- */
@media (max-width: 991px) {
    .cb-video-frame {
        width: 240px; /* أصغر قليلاً في الجوال */
        margin-bottom: 40px;
    }
}

/* خلنا نبني أفضل نسخة منك */

/* تنسيقات عامة للنصوص والزر */
.cb-cta-wrapper {
    margin-top: 30px;
    text-align: center;
}

.cb-ar-text {
    font-size: 1.3rem;
    font-weight: 800;
    color: #000; /* أو أبيض حسب خلفيتك */
    margin-bottom: 5px;
}

.cb-en-text {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 20px;
}

.cb-programs-btn {
    display: inline-block;
    padding: 14px 35px;
    background-color: #000;
    color: #fff !important;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* --- التحكم في الظهور حسب الشاشة --- */

/* في الجوال (أقل من 991px) */
@media (max-width: 991px) {
    /* .cb-programs-container {
        display: block !important;
        padding: 20px;
    } */

    .cb-programs-content {
        margin-bottom: 40px;
        text-align: center;
    }

    .cb-feature-item {
        justify-content: center; /* توازن العناصر في الجوال */
    }

    .cb-single-device-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; margin-top: 5rem; }
    
    .cb-video-frame {
        width: 260px; /* حجم ثابت للتحكم */
        margin: 0 auto;
    }
}

/* في الويب (أكبر من 992px) */
@media (min-width: 992px) {
    .cb-programs-container {
        display: flex !important;
        align-items: flex-start;
        gap: 60px;
    }

    .cb-programs-content {
        flex: 1.2;
        text-align: right;
    }

    .cb-single-device-wrapper {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .mobile-only { display: none !important; }
    .desktop-only { display: block !important; text-align: right; }
    
    .cb-video-frame {
        width: 300px;
    }
}







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

/* 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: var(--text-white);
    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;
}




/* السعر */
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-887391718 {
    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: var(--white) !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:var(--white) !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: #a3a2a0;
}

/* شارة "الأكثر طلباً" (أعلى اليمين) */
.most-popular {
    position: absolute;
    top: -12px;
    right: 25px; /* تثبيتها على اليمين */
    background:#a31212fc;
    color: #fff;
    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: var(--white) !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: var(--white) !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="52981198"] {
    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: var(--white) !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: var(--white) !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;
}

button.s-fast-checkout-button.outline.rtl{
  background-color : var(--white) !important;
}

/* إجبار الخلفية الشفافة على الامتلاء */
[outline] {
  background-color: #fff !important;
  border-radius: 10px !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: 85dvh;
  overflow-y: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

/* شريط التمرير */
.wizard-content::-webkit-scrollbar { width: 4px; }
.wizard-content::-webkit-scrollbar-thumb {
  background: var(--white);
  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:var(--white);
  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="113353959"],   /* الاسم */
[data-option-id="1883727302"],  /* تفاصيل الإصابة */
[data-option-id="52981198"], /* الإقرار الطبي */
[data-option-id="442285836"]
{
  grid-column: span 2 !important;
}

/* عناصر نصف المساحة */
[data-option-id="404377580"],  /* الجوال */
[data-option-id="1204653550"],   /* العمر */
[data-option-id="1668795368"],  /* نوع الرياضة */
[data-option-id="395403005"],   /* المركز الرياضي */
[data-option-id="1594809081"]
{
  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;
}

/* تنسيق العنوان العلوي */
.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: #ffffff; 
  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. الإقرار الطبي [52981198]
   ================================ */
[data-option-id="52981198"] {
  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="52981198"] .s-product-options-option-label b {
  visibility: hidden;
  position: relative;
  display: block;
  margin-bottom: 25px;
}
[data-option-id="52981198"] .s-product-options-option-label b::before {
  content: "إقرار طبي";
  visibility: visible;
  position: absolute;
  right: 0;
  color: var(--white);
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 8px;
}

/* نص الإقرار الطويل */
[data-option-id="52981198"] .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-52981198,
[data-option-id="52981198"] .s-product-options-option-label small {
  display: none !important;
}

/* Checkbox مخصص */
[data-option-id="52981198"] .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="52981198"] .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="52981198"] .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="52981198"].is-checked .s-product-options-option-content::after,
[data-option-id="52981198"] .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. سؤال الإصابة [1594809081] + التفاصيل [1883727302]
   ================================ */
/* [data-option-id="1594809081"] {
  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="1594809081"] .s-product-options-option-label b {
  color: var(--white) !important;
  display: block;
  margin-bottom: 20px;
  text-align: right;
} */

/* إخفاء العناصر الأصلية */
#option-1594809081,
[data-option-id="1594809081"] .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="1883727302"] {
  background: #121212 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 20px !important;
  padding: 25px !important;
  margin-top: 15px !important;
}

[data-option-id="1883727302"] .s-product-options-option-label b {
  color: var(--white) !important;
  font-size: 0.95rem;
}

#option-1883727302 {
  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="1883727302"] 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;
}