/* ============================================================
   جداول كرة القدم | كوتش بندر
   جميع التنسيقات محصورة داخل .bandar-schedules
   كامل الاتجاه RTL (من اليمين لليسار)
   ============================================================ */
/* اطلبها مجددا */
section#reorder-section {
    display: none;
}
section#viewed-section {
    display: none;
}
main:has(#football-schedules) {
    background-color: black;
}


section#athletic-assessment {
    display: none;
}
/* section#athletic-assessment {
    display: none;
} */

/* ---------- متغيرات محصورة داخل القسم ---------- */
.bandar-schedules {
    --bs-gold: #C5A880;
    --bs-gold-10: rgba(197, 168, 128, 0.10);
    --bs-gold-20: rgba(197, 168, 128, 0.20);
    --bs-black: #000000;
    --bs-surface: #070707;
    --bs-border-subtle: rgba(255, 255, 255, 0.05);
    --bs-border-light: rgba(255, 255, 255, 0.10);
    --bs-text-primary: #FFFFFF;
    --bs-text-muted: rgba(255, 255, 255, 0.70);
    --bs-text-dim: rgba(255, 255, 255, 0.50);
    --bs-text-faint: rgba(255, 255, 255, 0.40);
    --bs-text-ghost: rgba(255, 255, 255, 0.20);
    --bs-font-body: 'Segoe UI', 'Tahoma', 'Arial', sans-serif;
    --bs-transition-smooth: 0.3s all cubic-bezier(0.16, 1, 0.3, 1);
    --bs-transition-fast: 0.2s ease;

    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    background-color: var(--bs-black);
    color: var(--bs-text-primary);
    font-family: var(--bs-font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ---------- Reset محصور داخل القسم فقط ---------- */
.bandar-schedules *,
.bandar-schedules *::before,
.bandar-schedules *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.bandar-schedules img { max-width: 100%; display: block; }
.bandar-schedules a { color: inherit; text-decoration: none; }
.bandar-schedules ul { list-style: none; }
.bandar-schedules button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ---------- ترويصة القسم ---------- */
.bs-header {
    text-align: center;
    margin-bottom: 3rem;
}

.bs-badge {
    display: inline-block;
    background-color: var(--bs-gold-10);
    color: var(--bs-gold);
    padding: 0.3rem 1rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 900;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--bs-gold-20);
}

.bs-title {
    font-size: 1.75rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    color: var(--bs-text-primary);
    line-height: 1.2;
}

.bs-subtitle {
    color: var(--bs-text-faint);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ============================================================
   نظام السلايدر
   ============================================================ */
.bs-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* ---------- حاوية السلايدر ---------- */
.bs-slider {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.5rem 0.25rem 1.5rem;
    scroll-padding: 0 0.25rem;
    width: 100%;
}

.bs-slider::-webkit-scrollbar { display: none; }

/* ---------- البطاقة ---------- */
.bs-card {
    min-width: 85vw;
    max-width: 85vw;
    scroll-snap-align: center;
    background: var(--bs-surface);
    border-radius: 1.5rem;
    border: 1px solid var(--bs-border-subtle);
    transition: var(--bs-transition-smooth);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.bs-card:hover {
    border-color: var(--bs-gold);
    box-shadow: 0 10px 30px rgba(197, 168, 128, 0.08);
    transform: translateY(-4px);
}

/* ---------- منطقة الصورة ---------- */
.bs-card-img {
    position: relative;
    height: 14rem;
    overflow: hidden;
}

.bs-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* filter: grayscale(100%) contrast(1.25); */
    transition: transform 0.5s ease;
}

.bs-card:hover .bs-card-img img {
    transform: scale(1.05);
}

.bs-card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bs-surface), rgba(0,0,0,0.2), transparent);
}

.bs-card-tag {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: var(--bs-gold);
    color: var(--bs-black);
    font-size: 0.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}

.bs-card-img-title {
    position: absolute;
    bottom: 0.75rem;
    right: 1rem;
    left: 1rem;
}

.bs-card-img-title h3 {
    font-size: 1.1rem;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    color: var(--bs-text-primary);
    line-height: 1.25;
}

/* ---------- محتوى البطاقة ---------- */
.bs-card-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bs-card-desc {
    color: var(--bs-text-muted);
    font-size: 0.75rem;
    line-height: 1.7;
    font-weight: 700;
    font-style: italic;
}

