/* ============================================================================
 * Hotbar v3 — Minimal (Scrollbar-only, Light-only, Scoped, No-Collision)
 * محصور داخل .yg-hotbar2 فقط — بدون خلفية للقسم + مسافات صفر
 * ========================================================================== */

/* متغيرات محليّة للهوتبار فقط */
.yg-hotbar2{
  color-scheme: light; /* لا يؤثر خارج القسم */
  --ygh-text:#0f172a;
  --ygh-muted:#64748b;
  --ygh-border:#e5e7eb;
  --ygh-card:#fff;
  --ygh-primary:#FFB300;   /* أصفر مطابق لواجهة الموقع */
  --ygh-secondary:#4B1AB1;
  --ygh-accent:#FFD166;
}

/* ===== القسم العام (بدون خلفية ومسافات) ===== */
.yg-hotbar2{
  direction:rtl;
  color:var(--ygh-text);
  background: transparent;     /* لا خلفية */
  border-radius:0;             /* لا زوايا */
  margin:0;                    /* لا مسافة خارجية */
  padding:0;                   /* لا مسافة داخلية عليا/سفلى */
  box-shadow:none;             /* لا ظل */
}

/* حاوية داخلية */
.yg-hotbar2 .ygh-wrap{
  position:relative;
  padding-inline:12px;         /* هامش جانبي بسيط فقط */
}

/* ===== العنوان ===== */
.yg-hotbar2 .ygh-head{
  margin:0 0 6px;              /* تصغير المسافة تحت العنوان */
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.yg-hotbar2 .ygh-title{
  font-size:clamp(16px, 1.8vw, 18px);
  font-weight:800;
  text-align:center;
  line-height:1.2;
  margin:0;

  /* Fallback للمتصفحات التي لا تدعم background-clip:text */
  color: var(--ygh-primary);

  background: linear-gradient(135deg, var(--ygh-secondary), var(--ygh-primary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  padding:0 12px;
}

.yg-hotbar2 .ygh-title::before,
.yg-hotbar2 .ygh-title::after{
  content:"✦";
  color:var(--ygh-primary);
  font-size:13px;
  margin:0 6px;
  opacity:.8;
}

/* ===== الصف (قابل للسحب) ===== */
.yg-hotbar2 .ygh-row{
  list-style:none;
  margin:0;
  padding:8px 0;               /* مسافة رأسية خفيفة حول العناصر */
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;                      /* Firefox */
  scrollbar-color: var(--ygh-primary) transparent;
  touch-action: pan-x pan-y;
  scroll-snap-type:x proximity;
  scroll-padding-inline:12px;
  overscroll-behavior-x: contain;
}
.yg-hotbar2 .ygh-row::-webkit-scrollbar{
  height:4px;                  /* WebKit (سطح مكتب) */
  background:transparent;
}
.yg-hotbar2 .ygh-row::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, var(--ygh-primary), var(--ygh-secondary));
  border-radius:10px;
}
.yg-hotbar2 .ygh-row::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.05);
  border-radius:10px;
  margin:0 12px;
}

.yg-hotbar2 .ygh-item{
  scroll-snap-align:start;
  min-width:0;
  flex:0 0 auto;
  position:relative;
}
.yg-hotbar2 .ygh-item.is-oos{
  opacity:.7;
  filter:grayscale(0.3);
}

/* ===== البطاقة ===== */
.yg-hotbar2 .ygh-card{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:12px;
  row-gap:4px;
  min-width:180px;
  max-width:320px;
  padding:14px;
  background:var(--ygh-card);
  border:1px solid var(--ygh-border);
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
  overflow:hidden;
}

.yg-hotbar2 .ygh-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--ygh-secondary), var(--ygh-primary));
  transform:scaleX(0);
  transition:transform .25s ease;
}

.yg-hotbar2 .ygh-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(0,0,0,.12);
  border-color:var(--ygh-primary);
}
.yg-hotbar2 .ygh-card:hover::before{ transform:scaleX(1); }
.yg-hotbar2 .ygh-card:hover .ygh-name{ color:var(--ygh-secondary); }

/* اسم المنتج */
.yg-hotbar2 .ygh-name{
  grid-column:1/2; grid-row:1/2;
  margin:0;
  font:800 13.5px/1.3 system-ui;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(2 * 1.3em);
  transition:color .2s ease;
}

/* السعر */
.yg-hotbar2 .ygh-pricebox{
  grid-column:2/3; grid-row:1/3;
  display:flex; flex-direction:column; align-items:flex-end; gap:3px;
  align-self:start;
}

.yg-hotbar2 .ygh-price{
  font:900 14px/1 system-ui;

  /* Fallback */
  color:#0b0b0b;

  background: linear-gradient(135deg, var(--ygh-primary), var(--ygh-secondary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.yg-hotbar2 .ygh-old{
  font:800 11.5px/1 system-ui;
  text-decoration:line-through;
  opacity:.6;
  color:#333;
}

/* العد التنازلي */
.yg-hotbar2 .ygh-count{
  grid-column:1/2; grid-row:2/3;
  font:800 11.5px/1 system-ui; color:var(--ygh-muted);
  display:flex; align-items:center; gap:4px;
}
.yg-hotbar2 .ygh-count::before{ content:"🛒"; font-size:10px; }
.yg-hotbar2 .ygh-count.ygh-expired::before{ content:none; }
.yg-hotbar2 .ygh-count.ygh-expired{ display:none; } /* لإخفاء السطر بالكامل */

/* ===== الجوال (شريط تمرير أنحف) ===== */
@media (max-width:480px){
  .yg-hotbar2 .ygh-wrap{ padding-inline:10px; }

  .yg-hotbar2 .ygh-row{
    gap:8px;
    padding:8px 0;
    scrollbar-width:thin;
  }
  .yg-hotbar2 .ygh-row::-webkit-scrollbar{ height:2px; }  /* أنحف على الجوال */

  .yg-hotbar2 .ygh-card{
    min-width:160px;
    max-width:75vw;
    padding:12px;
    border-radius:12px;
  }
  .yg-hotbar2 .ygh-name{ font-size:12px; }
  .yg-hotbar2 .ygh-price{ font-size:13px; }
  .yg-hotbar2 .ygh-old{ font-size:10.5px; }
  .yg-hotbar2 .ygh-count{ font-size:10.5px; }

  .yg-hotbar2 .ygh-title{ font-size:14.5px; }
  .yg-hotbar2 .ygh-title::before, 
  .yg-hotbar2 .ygh-title::after{ font-size:12px; margin:0 6px; }
}

/* وصولية: تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .yg-hotbar2 .ygh-card{ transition:none !important; }
  .yg-hotbar2 .ygh-card:hover{ transform:none !important; box-shadow:0 2px 8px rgba(0,0,0,.06); }
}