/* ==========================================================================
   D/A Studio: Arabic (right-to-left). Loaded only on /ar/ pages, after da.css.
   WordPress, Elementor and the theme already mirror most layouts (dir="rtl");
   this file covers Arabic typography and our own components.
   ========================================================================== */

/* ---------- 1. Arabic typography ---------- */
/* The Arabic font. On iPhone, iPad and Mac: SF Arabic, the system font (the one
   apple.com/ae-ar uses; Apple's licence doesn't allow hosting it, so it is only
   ever the visitor's own system font). Everywhere else: IBM Plex Sans Arabic,
   mapped onto the brand families in style.css (Latin stays Helvetica Neue / DM Sans).
   Icon fonts are left alone. */
html.da-apple[dir="rtl"] body,
html.da-apple[dir="rtl"] body *:not(i):not([class*="icon"]):not([class*="fa-"]):not([class^="fa"]):not(svg):not(svg *) {
	font-family: -apple-system, BlinkMacSystemFont, "SF Arabic", system-ui, sans-serif !important;
}

/* Arabic letters join: any letter-spacing pulls them apart, so none anywhere. */
html[dir="rtl"] body,
html[dir="rtl"] body * { letter-spacing: 0 !important; }

/* Arabic has taller letters and dots above/below: give lines room. */
html[dir="rtl"] body { line-height: 1.8; }
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] .elementor-text-editor { line-height: 1.85; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .pxl-item--title { line-height: 1.4 !important; }

/* Latin-only pieces keep their own direction: the giant "D/A STUDIO" hero title
   (one span per letter, which a right-to-left row would reverse), numbers with
   their "+" / "%" (+55, 95%), email addresses and phone numbers. */
html[dir="rtl"] .pxl-item--title.style-caption-timeline,
html[dir="rtl"] .da-stats__num,
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .da-stats__num { display: block; text-align: right; }

/* Animations written for a left-to-right row: the desktop projects showcase
   (slides pushed left while pinned) and the endless logo strips (track moved by
   -50%). Their track keeps a left-to-right order; the text inside stays Arabic.
   On phones and tablets the showcase is a normal swipe row, right to left. */
@media (min-width: 1025px) {
	html[dir="rtl"] .pxl-tabs-slip1.style-2 .pxl-item--content { direction: ltr; }
	html[dir="rtl"] .pxl-tabs-slip1.style-2 .pxl-list-item { direction: rtl; }
}
html[dir="rtl"] .da-partners,
html[dir="rtl"] .da-platforms { direction: ltr; }

/* ---------- 2. Header (assets/css/da.css) ---------- */
html[dir="rtl"] .da-brand { margin-right: 0; margin-left: 12px; }
html[dir="rtl"] .da-lang { margin-right: 0; margin-left: 8px; }
html[dir="rtl"] .da-row + .da-row::before { left: 0; right: 16px; }
html[dir="rtl"] .da-row:has(.da-row__icon) + .da-row::before { left: 0; right: 64px; }
html[dir="rtl"] .da-srow:hover { padding-left: 0; padding-right: 20px; }
@media (max-width: 1024px) {
	html[dir="rtl"] .da-burger { margin-left: 0; margin-right: 4px; }
	html[dir="rtl"] .da-bar > .da-lang { margin-left: 4px; margin-right: auto; }
	html[dir="rtl"] .da-bar { padding: 0 18px 0 6px; }
}
@media (max-width: 400px) {
	html[dir="rtl"] .da-bar { padding: 0 14px 0 5px; }
	html[dir="rtl"] .da-brand { margin-right: 0; margin-left: 4px; }
	html[dir="rtl"] .da-bar > .da-lang { margin-left: 2px; margin-right: auto; }
}

/* ---------- 3. Page components (style.css / da.css) ---------- */
/* "Services included" tabs: list and detail panel swap sides */
html[dir="rtl"] .pxl-tabs2 .pxl-tabs--inner .wrap-title { padding-right: 0; padding-left: 48px; }
html[dir="rtl"] .pxl-tabs2 .pxl-tabs--inner .pxl-tabs--content { padding-left: 0; padding-right: 48px; }
@media (max-width: 1024px) {
	html[dir="rtl"] .pxl-tabs2 .pxl-tabs--inner .wrap-title { padding: 0; }
	html[dir="rtl"] .pxl-tabs .pxl-tabs--content,
	html[dir="rtl"] .pxl-tabs .pxl-tabs--content .pxl-item--content { padding-right: 0 !important; margin-right: 0 !important; }
}
/* Value cards: the number badge sits in the other top corner */
html[dir="rtl"] .pxl-icons-carousel1 .pxl-swiper-slide .pxl-item--inner .pxl-icon--number { right: auto; left: 24px; }
html[dir="rtl"] .pxl-icons-carousel1 .pxl-swiper-slide .pxl-item--inner .title-box { padding-right: 0; padding-left: 52px; }
@media (max-width: 767px) {
	html[dir="rtl"] .pxl-icons-carousel1 .pxl-swiper-slide .pxl-item--inner .pxl-icon--number { right: auto; left: 18px; }
}
/* Square buttons: label from the right, arrow in the top-left corner pointing up-left */
html[dir="rtl"] .btn:not(.btn-stroke).btn-icon-box-square .pxl--btn-text { text-align: right; }
html[dir="rtl"] .btn:not(.btn-stroke).btn-icon-box-square .button-arrow-hover { right: auto; left: 14px; }
html[dir="rtl"] .btn:not(.btn-stroke).btn-icon-box-square .button-arrow-hover svg { transform: scaleX(-1); }
@media (max-width: 767px) {
	html[dir="rtl"] .btn:not(.btn-stroke).btn-icon-box-square .button-arrow-hover { right: auto; left: 10px; }
}
/* Stats: dividers on the other side */
html[dir="rtl"] .da-stat + .da-stat { border-left: 0; border-right: 1px solid var(--da-line); }
html[dir="rtl"] .da-stats__item { border-left: 0; border-right: 1px solid rgba(20, 20, 20, .14); }
html[dir="rtl"] .da-stats__item:first-child { border-right: 0; padding-left: clamp(14px, 2vw, 28px); padding-right: 0; }
@media (max-width: 1024px) {
	html[dir="rtl"] .da-stats__item:nth-child(odd) { border-right: 0; padding-right: 0; }
}
@media (max-width: 767px) {
	html[dir="rtl"] .da-stat + .da-stat { border-right: 0; }
}