/* ---------- قسم المميزات (RTL: أيقونة ← نص) ---------- */
.bs-features {
    border-top: 1px solid var(--bs-border-subtle);
    padding-top: 1rem;
}

/* العنوان: [أيقونة] [نص] ← من اليمين لليسار */
.bs-features-title {
    color: var(--bs-gold);
    font-weight: 900;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.bs-features-title .bs-icon {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--bs-gold);
    flex-shrink: 0;
}

/* القائمة: كل سطر [✓ أيقونة] [نص]  */
.bs-features ul {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.bs-features li {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--bs-text-dim);
    font-size: 0.688rem;
    font-weight: 700;
    line-height: 1.5;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.bs-features li .bs-icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--bs-gold);
    flex-shrink: 0;
}

/* ---------- المعلومات الإضافية ---------- */
.bs-card-meta {
    border-top: 1px solid var(--bs-border-subtle);
    padding-top: 1rem;
    font-size: 0.625rem;
    color: var(--bs-text-faint);
    font-weight: 700;
    font-style: italic;
}

/* ---------- تذييل البطاقة ---------- */
.bs-card-footer {
    padding: 1.25rem;
    background-color: rgba(0,0,0,0.4);
    border-top: 1px solid var(--bs-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bs-price {
    color: var(--bs-gold);
    font-size: 0.875rem;
    font-weight: 900;
}

/* حاوية الأسعار لترتيبها بجانب بعضها */
.bs-price-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* المسافة بين السعرين */
}

/* تنسيق السعر القديم المشطوب باللون الأحمر */
.bs-price-old {
    color: var(--bs-text-dim); /* لون رمادي خفيف ليوحي بأنه قديم */
    font-size: 0.75rem; /* أصغر حجماً من السعر الحالي */
    font-weight: 700;
    text-decoration: line-through; /* وضع خط على النص */
    text-decoration-color: #FF3333; /* لون الشخطة باللون الأحمر الرياضي */
    opacity: 0.85;
}

/* تعديل بسيط على السعر الحالي ليظهر بوضوح أكبر */
.bs-price {
    color: var(--bs-gold);
    font-size: 0.95rem;
    font-weight: 900;
}

.bs-btn-buy {
    background-color: var(--bs-gold);
    color: var(--bs-black);
    font-weight: 900;
    font-size: 0.625rem;
    font-style: italic;
    padding: 0.5rem 1.25rem;
    transform: skewX(-8deg);
    transition: var(--bs-transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.bs-btn-buy:hover {
    transform: skewX(-8deg) scale(1.03);
    box-shadow: 0 0 25px rgba(197, 168, 128, 0.4);
}

/* ============================================================
   أسهم التنقل
   ============================================================ */
.bs-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 10;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--bs-border-light);
    color: var(--bs-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--bs-transition-fast);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.bs-arrow:hover {
    border-color: var(--bs-gold);
    color: var(--bs-gold);
    background-color: rgba(0,0,0,0.9);
}

.bs-arrow svg {
    width: 1.25rem;
    height: 1.25rem;
}

.bs-arrow-right { right: 0.25rem; }
.bs-arrow-left  { left: 0.25rem; }

/* ============================================================
   نقاط المؤشر
   ============================================================ */
.bs-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.bs-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    transition: var(--bs-transition-fast);
    padding: 0;
}

.bs-dot.active {
    background-color: var(--bs-gold);
    box-shadow: 0 0 8px rgba(197, 168, 128, 0.5);
    width: 1.5rem;
    border-radius: 9999px;
}

.bs-dot:hover { background-color: rgba(255,255,255,0.4); }
.bs-dot.active:hover { background-color: var(--bs-gold); }


/* ---------- نظام حجب بطاقات (قريباً) بالبلور ---------- */
.bandar-schedules .bs-card.bs-card-coming-soon {
    position: relative; /* لجعل طبقة الحجب تترتب فوق البطاقة بدقة */
    cursor: not-allowed;
    pointer-events: none; /* يمنع أي ضغط أو تفاعل نهائياً */
}

/* 1. طبقة البلور والخلفية الضبابية */
.bandar-schedules .bs-card.bs-card-coming-soon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(7, 7, 7, 0.65); /* خلفية داكنة خفيفة متناسقة مع الثيم */
    backdrop-filter: blur(12px); /* تأثير الضباب والبلور الفخم */
    -webkit-backdrop-filter: blur(12px); /* لضمان عمل التأثير على هواتف آيفون ومتصفح سفاري */
    z-index: 5; /* ليرتفع فوق كل محتويات البطاقة */
    border-radius: 1.5rem;
}

