/* FILE: assets/rtl-fixes.css
 * VERSION: 1.1.0
 * PURPOSE: RTL (Arabic) layout fixes — flip physical left/right properties
 *          that the LTR-master stylesheets hard-code. Loaded only on /ar/ pages.
 * NOTE:    Mirrors accent bars, arrows, table alignment, borders, shadows,
 *          gradients, hover transforms, and decorative pseudo-elements.
 */

/* ── 1. Card accent bars (physical left → right) ────────────────────── */

/* Home page cards — Astro build (index.D5PwY7mV.css) */
.page [dir="rtl"] .cloud-fit__grid li:before,
.page [dir="rtl"] .automation__item:before,
.page [dir="rtl"] .business-focus-card:before,
.page [dir="rtl"] .use-case:before,
.page [dir="rtl"] .tech-glossary__item:before {
  left: auto;
  right: 0;
  border-radius: 0 var(--home-card-radius) var(--home-card-radius) 0;
}

/* agentseffect hero poster bar */
[dir="rtl"] .hero-poster {
  padding-left: 0;
  padding-right: clamp(18px, 2.2vw, 32px);
}

[dir="rtl"] .hero-poster:before {
  left: auto;
  right: 0;
}

/* agentseffect hero-machine gradient bar */
[dir="rtl"] .hero-machine::before {
  left: auto;
  right: 0;
}

/* ── 2. Directional arrows ──────────────────────────────────────────── */

[dir="rtl"] .implementation-step__result:before {
  content: "\2190  ";
}

[dir="rtl"] .mid-cta__arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .mid-cta__link:hover .mid-cta__arrow {
  transform: scaleX(-1) translate(4px);
}

[dir="rtl"] .implementation-step:hover {
  transform: translate(-3px);
}

/* ── 3. Comparison table ────────────────────────────────────────────── */

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

[dir="rtl"] .comparison-table td {
  text-align: right;
}

@media (max-width: 820px) {
  [dir="rtl"] .comparison-table {
    overflow-x: auto;
  }
  [dir="rtl"] .comparison-table table {
    min-width: 100%;
  }
}

/* ── 4. Decorative gradients (flip horizontal direction) ────────────── */

.page [dir="rtl"] .u-eyebrow {
  background: linear-gradient(270deg, rgba(0, 164, 189, 0.06), transparent);
}

/* ── 5. Hover shadows (flip x-offset) ───────────────────────────────── */

[dir="rtl"] .questionnaire-route:hover > span,
[dir="rtl"] .questionnaire-route input:checked + span {
  box-shadow: -7px 7px color-mix(in srgb, var(--route-accent, var(--turquoise)) 22%, transparent);
}

[dir="rtl"] .questionnaire-progress li.is-active {
  box-shadow: -5px 5px color-mix(in srgb, var(--step-accent, var(--turquoise)) 20%, transparent);
}

[dir="rtl"] .booking-day.is-selected {
  box-shadow: -5px 5px color-mix(in srgb, var(--turquoise) 22%, transparent);
}

[dir="rtl"] .booking-slot.is-selected {
  box-shadow: -5px 5px color-mix(in srgb, var(--turquoise) 30%, transparent);
}

[dir="rtl"] .questionnaire-result {
  box-shadow: -8px 8px 0 var(--lime-pale);
}

/* ── 6. Borders (left → right) — questionnaire ─────────────────────── */

