/* ═════════════════════════════════════════════════════════════════════
   ARABIC TYPOGRAPHY
   Antonio and Poppins have no Arabic letters, so Cairo (loaded in each
   page head) sets every word. Numbers that are part of the design
   (counters, indexes, clocks) keep Antonio. Font Awesome icons are left
   alone (they all carry an fa- class).
   ═════════════════════════════════════════════════════════════════════ */
[lang="ar"] body,
[lang="ar"] body :is(h1, h2, h3, h4, h5, h6, p, a, span, b, strong, em, small, li, div, button, input, textarea, select, option, label, figcaption, blockquote, nav):not([class*="fa-"]),
[lang="ar"] ::placeholder {
  font-family: "Cairo", sans-serif !important;
}

html[lang="ar"] body :is(.fact-n, .stat-number, .svc4-num, .ab4-eyebrow span, .ab4-clock__time, .ab4-ledger__n, .ab4-row__n, .ab4-track__n, .sv4-count, .sv4-path a span, .pd3-stats b, .sv4-col__n, .pd3-lb__count, .wall-count, .hero3-amp):not([class*="fa-"]) {
  font-family: "Antonio", "Cairo", sans-serif !important;
}

/* Latin tracking pulls Arabic letters apart and breaks their joins. */
[lang="ar"] body,
[lang="ar"] body *:not([class*="fa-"]),
[lang="ar"] ::placeholder {
  letter-spacing: 0 !important;
  word-spacing: normal !important;
}

