/* Arabic text layer only. Keep the physical document and scroll context LTR
   so the native scrollbar, sticky sections and GSAP measurements remain
   identical to the English homepage. The HTML dir attribute remains RTL for
   semantics; Arabic direction is applied only to user-facing text below. */
html[lang="ar-AE"],
body.page-home-ar {
  direction: ltr;
  overflow-x: clip;
}

/* Keep every visual layout, component position and control order in LTR. */
.page-home-ar #smooth-wrapper,
.page-home-ar .brochure-gate__content,
.page-home-ar .brochure-gate__actions {
  direction: ltr;
}

/* The document is RTL for semantics, but the translated homepage keeps the
   English header grid: logo left, menu in the middle, actions on the right. */
.page-home-ar #header-sticky .container-1870,
.page-home-ar #header-sticky .row,
.page-home-ar #header-sticky .row > [class*="col-"],
.page-home-ar #header-sticky .tp-header-logo,
.page-home-ar #header-sticky .tp-header-2-menu-bar,
.page-home-ar #header-sticky .tp-header-2-cart,
.page-home-ar #header-sticky .button-group {
  direction: ltr !important;
}

/* Preserve the English hero copy coordinates. Arabic remains RTL inside each
   line, while physical alignment and the existing left indent stay unchanged. */
.page-home-ar .tp-hero-2-content-wrap,
.page-home-ar .tp-hero-2-title-box,
.page-home-ar .tp-hero-2-content {
  direction: ltr !important;
  text-align: left !important;
}

.page-home-ar .tp-hero-2-title,
.page-home-ar .tp-hero-2-title span,
.page-home-ar .tp-hero-2-content p {
  direction: rtl !important;
  text-align: left !important;
}

/* Apply RTL only to user-facing Arabic copy. */
.page-home-ar :where(
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  dt,
  dd,
  label,
  summary,
  a,
  button,
  .whyus__content,
  .brochure-gate__brand,
  .brochure-gate__request,
  .brochure-gate__success
) {
  direction: rtl;
}

/* Qanelas has no Arabic glyphs, so Arabic copy uses one scoped fallback. */
.page-home-ar :where(
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  dt,
  dd,
  label,
  summary,
  a,
  button,
  input,
  textarea,
  select,
  .whyus__content
) {
  font-family: Tahoma, sans-serif !important;
  letter-spacing: normal !important;
}

/* Keep required Latin values and the language selector left-to-right. */
.page-home-ar :where([dir="ltr"], [lang="en"], input[type="email"], input[type="tel"]) {
  direction: ltr;
  font-family: var(--pbt-font-family) !important;
  unicode-bidi: isolate;
}

.page-home-ar input[type="email"],
.page-home-ar input[type="tel"] {
  text-align: left;
}

/* Arabic text wraps naturally while retaining the English component widths. */
.page-home-ar .cinema-hero__title-main,
.page-home-ar .cinema-hero__list {
  white-space: normal;
}

/* Keep accordion icons and chevrons in their original visual columns. */
.page-home-ar .whyus__item summary {
  direction: ltr;
}

.page-home-ar .whyus__label {
  direction: rtl;
}

.page-home-ar .whyus__content {
  direction: rtl;
}

/* Button groups and footer rows keep the English visual order. */
.page-home-ar :where(
  .tp-hero-2-actions,
  .pods-home-3d__actions,
  .cinema-hero__actions,
  .ids__ctas,
  .pfx-menu,
  .pfx-bottom,
  .pfx-legal,
  .pfx-social
) {
  direction: ltr;
}

.page-home-ar .pfx-copy {
  direction: rtl;
}

/* The Instagram composition is a motion/layout component, not an RTL layout.
   Keep its handle, CTA, coordinates and typography exactly as in English;
   only the translated subtitle remains Arabic. */
.page-home-ar .tp-instagram-content-wrap,
.page-home-ar .tp-instagram-title-box,
.page-home-ar .tp-instagram-title,
.page-home-ar .tp-instagram-content,
.page-home-ar .tp-instagram-content .tp-btn-white {
  direction: ltr;
  text-align: left;
}

.page-home-ar .tp-instagram-title,
.page-home-ar .tp-instagram-content .tp-btn-white {
  font-family: var(--pbt-font-family) !important;
}

.page-home-ar .tp-instagram-title {
  letter-spacing: -2.4px !important;
}

.page-home-ar .tp-instagram-subtitle {
  direction: rtl;
  letter-spacing: normal;
}

/* The Arabic interior-design CTA labels are longer than the English copy.
   Keep both controls inside the existing desktop copy column instead of
   allowing the second one to extend underneath the image gallery. */
@media (min-width: 1025px) {
  .page-home-ar #interiors .ids__ctas {
    width: 100%;
    max-width: 100%;
  }

  .page-home-ar #interiors .ids__btn {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 16px;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
}

/* The Arabic package title is materially wider than the English source line.
   Preserve the same editorial column without clipping it at desktop widths. */
@media (min-width: 1200px) {
  .page-home-ar .pbt-package-spectrum .pbt-package-spectrum__title {
    font-size: clamp(46px, 3.2vw, 58px);
    line-height: 1.08;
    white-space: normal;
    text-wrap: balance;
  }
}

/* Shared brochure modal: same grid and controls, Arabic strings only. */
.page-home-ar .brochure-gate__brand,
.page-home-ar .brochure-gate__request,
.page-home-ar .brochure-gate__success {
  direction: rtl;
}

.page-home-ar :where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .page-home-ar *,
  .page-home-ar *::before,
  .page-home-ar *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}