/* World Delete — capa RTL para árabe (Fusha). Se carga DESPUÉS de site.css/cat.css
   SOLO en las páginas /ar/. Espeja lo que usa propiedades físicas (left/right) y fija
   la tipografía árabe (Cairo). Todo scoped a [dir="rtl"] para no afectar a LTR. */

/* ---- Tipografía árabe (Inter/Gilroy no cubren árabe) ---- */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea,
[dir="rtl"] .gtext, [dir="rtl"] .h1pre {
  font-family: 'Cairo', 'Inter', system-ui, sans-serif;
}

/* ---- Base RTL: alineación al inicio (derecha) ---- */
[dir="rtl"] body { direction: rtl; }
[dir="rtl"] .mob-nav>a, [dir="rtl"] .mob-accbtn,
[dir="rtl"] .widget, [dir="rtl"] .rem-head h2, [dir="rtl"] .acc-wrap h2,
[dir="rtl"] .dark, [dir="rtl"] .dark .h2, [dir="rtl"] .dark .sub2,
[dir="rtl"] .prob-head h2, [dir="rtl"] .hiw-head h2, [dir="rtl"] .hiw-tab,
[dir="rtl"] .rev-left h2, [dir="rtl"] #sxResult,
[dir="rtl"] .band-top h2, [dir="rtl"] .help-l h2, [dir="rtl"] .drec-l h2,
[dir="rtl"] .faq-cat, [dir="rtl"] .faq-q, [dir="rtl"] .jobs-count,
[dir="rtl"] .aichat, [dir="rtl"] .rexp-btn, [dir="rtl"] .serp {
  text-align: right;
}

/* ---- Navegación / selector de idioma ---- */
[dir="rtl"] .menu>.langsel, [dir="rtl"] .nav-in>.langsel { margin-left: 0; margin-right: auto; }
[dir="rtl"] .langmenu { right: auto; left: 0; }
[dir="rtl"] .mob-foot .langsel .langmenu { left: auto; right: 0; }
[dir="rtl"] .ddarr { right: auto; left: 13px; transform: scaleX(-1); }
[dir="rtl"] .navdd::after { left: -20px; right: -20px; }

/* menú desplegable: icono y texto en orden RTL */
[dir="rtl"] .ddpanel a { text-align: right; }
[dir="rtl"] .ddpanel a .ddarr { transform: scaleX(-1); }