/* Numbers such as "50+" and "7M+" keep their order inside Arabic text. */
[lang="ar"] .stat-number {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Phone, email and link fields are typed left to right. */
[lang="ar"] input[type="tel"],
[lang="ar"] input[type="email"],
[lang="ar"] input[type="url"] {
  direction: ltr;
  text-align: right;
}

/* "19 brands" beside each country on the home logo wall: the word comes
   from v3.js (data-unit), since Arabic changes it with the number. */
[lang="ar"] .wall-count::after {
  content: attr(data-unit);
  font-family: "Cairo", sans-serif;
  font-size: 13px;
}

/* the lightbox counter reads "1 / 5", as in English */
[lang="ar"] .pd3-lb__count {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Labels set at 10–11px for Latin capitals are too small in Arabic. */
[lang="ar"] :is(.label-eyebrow, .hero-label, .cta4-eyebrow, .ab4-eyebrow, .ph3-crumb, .footer-col h4, .work-card__tag, .fact-q, .ab4-track__when, .sv4-need__lead, .sv4-fit b, .sv4-hint, .sv4-swipe, .pd3-chip small, .pd3-nav small, .pd3-video__play small, .who3-city small, .cta4-line small, .hero3-card__cap small, .ab4-reel__cap small, .ab4-strip__cap small, .sv4-media__cap, .sv4-need__img figcaption) {
  font-size: 12.5px !important;
}

[lang="ar"] :is(.hero-cta, .hero3-ghost, .btn-outline-brand, .cta4-btn, .cr3-role a, .pd3-links a, .pd3-video__out, .filter-btn, .btn-submit-career) {
  font-size: 13px !important;
  font-weight: 700;
}

/* Arabic letters rise and fall further than Latin capitals: give the
   display lines more room so nothing is cut by overflow or the marker. */
[lang="ar"] :is(.hero3-title, .ab4-title, .ph3-title, .cta4-title, .who3-title, .facts-title, .svc4-title, .wall-title, .sv4-title, .ab4-row__t, .sv4-need__q, .sv4-col h3, .ab4-track h3) {
  line-height: 1.25 !important;
}

[lang="ar"] .hero3-move,
[lang="ar"] .ab4-move {
  line-height: 1.3;
  padding: 0 0.14em;
}

[lang="ar"] .hero3-move::before,
[lang="ar"] .ab4-move::before {
  inset: 0.06em -0.04em 0 -0.04em;
}

/* project breadcrumb "Projects / client": the inner pair had its gap from
   Latin letter-spacing only */
[lang="ar"] .ph3-crumb > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* "Recent work" title: no Splitting on Arabic pages, so it gets a plain
   bold heading at the size of the other section titles. */
[lang="ar"] #latest-work .section-head h2 {
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 700;
  line-height: 1.3;
}


/* ═════════════════════════════════════════════════════════════════════
   RTL MIRRORING
   Loaded after includes/css/v3.css on the Arabic pages
   (<html lang="ar" dir="rtl">). The shared stylesheets are written for
   LTR; this section mirrors every physical left/right value that changes
   the look in RTL. Flex and grid rows already flip on their own, and
   symmetric values (left:0;right:0, left:50% + translateX(-50%) centring,
   margin: 0 auto …) need nothing.

   Rules of thumb used below:
   - every override is scoped under [dir="rtl"], so it is one attribute
     more specific than the rule it mirrors (and keeps its !important);
   - the original side is reset explicitly (e.g. left:auto; right:16px),
     and the reset is repeated inside the same @media queries the
     original uses, because a higher-specificity RTL rule would otherwise
     beat the original's breakpoint resets;
   - light-mode colour fixes for a mirrored border are written as
     [dir="rtl"][data-theme="light"] (both attributes sit on <html>);
   - looping animations get their own v3ar- keyframes.
   Arrow icons in static markup are swapped by the converter; arrow
   icons built by v3.js (lightbox) are swapped in JS.
   ═════════════════════════════════════════════════════════════════════ */


/* ───────── keyframes ───────── */

/* hero marker "move.": wipe in from the right (LTR: hero3Reveal, from the left) */
@keyframes v3ar-hero3Reveal {
  from {
    clip-path: inset(-5% -6% -5% 100%);
  }
  to {
    clip-path: inset(-5% -6% -5% -6%);
  }
}

/* About hero pictures: wipe in from the right (LTR: ab4Pic) */
@keyframes v3ar-ab4Pic {
  from {
    clip-path: inset(0 0 0 100%);
    transform: scale(1.3);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
}

/* About reel. v3.js appends a clone of every item, so the track is two
   identical halves. In RTL the track is anchored to the right edge and the
   clones overflow to the left, so the loop travels right by half its width
   (LTR: ab4Reel, translateX(-50%)). */
@keyframes v3ar-ab4Reel {
  to {
    transform: translateX(50%);
  }
}

/* Marquee strip: same two-halves loop, mirrored (LTR: marqueeScroll) */
@keyframes v3ar-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}


/* ───────── old theme chrome (style.css / theme.css / responsive.css) ───────── */

/* nav link underline grows from the right */
[dir="rtl"] .nav-link::after {
  transform-origin: right;
}

/* round nav buttons: the 8px / 6px spacer moves to the other side */
[dir="rtl"] #changeLang,
[dir="rtl"] #themeToggle {
  margin-left: 0;
  margin-right: 8px;
}

@media (max-width: 991.98px) {
  [dir="rtl"] #themeToggle {
    margin-right: 6px;
  }
}

/* mobile drawer: the toggle sits on the left in RTL, so the drawer slides
   in from the left edge; its inner border and the links' entrance follow */
[dir="rtl"] .mobile-drawer {
  right: auto;
  left: 0;
  transform: translateX(-100%);
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

[dir="rtl"] .mobile-drawer.is-open {
  transform: translateX(0);
}

[dir="rtl"][data-theme="light"] .mobile-drawer {
  border-right-color: var(--border) !important;
}

[dir="rtl"] .mobile-links a {
  transform: translateX(-28px);
}

[dir="rtl"] .mobile-drawer.is-open .mobile-links a {
  transform: translateX(0);
}

/* floating quote + back-to-top buttons move to the left corner */
[dir="rtl"] #floatQuote {
  right: auto;
  left: 28px;
}

[dir="rtl"] #backToTop {
  right: auto;
  left: 28px;
}

@media (max-width: 991.98px) {
  [dir="rtl"] #backToTop {
    left: 20px;
  }
}

/* marquee loops the other way (see v3ar-marquee) */
[dir="rtl"] .marquee-track {
  animation-name: v3ar-marquee;
}

