@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');
/* ========================================================================
   SmartHomeAssist.ae — RTL (Arabic) overrides
   Loaded only on /ar/ pages via <link rel="stylesheet" href="styles-rtl.css">
   Uses CSS logical properties (margin-inline-start etc.) where possible,
   and explicit direction-flip for Tailwind utilities that don't support
   logical properties (pl-/pr-, ml-/mr-, text-left/right, etc.)
   ======================================================================== */

[dir="rtl"] body {
  font-family: 'Cairo', system-ui, -apple-system, sans-serif;
  text-align: right;
}

/* Flip Tailwind directional utilities that aren't logical-property-aware.
   These are the most common patterns used on the site. */
[dir="rtl"] .text-left  { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }
[dir="rtl"] .pl-1, [dir="rtl"] .pl-2, [dir="rtl"] .pl-3, [dir="rtl"] .pl-4, [dir="rtl"] .pl-5, [dir="rtl"] .pl-6, [dir="rtl"] .pl-8, [dir="rtl"] .pl-10 { padding-left: 0; padding-right: var(--tw-pl, 0); }
[dir="rtl"] .pr-1, [dir="rtl"] .pr-2, [dir="rtl"] .pr-3, [dir="rtl"] .pr-4, [dir="rtl"] .pr-5, [dir="rtl"] .pr-6, [dir="rtl"] .pr-8, [dir="rtl"] .pr-10 { padding-right: 0; padding-left: var(--tw-pr, 0); }
[dir="rtl"] .ml-1, [dir="rtl"] .ml-2, [dir="rtl"] .ml-3, [dir="rtl"] .ml-4, [dir="rtl"] .ml-auto { margin-left: 0; margin-right: var(--tw-ml, 0); }
[dir="rtl"] .mr-1, [dir="rtl"] .mr-2, [dir="rtl"] .mr-3, [dir="rtl"] .mr-4, [dir="rtl"] .mr-auto { margin-right: 0; margin-left: var(--tw-mr, 0); }
[dir="rtl"] .left-1\/2 { left: auto; right: 50%; }
[dir="rtl"] .right-1\/2 { right: auto; left: 50%; }
[dir="rtl"] .left-0 { left: auto; right: 0; }
[dir="rtl"] .right-0 { right: auto; left: 0; }
[dir="rtl"] .rounded-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--tw-rounded-l, 0.25rem); border-bottom-right-radius: var(--tw-rounded-l, 0.25rem); }
[dir="rtl"] .rounded-r { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--tw-rounded-r, 0.25rem); border-bottom-left-radius: var(--tw-rounded-r, 0.25rem); }

/* Hero arrow CTAs (← →) — flip them */
[dir="rtl"] .cta-arrow {
  transform: scaleX(-1);
}

/* Brand marquee: keep animation as-is (logos are symmetric) */



/* Phone number display: keep LTR so +971 reads correctly */
[dir="ltr"] {}

/* Whitespace handling for Arabic text */
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  letter-spacing: 0;
}

/* Fix aria-landmark skip link */
[dir="rtl"] .sr-only.focus\:not-sr-only {
  right: 0.5rem;
  left: auto;
}

/* RTL: marquee centering + hero aspect ratio + general fixes */

.aspect-4-3, [class*="aspect-"] {
  aspect-ratio: 4 / 3;
}
/* ===== RTL: Brand marquee =====
   Animation keyframes are direction-agnostic (translateX 0 → -50%).
   The same animation plays the same direction in RTL.
   The "natural" visual flow is preserved: row 1 left, row 2 right.
   No override needed for direction. */



body {
    font-family: 'Cairo', sans-serif !important;
}