/* 2. نص وعلامة COMING SOON */
.bandar-schedules .bs-card.bs-card-coming-soon::after {
    content: 'COMING SOON'; /* النص بالإنجليزية ليناسب الطابع الرياضي الحماسي للموقع */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) skewX(-8deg); /* ميلان رياضي متناسق مع أزرار موقعك */
    z-index: 6; /* ليكون فوق طبقة البلور */
    
    /* تنسيق النص */
    color: var(--bs-gold);
    font-size: 1.25rem;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.15em;
    white-space: nowrap;
    
    /* تصميم الحاوية المحيطة بالنص */
    padding: 0.75rem 1.5rem;
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid var(--bs-gold);
    box-shadow: 0 0 20px rgba(197, 168, 128, 0.3);
}

/* إلغاء أي حركة أو تأثير حركي عند تمرير الماوس */
.bandar-schedules .bs-card.bs-card-coming-soon:hover {
    border-color: var(--bs-border-subtle);
    box-shadow: none;
    transform: none;
}
.bandar-schedules .bs-card.bs-card-coming-soon:hover .bs-card-img img {
    transform: none;
}
/* لضمان عدم تأثر نصوص البطاقة بعد تحويلها لرابط */
.bandar-schedules a.bs-card {
    color: inherit;
    text-decoration: none;
    display: flex; /* للحفاظ على الهيكل العام */
}

/* ============================================================
   أيقونات SVG
   ============================================================ */
.bs-icon { flex-shrink: 0; }

/* ============================================================
   سطح المكتب (768px+)
   ============================================================ */
@media (min-width: 768px) {
    .bandar-schedules { padding: 4rem 2rem; }
    .bs-header { margin-bottom: 4rem; }
    .bs-title { font-size: 2.5rem; }

    .bs-slider {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        overflow-x: visible;
        scroll-snap-type: none;
        padding: 0.5rem 0;
        align-items: stretch;
    }

    .bs-card {
        min-width: unset;
        max-width: unset;
        scroll-snap-align: unset;
    }

    .bs-arrow { display: none; }
    .bs-dots  { display: none; }
    .bs-card-img { height: 14rem; }
}

@media (min-width: 1024px) {
    .bandar-schedules { padding: 5rem 2rem; }
    .bs-card-img { height: 16rem; }
}

/* ============================================================
   أجهزة لوحية (480px - 767px)
   ============================================================ */
@media (min-width: 480px) and (max-width: 767px) {
    .bs-card { min-width: 65vw; max-width: 65vw; }
}



/* ============================================================
   احجز اختبارك الرياضي | كوتش بندر
   جميع التنسيقات محصورة داخل .bandar-assessment
   كامل الاتجاه RTL (من اليمين لليسار)
   ============================================================ */

/* ---------- متغيرات محصورة داخل القسم ---------- */
.bandar-assessment {
    --aa-gold: #C5A880;
    --aa-gold-10: rgba(197, 168, 128, 0.10);
    --aa-gold-15: rgba(197, 168, 128, 0.15);
    --aa-gold-20: rgba(197, 168, 128, 0.20);
    --aa-gold-40: rgba(197, 168, 128, 0.40);
    --aa-black: #000000;
    --aa-surface: #070707;
    --aa-accent: #0F0F0F;
    --aa-border-subtle: rgba(255, 255, 255, 0.05);
    --aa-border-light: rgba(255, 255, 255, 0.10);
    --aa-text-primary: #FFFFFF;
    --aa-text-secondary: rgba(255, 255, 255, 0.80);
    --aa-text-muted: rgba(255, 255, 255, 0.70);
    --aa-text-faint: rgba(255, 255, 255, 0.50);
    --aa-text-dim: rgba(255, 255, 255, 0.40);
    --aa-text-subtle: rgba(255, 255, 255, 0.30);
    --aa-text-ghost: rgba(255, 255, 255, 0.20);
    --aa-bg-glass: rgba(255, 255, 255, 0.05);
    --aa-bg-glass-2: rgba(255, 255, 255, 0.02);
    --aa-font-body: 'Segoe UI', 'Tahoma', 'Arial', sans-serif;
    --aa-transition-smooth: 0.3s all cubic-bezier(0.16, 1, 0.3, 1);
    --aa-transition-fast: 0.2s ease;
    --aa-transition-slow: 0.5s ease;
    --aa-transition-slower: 0.7s ease;
    --aa-max-w-narrow: 48rem;
    --aa-max-w-medium: 56rem;

    width: 100%;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    background-color: var(--aa-black);
    color: var(--aa-text-primary);
    font-family: var(--aa-font-body);
    line-height: 1.6;
    position: relative;
    overflow: hidden;
}

