/* ==========================================================================
   Zero Fat Meals — RTL
   --------------------------------------------------------------------------
   This file is deliberately tiny.

   The entire theme is authored with CSS logical properties
   (margin-inline-start, padding-block, inset-inline-end, border-start-start-
   radius, text-align:start …), so switching <html dir="rtl"> mirrors the
   layout automatically. There is no duplicated mirrored stylesheet.

   What remains below is only what logical properties genuinely cannot do:
   directional glyphs, gradient direction, and number rendering.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DIRECTIONAL ICONS
   Arrows, chevrons and carets point the other way in RTL. Everything else
   (checkmarks, plus, calendar, phone, WhatsApp) must NOT be flipped.
   -------------------------------------------------------------------------- */
[dir="rtl"] .zf-icon--directional,
[dir="rtl"] .zf-btn__arrow,
[dir="rtl"] .zf-breadcrumb__sep,
[dir="rtl"] .zf-carousel__btn svg,
[dir="rtl"] .zf-drawer__link svg,
[dir="rtl"] .zf-wizard__back svg,
[dir="rtl"] .zf-wizard__next svg {
  transform: scaleX(-1);
}

/* The nudge animation is redefined in components.css for RTL; make sure the
   combined transform does not cancel the mirror above. */
[dir="rtl"] .zf-btn:hover .zf-btn__arrow { transform: scaleX(-1) translateX(3px); }

/* --------------------------------------------------------------------------
   2. GRADIENTS
   `to right` is physical, not logical, so linear gradients used as
   directional fills need mirroring.
   -------------------------------------------------------------------------- */
[dir="rtl"] .zf-progress__fill,
[dir="rtl"] .zf-macro-bar__fill,
[dir="rtl"] .zf-space-bar {
  background-image: linear-gradient(270deg, var(--zf-accent), var(--zf-accent-lo));
}

/* Shimmer sweeps the other way so it reads as motion, not a glitch. */
[dir="rtl"] .zf-skeleton::after { transform: translateX(100%); }
@keyframes zf-shimmer-rtl { to { transform: translateX(-100%); } }
[dir="rtl"] .zf-skeleton::after { animation-name: zf-shimmer-rtl; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   Arabic does not take negative letter-spacing, and needs more leading.
   The font-family swap itself lives in tokens.css.
   -------------------------------------------------------------------------- */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .zf-logo__text,
[dir="rtl"] .zf-price__now {
  letter-spacing: 0;
}

/* Uppercase transforms are meaningless in Arabic and damage legibility. */
[dir="rtl"] .zf-overline,
[dir="rtl"] .zf-footer__title,
[dir="rtl"] .zf-badge,
[dir="rtl"] .zf-table th,
[dir="rtl"] .zf-sticky-cta__label {
  text-transform: none;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   4. NUMERALS
   Prices, calories and macros stay in Western Arabic numerals by default
   because that is what UAE e-commerce uses. Add .zf-numerals--arabic to
   <html> (a Customizer toggle) to render Eastern Arabic-Indic digits.
   -------------------------------------------------------------------------- */
[dir="rtl"] .zf-price,
[dir="rtl"] .zf-nums,
[dir="rtl"] .zf-macro,
[dir="rtl"] time {
  font-feature-settings: "lnum" 1;
  direction: ltr;              /* keeps "AED 999" reading correctly */
  unicode-bidi: isolate;
}

.zf-numerals--arabic[dir="rtl"] .zf-price,
.zf-numerals--arabic[dir="rtl"] .zf-nums,
.zf-numerals--arabic[dir="rtl"] .zf-macro {
  font-feature-settings: "anum" 1;
}

/* --------------------------------------------------------------------------
   4b. THE LANGUAGE SWITCHER
   On English pages the switcher label uses a 3.2 KB four-glyph subset so
   the full Arabic face is not downloaded for one word. On Arabic pages the
   real family is already loading, so use it — same glyphs, matched weights.
   -------------------------------------------------------------------------- */
[dir="rtl"] .zf-lang__item:lang(ar) { font-family: var(--zf-font-arabic); }

/* --------------------------------------------------------------------------
   4c. BIDI-NEUTRAL TECHNICAL STRINGS
   Filenames, dimensions, times, versions and any digit-plus-punctuation
   string is direction-neutral, so an RTL paragraph reorders it: "1600 ×
   1200" renders as "1200 × 1600". Isolate anything of that shape.
   -------------------------------------------------------------------------- */
[dir="rtl"] .zf-media__note,
[dir="rtl"] .zf-code,
[dir="rtl"] [data-ltr] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: center;
}

/* --------------------------------------------------------------------------
   5. FORM CONTROLS
   Phone entry stays LTR even inside an RTL form — a +971 number typed
   right-to-left is unusable.
   -------------------------------------------------------------------------- */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"],
[dir="rtl"] .zf-input--ltr {
  direction: ltr;
  text-align: right;
}

/* --------------------------------------------------------------------------
   6. AMBIENT LAYERS
   The hero glow is asymmetric by design; mirror it so the composition
   reads the same way in both directions.
   -------------------------------------------------------------------------- */
[dir="rtl"] .zf-glow::before { inset-inline-start: auto; inset-inline-end: -12%; }
[dir="rtl"] .zf-glow::after  { inset-inline-end: auto;  inset-inline-start: -14%; }