/* RTL overrides — only active when html[dir="rtl"].
   Safe to load site-wide.
*/

html[dir="rtl"] body{ direction: rtl; }

/* --------------------------------------------------------------------------
   Perks / Benefits grid (index: #features)
   The base styles in app.css are LTR-first (text-align:left + justify). In RTL
   (Persian), this causes misalignment and awkward bidi reordering around emojis
   and Latin tokens (VPN/Wi‑Fi/24/7). These overrides make the layout feel native.
   -------------------------------------------------------------------------- */
html[dir="rtl"] .perksTile,
html[dir="rtl"] .perksGrid,
html[dir="rtl"] .perk,
html[dir="rtl"] .perkTitle,
html[dir="rtl"] .perkDesc{
  direction: rtl;
}

html[dir="rtl"] .perk{ text-align: right; }

html[dir="rtl"] .perkTitle{
  text-align: right;
  unicode-bidi: plaintext;
}

html[dir="rtl"] .perkDesc{
  text-align: right;
  text-justify: auto;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  unicode-bidi: plaintext;
}

/* Header language dropdown */
html[dir="rtl"] .langDD__btn,
html[dir="rtl"] .langDD__item{
  flex-direction: row-reverse;
}
html[dir="rtl"] .langDD__menu{ text-align: right; }
html[dir="rtl"] .actions .langDD__menu{ left: 0 !important; right: auto !important; }

/* Icons inside buttons */
html[dir="rtl"] .btnIcon{ margin-left: 2px; margin-right: 0; }
html[dir="rtl"] .btnIcon--after{ margin-right: 6px; margin-left: 0; }

/* Tables */
html[dir="rtl"] th,
html[dir="rtl"] td{ text-align: right; }

/* Inputs that should stay LTR */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[data-dir="ltr"],
html[dir="rtl"] .ltr{
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

/* Checkout layout: order summary on the right, form on the left */
html[dir="rtl"] .checkoutInner{ flex-direction: row-reverse; }

/* Support chat FAB: move to the left in RTL */
html[dir="rtl"] #supportChatOpen{ right: auto !important; left: 18px !important; }
@media (max-width:480px){
  html[dir="rtl"] #supportChatOpen{ right: auto !important; left: 14px !important; }
}

/* Helper class for inline LTR snippets (URLs, codes) inside RTL paragraphs */
html[dir="rtl"] .bdi-ltr{ direction: ltr; unicode-bidi: isolate; }

/* Ticker / marquee: make it feel native for RTL (Persian) */
html[dir="rtl"] .tickerTrack{
  animation-direction: reverse;
}
html[dir="rtl"] .tickerItem{
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
  padding-right: 28px;
  padding-left: 84px;
}