/* ---------- Reset محصور داخل القسم فقط ---------- */
.bandar-assessment *,
.bandar-assessment *::before,
.bandar-assessment *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.bandar-assessment img { max-width: 100%; display: block; }
.bandar-assessment a { color: inherit; text-decoration: none; }
.bandar-assessment ul { list-style: none; }
.bandar-assessment button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ---------- تأثير التوهج في الخلفية ---------- */
.aa-radar-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle, rgba(197,168,128,0.15) 0%, transparent 70%);
}

.aa-content {
    position: relative;
    z-index: 10;
    max-width: var(--aa-max-w-medium);
    margin: 0 auto;
}

.aa-content > * + * { margin-top: 3.5rem; }

/* ---------- ترويصة القسم ---------- */
.aa-header {
    text-align: center;
}

.aa-badge {
    display: inline-block;
    background-color: var(--aa-gold-10);
    color: var(--aa-gold);
    padding: 0.3rem 1rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 900;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--aa-gold-20);
}

.aa-title {
    font-size: 1.75rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    color: var(--aa-text-primary);
    line-height: 1.2;
}

.aa-subtitle {
    color: var(--aa-text-faint);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ============================================================
   حاوية الوسائط المرنة (تدعم الصور والفيديو بأي نسبة)
   ============================================================ */
.aa-media-wrapper {
    max-width: var(--aa-max-w-narrow);
    margin: 0 auto;
    width: 100%;
}

.aa-media-card {
    background: var(--aa-surface);
    border-radius: 1.5rem;
    border: 1px solid var(--aa-gold-20);
    padding: 0.5rem;
    overflow: hidden;
    transition: var(--aa-transition-smooth);
}

.aa-media-card:hover {
    border-color: var(--aa-gold);
    box-shadow: 0 10px 30px rgba(197, 168, 128, 0.08);
}

/*
   حاوية العرض - تتكيف مع أي نسبة أبعاد
   عن طريق ضبط max-height و aspect-ratio: auto
   تدعم الصور الطولية (9:16) والعرضية (16:9) والفيديو بنفس المرونة
*/
.aa-media-container {
    position: relative;
    width: 100%;
    max-height: 75vh;
    border-radius: 1.5rem; /* متناسق مع حواف بطاقات متجرك */
    overflow: hidden;
    background-color: var(--aa-black);
    display: block;
}

.aa-media-image-fixed {
    width: 100%;
    height: auto;
    display: block;
}

.aa-media-image-fixed img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* لملء المساحة بشكل رياضي فخم */
    display: block;
}

/* العناصر الداخلية (صورة أو فيديو) تغطي الحاوية بالكامل مع الحفاظ على النسب */
.aa-media-image,
.aa-media-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* الفيديو يملأ الحاوية */
.aa-media-video iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* إظهار عنصر واحد فقط في كل مرة */
.aa-media-image { display: none; }   /* الصورة مخفية افتراضيًا */
.aa-media-video { display: flex; }   /* الفيديو ظاهر افتراضيًا */

/* لاستخدام الصورة بدلاً من الفيديو: أضف الكلاس .show-image على .aa-media-container */
.aa-media-container.show-image .aa-media-image { display: flex; }
.aa-media-container.show-image .aa-media-video { display: none; }

/* ============================================================
   بيانات telemetry فوق الوسائط
   ============================================================ */
.aa-telemetry {
position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
    pointer-events: none;
    opacity: 0.85;
    z-index: 5;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%, rgba(0,0,0,0.4) 100%); /* فلتر داكن خفيف ليبرز نصوص التتبع البيضاء */
}
.aa-telemetry-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.563rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.1em;
}

.aa-telemetry-top { color: var(--aa-gold); }
.aa-telemetry-bottom { color: var(--aa-text-subtle); align-items: flex-end; }

