/* ============================================================
   BLACK VIPER LABS — Arabic / RTL typography & spacing
   Load after styles.css / home.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  --font-ar: 'Cairo', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-ar-display: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
}

html[dir='rtl'],
body.rtl {
  direction: rtl;
  text-align: right;
  font-family: var(--font-ar);
  line-height: 1.75;
  letter-spacing: 0 !important;
  word-spacing: 0.02em;
}

html[dir='rtl'] body,
body.rtl,
body.rtl p,
body.rtl span,
body.rtl a,
body.rtl li,
body.rtl label,
body.rtl input,
body.rtl textarea,
body.rtl button,
body.rtl select,
body.rtl td,
body.rtl th {
  font-family: var(--font-ar) !important;
  letter-spacing: 0 !important;
}

body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl .hc-title,
body.rtl .section-title,
body.rtl .hc-line1,
body.rtl .hc-line2,
body.rtl .hc-line3,
body.rtl .nav-brand-a,
body.rtl .nav-brand-b,
body.rtl .cat-v2-title,
body.rtl .page-hero-title {
  font-family: var(--font-ar-display) !important;
  letter-spacing: 0 !important;
  line-height: 1.35;
  font-weight: 800;
}

/* Reset Latin display spacing that breaks Arabic glyphs */
body.rtl .nav-link,
body.rtl .hc-pill,
body.rtl .hc-stat-l,
body.rtl .ticker,
body.rtl .section-tag,
body.rtl .btn,
body.rtl .hc-btn-primary,
body.rtl .hc-btn-video,
body.rtl .cat-tab,
body.rtl .breadcrumb,
body.rtl .footer-col h4,
body.rtl .announcement-bar {
  letter-spacing: 0 !important;
  word-spacing: normal;
}

body.rtl .hc-title { font-size: clamp(2.4rem, 7vw, 4.6rem); }
body.rtl .hc-sub { font-size: 1.05rem; line-height: 1.7; max-width: 34em; }
body.rtl .hc-cta { gap: 12px; }
body.rtl .hc-pills { gap: 8px; }
body.rtl .hc-pill { padding: 8px 14px; font-size: .85rem; }

/* Category menus scroll naturally right→left in Arabic */
body.rtl .hc-pills,
body.rtl .cat-submenu {
  direction: rtl;
}
body.rtl .cat-submenu-inner {
  direction: rtl;
  justify-content: flex-start;
}
body.rtl .hc-pills {
  justify-content: flex-start;
  mask-image: linear-gradient(270deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
body.rtl .cat-submenu {
  mask-image: linear-gradient(270deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
body.rtl .hc-pill,
body.rtl .cat-tab {
  scroll-snap-align: start;
}
body.rtl .section-title { margin-bottom: 1.1em; }
body.rtl .feat-card h3,
body.rtl .testi-head { flex-direction: row; }
body.rtl .testi-badge { letter-spacing: 0; }

/* Keep the brand physically left and controls physically right.
   Only the link sequence itself follows Arabic reading order. */
body.rtl .nav-inner { direction: ltr; flex-direction: row; }
body.rtl .nav-links-desktop { direction: rtl; flex-direction: row; }
body.rtl .nav-dropdown-menu { left: auto; right: 0; }
body.rtl .mobile-nav-link,
body.rtl .mobile-shop-toggle { text-align: right; }
body.rtl .mobile-shop-item:hover,
body.rtl .mobile-shop-item:focus-visible {
  transform: translateX(-2px);
}
body.rtl .mobile-shop-item:hover .mobile-shop-arrow,
body.rtl .mobile-shop-item:focus-visible .mobile-shop-arrow {
  transform: translateX(-3px);
}
body.rtl .mobile-shop-arrow { transform: scaleX(-1); }
body.rtl .cart-sidebar { left: 0; right: auto; transform: translateX(-100%); }
body.rtl .cart-sidebar.open { transform: translateX(0); }
body.rtl .hc-stats { flex-direction: row-reverse; }
body.rtl .float-badge { flex-direction: row-reverse; }
body.rtl .prod-price-row,
body.rtl .faq-q,
body.rtl .ci-item { flex-direction: row-reverse; }
body.rtl .prod-info,
body.rtl .story-grid,
body.rtl .video-section-inner { text-align: right; }
body.rtl .story-quote {
  border-left: none;
  border-right: 3px solid var(--g);
  border-radius: var(--r) 0 0 var(--r);
}
body.rtl .timeline::before { left: auto; right: 0; }
body.rtl .tm-item { padding: 0 36px 40px 0; }
body.rtl .tm-dot { left: auto; right: -7px; }

/* Brand scroller text */
body.rtl .brand-chip span { letter-spacing: 0 !important; font-weight: 700; }

/* Mobile Arabic comfort */
@media (max-width: 768px) {
  body.rtl { font-size: 15px; }
  body.rtl .hc-title { font-size: clamp(2rem, 10vw, 2.8rem); }
  body.rtl .nav-link { padding: 8px 10px; }
  body.rtl .container { padding-left: 16px; padding-right: 16px; }
  body.rtl .hc-cta { justify-content: stretch; }
  body.rtl .hc-btn-primary,
  body.rtl .hc-btn-video { width: 100%; justify-content: center; }
}