/* reels-arrows-v1 — LIVE
   Targets: #rl-home .hscroll / .hscroll-btn / .rl-row / .rl-th
   Brand: #6B1E2A / #7A1F2B
*/

html body #rl-home .hscroll,
html body .rl-home .hscroll {
  position: relative !important;
  display: block !important;
  align-items: unset !important;
  gap: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
}

html body #rl-home .hscroll > .rl-row,
html body .rl-home .hscroll > .rl-row {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  scroll-padding-inline: 52px !important;
  padding-inline: 4px !important;
}

/* Arrow buttons — overlay track edges, center on VIDEO THUMBNAIL only */
html body #rl-home .hscroll-btn,
html body .rl-home .hscroll-btn {
  position: absolute !important;
  z-index: 6 !important;
  top: var(--rl-th-mid, 148px) !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  flex: none !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 245, 230, 0.35) !important;
  background: #6B1E2A !important;
  color: #FFF8EE !important;
  font: 700 1.35rem/1 "Segoe UI", Tahoma, sans-serif !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-shadow:
    0 4px 14px rgba(11, 31, 53, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.12) inset !important;
  display: grid !important;
  place-items: center !important;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* RTL: السابق hugs inline-start (RIGHT). Use aria + :first-child for robustness. */
html body #rl-home .hscroll-btn[aria-label="السابق"],
html body .rl-home .hscroll-btn[aria-label="السابق"],
html body #rl-home .hscroll > .hscroll-btn:first-child,
html body .rl-home .hscroll > .hscroll-btn:first-child {
  inset-inline-start: 8px !important;
  inset-inline-end: auto !important;
  right: 8px !important; /* physical fallback for RTL start */
  left: auto !important;
}

/* التالي hugs inline-end (LEFT in RTL) */
html body #rl-home .hscroll-btn[aria-label="التالي"],
html body .rl-home .hscroll-btn[aria-label="التالي"],
html body #rl-home .hscroll > .hscroll-btn:last-child,
html body .rl-home .hscroll > .hscroll-btn:last-child {
  inset-inline-end: 8px !important;
  inset-inline-start: auto !important;
  left: 8px !important; /* physical fallback for RTL end */
  right: auto !important;
}

html body #rl-home .hscroll-btn:hover,
html body .rl-home .hscroll-btn:hover,
html body #rl-home .hscroll-btn:focus-visible,
html body .rl-home .hscroll-btn:focus-visible {
  background: #4E1520 !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(11, 31, 53, 0.35) !important;
  transform: translateY(-50%) scale(1.05) !important;
}

html body #rl-home .hscroll-btn:active,
html body .rl-home .hscroll-btn:active {
  transform: translateY(-50%) scale(0.97) !important;
  background: #3F1019 !important;
}

html body #rl-home .hscroll-btn:disabled,
html body .rl-home .hscroll-btn:disabled {
  opacity: 0.35 !important;
  cursor: default !important;
  transform: translateY(-50%) !important;
}

/* Soft edge fade over thumbnail band only */
html body #rl-home .hscroll::before,
html body #rl-home .hscroll::after,
html body .rl-home .hscroll::before,
html body .rl-home .hscroll::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  height: var(--rl-th-h, 296px) !important;
  width: 52px !important;
  z-index: 4 !important;
  pointer-events: none !important;
}
html body #rl-home .hscroll::before,
html body .rl-home .hscroll::before {
  right: 0 !important;
  left: auto !important;
  background: linear-gradient(to left, rgba(247, 242, 232, 0.92), transparent) !important;
}
html body #rl-home .hscroll::after,
html body .rl-home .hscroll::after {
  left: 0 !important;
  right: auto !important;
  background: linear-gradient(to right, rgba(247, 242, 232, 0.92), transparent) !important;
}

@media (max-width: 760px) {
  html body #rl-home .hscroll-btn,
  html body .rl-home .hscroll-btn,
  html body #rl-home .hscroll::before,
  html body #rl-home .hscroll::after,
  html body .rl-home .hscroll::before,
  html body .rl-home .hscroll::after {
    display: none !important;
  }
  html body #rl-home .hscroll > .rl-row,
  html body .rl-home .hscroll > .rl-row {
    scroll-padding-inline: 12px !important;
    padding-inline: 12px !important;
  }
}