.aa-live-dot {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.aa-telemetry {
  display: none;
}

.aa-live-dot-ping {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #DC2626;
    animation: aa-ping 1s cubic-bezier(0,0,0.2,1) infinite;
}

.aa-media-caption {
    color: var(--aa-text-faint);
    font-size: 0.625rem;
    text-align: center;
    font-weight: 700;
    font-style: italic;
    margin-top: 1rem;
}

/* سطح المكتب: تقييد العرض للوسائط الطولية */
@media (min-width: 768px) {
    .aa-media-wrapper {
        max-width: 28rem;
    }
}

/* ============================================================
   قسم الشرح
   ============================================================ */
.aa-explanation {
    max-width: var(--aa-max-w-narrow);
    margin: 0 auto;
    text-align: center;
}

.aa-explanation > * + * { margin-top: 2.5rem; }

.aa-explanation-inner > * + * { margin-top: 1rem; }

.aa-explanation-title {
    font-size: 1.5rem;
    font-weight: 900;
    font-style: italic;
    color: var(--aa-text-primary);
    text-transform: uppercase;
    line-height: 1.25;
}

.aa-explanation-desc {
    color: var(--aa-text-muted);
    font-size: 0.75rem;
    line-height: 1.625;
    font-weight: 700;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.aa-gold-text { color: var(--aa-gold); }

/* ============================================================
   شبكة البطاقات المعلوماتية
   ============================================================ */
.aa-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: right;
}
.aa-cards-grid {
  display: none;
}
/* ============================================================
   بطاقة معلوماتية
   ============================================================ */
.aa-info-card {
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--aa-bg-glass-2);
    border: 1px solid var(--aa-border-subtle);
    transition: all var(--aa-transition-fast);
}

.aa-info-card:hover {
    border-color: var(--aa-gold-20);
}

.aa-info-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.aa-info-card-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background-color: var(--aa-gold-10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--aa-gold);
    flex-shrink: 0;
}

.aa-info-card-icon .aa-icon {
    width: 1rem;
    height: 1rem;
}

.aa-info-card-title {
    color: var(--aa-text-primary);
    font-weight: 900;
    font-size: 0.75rem;
    font-style: italic;
}

.aa-info-card-desc {
    color: var(--aa-text-faint);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.625;
}

.aa-info-card.aa-info-card-full{
  display: none;
}

/* البطاقة العريضة (تأخذ العرض الكامل) */
.aa-info-card-full {
    text-align: right;
}

/* ============================================================
   زر الحجز
   ============================================================ */
.aa-cta-wrap {
    padding-top: 1.5rem;
    text-align: center;
}

