/*!
 * Hydra TV — RTL overrides (rtl.css)
 * The reference design is Arabic-default / RTL-first, so main.css already reads
 * correctly right-to-left. Most of its layout uses logical properties
 * (inset-inline-*, padding-inline-*, margin-inline-*, text-align: start) which
 * flip automatically. This file re-expresses the handful of remaining physical
 * left/right declarations from main.css as logical properties so the RTL
 * rendering is explicit and robust. WordPress loads this file automatically for
 * RTL locales (is_rtl()); it is scoped to [dir="rtl"] so it never affects LTR.
 * Text domain: hydratv
 */

/* Skip link — physical `right: 10px` → logical start edge. */
[dir="rtl"] .skip-link {
  right: auto;
  left: auto;
  inset-inline-start: 10px;
}

/* Eyebrow inline icon — physical `margin-left` → logical. */
[dir="rtl"] .eyebrow i {
  margin-left: 0;
  margin-inline-start: 0.35rem;
}

/* Pricing plan tag badge — physical `right: 16px` → logical start edge. */
[dir="rtl"] .price-card .tag {
  right: auto;
  left: auto;
  inset-inline-start: 16px;
}

/* Pricing list bullets — physical `padding-right` + `right: 0` → logical. */
[dir="rtl"] .price-card li {
  padding-right: 0;
  padding-inline-start: 1.1rem;
}

[dir="rtl"] .price-card li::before {
  right: auto;
  left: auto;
  inset-inline-start: 0;
}

/* FAQ trigger — physical `text-align: right` → logical start. */
[dir="rtl"] .faq-item button {
  text-align: start;
}

/* Decorative hero orbs — keep them anchored to the correct visual corners. */
[dir="rtl"] .orb-1 {
  right: auto;
  left: auto;
  inset-inline-end: -110px;
}

[dir="rtl"] .orb-2 {
  right: auto;
  left: auto;
  inset-inline-start: -110px;
}

/* Floating hero chips — restate physical offsets logically. */
[dir="rtl"] .chip-1 {
  right: auto;
  left: auto;
  inset-inline-end: -14px;
}

[dir="rtl"] .chip-2 {
  right: auto;
  left: auto;
  inset-inline-start: -14px;
}

[dir="rtl"] .chip-3 {
  right: auto;
  left: auto;
  inset-inline-end: 14%;
}

/* Content prose alignment stays on the logical start edge in RTL. */
[dir="rtl"] .post-body,
[dir="rtl"] .page-body-wrap {
  text-align: start;
}

/* Supplemental section helpers keep logical alignment in RTL. */
[dir="rtl"] .comparison-table th,
[dir="rtl"] .comparison-table td {
  text-align: start;
}