/* ---- Buscador / widget de resultados ---- */
[dir="rtl"] .gauge { border-right: none; border-left: 1px solid var(--line); padding-right: 0; padding-left: 16px; }
@media(max-width:620px){ [dir="rtl"] .gauge { border-left: none; } }
[dir="rtl"] .reclist li { padding-left: 0; padding-right: 5px; }
[dir="rtl"] .uremove { right: auto; left: 9px; }
[dir="rtl"] .ubadge { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .rcard { padding-right: 26px; padding-left: 52px; }
[dir="rtl"] .rcard .arr, [dir="rtl"] .rcard .arr-del { right: auto; left: 22px; }

/* ---- Modal de resultados (motor) ---- */
[dir="rtl"] .sx-close { right: auto; left: 18px; }
[dir="rtl"] .sxr-gauge { border-right: none; border-left: 1px solid rgba(255,255,255,.1); padding-right: 0; padding-left: 20px; }
@media(max-width:640px){ [dir="rtl"] .sxr-gauge { border-left: none; } }
[dir="rtl"] .serp-bar .u { margin-left: 0; margin-right: 12px; }

/* ---- Formularios (contacto, help, apply, prefijo tel) ---- */
[dir="rtl"] select, [dir="rtl"] .help-form select, [dir="rtl"] .apply-form select, [dir="rtl"] .phone-row select {
  padding-right: 16px; padding-left: 42px;
  background-position: left 15px center;
}
[dir="rtl"] .apply-form label.chk { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .apply-form label.chk input { left: auto; right: 0; }
[dir="rtl"] .apply-form .file img { margin-left: 0; margin-right: auto; }

/* ---- Iconos direccionales (flechas → ↗ › que deben apuntar a la izquierda) ---- */
[dir="rtl"] .btn-w, [dir="rtl"] .bside-cta a, [dir="rtl"] .rexp-btn .chev { unicode-bidi: plaintext; }
[dir="rtl"] .faq-q::after { right: auto; left: 16px; }
[dir="rtl"] .faq-count { right: auto; left: 14px; }
[dir="rtl"] .faq-search img { left: auto; right: 22px; }

/* ---- Categorías legales / TOC (para cuando se traduzcan las legales) ---- */
[dir="rtl"] .legal-toc { padding-right: 0; padding-left: 6px; }
[dir="rtl"] .legal-toc a { border-left: none; border-right: 3px solid transparent; }
[dir="rtl"] .legal-toc a.on { border-right-color: var(--red); }

/* ---- Empleo / varios margin-left:auto -> margin-right:auto ---- */
[dir="rtl"] .job-loc, [dir="rtl"] .jobd-meta .job-loc,
[dir="rtl"] .aichat-bar .live, [dir="rtl"] .rexp-btn .chev,
[dir="rtl"] .stat .num .u, [dir="rtl"] .gs-n .u { margin-left: 0; margin-right: auto; }
[dir="rtl"] .stat .num .u, [dir="rtl"] .gs-n .u { margin-right: 1px; }

/* ---- Contenido de artículo (por si se enlaza algo; el blog NO se traduce) ---- */
[dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .prose blockquote { border-left: none; border-right: 3px solid var(--red); padding-left: 0; padding-right: 16px; }

/* ---- Decoraciones del hero (swap de lados) ---- */
[dir="rtl"] .hero .deco.l { right: auto; left: calc(50% + 340px); }
[dir="rtl"] .hero .deco.r { left: auto; right: calc(50% + 340px); }

/* ---- Carrusel de reseñas: el marquee usa translateX (mecánica LTR); mantener LTR el
   track y RTL el texto de cada tarjeta, y espejar la máscara ---- */
[dir="rtl"] .rev-marquee { -webkit-mask: linear-gradient(270deg,transparent,#000 5%,#000 95%,transparent); mask: linear-gradient(270deg,transparent,#000 5%,#000 95%,transparent); }
[dir="rtl"] .rev-track, [dir="rtl"] .reviews-track { direction: ltr; }
[dir="rtl"] .reviews-wrap { direction: rtl; }
[dir="rtl"] .rev { direction: rtl; text-align: right; }
[dir="rtl"] .rev-arrows button .ar,
[dir="rtl"] .rev-arrows button svg { transform: scaleX(-1); }

/* ---- TODOS los marquees (footer badges, serp, etc.): mecánica LTR + clip del wrapper ----
   En RTL un track con width:max-content se extiende a la izquierda y desborda la página. */
[dir="rtl"] .fbadges { overflow: hidden; }
[dir="rtl"] .fbadges-track, [dir="rtl"] .serp-track, [dir="rtl"] [class*="-track"] { direction: ltr; }
[dir="rtl"] .rev, [dir="rtl"] .serp-row { direction: rtl; }

/* ---- Honeypots anti-spam: en LTR usan left:-9999px (fuera de pantalla, no desborda);
   en RTL ese offset SÍ cuenta como overflow horizontal. Los colapsamos (siguen ocultos
   para humanos y presentes para bots) sin posicionarlos fuera. ---- */
[dir="rtl"] .hp {
  position: absolute !important; left: auto !important; right: auto !important;
  width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important;
  overflow: hidden !important; opacity: 0 !important; border: 0 !important;
}

/* ---- Legales: tablas anchas -> scroll interno (no desbordan la página); textos largos parten ---- */
[dir="rtl"] table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
[dir="rtl"] .legal-body, [dir="rtl"] .legal-body p, [dir="rtl"] .legal-body li,
[dir="rtl"] .legal-toc, [dir="rtl"] main p, [dir="rtl"] main li { overflow-wrap: break-word; word-break: break-word; }

/* ---- Footer legal en RTL: alinear al borde de lectura (derecha) ---- */
[dir="rtl"] .flegal { align-items: flex-start; }
[dir="rtl"] .flrow { justify-content: flex-start; }

/* ================= LANDING /eliminar/ (clases .lp-* propias) en RTL ================= */
[dir="rtl"] .lp-step::before { left: auto; right: 22px; }
[dir="rtl"] .lp-fq { text-align: right; }
[dir="rtl"] .lp-fq::after { right: auto; left: 6px; }
[dir="rtl"] .lp-foot .lg a { margin-right: 0; margin-left: 16px; }
[dir="rtl"] .wd-wa { right: auto; left: 20px; }
/* El marquee anima con translateX (mecánica LTR) y usa tracks width:max-content
   dentro de .rev-row (overflow:hidden). En RTL la caja max-content se ancla a la
   DERECHA y su contenido se desborda a la izquierda -> se recorta y solo queda 1
   tarjeta visible. Forzamos LTR en TODO el subárbol del marquee (incluido .rev-row,
   que es quien ancla la caja) y dejamos RTL solo el texto de cada tarjeta. */
[dir="rtl"] .rev-mq, [dir="rtl"] .rev-row,
[dir="rtl"] .rev-mq .rev-track, [dir="rtl"] .rev-track.rev-l, [dir="rtl"] .rev-track.rev-r { direction: ltr; }
[dir="rtl"] .rev-mq .rev { direction: rtl; text-align: right; }
[dir="rtl"] .lp-hero-copy, [dir="rtl"] .lp-points li, [dir="rtl"] .lp-item, [dir="rtl"] .lp-step, [dir="rtl"] .lp-card h2 { text-align: right; }
[dir="rtl"] .lp-points li { padding-right: 0; }