.aa-cta-btn {
    background-color: var(--aa-gold);
    color: var(--aa-black);
    font-weight: 900;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1.25rem 4rem;
    transform: skewX(-8deg);
    transition: var(--aa-transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    text-decoration: none;
}

.aa-cta-btn:hover {
    transform: skewX(-8deg) scale(1.03);
    box-shadow: 0 0 25px rgba(197, 168, 128, 0.4);
}

.aa-cta-btn .aa-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* تنسيق ليبل المقاعد المتبقية فوق الصورة */
.bandar-assessment .aa-seats-badge {
    position: absolute;
    top: 3.5rem; /* يضعه أسفل الـ tracking id لكي لا يغطيه */
    right: 1.25rem;
    background-color: #c5a880; /* اللون النيون الرياضي الفاقع لجذب العين فوراً */
    color: #000000; /* نص أسود حاد وواضح جداً */
    font-size: 0.75rem;
    font-weight: 900;
    font-style: italic;
    padding: 0.4rem 1rem;
    border-radius: 0.375rem;
    transform: skewX(-8deg); /* ميلان رياضي متناسق تماماً مع بقية أزرار الموقع */
    box-shadow: 0 0 15px rgb(255 160 0 / 40%); /* توهج نيون خفيف */
    z-index: 6; /* ليكون أعلى من الصورة والـ telemetry */
    letter-spacing: 0.05em;
}

/* تعديل موضع نقطة التتبع الحية لتبتعد عن الليبل الجديد ولا تتداخل معه */
.bandar-assessment .aa-telemetry-top {
    z-index: 7;
}

/* ============================================================
   أيقونات
   ============================================================ */
.aa-icon { flex-shrink: 0; }

/* ============================================================
   حركات
   ============================================================ */
@keyframes aa-ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

/* ============================================================
   المسافات الداخلية المساعدة
   ============================================================ */
.aa-mb-1 { margin-bottom: 0.25rem; }
.aa-mb-4 { margin-bottom: 1rem; }

/* ============================================================
   حجم الخط المساعد
   ============================================================ */
.aa-text-sm { font-size: 0.875rem; }
.aa-text-10 { font-size: 0.625rem; }

/* ============================================================
   سطح المكتب (768px+)
   ============================================================ */
@media (min-width: 768px) {
    .bandar-assessment { padding: 5rem 2rem; }
    .aa-title { font-size: 2.5rem; }
    .aa-explanation-title { font-size: 1.875rem; }
    .aa-explanation-desc { font-size: 0.875rem; }
    .aa-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .aa-cta-btn { width: auto; }
}







/* Add custom CSS styles below */ 

/* تنسيق حاوية السعر في حال وجود خصم (الأكثر طلباً) */
.plan-price {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* مسافة مناسبة بين السعر الجديد والقديم والعملة */
    font-weight: bold;
}

/* تنسيق السعر الجديد */
.plan-price .new-price {
    color: #d4b483;
    font-size: 1.3em;
}

/* حاوية الرقم القديم لتحديد أبعاد الخط المائل بدقة */
.plan-price .old-price-wrapper {
    position: relative;
    color: #a0a0a0;
    font-size: 0.9em;
    display: inline-block;
}

/* رسم الخط المائل الأحمر فوق الرقم (1650) فقط */
.plan-price .old-price-wrapper::before {
    content: "";
    position: absolute;
    left: -2px; 
    right: -2px;
    top: 50%;
    height: 2px;
    background-color: #ff4d4d;
    transform: rotate(-15deg);
    z-index: 1;
}

/* تنسيق العملة المصاحبة */
.plan-price .currency {
    font-size: 0.8em;
    color: #666;
}





.home-page main {
    background-color: var(--cb-bg-black);
}
.one-vid{
  aspect-ratio : 2/1.46 !important;
}
/* بداية اللودر */


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



/* ============================================================
   الباكج المتكامل | كوتش بندر
   جميع التنسيقات محصورة داخل .bandar-bundles
   كامل الاتجاه RTL (من اليمين لليسار)
   ============================================================ */

/* ---------- متغيرات محصورة داخل القسم ---------- */
.bandar-bundles {
    --bb-gold: #C5A880;
    --bb-gold-10: rgba(197, 168, 128, 0.10);
    --bb-gold-15: rgba(197, 168, 128, 0.15);
    --bb-gold-20: rgba(197, 168, 128, 0.20);
    --bb-gold-30: rgba(197, 168, 128, 0.30);
    --bb-gold-50: rgba(197, 168, 128, 0.50);
    --bb-black: #000000;
    --bb-surface: #070707;
    --bb-surface-light: #0C0C0C;
    --bb-border-subtle: rgba(255, 255, 255, 0.05);
    --bb-border-light: rgba(255, 255, 255, 0.10);
    --bb-text-primary: #FFFFFF;
    --bb-text-muted: rgba(255, 255, 255, 0.70);
    --bb-text-dim: rgba(255, 255, 255, 0.50);
    --bb-text-faint: rgba(255, 255, 255, 0.40);
    --bb-text-ghost: rgba(255, 255, 255, 0.20);
    --bb-font-body: 'Segoe UI', 'Tahoma', 'Arial', sans-serif;
    --bb-transition-smooth: 0.3s all cubic-bezier(0.16, 1, 0.3, 1);
    --bb-transition-fast: 0.2s ease;

    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    background-color: var(--bb-black);
    color: var(--bb-text-primary);
    font-family: var(--bb-font-body);
    line-height: 1.6;
    position: relative;
    overflow: hidden;
    direction: rtl;
}

/* ---------- Reset محصور داخل القسم فقط ---------- */
.bandar-bundles *,
.bandar-bundles *::before,
.bandar-bundles *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.bandar-bundles img { max-width: 100%; display: block; }
.bandar-bundles a { color: inherit; text-decoration: none; }
.bandar-bundles ul { list-style: none; }
.bandar-bundles button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ---------- تأثير التوهج في الخلفية ---------- */
.bb-radar-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse at center, rgba(197,168,128,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.bb-content {
    position: relative;
    z-index: 10;
    max-width: 56rem;
    margin: 0 auto;
}

.bb-content > * + * { margin-top: 3rem; }

/* ---------- ترويصة القسم ---------- */
.bb-header {
    text-align: center;
}

.bb-badge {
    display: inline-block;
    background-color: var(--bb-gold-10);
    color: var(--bb-gold);
    padding: 0.3rem 1rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 900;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--bb-gold-20);
}

.bb-title {
    font-size: 1.75rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    color: var(--bb-text-primary);
    line-height: 1.2;
}

.bb-subtitle {
    color: var(--bb-text-faint);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

/* ============================================================
   شريط التوفير
   ============================================================ */
.bb-savings-bar {
    background: linear-gradient(135deg, var(--bb-gold) 0%, #8B6914 50%, var(--bb-gold) 100%);
    color: var(--bb-black);
    text-align: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 900;
    font-size: 0.875rem;
    font-style: italic;
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
    transform: skewX(-2deg);
    max-width: 36rem;
    margin: 0 auto;
}

.bb-savings-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-15deg);
    animation: bb-shimmer 3s infinite;
}

.bb-savings-amount {
    display: inline-block;
    background: var(--bb-black);
    color: var(--bb-gold);
    padding: 0.15rem 0.6rem;
    border-radius: 0.25rem;
    margin: 0 0.25rem;
    font-size: 0.9rem;
}

/* ============================================================
   منطقة المسرح (Stage)
   ============================================================ */
.bb-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* المنتجات المصغرة - مخفية على الجوال */
.bb-products-grid {
    display: none;
}

/* ---------- الصندوق الذهبي المركزي ---------- */
.bb-box-center {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23.5rem;
    height: 23.5rem;
    padding: 0.35rem;
    background: radial-gradient(circle at 30% 30%, rgba(197,168,128,0.4), var(--bb-black));
    border-radius: 1.25rem;
    border: 2px solid var(--bb-gold);
    box-shadow: 0 0 40px rgba(197, 168, 128, 0.25), 0 0 80px rgba(197, 168, 128, 0.08);
    animation: bb-float 4s ease-in-out infinite;
    margin: 0 auto;
}

.bb-box-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.875rem;
    display: block;
    position: relative;
    z-index: 1;
}