/* footer links: the hover nudge comes from the right */
[dir="rtl"] .footer-links a {
  transition:
    color 0.25s ease,
    padding-right 0.25s ease !important;
}

[dir="rtl"] .footer-links a:hover {
  padding-left: 0;
  padding-right: 8px;
}

/* section underline (GSAP also sets transform-origin from dir="rtl") */
[dir="rtl"] .section-underline {
  transform-origin: right;
}

/* corner tag on work cards */
[dir="rtl"] .work-card__tag {
  right: auto;
  left: 18px;
}

/* forms: select arrow + its padding, the required star, submit arrow nudge */
[dir="rtl"] .career-select {
  background-position: left 18px center;
  padding-right: 18px;
  padding-left: 44px;
}

[dir="rtl"] .form-field-label .required {
  margin-left: 0;
  margin-right: 3px;
}

[dir="rtl"] .btn-submit-career:hover i {
  transform: translateX(-4px);
}

/* AOS side fades: in RTL the columns swap sides, so the slide-in swaps too.
   (Leave data-aos="fade-left/right" as they are in the markup.) */
[dir="rtl"] [data-aos="fade-right"]:not(.aos-animate) {
  transform: translate3d(100px, 0, 0);
}

[dir="rtl"] [data-aos="fade-left"]:not(.aos-animate) {
  transform: translate3d(-100px, 0, 0);
}

/* counters ("50+", "7M+") keep their LTR order inside Arabic text, as in
   the previous Arabic site; inline, so the alignment is untouched */
[dir="rtl"] .stat-number {
  direction: ltr;
  unicode-bidi: isolate;
}


/* ───────── home hero ───────── */

[dir="rtl"] .hero3-move {
  animation-name: v3ar-hero3Reveal;
}

@media (prefers-reduced-motion: reduce) {
  [dir="rtl"] .hero3-move {
    animation: none;
  }
}

/* the highlighter stroke leans the other way (here and on About's marker) */
[dir="rtl"] .hero3-move::before,
[dir="rtl"] .ab4-move::before {
  transform: skewX(6deg);
}

/* place pills: the flag (tight 9px side) is now on the right */
[dir="rtl"] .hero3-place {
  padding: 9px 9px 9px 18px;
}

@media (max-width: 575.98px) {
  [dir="rtl"] .hero3-place {
    padding-right: 9px;
    padding-left: 12px;
  }
}

/* card captions: yellow rule on the right */
[dir="rtl"] .hero3-card__cap {
  padding-left: 0;
  padding-right: 10px;
  border-left: 0;
  border-right: 2px solid var(--yellow);
}


/* ───────── nav: portfolio menu ───────── */

/* the pill sits towards the left of the screen in RTL: open the menu from
   its left edge so it does not run off-screen */
[dir="rtl"] .pf3-menu {
  right: auto;
  left: 0;
}

@media (max-width: 575.98px) {
  [dir="rtl"] .pf3-menu {
    left: 16px;
    right: 16px;
  }
}


/* ───────── recent work / project tiles ───────── */

[dir="rtl"] .wg-tile .work-card__tag {
  right: auto;
  left: 16px;
}

/* video-count badge (projects grid) */
[dir="rtl"] .pg3-play {
  left: auto;
  right: 16px;
}


/* ───────── closing "Let's talk" + office blocks ───────── */

[dir="rtl"] .cta4-btn:hover i {
  transform: translateX(-4px);
}

[dir="rtl"] .cta4-offices {
  text-align: right;
}

