/**
 * RTL layout overrides (AR, CKB). Loaded on all localized pages.
 * Logical properties are preferred in base CSS where possible.
 */

/* ---- hero ---- */
html[dir="rtl"] .hero-vignette {
  background:
    radial-gradient(120% 90% at 22% 18%, var(--accent-dim), transparent 55%),
    radial-gradient(90% 80% at 88% 90%, rgba(62, 139, 255, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(7, 8, 11, 0.4) 0%, transparent 22%, transparent 55%, var(--bg) 100%);
}

/* ---- marquee ---- */
html[dir="rtl"] .marquee-track {
  animation-direction: reverse;
}

/* ---- nav & links ---- */
html[dir="rtl"] .nav-links a::after {
  left: auto;
  inset-inline-start: 0;
}

html[dir="rtl"] .btn:hover svg {
  transform: scaleX(-1) translateX(-4px);
}

/* ---- division cards ---- */
html[dir="rtl"] .dcard {
  text-align: start;
}

html[dir="rtl"] .dcard .d-go {
  right: auto;
  inset-inline-end: 36px;
}

html[dir="rtl"] .dcard:hover .d-go {
  transform: translate(-3px, -3px);
}

/* ---- split sections ---- */
html[dir="rtl"] .split.rev .split-media {
  order: 1;
}

@media (max-width: 900px) {
  html[dir="rtl"] .split.rev .split-media {
    order: 0;
  }
}

/* ---- frames & panels ---- */
html[dir="rtl"] .frame-bar .lbl {
  margin-left: 0;
  margin-inline-start: 10px;
}

html[dir="rtl"] .dash .kpi .k-v small {
  margin-left: 0;
  margin-inline-start: 6px;
}

html[dir="rtl"] .unit .u-meta {
  margin-left: 0;
  margin-inline-start: auto;
}

html[dir="rtl"] .devcard .dc-head .dc-method {
  margin-left: 0;
  margin-inline-start: auto;
}

html[dir="rtl"] .copy-btn {
  right: auto;
  inset-inline-end: 8px;
}

/* ---- footer ---- */
html[dir="rtl"] .footer .big-mark {
  right: auto;
  inset-inline-start: -3%;
}

/* ---- flowboard overlay (division pages) ---- */
.flowboard-corner {
  position: absolute;
  inset-inline-start: 18px;
  top: 18px;
  z-index: 2;
}

/* ---- chrome (cookie, skip, cmdk) ---- */
html[dir="rtl"] .cookie {
  left: auto;
  inset-inline-start: 20px;
}

@media (max-width: 720px) {
  html[dir="rtl"] .footer-nl,
  html[dir="rtl"] .nl-form {
    align-items: stretch;
  }
}

@media (max-width: 560px) {
  html[dir="rtl"] .nl-form .btn,
  html[dir="rtl"] .submit-row .btn {
    width: 100%;
  }
  html[dir="rtl"] .contact-info .ci-links-row {
    align-items: flex-start;
  }
  html[dir="rtl"] .creative-grid {
    width: 100%;
  }
  html[dir="rtl"] .ctile .ct-l {
    text-align: start;
  }
}

@media (max-width: 460px) {
  html[dir="rtl"] .cookie {
    left: auto;
    right: auto;
    inset-inline: 12px;
  }
}

html[dir="rtl"] .skip:focus {
  left: auto;
  inset-inline-start: 8px;
}

html[dir="rtl"] .lang-drop {
  right: auto;
  inset-inline-end: 0;
}

html[dir="rtl"] .cmdk-item .ci-k {
  margin-left: 0;
  margin-inline-start: auto;
}

html[dir="rtl"] .sticky-cta {
  padding: 11px 22px 11px 14px;
}

/* ---- inner pages (pages.css) ---- */
html[dir="rtl"] .phero .glow {
  right: auto;
  inset-inline-end: -120px;
}

html[dir="rtl"] .phero .grid-bg {
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 70% 0%, #000, transparent 75%);
}

html[dir="rtl"] .prose li {
  padding-left: 0;
  padding-inline-start: 26px;
}

html[dir="rtl"] .prose li::before {
  left: auto;
  inset-inline-start: 4px;
}

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

html[dir="rtl"] .case-card .cc-badge {
  left: auto;
  inset-inline-start: 14px;
}

html[dir="rtl"] .faq summary .q-ico::before {
  left: auto;
  inset-inline-start: 2px;
}

html[dir="rtl"] .faq summary .q-ico::after {
  left: auto;
  inset-inline-start: 10px;
}

html[dir="rtl"] .wz-opt,
html[dir="rtl"] .wz-summary {
  text-align: start;
}

html[dir="rtl"] .svc .bars {
  margin-left: 0;
  margin-inline-start: auto;
}

html[dir="rtl"] .svc .up {
  text-align: start;
}

/* ---- division.css ---- */
html[dir="rtl"] .pl-stage .pl-s {
  margin-left: 0;
  margin-inline-start: auto;
}

html[dir="rtl"] .phone .pv small {
  margin-left: 0;
  margin-inline-start: 5px;
}