.bb-box-spark {
    position: absolute;
    font-size: 0.75rem;
    z-index: 2;
    animation: bb-sparkle 1.5s ease-in-out infinite;
    pointer-events: none;
}

.bb-box-spark:nth-child(1) { top: -0.35rem; right: -0.15rem; animation-delay: 0s; }
.bb-box-spark:nth-child(2) { bottom: -0.1rem; left: -0.15rem; animation-delay: 0.5s; }
.bb-box-spark:nth-child(3) { top: 0.25rem; left: -0.35rem; animation-delay: 1s; }

/* ---------- وصف الباكج للجوال ---------- */
.bb-mobile-desc {
    text-align: right;
    padding: 0 0.5rem;
}

.bb-mobile-desc-title {
    font-size: 1.25rem;
    font-weight: 900;
    font-style: italic;
    color: var(--bb-text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.bb-mobile-desc-sub {
    color: var(--bb-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.bb-mobile-desc-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.bb-mobile-desc-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bb-text-dim);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
}

.bb-mobile-desc-list li .bb-icon {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--bb-gold);
    flex-shrink: 0;
}

.bb-mobile-desc-footer {
    color: var(--bb-text-faint);
    font-size: 0.688rem;
    font-weight: 700;
    line-height: 1.6;
}

/* ---------- المنتجات المصغرة (سطح المكتب فقط) ---------- */
.bb-product-mini {
    background: var(--bb-surface);
    border-radius: 1rem;
    border: 1px solid var(--bb-border-subtle);
    overflow: hidden;
    transition: var(--bb-transition-smooth);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.bb-product-mini:hover {
    border-color: var(--bb-gold);
    box-shadow: 0 8px 24px rgba(197, 168, 128, 0.12);
    transform: translateY(-4px);
}

.bb-product-mini-img {
    position: relative;
    height: 5rem;
    overflow: hidden;
}

.bb-product-mini-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.bb-product-mini:hover .bb-product-mini-img img {
    transform: scale(1.08);
}

.bb-product-mini-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bb-surface), transparent);
}

.bb-product-mini-body {
    padding: 0.6rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.bb-product-mini-name {
    font-size: 0.563rem;
    font-weight: 900;
    font-style: italic;
    color: var(--bb-text-muted);
    line-height: 1.3;
    text-transform: uppercase;
}

.bb-product-mini-price {
    font-size: 0.625rem;
    font-weight: 900;
    color: var(--bb-gold);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------- خطوط التوصيل (سطح المكتب فقط) ---------- */
.bb-connectors {
    display: none;
}

/* ============================================================
   التسعير
   ============================================================ */
.bb-pricing {
    text-align: center;
}

.bb-pricing-breakdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    flex-direction: row-reverse;
}

.bb-pricing-individual {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--bb-text-dim);
    font-size: 0.75rem;
    font-weight: 700;
}