[dir="rtl"] .cta4-office + .cta4-office {
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

[dir="rtl"][data-theme="light"] .cta4-office + .cta4-office {
  border-right-color: var(--border);
}

/* "WhatsApp / Phone" label pushed to the far (left) end of the line */
[dir="rtl"] .cta4-line small {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .cta4-email i {
  margin-right: 0;
  margin-left: 8px;
}

[dir="rtl"] .cta4-email span {
  margin-left: 0;
  margin-right: 8px;
}

@media (max-width: 767.98px) {
  [dir="rtl"] .cta4-office + .cta4-office {
    border-right: 0;
  }
}

@media (max-width: 575.98px) {
  [dir="rtl"] .cta4-email span {
    margin: 4px 0 0;
  }
}

/* contact page: offices are stacked, no side rule */
[dir="rtl"] .ct3-offices .cta4-office + .cta4-office {
  border-right: 0;
}

[dir="rtl"] .ct3-email {
  text-align: right;
}


/* ───────── numbers row (.facts) ───────── */

[dir="rtl"] .fact {
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

[dir="rtl"] .fact:first-child {
  border-right: 0;
}

[dir="rtl"][data-theme="light"] .fact {
  border-right-color: var(--border-strong);
}

@media (max-width: 991.98px) {
  [dir="rtl"] .fact:nth-child(4) {
    border-right: 0;
  }
}

@media (max-width: 767.98px) {
  [dir="rtl"] .fact {
    border-left: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  [dir="rtl"] .fact:first-child {
    border-right: 0 !important;
  }

  [dir="rtl"][data-theme="light"] .fact {
    border-right-color: var(--border-strong) !important;
  }
}


/* ───────── what we do (.svc4 tiles) ───────── */

[dir="rtl"] .svc4-num {
  left: auto;
  right: 12px;
}

/* the yellow dash under the name grows from the right */
[dir="rtl"] .svc4-name::after {
  left: auto;
  right: 0;
}

/* phone swipe row bleeds off the left edge instead of the right */
@media (max-width: 575.98px) {
  [dir="rtl"] .svc4-grid {
    margin-right: 0;
    padding-right: 0;
    margin-left: calc(-1 * var(--pad-mobile));
    padding-left: var(--pad-mobile);
  }
}


/* ───────── home: Trusted by (split wall) ───────── */

[dir="rtl"] .wall-count {
  margin-left: 0;
  margin-right: auto;
}

/* grid lines: the outer rule moves to the right edge, each tile closes on its left */
[dir="rtl"] .wall-grid--split {
  border-left: 0;
  border-right: 1px solid var(--line);
}

[dir="rtl"] .wall-grid--split li {
  border-right: 0;
  border-left: 1px solid var(--line);
}


/* ───────── home: "Two offices" card ───────── */

/* each flag's glow follows its city: Egypt (first) is now on the right */
[dir="rtl"] .who3-facts li.who3-offices {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(206, 17, 38, 0.16), transparent 55%),
    radial-gradient(120% 90% at 0% 100%, rgba(0, 115, 47, 0.2), transparent 55%),
    #141414;
}

[dir="rtl"][data-theme="light"] .who3-facts li.who3-offices {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(206, 17, 38, 0.1), transparent 55%),
    radial-gradient(120% 90% at 0% 100%, rgba(0, 115, 47, 0.12), transparent 55%),
    var(--surface);
}


/* ───────── about: hero ───────── */

/* the stepped-in middle line steps in from the right */
[dir="rtl"] .ab4-line--in {
  padding-left: 0;
  padding-right: 1.3em;
}

@media (max-width: 575.98px) {
  [dir="rtl"] .ab4-line--in {
    padding-right: 0;
  }
}

[dir="rtl"] .ab4-flags {
  margin-left: 0;
  margin-right: 0.22em;
}

/* entrance: pictures and the marker wipe in from the right */
[dir="rtl"] .ab4-hero.is-waiting .ab4-pic img,
[dir="rtl"] .ab4-hero.is-waiting .ab4-move {
  clip-path: inset(-5% -6% -5% 100%);
}

[dir="rtl"] .ab4-hero.is-on .ab4-pic img {
  animation-name: v3ar-ab4Pic;
}

[dir="rtl"] .ab4-hero.is-on .ab4-move {
  animation-name: v3ar-hero3Reveal;
}

/* office clocks: divider and spacing on the right of the second clock */
[dir="rtl"] .ab4-clocks li {
  padding: 0 28px 0 0;
  margin-left: 0;
  margin-right: 28px;
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

[dir="rtl"] .ab4-clocks li:first-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}

[dir="rtl"][data-theme="light"] .ab4-clocks li {
  border-right-color: var(--border);
}

@media (max-width: 575.98px) {
  [dir="rtl"] .ab4-clocks li {
    padding-left: 0;
    padding-right: 18px;
    margin-left: 0;
    margin-right: 18px;
  }
}

/* the reel: gap on the item's left, loop travels right (see v3ar-ab4Reel) */
[dir="rtl"] .ab4-reel__item {
  margin-right: 0;
  margin-left: 14px;
}

@media (prefers-reduced-motion: no-preference) {
  [dir="rtl"] .ab4-reel.is-looping .ab4-reel__track {
    animation-name: v3ar-ab4Reel;
  }
}


/* ───────── about: 01 ledger of numbers ───────── */
/* Each LTR rule is mirrored one for one, so the cascade between them
   (li, li + li, :nth-child(4), :nth-child(odd)) resolves the same way. */

[dir="rtl"] .ab4-ledger li {
  padding: 28px 0 0 20px;
}

[dir="rtl"] .ab4-ledger li + li {
  padding-right: 22px;
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

[dir="rtl"][data-theme="light"] .ab4-ledger li + li {
  border-right-color: var(--border);
}

/* the yellow tick on the top rule */
[dir="rtl"] .ab4-ledger li::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .ab4-ledger li + li::before {
  left: auto;
  right: 22px;
}

@media (max-width: 991.98px) {
  [dir="rtl"] .ab4-ledger li:nth-child(4) {
    padding-right: 0;
    border-right: 0;
  }

  [dir="rtl"] .ab4-ledger li:nth-child(4)::before {
    left: auto;
    right: 0;
  }
}

@media (max-width: 575.98px) {
  [dir="rtl"] .ab4-ledger li,
  [dir="rtl"] .ab4-ledger li:nth-child(4) {
    padding: 24px 16px 0 12px;
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
  }

  [dir="rtl"] .ab4-ledger li:nth-child(odd) {
    padding-right: 0;
    border-right: 0;
  }

  [dir="rtl"] .ab4-ledger li::before,
  [dir="rtl"] .ab4-ledger li + li::before {
    left: auto;
    right: 16px;
  }

  [dir="rtl"] .ab4-ledger li:nth-child(odd)::before {
    left: auto;
    right: 0;
  }

  [dir="rtl"][data-theme="light"] .ab4-ledger li {
    border-right-color: var(--border);
  }
}


/* ───────── about: 03 the index rows ───────── */

/* hover: the title nudges towards the reading direction, the underline
   draws in from the right */
[dir="rtl"] .ab4-row:hover .ab4-row__t {
  transform: translateX(-12px);
}

[dir="rtl"] .ab4-row__t span {
  background-position: right 92%;
}


/* ───────── about + services: the drawn timeline (.ab4-track) ───────── */

/* horizontal (992px and up): the yellow line draws from right to left */
[dir="rtl"] .ab4-track::after {
  transform-origin: right center;
}

[dir="rtl"] .ab4-track li {
  padding-right: 0;
  padding-left: 12px;
}

/* outlined numeral sits at the far (left) end of each stop */
[dir="rtl"] .ab4-track__n {
  right: auto;
  left: 12px;
}

/* vertical (below 992px): the line and the dots run down the right side */
@media (max-width: 991.98px) {
  [dir="rtl"] .ab4-track {
    padding-left: 0;
    padding-right: 38px;
  }

  [dir="rtl"] .ab4-track::before,
  [dir="rtl"] .ab4-track::after {
    left: auto;
    right: 7px;
  }

  [dir="rtl"] .ab4-track::after {
    right: 6px;
    transform-origin: center top;
  }

  [dir="rtl"] .ab4-track__dot {
    left: auto;
    right: -38px;
  }

  [dir="rtl"] .ab4-track__n {
    left: 0;
    right: auto;
  }
}


/* ───────── about: 05 sector strips ───────── */

[dir="rtl"] .ab4-strip__cap b {
  padding-left: 0;
  padding-right: 10px;
  border-left: 0;
  border-right: 2px solid var(--yellow);
}

[dir="rtl"] .ab4-strip__cap small {
  padding-left: 0;
  padding-right: 12px;
}


/* ───────── services ───────── */

/* "See all six ↓": the icon is now left of the text */
[dir="rtl"] .sv4-hero .btn-outline-brand i {
  margin-left: 0;
  margin-right: 10px;
}

[dir="rtl"] a.sv4-media:hover .sv4-media__cap i,
[dir="rtl"] .sv4-path a:hover i {
  transform: translateX(-4px);
}

/* pinned stage (992px and up): the active index row steps in from the
   right, and each row's progress bar (--fill, set by v3.js) fills from
   the right */
@media (min-width: 992px) {
  [dir="rtl"] .sv4-nav a.is-on {
    padding-left: 0;
    padding-right: 12px;
  }

  [dir="rtl"] .sv4-bar i {
    transform-origin: right center;
  }
}

/* "Everything we do": four columns, rules between them on the right */
[dir="rtl"] .sv4-col {
  padding: 28px 0 8px 24px;
}

[dir="rtl"] .sv4-col + .sv4-col {
  padding-right: 24px;
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

[dir="rtl"][data-theme="light"] .sv4-col + .sv4-col {
  border-right-color: var(--border);
}

@media (max-width: 991.98px) {
  [dir="rtl"] .sv4-col:nth-child(3) {
    padding-right: 0;
    border-right: 0;
  }
}

@media (max-width: 575.98px) {
  [dir="rtl"] .sv4-col,
  [dir="rtl"] .sv4-col + .sv4-col {
    padding: 24px 0 8px;
    border-right: 0;
  }
}


/* ───────── careers ───────── */

[dir="rtl"] .cr3-role a:hover i {
  transform: translateX(-4px);
}


/* ───────── project detail ───────── */

/* previous / next: "next" is now the left column; its rule faces the middle.
   (Its padding-left in v3.css loses to `.pd3-nav a { padding: 24px 0 }`,
   so no padding is mirrored here either.) */
[dir="rtl"] .pd3-nav__next {
  text-align: left;
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

[dir="rtl"][data-theme="light"] .pd3-nav__next {
  border-right-color: var(--border-strong);
}

@media (max-width: 575.98px) {
  [dir="rtl"] .pd3-nav__next {
    border-right: 0;
    text-align: right;
  }
}

/* numbers row (built by v3.js) */
[dir="rtl"] .pd3-stats li {
  padding: 22px 0 0 20px;
}

[dir="rtl"] .pd3-stats li + li {
  padding-right: 20px;
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

[dir="rtl"][data-theme="light"] .pd3-stats li + li {
  border-right-color: var(--border-strong);
}

@media (max-width: 575.98px) {
  [dir="rtl"] .pd3-stats li,
  [dir="rtl"] .pd3-stats li + li {
    padding: 18px 0 0;
    border-right: 0;
  }
}

/* video cards: caption reads from the right (the play glyph keeps its
   optical nudge: a play triangle is not mirrored) */
[dir="rtl"] .pd3-video__play {
  text-align: right;
}

/* lightbox: close top-left, "previous" on the right, "next" on the left,
   counter bottom-right */
[dir="rtl"] .pd3-lb__close {
  right: auto;
  left: 20px;
}

[dir="rtl"] .pd3-lb__prev {
  left: auto;
  right: 20px;
}

[dir="rtl"] .pd3-lb__next {
  right: auto;
  left: 20px;
}

[dir="rtl"] .pd3-lb__count {
  left: auto;
  right: 24px;
}

@media (max-width: 767.98px) {
  [dir="rtl"] .pd3-lb__prev {
    right: 16px;
  }

  [dir="rtl"] .pd3-lb__next {
    left: 16px;
  }

  /* centred again, as in LTR */
  [dir="rtl"] .pd3-lb__count {
    right: auto;
    left: 50%;
  }
}