/* =========================================================
   AffiliateShop — Mobile overrides (<= 576px + 480px + 360px)
   تحطّ هذا الملف بعد dark.css
   ========================================================= */

/* ===== القاعدة العامة للموبايل ===== */
@media (max-width: 576px){

  /* حواف داخلية مريحة */
  .container, .container-fluid{ padding-left:12px; padding-right:12px; }

  /* تايبو أصغر شوية */
  html, body{ font-size: 15px; }

  /* النافبار: البراند أصغر واللينكات بالبيض */
  .navbar .navbar-brand{ font-size: 1rem; }
  .navbar .nav-link{ color:#fff !important; }
  .navbar .navbar-toggler{ margin-inline-start:.25rem; }

  /* الهيرو */
  .hero{ padding: 14px !important; }
  .hero-illus{ min-height: 160px !important; }
  .hero .d-flex.gap-2{ flex-wrap: wrap; gap: .5rem !important; }
  .hero .d-flex.gap-2 .btn{ flex:1 0 48%; } /* جوج أزرار فالسطر */
  .badge-soft{ font-size:.8rem; padding:.3rem .5rem; }

  /* شريط البولت (الروتيتور + زر) */
  .bullet-bar{ gap: 8px; }
  .bullet-bar .bullet-rotator{ min-height:44px; height:auto; }
  .bullet-bar .bullet-btn{ flex-basis: 180px; } /* زر ثابت العرض */

  /* الكروت ديال المنتجات: جوج فالسطر */
  .card-product .img-wrap{ height: 150px !important; }
  /* فرض جوج أعمدة للـ col-sm-6 فالموبايل */
  .row .col-sm-6{ flex: 0 0 50%; max-width: 50%; }

  /* الجداول: ما يخرجوش برا الكارد */
  .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .table th, .table td{ white-space: nowrap; }
  /* خبّي أعمدة ثانوية باش تنقص الازدحام */
  .d-none.d-sm-table-cell{ display:none !important; }

  /* الكارد يقصّ المحتوى مع الزوايا */
  .card{ overflow:hidden; border-radius:12px !important; }
  .cinema-ticker{ border-radius:12px !important; }

  /* البادجات/التاجات أصغر شوية */
  .badge, .badge-soft{ font-size:.78rem; padding:.28rem .5rem; }

  /* تصحيح مسافات أسفل البلوكات */
  .card + .card{ margin-top: .75rem; }
}

/* ===== شاشات أصغر (<= 480px) ===== */
@media (max-width: 480px){
  /* خلي الأزرار فالهيرو جوج فالسطر بشكل مضمون */
  .hero .d-flex.gap-2 .btn{ flex:1 0 48%; min-width: 140px; }

  /* تصغير حقل العناوين داخل الجداول */
  .table .text-truncate{ max-width: 160px; }
}

/* ===== شاشات ضيقة بزاف (<= 360px) ===== */
@media (max-width: 360px){
  /* منتوج واحد فالسطر باش الصور تبان مزيان */
  .row .col-sm-6{ flex: 0 0 100%; max-width: 100%; }
  .card-product .img-wrap{ height: 190px !important; }
}

/* ===== تأكيد لون أيقونة الهامبورغر وكونتراست الزر ===== */
@media (max-width: 576px){
  .navbar .toggler-soft{
    padding: .35rem .5rem;
    border-radius: .6rem;
  }
  /* الشرَيطات بالبيض (نفس SVG ديال dark.css احتياطي) */
  nav.navbar .navbar-toggler .navbar-toggler-icon{
    width: 1.25rem; height: 1.25rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
    opacity: 1;
  }
}

/* ===== إصلاحات صغيرة إضافية ===== */

/* النصوص الطويلة تتكسّر داخل خلايا الجدول بدل ما توسّع العرض */
@media (max-width: 576px){
  .table td, .table th{
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* منع أي روّ/جريد بمارجينات سلبية يسبب overflow أفقي */
@media (max-width: 576px){
  .row{ margin-left: -8px; margin-right: -8px; }
  .row > [class^="col"]{ padding-left: 8px; padding-right: 8px; }
}




/* سكرول أفقي عام */
.scroll-x{
  display:block;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch; /* سكرول ناعم فالموبايل */
}

/* حواف تتدلّى بشوية (كتبان ليوزر بلي كاين سكرول) */
.scroll-x.fade-edges{ position:relative; }
.scroll-x.fade-edges::before,
.scroll-x.fade-edges::after{
  content:""; position:absolute; top:0; bottom:0; width:16px; pointer-events:none;
}
.scroll-x.fade-edges::before{ /* اليسار */
  left:0; background: linear-gradient(90deg, #0a0f1c, rgba(10,15,28,0));
}
.scroll-x.fade-edges::after{  /* اليمين */
  right:0; background: linear-gradient(270deg, #0a0f1c, rgba(10,15,28,0));
}

/* لو بغيتي العناصر تبقى فسطرة وحدة (باش يتفعّل السكرول) */
.nowrap > *{ white-space: nowrap; }

/* جداول عريضة: خليه ياخذ العرض لي بغا */
.table.w-auto{ width:auto; min-width: 640px; }

/* شكل سكرول بار لطيف */
.scroll-x::-webkit-scrollbar{ height:8px; }
.scroll-x::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:6px;
}

