/* Right-to-left overrides. Loaded only on Arabic pages, after the main
   stylesheet. Each block below mirrors a physical-direction rule from
   _astro/global.BM7v5tI2.css using its logical equivalent. */

html[dir="rtl"] {
  /* Archivo carries no Arabic glyphs, and CSP pins font-src to 'self', so no
     webfont can be added. Latin text still renders in Archivo; Arabic falls
     through to whichever of these the device actually has. */
  --font: "Archivo", "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Kufi Arabic",
          "Geeza Pro", "Arabic Typesetting", system-ui, sans-serif;
}

/* Letter-spacing on uppercase kickers mangles connected Arabic script. */
html[dir="rtl"] .kicker,
html[dir="rtl"] .num,
html[dir="rtl"] .svc-badge,
html[dir="rtl"] .p-badge,
html[dir="rtl"] .hero-name .coord {
  letter-spacing: 0;
}

/* --- nav ------------------------------------------------------------- */
html[dir="rtl"] .nav-links .hire {
  margin-left: 0;
  margin-inline-start: 8px;
}

@media (max-width: 900px) {
  html[dir="rtl"] .nav-links .hire {
    margin-inline-start: 0;
  }
}

/* --- hero / attack-path widget --------------------------------------- */
html[dir="rtl"] .hero-name .coord {
  right: auto;
  inset-inline-end: 0;
}

html[dir="rtl"] .ap-phase-hud {
  left: auto;
  inset-inline-start: 14px;
}

html[dir="rtl"] .ap-meta .c {
  border-right: 0;
  border-inline-end: 1px solid var(--line);
}

html[dir="rtl"] .ap-meta .c:last-child {
  border-inline-end: 0;
}

@media (max-width: 900px) {
  html[dir="rtl"] .ap-meta .c {
    border-inline-end: 0;
  }
}

html[dir="rtl"] .blogo .ms-sq {
  margin-right: 0;
  margin-inline-end: 6px;
}

html[dir="rtl"] .portrait .tick.a {
  left: auto;
  right: auto;
  inset-inline-start: 9px;
  border-bottom: 0;
  border-right: 0;
}

html[dir="rtl"] .portrait .tick.b {
  left: auto;
  right: auto;
  inset-inline-end: 9px;
  border-bottom: 0;
  border-left: 0;
}

/* --- lists with the '›' marker --------------------------------------- */
html[dir="rtl"] .svc li,
html[dir="rtl"] .info-card li,
html[dir="rtl"] .price-card li {
  padding-left: 0;
}

html[dir="rtl"] .svc li {
  padding-inline-start: 17px;
}

html[dir="rtl"] .info-card li {
  padding-inline-start: 16px;
}

html[dir="rtl"] .price-card li {
  padding-inline-start: 18px;
}

html[dir="rtl"] .svc li:before,
html[dir="rtl"] .info-card li:before,
html[dir="rtl"] .price-card li:before {
  content: "‹";
  left: auto;
  inset-inline-start: 0;
}

html[dir="rtl"] .tags {
  padding-left: 0;
  padding-inline-start: 51px;
}

@media (max-width: 900px) {
  html[dir="rtl"] .tags {
    padding-inline-start: 0;
  }
}

/* --- badges ----------------------------------------------------------- */
html[dir="rtl"] .svc-badge {
  right: auto;
  inset-inline-end: 18px;
}

html[dir="rtl"] .price-card .p-badge {
  right: auto;
  inset-inline-end: 20px;
}

/* --- process strip ---------------------------------------------------- */
html[dir="rtl"] .proc .step {
  border-right: 0;
  border-inline-end: 1px solid var(--line);
}

html[dir="rtl"] .proc .step:last-child {
  border-inline-end: 0;
}

@media (max-width: 900px) {
  html[dir="rtl"] .proc .step {
    border-inline-end: 0;
  }
}

html[dir="rtl"] .proc .step:before {
  left: auto;
  inset-inline-start: 0;
  transform-origin: 100% 50%;
}

/* --- prose / FAQ ------------------------------------------------------ */
html[dir="rtl"] .qa button {
  text-align: right;
  text-align: start;
}

html[dir="rtl"] .prose blockquote {
  border-left: 0;
  border-inline-start: 2px solid var(--flare-line);
  padding: 2px 0;
  padding-inline-start: 20px;
}

html[dir="rtl"] .tick-line .arrow {
  margin-right: 0;
  margin-inline-end: 8px;
  display: inline-block;
  transform: scaleX(-1);
}

/* --- breadcrumbs ------------------------------------------------------ */
/* The '/' separators are literal text, so the crumb row needs an explicit
   direction to keep the slashes between the right pair of labels. */
html[dir="rtl"] .crumbs {
  direction: rtl;
}

/* --- forms ------------------------------------------------------------ */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: start;
}

/* Email and URL fields stay LTR even inside an RTL page. */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"] {
  direction: ltr;
  text-align: start;
}