.bb-pricing-old {
    color: var(--bb-text-dim);
    font-size: 1.1rem;
    font-weight: 900;
    text-decoration: line-through;
    text-decoration-color: #FF3333;
    text-decoration-thickness: 2px;
    opacity: 0.85;
}

.bb-pricing-arrow {
    color: var(--bb-gold);
    font-size: 1.5rem;
    font-weight: 900;
}

.bb-pricing-bundle {
    color: var(--bb-gold);
    font-size: 2rem;
    font-weight: 900;
    font-style: italic;
}

.bb-pricing-currency {
    font-size: 0.7rem;
    color: var(--bb-gold);
    font-weight: 700;
    margin-right: 0.25rem;
}

.bb-savings-tag {
    display: inline-block;
    background: rgba(220, 38, 38, 0.15);
    color: #FF6B6B;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 900;
    margin-top: 0.5rem;
}

/* ============================================================
   زر CTA
   ============================================================ */
.bb-cta-wrap {
    text-align: center;
}

.bb-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--bb-gold);
    color: var(--bb-black);
    font-weight: 900;
    font-size: 0.875rem;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 2.5rem;
    transform: skewX(-8deg);
    transition: var(--bb-transition-fast);
    box-shadow: 0 0 35px rgba(197, 168, 128, 0.35);
    border-radius: 0;
    text-decoration: none;
}

.bb-cta-btn:hover {
    transform: skewX(-8deg) scale(1.04);
    box-shadow: 0 0 50px rgba(197, 168, 128, 0.55);
    color: var(--bb-black);
}

.bb-cta-btn .bb-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.bb-cta-sub {
    color: var(--bb-text-faint);
    font-size: 0.563rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

/* ============================================================
   حركات (Animations)
   ============================================================ */
@keyframes bb-shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

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

@keyframes bb-sparkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); }
}

@keyframes bb-pulse-glow {
    0%, 100% { box-shadow: 0 0 40px rgba(197, 168, 128, 0.25); }
    50% { box-shadow: 0 0 60px rgba(197, 168, 128, 0.4); }
}

/* ============================================================
   أيقونات
   ============================================================ */
.bb-icon { flex-shrink: 0; }

/* ============================================================
   سطح المكتب (768px+)
   ============================================================ */
@media (min-width: 768px) {
    .bandar-bundles { padding: 5rem 2rem; }
    .bb-title { font-size: 2.5rem; }
    .bb-savings-bar { font-size: 1rem; padding: 0.85rem 2rem; margin-bottom: 2rem;}

    /* المسرح: عرض أفقي للمنتجات حول الصندوق */
    .bb-stage {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto auto;
        gap: 0;
        align-items: center;
        justify-items: center;
        max-width: 44rem;
        margin: 0 auto;
    }

    .bb-products-grid {
        display: contents;
    }

    /* المنتج 1: أعلى اليمين */
    .bb-product-mini:nth-child(1) {
        grid-column: 3;
        grid-row: 1;
        width: 10rem;
    }

    /* المنتج 2: أعلى اليسار */
    .bb-product-mini:nth-child(2) {
        grid-column: 1;
        grid-row: 1;
        width: 10rem;
    }

    /* المنتج 3: أسفل اليمين */
    .bb-product-mini:nth-child(3) {
        grid-column: 3;
        grid-row: 3;
        width: 10rem;
    }

    /* المنتج 4: أسفل اليسار */
    .bb-product-mini:nth-child(4) {
        grid-column: 1;
        grid-row: 3;
        width: 10rem;
    }

    .bb-product-mini-img { height: 6rem; }

    /* الصندوق في المنتصف */
    .bb-box-center {
        grid-column: 2;
        grid-row: 2;
        width: 14rem;
        height: 14rem;
        padding: 0.4rem;
        margin: 1.5rem 0;
    }

    /* خطوط التوصيل */
    .bb-connectors {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
    }

    .bb-connectors svg {
        width: 100%;
        height: 100%;
    }

    .bb-connector-line {
        fill: none;
        stroke: var(--bb-gold-30);
        stroke-width: 1.5;
        stroke-dasharray: 6 4;
        transition: var(--bb-transition-fast);
    }

    .bb-stage:hover .bb-connector-line {
        stroke: var(--bb-gold-50);
        stroke-dashoffset: 0;
    }

    /* إخفاء وصف الجوال على سطح المكتب */
    .bb-mobile-desc { display: none; }
}

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