[dir="rtl"] .questionnaire-safety {
  border-left: none;
  border-right: 4px solid var(--orange);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

[dir="rtl"] .questionnaire-lead {
  border-left: none;
  border-right: 5px solid var(--turquoise-bright);
}

[dir="rtl"] .questionnaire-route > span {
  border-left: none;
  border-right: 5px solid var(--route-accent, var(--turquoise));
}

[dir="rtl"] .questionnaire-result {
  border-left: none;
  border-right: 6px solid var(--lime);
}

[dir="rtl"] .questionnaire-progress li {
  border-left: none;
  border-right: 4px solid var(--step-accent, var(--turquoise));
}

[dir="rtl"] .questionnaire-review-mark {
  right: auto;
  left: 20px;
}

[dir="rtl"] .questionnaire-form:before {
  left: auto;
  right: 0;
}

/* ── 7. Borders (left → right) — agentseffect pages ────────────────── */

[dir="rtl"] .product-machine-step {
  border-left: none;
  border-right: 4px solid var(--step-accent, var(--turquoise));
}

[dir="rtl"] .product-machine-step:nth-child(2) { margin-left: 0; margin-right: 26px; }
[dir="rtl"] .product-machine-step:nth-child(3) { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .product-machine-step:nth-child(4) { margin-left: 0; margin-right: 38px; }

[dir="rtl"] .short-answer-subagent {
  border-left: none;
  border-right: 4px solid var(--orange);
  padding-left: 0;
  padding-right: 18px;
}

[dir="rtl"] .evidence-card {
  border-left: none;
  border-right: 4px solid var(--orange);
}

[dir="rtl"] .form-status {
  border-left: none;
  border-right: 4px solid var(--orange);
}

[dir="rtl"] .answer-first {
  border-left: none;
  border-right: 6px solid var(--turquoise);
}

[dir="rtl"] .muse-oracle-page .muse-oracle-intro {
  border-left: none;
  border-right: 6px solid var(--turquoise);
}

[dir="rtl"] .subagent-hero-effect {
  border-left: none;
  border-right: 5px solid var(--turquoise);
}

[dir="rtl"] .subagent-flow span {
  border-left: none;
  border-right: 4px solid var(--turquoise);
}

[dir="rtl"] .subagent-flow span:nth-of-type(2) { border-right-color: var(--orange); }
[dir="rtl"] .subagent-flow span:nth-of-type(3) { border-right-color: var(--burgundy); }
[dir="rtl"] .subagent-flow span:nth-of-type(4) { border-right-color: var(--lime); }

[dir="rtl"] .subagent-effect-list li {
  padding-left: 0;
  padding-right: 16px;
}

[dir="rtl"] .subagent-effect-list li:before {
  left: auto;
  right: 0;
}

[dir="rtl"] .custdev-result-list li {
  border-left: 0;
  border-right: 5px solid var(--turquoise);
}

[dir="rtl"] .custdev-quote {
  border-left: 1px solid var(--line);
  border-right: 6px solid var(--burgundy);
}

[dir="rtl"] .feature-list li {
  padding-left: 0;
  padding-right: 28px;
}

[dir="rtl"] .feature-list li:before {
  left: auto;
  right: 0;
}

[dir="rtl"] .artifact-panel > div + div {
  border-left: none;
  border-right: 1px solid var(--line);
}

[dir="rtl"] .prose a::after {
  margin-left: 0;
  margin-right: 3px;
}

[dir="rtl"] .prose ul,
[dir="rtl"] .prose ol {
  padding-left: 0;
  padding-right: 1.5em;
}

[dir="rtl"] .status-marker {
  margin-left: 0;
  margin-right: 5px;
}

[dir="rtl"] .catalog-entry-data span + span {
  border-left: none;
  border-right: 1px solid var(--line);
}

[dir="rtl"] .final-cta-inner > .eyebrow {
  text-align: right;
}

/* ── 8. Passport / agent card (vertical sidebar flip) ───────────────── */

[dir="rtl"] .agent-passport {
  padding: 22px 62px 22px 18px;
}

[dir="rtl"] .agent-passport:after {
  left: auto;
  right: 0;
  border-radius: 0 13px 13px 0;
}

[dir="rtl"] .agent-passport:before {
  right: auto;
  left: 18px;
  background-position: left bottom;
}

[dir="rtl"] .agent-passport .passport-code {
  left: auto;
  right: 0;
}

[dir="rtl"] .passport-art {
  justify-self: start;
}

[dir="rtl"] .passport-points {
  padding-left: 0;
  padding-right: 1.2em;
}

[dir="rtl"] .passport-top {
  justify-content: flex-start;
}

/* ── 9. Subagent card top bar ───────────────────────────────────────── */

[dir="rtl"] .subagent-card:before {
  right: 0;
  left: 0;
}

/* ── 10. Blog / prose RTL fixes ─────────────────────────────────────── */

[dir="rtl"] .tldr ul {
  padding-left: 0;
  padding-right: 1.25rem;
}

/* ── 11. Skip link (RTL corner) ─────────────────────────────────────── */

[dir="rtl"] .skip-link {
  left: auto;
  right: -100vw;
  border-radius: 0 0 0 var(--radius-sm);
}

[dir="rtl"] .skip-link:focus {
  right: 0;
}

/* ── 12. Mobile-specific fixes ──────────────────────────────────────── */

@media (max-width: 60rem) {
  [dir="rtl"] .home-hero-v1__infographic {
    height: auto;
    max-height: none;
  }
}

@media (max-width: 44rem) {
  [dir="rtl"] .site-header__nav {
    justify-content: flex-end;
  }

  [dir="rtl"] .mid-cta {
    align-items: stretch;
    justify-content: end;
    text-align: end;
  }

  [dir="rtl"] .product-machine-head span {
    text-align: right;
  }

  [dir="rtl"] .hero-poster {
    padding-left: 0;
    padding-right: 14px;
  }
}

/* ── 13. Home hero decorative pseudo-elements ───────────────────────── */

.page [dir="rtl"] .home-cloud-fit:after {
  right: auto;
  left: 0;
  background: repeating-linear-gradient(12deg, var(--color-turquoise), var(--color-turquoise) 2px, transparent 2px, transparent 28px);
}

.page [dir="rtl"] .home-use-cases:after {
  left: auto;
  right: 0;
  background: repeating-linear-gradient(-8deg, var(--color-wine), var(--color-wine) 1.5px, transparent 1.5px, transparent 32px);
}

.page [dir="rtl"] .home-faq:after {
  right: auto;
  left: 0;
  background: repeating-linear-gradient(15deg, var(--color-turquoise), var(--color-turquoise) 1.5px, transparent 1.5px, transparent 30px);
}

/* ── 14. CustDev flow arrows (agentseffect) ─────────────────────────── */

[dir="rtl"] .custdev-flow > div:not(:last-child)::after {
  right: auto;
  left: -9px;
  content: "\2190";
}

/* ── 15. Examples page cards ────────────────────────────────────────── */

[dir="rtl"] .examples-project-card {
  border-left: none;
  border-right: 6px solid var(--color-turquoise);
}

[dir="rtl"] .examples-project-card--featured {
  border-right-color: var(--color-wine);
}

[dir="rtl"] .examples-project-card__highlights li:before {
  left: auto;
  right: 0;
}

/* ── 16. Blog hero pillars ──────────────────────────────────────────── */

[dir="rtl"] .blog-hero__pillar {
  border-left: none;
  border-right: 0.3rem solid var(--pillar-accent);
}

[dir="rtl"] .blog-hero__pillars:before {
  left: auto;
  right: 1.64rem;
}

/* ── 17. Matrix table ───────────────────────────────────────────────── */

[dir="rtl"] .matrix th,
[dir="rtl"] .matrix td {
  text-align: right;
}

/* ── 18. Demo banner, run timeline, custom development ──────────────── */

[dir="rtl"] .demo-banner {
  border-left: none;
  border-right: 5px solid var(--orange);
}

[dir="rtl"] .run-timeline {
  padding-left: 0;
  padding-right: 20px;
  border-left: none;
  border-right: 2px solid var(--line);
}

[dir="rtl"] .custom-development-data div {
  border-left: none;
  border-right: 5px solid var(--step-accent, var(--turquoise));
}

/* ── 19. Oracle agent page ──────────────────────────────────────────── */

[dir="rtl"] .oracle-hero-model-note {
  border-left: none;
  border-right: 3px solid var(--turquoise);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

[dir="rtl"] .oracle-method-flow li {
  border-left: none;
  border-right: 4px solid var(--turquoise);
}

[dir="rtl"] .oracle-method-flow li:nth-child(1) { border-right-color: var(--turquoise); }
[dir="rtl"] .oracle-method-flow li:nth-child(2) { border-right-color: var(--orange); }
[dir="rtl"] .oracle-method-flow li:nth-child(3) { border-right-color: var(--burgundy); }
[dir="rtl"] .oracle-method-flow li:nth-child(4) { border-right-color: var(--lime); }
[dir="rtl"] .oracle-method-flow li:nth-child(5) { border-right-color: var(--turquoise); }

[dir="rtl"] .oracle-hero-answer {
  border-left: none;
  border-right: 4px solid var(--burgundy);
}

[dir="rtl"] .proto-hero-panel .oracle-method-flow li {
  border-left: none;
  border-right: 4px solid var(--turquoise);
}

[dir="rtl"] .proto-hero-panel .oracle-method-flow li:nth-child(2) { border-right-color: var(--orange); }
[dir="rtl"] .proto-hero-panel .oracle-method-flow li:nth-child(3) { border-right-color: var(--burgundy); }
[dir="rtl"] .proto-hero-panel .oracle-method-flow li:nth-child(4) { border-right-color: var(--lime); }

[dir="rtl"] .proto-hero-panel .oracle-hero-answer {
  border-left: none;
  border-right: 4px solid var(--burgundy);
}

/* ── 20. Mail assistant page ────────────────────────────────────────── */

[dir="rtl"] .amail-table th,
[dir="rtl"] .amail-table td {
  text-align: right;
}

[dir="rtl"] .amail-quote {
  border-left: none;
  border-right: 5px solid var(--lime);
}

@media (max-width: 800px) {
  [dir="rtl"] .amail-quote {
    text-align: right;
  }
}

[dir="rtl"] .amail-demo-decision {
  border-left: none;
  border-right: 4px solid var(--lime);
}

/* ── 21. Workflow steps & run timeline dots ─────────────────────────── */

[dir="rtl"] .workflow-steps-horizontal .workflow-step::before {
  left: auto;
  right: 12px;
}

[dir="rtl"] .run-stage::before {
  left: auto;
  right: -28px;
}

/* ── 22. Catalog entry code ─────────────────────────────────────────── */

[dir="rtl"] .catalog-entry-code {
  left: auto;
  right: -54px;
}

@media (max-width: 800px) {
  [dir="rtl"] .catalog-entry-code {
    left: auto;
    right: -47px;
  }
}