/* ==========================================================================
   rtl.css — right-to-left overrides for the Arabic locale (/ar/).

   Loaded ONLY by the pages under /ar/, after main.css, so nothing here can
   affect the left-to-right locales. It corrects the places where main.css and
   the LTR build of Bootstrap use physical left/right properties, which flip
   the wrong way once the document carries dir="rtl".

   Everything is scoped to [dir="rtl"] so the file is inert if it is ever
   linked from an LTR page by mistake.
   ========================================================================== */

/* --------------------------------------------------------------- typography */
/* Satoshi carries no Arabic glyphs, so name Arabic-capable faces ahead of it
   and let the platform supply the first one it has. Satoshi is kept in the
   stack because Latin fragments (brand names, URLs, "NVMe", "cPanel") still
   render in it. */
[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro",
               "Arabic Typesetting", "Satoshi", ui-sans-serif, system-ui, sans-serif;
}

/* Arabic sits lower and needs a little more leading than Latin at the same
   size, otherwise descenders and diacritics collide. */
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { line-height: 1.45; }

/* Arabic has no lettercase, so tracking and uppercasing do nothing but damage. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .save-badge,
[dir="rtl"] .popular-tag,
[dir="rtl"] .lang-region,
[dir="rtl"] .err-badge {
  letter-spacing: normal;
  text-transform: none;
}

/* Latin/number runs inside Arabic text: keep them rendering left-to-right. */
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] samp,
[dir="rtl"] .price-amount,
[dir="rtl"] .price-period,
[dir="rtl"] .err-code,
[dir="rtl"] .vps-cmd,
[dir="rtl"] .ds-spec dd,
[dir="rtl"] .spec-value,
[dir="rtl"] .tld-price,
[dir="rtl"] .lang-region {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The domain field takes a hostname, which is always LTR. */
[dir="rtl"] #domainInput,
[dir="rtl"] .field-shell .prefix { direction: ltr; }
[dir="rtl"] #domainInput { text-align: left; }

/* Bootstrap is handled separately: RTL pages load bootstrap.rtl.min.css in
   place of bootstrap.min.css, so none of its utilities need patching here. */

/* ------------------------------------------------------- main.css flips */
[dir="rtl"] .sec-head.left { text-align: right; }

[dir="rtl"] .rs-seg { border-right: 0; border-left: 2px solid #fff; }

[dir="rtl"] .hero-vps .vps-cmd .p { margin-right: 0; margin-left: 8px; }

[dir="rtl"] .ds-spec dd { text-align: left; }

[dir="rtl"] .wp-gauge .spec-value i,
[dir="rtl"] .ec-metric .spec-value i { margin-left: 0; margin-right: 1px; }

[dir="rtl"] .domain-message,
[dir="rtl"] .tld-item .tld-meta { text-align: right; }

[dir="rtl"] .ds-plans-head span:last-child { text-align: left; }

[dir="rtl"] .os-group-n { margin-left: 0; margin-right: 10px; }

[dir="rtl"] .cmp tbody th { text-align: right; }

[dir="rtl"] .cta-step .check-mark { margin-left: 0; margin-right: auto; }

/* ------------------------------------------------- absolutely-placed pieces */
[dir="rtl"] .fc-1 { right: auto; left: -2%; }
[dir="rtl"] .fc-2 { left: auto; right: -6%; }
[dir="rtl"] .fc-3 { right: auto; left: 4%; }

[dir="rtl"] .ss-1 { left: auto; right: 0; }
[dir="rtl"] .ss-2 { right: auto; left: 0; }

[dir="rtl"] .float-card-tl { left: auto; right: -14px; }
[dir="rtl"] .float-card-br { right: auto; left: -10px; }

[dir="rtl"] .ds-row .popular-tag { right: auto; left: 26px; }

[dir="rtl"] .skip:focus,
[dir="rtl"] .skip:focus-visible { left: auto; right: 12px; }

@media (max-width: 991.98px) {
  [dir="rtl"] .fc-1 { right: auto; left: 0; }
  [dir="rtl"] .fc-2 { left: auto; right: 0; }
  [dir="rtl"] .ds-row .popular-tag { left: 24px; }
}

@media (max-width: 767.98px) {
  [dir="rtl"] .ds-row .popular-tag { left: 20px; }
}

/* ------------------------------------------------------------------- icons */
/* Directional glyphs point the wrong way once the page is mirrored. Chevrons
   that open a menu downward must NOT be flipped, so only the arrow marks are
   listed here. */
[dir="rtl"] .btn-arrow,
[dir="rtl"] .ico-lead { transform: scaleX(-1); }

/* Charts, gauges and the world map are data, not chrome: leave them LTR so
   the axes and the map itself keep their real orientation. */
[dir="rtl"] .spark-chart,
[dir="rtl"] .map-wrap,
[dir="rtl"] .cmp-scroll { direction: ltr; }
[dir="rtl"] .cmp-scroll table { direction: rtl; }

/* ------------------------------------------- transforms that must stay mirrored */
/* main.css nudges some elements on hover with translateX. Two problems in RTL:
   the nudge travels the wrong way, and where the element is also mirrored above
   the hover rule replaces the whole transform, wiping the mirror. Both are fixed
   by restating the full transform at a higher specificity — composing the nudge
   after scaleX(-1) also makes it travel leftward, which is correct here. */
[dir="rtl"] .btn:hover .btn-arrow { transform: scaleX(-1) translateX(4px); }

[dir="rtl"] .cta-step:hover { transform: translateX(-4px); }
[dir="rtl"] .f-col a:hover { transform: translateX(-3px); }

/* --------------------------------------------------------- pricing switch */
/* The knob is placed with a physical `left` and slides with a positive
   translateX; both need flipping so it rests on the right and travels left. */
[dir="rtl"] .switch::after { left: auto; right: 3px; }
[dir="rtl"] .switch[aria-checked="true"]::after { transform: translateX(-28px); }

/* ---------------------------------------------------------- logo marquee */
/* The track is duplicated and scrolled by half its width. In RTL the copy sits
   to the *left* of the original, so the travel must be positive. main.css sets
   `animation` as a shorthand, so overriding only the name keeps the 71s
   duration, the linear timing and the infinite count. */
@keyframes marquee-rtl { from { transform: translateX(0) } to { transform: translateX(50%) } }
[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }

/* ------------------------------------------------------------ hero diagram */
/* The .infra tier diagram positions every <text> with an absolute x. In SVG,
   `text-anchor:start` anchors to the *right* edge once direction is rtl, so
   each label ran leftward from its x — colliding with the icon circles and
   spilling out of the tier boxes. The geometry is authored left-to-right, so
   the diagram is treated like the charts and the map below: kept LTR, which
   restores the anchors. Each Arabic run inside still shapes right-to-left on
   its own, so the labels read correctly. */
[dir="rtl"] .infra > svg { direction: ltr; }

/* ------------------------------------------------------ footer lang picker */
/* Each row carries its own dir so the language name renders in its own script,
   but that also flips the flex axis on the Arabic row alone, leaving its code
   badge on the opposite side from the other seven. Reversing the LTR rows puts
   every name on the inline-end edge and every code on the inline-start edge,
   without touching the direction the text itself renders in. */
[dir="rtl"] .f-lang-menu .dropdown-item[dir="ltr"] { flex-direction: row-reverse; }