/* ================================================================
   Milk — RTL Stylesheet (Arabic)
   ================================================================
   Loaded exclusively by index.html.
   All rules are scoped to [dir="rtl"] or html[lang="ar"] to avoid
   any risk of bleeding into the English page (index-en.html).
   ================================================================ */

/* ---------------------------------------------------------------
   Arabic Google Fonts
   (Cairo for display/headings, IBM Plex Sans Arabic for body/UI)
   --------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');


/* ---------------------------------------------------------------
   Root Typography Override — Arabic Fonts
   --------------------------------------------------------------- */
[dir="rtl"] body {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif;
  text-align: right;
}

/* Display, headings, badges, prices — Cairo (mirrors Cormorant Garamond's weight) */
[dir="rtl"] .ffy-section-heading,
[dir="rtl"] .ffy-flavor-name,
[dir="rtl"] .ffy-feature-title,
[dir="rtl"] .ffy-about-badge-num,
[dir="rtl"] .ffy-about-stat-val,
[dir="rtl"] .ffy-flavor-price,
[dir="rtl"] .ffy-testimonial-quote,
[dir="rtl"] .ffy-footer-col-title,
[dir="rtl"] .ffy-title .elementor-heading-title,
[dir="rtl"] .ffy-word .elementor-heading-title,
[dir="rtl"] .ffy-footer-copy,
[dir="rtl"] .ffy-about-badge-txt {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important; /* Arabic doesn't use letter-spacing */
}

/* Body, UI, labels, descriptions, form elements — IBM Plex Sans Arabic */
[dir="rtl"] .ffy-section-body,
[dir="rtl"] .ffy-section-label,
[dir="rtl"] .ffy-flavor-desc,
[dir="rtl"] .ffy-feature-desc,
[dir="rtl"] .ffy-btn,
[dir="rtl"] .ffy-nav .elementor-button-text,
[dir="rtl"] .elementor-button-text,
[dir="rtl"] .ffy-newsletter-input,
[dir="rtl"] .ffy-newsletter .ffy-btn-white,
[dir="rtl"] .ffy-newsletter-note,
[dir="rtl"] .ffy-footer-brand-desc,
[dir="rtl"] .ffy-footer-links a,
[dir="rtl"] .ffy-footer-contact-item,
[dir="rtl"] .ffy-testimonial-name,
[dir="rtl"] .ffy-testimonial-role,
[dir="rtl"] .ffy-desc p,
[dir="rtl"] .ffy-desc,
[dir="rtl"] .ffy-flavor-tag,
[dir="rtl"] .ffy-about-stat-lbl,
[dir="rtl"] .ffy-footer-copy a,
[dir="rtl"] .ffy-footer-bottom-links a,
[dir="rtl"] .ffy-lang-toggle {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* Section labels: remove letter-spacing (Arabic readability) */
[dir="rtl"] .ffy-section-label {
  letter-spacing: 0 !important;
}


/* ---------------------------------------------------------------
   Language Switcher — Arabic font override only
   (base styles for .ffy-lang-toggle are in main.css)
   --------------------------------------------------------------- */
/* The toggle text on the Arabic page ("English") uses Latin script,
   so no font override is needed — it inherits from main.css fine. */


/* ---------------------------------------------------------------
   About Section — Badge & Text RTL Fixes
   --------------------------------------------------------------- */

/* The "About" text box has padding-left in LTR; flip to padding-right in RTL */
[dir="rtl"] .ffy-about-text {
  padding-left: 0;
  padding-right: 16px;
}

/* Badge anchors to bottom-left in RTL (was bottom-right in LTR) */
[dir="rtl"] .ffy-about-badge {
  right: auto;
  left: -24px;
  bottom: -24px;
}

@media screen and (max-width: 767px) {
  [dir="rtl"] .ffy-about-badge {
    right: auto;
    left: -16px;
    bottom: -16px;
  }
}

/* Stat row: numbers align naturally with RTL text direction */
[dir="rtl"] .ffy-about-stat {
  text-align: center;
}


/* ---------------------------------------------------------------
   Hero Slider — Transform-origin & Desc RTL Fix
   --------------------------------------------------------------- */

/* In LTR, transform-origin is left bottom for text pop-in.
   In RTL it should be right bottom. */
[dir="rtl"] .ffy-title .elementor-heading-title,
[dir="rtl"] .ffy-desc {
  transform-origin: right bottom;
}


/* ---------------------------------------------------------------
   Flavor Cards — Tag Badge RTL Fix
   --------------------------------------------------------------- */

/* Tag badge was top:14px left:14px in LTR; flip to right in RTL */
[dir="rtl"] .ffy-flavor-tag {
  left: auto;
  right: 14px;
}


/* ---------------------------------------------------------------
   Footer Contact Items — Icon Spacing RTL Fix
   --------------------------------------------------------------- */

/* In dir="rtl" flex row flows right-to-left naturally:
   icon (first in DOM) sits on the RIGHT, text on the LEFT — correct.
   row-reverse would double-flip back to LTR, so we keep row. */
[dir="rtl"] .ffy-footer-contact-item {
  flex-direction: row;
  justify-content: flex-start;
}

/* Footer social icons row should still flow left-to-right (visual icons) */
[dir="rtl"] .ffy-footer-social {
  justify-content: flex-start;
}

/* Footer brand column — text aligns right */
[dir="rtl"] .ffy-footer-brand-desc {
  text-align: right;
}

/* Footer bottom bar: dir="rtl" on <html> already makes the flex row
   flow right-to-left (copyright on right, links on left). No row-reverse needed.
   On mobile, stack vertically with right alignment. */
[dir="rtl"] .ffy-footer-bottom {
  flex-direction: row;
}

@media screen and (max-width: 767px) {
  [dir="rtl"] .ffy-footer-bottom {
    flex-direction: column;
    align-items: flex-end;
  }
}


/* ---------------------------------------------------------------
   Testimonials — Star rating & Author Row RTL
   --------------------------------------------------------------- */

[dir="rtl"] .ffy-testimonial-author {
  flex-direction: row;
}

[dir="rtl"] .ffy-testimonial-name,
[dir="rtl"] .ffy-testimonial-role {
  text-align: right;
}

[dir="rtl"] .ffy-testimonial-quote {
  text-align: right;
}

[dir="rtl"] .ffy-testimonial-stars {
  justify-content: flex-start;
}


/* ---------------------------------------------------------------
   Newsletter Form — RTL Input & Button Direction
   --------------------------------------------------------------- */

[dir="rtl"] .ffy-newsletter-input {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .ffy-newsletter-input::placeholder {
  text-align: right;
}


/* ---------------------------------------------------------------
   Feature Cards — Center text is direction-neutral (no change)
   --------------------------------------------------------------- */

/* Feature cards use text-align: center which works fine in RTL.
   Feature icon (circle) is margin: 0 auto — direction-neutral. */


/* ---------------------------------------------------------------
   Flavors Section — Center header is direction-neutral
   --------------------------------------------------------------- */

/* .ffy-flavors-header uses text-align: center — direction-neutral. */
[dir="rtl"] .ffy-flavors-header p {
  direction: rtl;
  text-align: center;
}


/* ---------------------------------------------------------------
   Elementor Hero Slider — RTL Nav positioning helpers
   --------------------------------------------------------------- */

/* When dir="rtl" is set on <html>, the body gains .rtl via JS.
   elementor-page.css already has body.rtl rules that flip left/right
   for the hero positioned elements. No additional overrides needed
   for those elements since elementor-page.css handles them. */

/* Arrow container positioned bottom-right in LTR via elementor-page.css.
   In RTL (body.rtl), elementor-page.css already flips it:
   body.rtl .elementor-element-347379d { left: 3.4cqw; right: auto; }
   So no additional override is needed here. */


/* ---------------------------------------------------------------
   Footer Bottom Links — RTL list direction
   --------------------------------------------------------------- */

/* dir="rtl" on <html> already makes flex row flow right-to-left.
   row-reverse would double-flip to LTR, which is wrong. Keep row. */
[dir="rtl"] .ffy-footer-bottom-links {
  flex-direction: row;
}

[dir="rtl"] .ffy-footer-copy {
  text-align: right;
}


/* ---------------------------------------------------------------
   About Grid — RTL column visual order
   --------------------------------------------------------------- */

/* In LTR: image left, text right.
   In RTL: image right, text left. CSS grid direction flips automatically
   with dir="rtl" on the container, so no explicit column-reverse needed. */


/* ---------------------------------------------------------------
   Smooth scroll RTL — no changes needed for scrolling behavior
   --------------------------------------------------------------- */


/* ---------------------------------------------------------------
   Pill Navbar — RTL-specific overrides
   --------------------------------------------------------------- */

/* Arabic fonts for navbar text */
[dir="rtl"] .ffy-navbar,
[dir="rtl"] .ffy-navbar .ffy-nb-nav .elementor-button,
[dir="rtl"] .ffy-navbar .ffy-nb-nav .ffy-nb-cat-btn,
[dir="rtl"] .ffy-nb-cat-dropdown a,
[dir="rtl"] .ffy-nb-mobile-menu a,
[dir="rtl"] .ffy-navbar .ffy-lang-toggle {
  font-family: 'IBM Plex Sans Arabic', 'Cairo', 'DM Sans', sans-serif !important;
}

/* Ensure dropdown menu aligns to right edge of button in RTL */
[dir="rtl"] .ffy-nb-cat-dropdown {
  inset-inline-start: 0;
  inset-inline-end: auto;
  text-align: right;
}

[dir="rtl"] .ffy-nb-cat-dropdown a {
  text-align: right;
}

/* Mobile menu items align right in RTL */
[dir="rtl"] .ffy-nb-mobile-menu a {
  text-align: right;
}

/* Active navigation item pill */
[dir="rtl"] .ffy-navbar .ffy-nb-nav .ffy-nav-active .elementor-button {
  font-weight: 600 !important;
}

/* ---------------------------------------------------------------
   Hide Giant Decorative Background Word (Arabic version ONLY)
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-word,
[dir="rtl"] .ffy-word .elementor-heading-title {
  display: none !important;
}

/* ================================================================
   END RTL Stylesheet
   ================================================================ */


/* ================================================================
   About Us & FAQ Pages — RTL Overrides
   ================================================================ */

/* ---------------------------------------------------------------
   Page Hero — Typography & Text Alignment
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-page-hero {
  text-align: center;
}

[dir="rtl"] .ffy-page-hero-heading {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-page-hero-desc {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  direction: rtl;
}

/* Breadcrumb — RTL Direction */
/* dir="rtl" on <html> makes flex row flow right-to-left:
   "الرئيسية" (link, first in DOM) on the right, separator, then
   current page on the left — correct RTL breadcrumb order.
   row-reverse would put it in LTR order (wrong). */
[dir="rtl"] .ffy-breadcrumb {
  direction: rtl;
  flex-direction: row;
}

[dir="rtl"] .ffy-page-hero .ffy-section-label {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   About Story Section — RTL Fixes
   --------------------------------------------------------------- */

/* Story text box: padding flipped in RTL */
[dir="rtl"] .ffy-story-text {
  padding-left: 0;
  padding-right: 16px;
}

/* Story badge: anchor to bottom-left in RTL (mirrors LTR bottom-right) */
[dir="rtl"] .ffy-story-badge {
  right: auto;
  left: -28px;
  bottom: -28px;
}

@media screen and (max-width: 767px) {
  [dir="rtl"] .ffy-story-badge {
    right: auto;
    left: -16px;
    bottom: -20px;
  }
}

/* Story section: Text alignment right */
[dir="rtl"] .ffy-story-text .ffy-section-body {
  text-align: right;
}

[dir="rtl"] .ffy-story-text .ffy-section-label {
  letter-spacing: 0 !important;
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
}

[dir="rtl"] .ffy-story-text .ffy-section-heading {
  text-align: right;
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

/* Story stats: center alignment is direction-neutral */
[dir="rtl"] .ffy-story-stat {
  text-align: center;
}

[dir="rtl"] .ffy-story-stat-val {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-story-stat-lbl {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-story-badge-txt {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-story-badge-num {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
}

/* ---------------------------------------------------------------
   Values Section — RTL (centered text is direction-neutral)
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-value-title {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-value-desc {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   Milestones — RTL Font Overrides (center-aligned, dir-neutral)
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-milestone-title {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-milestone-desc {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-milestone-year {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   Team Cards — RTL
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-team-name {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-team-role {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-team-bio {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  text-align: right;
}

/* ---------------------------------------------------------------
   FAQ Category Tabs — RTL
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-faq-tab {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   FAQ Accordion — RTL
   --------------------------------------------------------------- */
/* In dir="rtl" context with justify-content: space-between:
   Title (first DOM element) anchors to the RIGHT, icon anchors to LEFT.
   That is the correct RTL layout (title on reading-start = right).
   row-reverse would swap them (icon on right, title on left = wrong). */
[dir="rtl"] .ffy-accordion-header {
  flex-direction: row;
}

[dir="rtl"] .ffy-accordion-title {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
  text-align: right;
}

[dir="rtl"] .ffy-accordion-body-inner {
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  direction: rtl;
}

[dir="rtl"] .ffy-accordion-body-inner ul {
  margin-right: 20px;
  margin-left: 0;
  padding-right: 0;
  text-align: right;
}

/* Accordion icon: mirror rotation direction in RTL */
[dir="rtl"] .ffy-accordion-item.is-open .ffy-accordion-icon {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------
   FAQ Support Card — RTL
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-faq-support h3 {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-faq-support p {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  direction: rtl;
}

[dir="rtl"] .ffy-btn-white-outline {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* Hero CTA buttons — dir="rtl" already reverses flex row.
   row-reverse would double-flip them to LTR order (wrong). */
[dir="rtl"] .ffy-page-hero-cta {
  flex-direction: row;
}

/* ================================================================
   END RTL Additions for About & FAQ Pages
   ================================================================ */


/* ================================================================
   Products / Menu Catalog & Product Detail — RTL Overrides
   ================================================================ */

/* ---------------------------------------------------------------
   Catalog Search — flip icon to right in RTL
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-catalog-search {
  padding-left: 22px;
  padding-right: 52px;
  text-align: right;
}

[dir="rtl"] .ffy-catalog-search-icon {
  left: auto;
  right: 20px;
}

[dir="rtl"] .ffy-catalog-search::placeholder {
  text-align: right;
}

/* ---------------------------------------------------------------
   Catalog Filter Tabs — direction-neutral (flex-wrap handles RTL)
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-catalog-tab {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   Sort Dropdown — flip chevron to left in RTL
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-catalog-sort {
  padding-left: 36px;
  padding-right: 16px;
  background-position: left 14px center;
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  text-align: right;
}

[dir="rtl"] .ffy-catalog-sort-label {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   Product Card — flip badge to top-right in RTL (mirrors LTR top-left)
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-product-badge {
  left: auto;
  right: 14px;
}

[dir="rtl"] .ffy-product-name {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
  text-align: right;
}

[dir="rtl"] .ffy-product-category-pill {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-product-desc {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  text-align: right;
}

[dir="rtl"] .ffy-product-price {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
}

[dir="rtl"] .ffy-catalog-count {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  direction: rtl;
}

/* ---------------------------------------------------------------
   Product Detail Layout — flip columns (image right, info left)
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-pd-layout {
  direction: rtl;
}

/* Gallery: sticky anchors to right (inline-start in RTL) */
[dir="rtl"] .ffy-pd-gallery {
  direction: rtl;
}

[dir="rtl"] .ffy-pd-thumb-strip {
  direction: rtl;
}

/* ---------------------------------------------------------------
   Product Detail Info Panel — RTL fonts & alignment
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-pd-badge {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-pd-category {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  text-align: right;
}

[dir="rtl"] .ffy-pd-name {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
  text-align: right;
}

[dir="rtl"] .ffy-pd-tagline {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  text-align: right;
  font-style: normal;
}

[dir="rtl"] .ffy-pd-price-row {
  direction: rtl;
}

[dir="rtl"] .ffy-pd-price-from {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-pd-price {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
}

[dir="rtl"] .ffy-pd-description {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  text-align: right;
  direction: rtl;
}

/* ---------------------------------------------------------------
   Quantity Stepper — RTL swap + / -
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-pd-qty {
  direction: rtl;
}

[dir="rtl"] .ffy-pd-qty-label {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   CTA Buttons — RTL font overrides
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-pd-add-btn,
[dir="rtl"] .ffy-pd-save-btn,
[dir="rtl"] .ffy-pd-sticky-btn {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   Detail Sections — RTL text alignment
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-pd-section-title {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
  /* flex-direction: row — icon on RIGHT (RTL start), text on LEFT.
     Correct for RTL; set definitively in the v4 block below. */
  flex-direction: row;
}

[dir="rtl"] .ffy-pd-ing-pill {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  /* icon on RIGHT (RTL reading start), text on LEFT — correct without reversal */
  flex-direction: row;
}

[dir="rtl"] .ffy-pd-allergen-tag {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   Nutrition Table — RTL font
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-pd-nutrition-val {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
}

[dir="rtl"] .ffy-pd-nutrition-lbl {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   Related Products Section — RTL header alignment
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-pd-related .ffy-section-heading,
[dir="rtl"] .ffy-pd-related .ffy-section-label {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   Sticky CTA Bar — RTL
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-pd-sticky-cta {
  direction: rtl;
}

[dir="rtl"] .ffy-pd-sticky-price {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
}


/* ================================================================
   Contact Us & 404 Pages — RTL Overrides
   ================================================================ */

/* Contact Form RTL Typography & Alignment */
[dir="rtl"] .ffy-contact-form-title {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-contact-form-desc,
[dir="rtl"] .ffy-form-label,
[dir="rtl"] .ffy-form-input,
[dir="rtl"] .ffy-form-textarea,
[dir="rtl"] .ffy-form-select,
[dir="rtl"] .ffy-contact-submit,
[dir="rtl"] .ffy-form-error,
[dir="rtl"] .ffy-contact-card-title,
[dir="rtl"] .ffy-contact-card-text,
[dir="rtl"] .ffy-toast {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

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

[dir="rtl"] .ffy-form-select {
  background-position: left 20px center;
  padding-left: 44px;
  padding-right: 22px;
}

[dir="rtl"] .ffy-form-error {
  padding-right: 6px;
  padding-left: 0;
}

[dir="rtl"] .ffy-contact-card-title {
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-toast {
  left: 30px;
  right: auto;
}

@media screen and (max-width: 767px) {
  [dir="rtl"] .ffy-toast {
    left: 20px;
    right: 20px;
  }
}

/* 404 Page RTL */
[dir="rtl"] .ffy-404-title {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-404-desc {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
}

[dir="rtl"] .ffy-404-search .ffy-catalog-search {
  padding: 14px 52px 14px 22px;
}

[dir="rtl"] .ffy-404-search .ffy-catalog-search-icon {
  right: 20px;
  left: auto;
}

/* ================================================================
   Checklist Page — RTL Overrides
   ================================================================ */

/* Typography — Headings use Cairo, body uses IBM Plex Sans Arabic */
[dir="rtl"] .ffy-cl-category-title {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-cl-item-title,
[dir="rtl"] .ffy-cl-item-desc,
[dir="rtl"] .ffy-cl-stats,
[dir="rtl"] .ffy-cl-stats-count,
[dir="rtl"] .ffy-cl-stats-pct,
[dir="rtl"] .ffy-cl-tab,
[dir="rtl"] .ffy-cl-category-count,
[dir="rtl"] .ffy-cl-item-badge,
[dir="rtl"] .ffy-cl-reset-btn {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* Progress bar gradient direction for RTL */
[dir="rtl"] .ffy-cl-progress-fill {
  background: linear-gradient(270deg, #C90035 0%, #8B0024 100%);
}

/* Shimmer animation direction for RTL */
[dir="rtl"] .ffy-cl-progress-fill::after {
  animation-direction: reverse;
}

/* Checkbox margin swap — checkbox on the right in RTL */
[dir="rtl"] .ffy-cl-item {
  flex-direction: row;
}

[dir="rtl"] .ffy-cl-checkbox-wrap {
  order: 0;
}

/* Category header — chevron and icon alignment */
[dir="rtl"] .ffy-cl-category-header {
  flex-direction: row;
}

/* Strikethrough text-decoration alignment */
[dir="rtl"] .ffy-cl-item.is-checked .ffy-cl-item-title {
  text-decoration-color: rgba(201, 0, 53, 0.4);
}

/* ================================================================
   END RTL Stylesheet
   ================================================================ */


/* ================================================================
   RTL RESPONSIVE OVERRIDES v2 - Milk Arabic Pages
   Mirrors all LTR responsive fixes in main.css for dir="rtl" pages.
   ================================================================ */

/* RTL Badge fixes on small mobile - mirror LTR fix */
@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-about-badge {
    right: auto !important;
    left: 12px !important;
    bottom: 12px !important;
    width: 80px !important;
    height: 80px !important;
  }

  [dir="rtl"] .ffy-story-badge {
    right: auto !important;
    left: 12px !important;
    bottom: 12px !important;
    width: 90px !important;
    height: 90px !important;
  }
}

/* Mobile menu text alignment in RTL */
/* In dir="rtl" context, flex-start = right side of the container.
   flex-end would push text to the LEFT, which is incorrect. */
[dir="rtl"] .ffy-nb-mobile-menu a {
  text-align: right;
  justify-content: flex-start;
}

/* RTL navbar - lang toggle alignment */
@media screen and (max-width: 768px) {
  [dir="rtl"] .ffy-navbar .ffy-nb-nav,
  [dir="rtl"] .ffy-navbar .ffy-nb-actions {
    display: none;
  }
  [dir="rtl"] .ffy-nb-hamburger {
    display: flex;
  }
}

@media screen and (min-width: 769px) {
  [dir="rtl"] .ffy-navbar .ffy-nb-nav,
  [dir="rtl"] .ffy-navbar .ffy-nb-actions {
    display: flex;
  }
  [dir="rtl"] .ffy-nb-hamburger {
    display: none;
  }
}

/* RTL newsletter form - stack on mobile */
@media screen and (max-width: 640px) {
  [dir="rtl"] .ffy-newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }
  [dir="rtl"] .ffy-newsletter-input {
    text-align: right;
  }
}

/* RTL page hero CTA - stack on mobile */
@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-page-hero-cta {
    flex-direction: column;
    align-items: center;
  }
}

/* RTL about stat row - wrap and center */
@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-about-stat-row {
    justify-content: center;
    gap: 12px;
  }
  [dir="rtl"] .ffy-story-stat-row {
    justify-content: center;
    gap: 20px;
  }
}

/* RTL FAQ support buttons - stack on mobile */
@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-faq-support-btns {
    flex-direction: column;
    align-items: stretch;
  }
  [dir="rtl"] .ffy-btn-white-outline {
    width: 100%;
    justify-content: center;
  }
  [dir="rtl"] .ffy-page-hero-cta {
    flex-direction: column;
  }
}

/* RTL catalog sort dropdown - chevron on left (already in rtl.css but reinforce) */
@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-catalog-sort {
    font-size: 14px;
    padding: 9px 14px 9px 36px;
    background-position: left 14px center;
  }
}

/* RTL 404 search - RTL padding swap */
@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-404-search {
    max-width: 100%;
  }
}

/* RTL footer bottom - wrap correctly on mobile */
@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-footer-bottom {
    flex-direction: column;
    align-items: flex-end;
  }
}

/* RTL contact form card */
@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-contact-form-card {
    padding: 24px 16px;
    border-radius: 18px;
  }
}

/* RTL accordion - easier tap on mobile */
@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-accordion-header {
    padding: 16px;
    gap: 12px;
    flex-direction: row;
  }
}

/* RTL hero ingredient overrides - flip left/right for RTL */
/* These mirror the LTR fixes in main.css for body.rtl context */
@media (max-width: 767px) {
  [dir="rtl"] body.rtl .elementor-3089 .elementor-element.elementor-element-d4ba694,
  [dir="rtl"] body.rtl .elementor-3089 .elementor-element.elementor-element-36eaaf8,
  [dir="rtl"] body.rtl .elementor-3089 .elementor-element.elementor-element-e46f4f9,
  [dir="rtl"] body.rtl .elementor-3089 .elementor-element.elementor-element-feb1dd5 {
    /* The LTR main.css rule already handles body.rtl with right: % */
    /* This block is a safety net for [dir=rtl] selectors */
    max-width: 32cqw !important;
    width: var(--container-widget-width, 32cqw) !important;
    --container-widget-width: 32cqw !important;
  }
}

/* RTL section padding tightening on small screens */
@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-section {
    padding: 48px 5vw;
  }
  [dir="rtl"] .ffy-newsletter {
    padding: 56px 5vw;
  }
  [dir="rtl"] .ffy-footer {
    padding: 48px 5vw 24px;
  }
}

/* RTL iOS input font-size fix - prevent auto-zoom */
@media screen and (max-width: 768px) {
  [dir="rtl"] .ffy-form-input,
  [dir="rtl"] .ffy-form-textarea,
  [dir="rtl"] .ffy-form-select,
  [dir="rtl"] .ffy-newsletter-input,
  [dir="rtl"] .ffy-catalog-search,
  [dir="rtl"] #ffy-404-search-input {
    font-size: 16px !important;
  }
}

/* RTL checklist - tab scrolling on mobile */
@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-cl-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Keep row direction: dir="rtl" already makes tabs flow right-to-left.
       row-reverse would make them LTR, breaking the RTL scroll start position. */
    flex-direction: row;
  }
  [dir="rtl"] .ffy-cl-tabs::-webkit-scrollbar {
    display: none;
  }
}

/* ================================================================
   END RTL RESPONSIVE OVERRIDES v2
   ================================================================ */

/* ================================================================
   RTL RESPONSIVE OVERRIDES v3 — Milk
   Mirrors the LTR v3 fixes in main.css for Arabic/RTL pages.
   ================================================================ */

/* Very small screens (≤ 360px) — RTL padding tightening */
@media screen and (max-width: 360px) {
  [dir="rtl"] .ffy-section {
    padding: 40px 4vw !important;
  }

  [dir="rtl"] .ffy-newsletter {
    padding: 48px 4vw !important;
  }

  [dir="rtl"] .ffy-footer {
    padding: 40px 4vw 20px !important;
  }

  [dir="rtl"] .ffy-contact-form-card {
    padding: 20px 14px !important;
    border-radius: 16px !important;
  }

  [dir="rtl"] .ffy-faq-support {
    padding: 28px 14px !important;
  }

  [dir="rtl"] .ffy-section-heading {
    font-size: clamp(1.7rem, 8vw, 2.2rem) !important;
  }

  [dir="rtl"] .ffy-navbar {
    padding: 0 10px !important;
    min-height: 44px !important;
  }

  [dir="rtl"] .ffy-footer-bottom {
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
  }

  [dir="rtl"] .ffy-footer-bottom-links {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* RTL fluid about/story images on mobile */
@media screen and (max-width: 767px) {
  [dir="rtl"] .ffy-about-img-wrap img {
    height: auto !important;
    aspect-ratio: 4 / 3;
    min-height: 240px;
    max-height: 400px;
  }

  [dir="rtl"] .ffy-story-img-wrap img {
    height: auto !important;
    aspect-ratio: 4 / 3;
    min-height: 240px;
    max-height: 400px;
  }
}

@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-about-img-wrap img {
    min-height: 200px;
    max-height: 320px;
  }

  [dir="rtl"] .ffy-story-img-wrap img {
    min-height: 200px;
    max-height: 320px;
  }

  [dir="rtl"] .ffy-contact-map-card {
    height: 200px;
  }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  [dir="rtl"] .ffy-about-img-wrap img {
    height: 360px;
  }

  [dir="rtl"] .ffy-story-img-wrap img {
    height: 360px;
  }
}

/* RTL footer contact text wrapping */
[dir="rtl"] .ffy-footer-contact-item span {
  word-break: break-word;
  overflow-wrap: break-word;
}

[dir="rtl"] .ffy-footer-contact-item {
  min-width: 0;
}

/* RTL testimonial and accordion wrapping */
[dir="rtl"] .ffy-testimonial-quote,
[dir="rtl"] .ffy-accordion-title {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* RTL product card footer wrapping on very small screens */
@media screen and (max-width: 380px) {
  [dir="rtl"] .ffy-flavor-footer,
  [dir="rtl"] .ffy-product-card-footer {
    flex-direction: column !important;
    gap: 10px;
    align-items: flex-end;
  }

  [dir="rtl"] .ffy-btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* RTL navbar categories hide on narrow tablets */
@media screen and (min-width: 769px) and (max-width: 900px) {
  [dir="rtl"] .ffy-navbar .ffy-nb-categories {
    display: none;
  }
}

/* RTL catalog filter row on small tablets */
@media screen and (min-width: 481px) and (max-width: 768px) {
  [dir="rtl"] .ffy-catalog-filter-row {
    flex-direction: column;
    align-items: flex-end;
  }

  [dir="rtl"] .ffy-catalog-sort-wrap {
    width: 100%;
  }
}

/* ================================================================
   END RTL RESPONSIVE OVERRIDES v3
   ================================================================ */


/* ================================================================
   RTL COMPREHENSIVE FIXES v4 — Milk
   Covers all remaining directional issues across all pages.
   ================================================================ */

/* ---------------------------------------------------------------
   Detail Sections — RTL text alignment
   --------------------------------------------------------------- */
/* In dir="rtl" flex row: icon (first DOM) on RIGHT, text on LEFT.
   For RTL section titles, this is correct (text at reading start = right).
   Keeping row-reverse here was wrong. */
[dir="rtl"] .ffy-pd-section-title {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
  flex-direction: row;
  text-align: right;
}

[dir="rtl"] .ffy-pd-ing-pill {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  /* icon on RIGHT (start of RTL reading), text on LEFT — correct without reversal */
  flex-direction: row;
}

/* ---------------------------------------------------------------
   CONTACT FORM — Input / Textarea / Select text alignment
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-form-input,
[dir="rtl"] .ffy-form-textarea {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .ffy-form-input::placeholder,
[dir="rtl"] .ffy-form-textarea::placeholder {
  text-align: right;
}

[dir="rtl"] .ffy-form-error {
  text-align: right;
}

[dir="rtl"] .ffy-form-label {
  text-align: right;
}

[dir="rtl"] .ffy-contact-form-title,
[dir="rtl"] .ffy-contact-form-desc {
  text-align: right;
}

/* Contact info cards — dir="rtl" flex row: icon on right, text on left (correct) */
[dir="rtl"] .ffy-contact-card {
  flex-direction: row;
}

[dir="rtl"] .ffy-contact-card-title,
[dir="rtl"] .ffy-contact-card-text {
  text-align: right;
}

/* ---------------------------------------------------------------
   MOBILE CATALOG FILTER ROW — RTL mobile alignment
   --------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  [dir="rtl"] .ffy-catalog-filter-row {
    align-items: flex-end;
  }
  
  [dir="rtl"] .ffy-catalog-tabs {
    flex-direction: row;
  }
}

/* ---------------------------------------------------------------
   SMALL SCREEN FOOTER BOTTOM — RTL alignment fixes
   --------------------------------------------------------------- */
@media screen and (max-width: 360px) {
  [dir="rtl"] .ffy-footer-bottom {
    flex-direction: column;
    align-items: flex-end;
  }
}

/* ---------------------------------------------------------------
   ACCORDION BODY INNER — RTL padding logical fix
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-accordion-body-inner {
  padding-inline-start: 28px;
  padding-inline-end: 28px;
}

/* ---------------------------------------------------------------
   MOBILE ACCORDION HEADER — RTL padding (already at 480px in v2)
   Reinforce for all RTL at mobile breakpoint
   --------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-accordion-header {
    flex-direction: row;
    gap: 12px;
  }
}

/* ---------------------------------------------------------------
   PRODUCT SECTIONS — Missing RTL text-alignment
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-pd-qty-row {
  flex-direction: row;
}

[dir="rtl"] .ffy-pd-cta-row {
  flex-direction: row;
}

/* ---------------------------------------------------------------
   NAVBAR HAMBURGER — RTL position (hamburger on left, logo on right)
   In RTL with justify-content: space-between, logo (first in DOM) is
   on the RIGHT and hamburger (last in DOM) is on the LEFT.
   This is already correct with dir="rtl" flex row — no changes needed.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   BREADCRUMB SEPARATOR ICON — Flip chevron for RTL
   The separator is a fa-chevron-left (<) in the HTML. In RTL reading
   direction this points toward the root (correct: home → current
   reads right-to-left as: current ← home). This is semantically correct.
   No CSS transform needed. But mirror it via CSS for visual clarity.
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-breadcrumb-sep i.fa-chevron-left,
[dir="rtl"] .ffy-breadcrumb-sep i.fa-chevron-right {
  /* Keep as-is: chevron-left (<) points toward current page in RTL breadcrumb */
  display: inline-block;
}

/* ---------------------------------------------------------------
   ABOUT SECTION — Missing heading text alignment
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-about-text .ffy-section-heading {
  text-align: right;
}

[dir="rtl"] .ffy-about-text .ffy-section-label {
  text-align: right;
  display: block;
}

[dir="rtl"] .ffy-about-text .ffy-section-body {
  text-align: right;
}

/* ---------------------------------------------------------------
   FEATURES / WHY MILK — RTL font overrides (center-aligned OK)
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-feature-title {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-feature-desc {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   TESTIMONIALS — RTL font overrides
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-testimonial-name {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-testimonial-role {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   NEWSLETTER SECTION — RTL font overrides
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-newsletter .ffy-section-heading {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-newsletter .ffy-section-body {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  direction: rtl;
}

[dir="rtl"] .ffy-newsletter-note {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   FLAVOR CARD BODY — RTL text alignment
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-flavor-name {
  text-align: right;
}

[dir="rtl"] .ffy-flavor-desc {
  text-align: right;
}

[dir="rtl"] .ffy-flavor-footer,
[dir="rtl"] .ffy-product-card-footer {
  flex-direction: row-reverse;
}

/* ---------------------------------------------------------------
   CATALOG EMPTY STATE — RTL
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-catalog-empty h3,
[dir="rtl"] .ffy-catalog-empty p {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-catalog-empty h3 {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
}

/* ---------------------------------------------------------------
   FOOTER COL TITLE — RTL text alignment
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-footer-col-title {
  text-align: right;
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-footer-links {
  text-align: right;
}

[dir="rtl"] .ffy-footer-links a {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   SECTION HEADERS — RTL font for section labels / headings
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-section-heading {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-section-body {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   BUTTONS — RTL icon order in buttons
   For inline-flex buttons with icon + text, in RTL the icon should
   appear on the LEFT of text (after text in reading direction).
   Buttons that use gap with icon first in DOM will naturally
   place icon on right in RTL flex row. When icon should follow text,
   use flex-direction: row-reverse on specific buttons.
   Most buttons here are fine with row direction in RTL.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   PRODUCT DETAIL — Missing RTL text alignments
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-pd-section {
  text-align: right;
}

[dir="rtl"] .ffy-pd-description p {
  text-align: right;
}

/* ---------------------------------------------------------------
   TOAST NOTIFICATION — RTL layout
   On desktop: toast appears on LEFT (inline-start in RTL).
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-toast {
  flex-direction: row;
}

/* ---------------------------------------------------------------
   CHECKLIST PAGE — Items text alignment RTL
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-cl-item-title {
  text-align: right;
}

[dir="rtl"] .ffy-cl-item-desc {
  text-align: right;
}

[dir="rtl"] .ffy-cl-category-title {
  text-align: right;
}

[dir="rtl"] .ffy-cl-stats {
  flex-direction: row;
}

/* ---------------------------------------------------------------
   404 PAGE — RTL text alignment
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-404-title,
[dir="rtl"] .ffy-404-desc {
  direction: rtl;
}

/* ---------------------------------------------------------------
   PRODUCT DETAIL — Section title icon order
   In RTL: icon should appear after title text (on the left side)
   dir="rtl" on flex row: title (first DOM) on right, icon (second) on left.
   This is correct! No change needed.
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-pd-section-title {
  flex-direction: row;
  text-align: right;
}

/* ================================================================
   END RTL COMPREHENSIVE FIXES v4
   ================================================================ */


/* ================================================================
   RTL SPACING & ALIGNMENT OVERHAUL v4
   Mirrors main.css spacing fixes for all Arabic/RTL pages.
   ================================================================ */

/* Page hero — same padding as LTR */
[dir="rtl"] .ffy-page-hero {
  padding: 168px 5vw 120px;
}

/* btn-outline-white — RTL fonts */
[dir="rtl"] .ffy-btn-outline-white {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* Section headers — scale down margin */
[dir="rtl"] .ffy-flavors-header,
[dir="rtl"] .ffy-features-header,
[dir="rtl"] .ffy-testimonials-header,
[dir="rtl"] .ffy-values-header,
[dir="rtl"] .ffy-milestones-header,
[dir="rtl"] .ffy-team-header,
[dir="rtl"] .ffy-pd-related-header {
  margin-bottom: 56px;
}

/* Story/About text — RTL padding side */
[dir="rtl"] .ffy-about-text,
[dir="rtl"] .ffy-story-text {
  padding-left: 0;
  padding-right: 24px;
}

/* Stats rows */
[dir="rtl"] .ffy-story-stat-row,
[dir="rtl"] .ffy-about-stat-row {
  margin-top: 48px;
  padding-top: 36px;
}

/* Newsletter */
[dir="rtl"] .ffy-newsletter {
  padding-top: 96px;
  padding-bottom: 96px;
}

[dir="rtl"] .ffy-newsletter .ffy-section-body {
  margin-bottom: 44px;
}

/* Footer */
[dir="rtl"] .ffy-footer {
  padding-top: 72px;
  padding-bottom: 40px;
}

[dir="rtl"] .ffy-footer-top {
  padding-bottom: 52px;
}

[dir="rtl"] .ffy-footer-bottom {
  padding-top: 32px;
}

/* Contact layout */
[dir="rtl"] .ffy-contact-layout {
  gap: 60px;
}

/* FAQ */
[dir="rtl"] .ffy-faq-tabs {
  margin-bottom: 44px;
}

[dir="rtl"] .ffy-faq-support {
  margin-top: 56px;
}

/* Accordion */
[dir="rtl"] .ffy-accordion-header {
  padding: 24px 28px;
}

[dir="rtl"] .ffy-accordion-body-inner {
  padding: 0 28px 32px;
}

/* Catalog */
[dir="rtl"] .ffy-catalog-controls {
  margin-bottom: 40px;
}

/* Checklist */
[dir="rtl"] .ffy-checklist {
  padding: 88px 0 112px;
}

[dir="rtl"] .ffy-cl-progress-wrap {
  margin-bottom: 52px;
}

/* ---------------------------------------------------------------
   RTL Responsive — Tablet (≤ 1024px)
   --------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  [dir="rtl"] .ffy-page-hero {
    padding: 148px 5vw 100px;
  }
  [dir="rtl"] .ffy-about-text,
  [dir="rtl"] .ffy-story-text {
    padding-left: 0;
    padding-right: 0;
  }
  [dir="rtl"] .ffy-story-stat-row,
  [dir="rtl"] .ffy-about-stat-row {
    margin-top: 40px;
    padding-top: 28px;
  }
  [dir="rtl"] .ffy-newsletter {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  [dir="rtl"] .ffy-footer {
    padding-top: 60px;
    padding-bottom: 36px;
  }
  [dir="rtl"] .ffy-faq-support {
    margin-top: 48px;
    padding: 48px 40px;
  }
  [dir="rtl"] .ffy-catalog-controls {
    margin-bottom: 36px;
  }
  [dir="rtl"] .ffy-accordion-header {
    padding: 22px 24px;
  }
  [dir="rtl"] .ffy-accordion-body-inner {
    padding: 0 24px 28px;
  }
  [dir="rtl"] .ffy-flavors-header,
  [dir="rtl"] .ffy-features-header,
  [dir="rtl"] .ffy-testimonials-header,
  [dir="rtl"] .ffy-values-header,
  [dir="rtl"] .ffy-milestones-header,
  [dir="rtl"] .ffy-team-header,
  [dir="rtl"] .ffy-pd-related-header {
    margin-bottom: 48px;
  }
  [dir="rtl"] .ffy-checklist {
    padding: 72px 0 96px;
  }
}

/* ---------------------------------------------------------------
   RTL Responsive — Mobile (≤ 767px)
   --------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  [dir="rtl"] .ffy-page-hero {
    padding: 136px 6vw 88px;
  }
  [dir="rtl"] .ffy-page-hero-heading {
    margin-bottom: 22px;
  }
  [dir="rtl"] .ffy-page-hero-desc {
    margin-bottom: 32px;
    font-size: 1rem;
  }
  [dir="rtl"] .ffy-newsletter {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  [dir="rtl"] .ffy-newsletter .ffy-section-body {
    margin-bottom: 36px;
  }
  [dir="rtl"] .ffy-flavors-header,
  [dir="rtl"] .ffy-features-header,
  [dir="rtl"] .ffy-testimonials-header,
  [dir="rtl"] .ffy-values-header,
  [dir="rtl"] .ffy-milestones-header,
  [dir="rtl"] .ffy-team-header,
  [dir="rtl"] .ffy-pd-related-header {
    margin-bottom: 36px;
  }
  [dir="rtl"] .ffy-story-stat-row,
  [dir="rtl"] .ffy-about-stat-row {
    margin-top: 36px;
    padding-top: 24px;
    gap: 20px;
  }
  [dir="rtl"] .ffy-accordion-header {
    padding: 20px 22px;
  }
  [dir="rtl"] .ffy-accordion-body-inner {
    padding: 0 22px 26px;
  }
  [dir="rtl"] .ffy-faq-tabs {
    margin-bottom: 32px;
  }
  [dir="rtl"] .ffy-faq-support {
    margin-top: 40px;
  }
  [dir="rtl"] .ffy-catalog-controls {
    margin-bottom: 28px;
  }
  [dir="rtl"] .ffy-footer {
    padding-top: 52px;
    padding-bottom: 28px;
  }
  [dir="rtl"] .ffy-footer-top {
    padding-bottom: 36px;
  }
  [dir="rtl"] .ffy-footer-bottom {
    padding-top: 24px;
  }
  [dir="rtl"] .ffy-checklist {
    padding: 56px 0 72px;
  }
  [dir="rtl"] .ffy-cl-progress-wrap {
    margin-bottom: 40px;
  }
  [dir="rtl"] .ffy-breadcrumb {
    margin-bottom: 22px;
  }
}

/* ---------------------------------------------------------------
   RTL Responsive — Small Mobile (≤ 480px)
   --------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-page-hero {
    padding: 124px 5vw 76px;
  }
  [dir="rtl"] .ffy-breadcrumb {
    margin-bottom: 18px;
  }
  [dir="rtl"] .ffy-page-hero-heading {
    margin-bottom: 18px;
  }
  [dir="rtl"] .ffy-page-hero-desc {
    margin-bottom: 28px;
    font-size: 0.95rem;
  }
  [dir="rtl"] .ffy-newsletter {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  [dir="rtl"] .ffy-newsletter .ffy-section-body {
    margin-bottom: 32px;
  }
  [dir="rtl"] .ffy-flavors-header,
  [dir="rtl"] .ffy-features-header,
  [dir="rtl"] .ffy-testimonials-header,
  [dir="rtl"] .ffy-values-header,
  [dir="rtl"] .ffy-milestones-header,
  [dir="rtl"] .ffy-team-header,
  [dir="rtl"] .ffy-pd-related-header {
    margin-bottom: 28px;
  }
  [dir="rtl"] .ffy-story-stat-row,
  [dir="rtl"] .ffy-about-stat-row {
    margin-top: 28px;
    padding-top: 20px;
  }
  [dir="rtl"] .ffy-accordion-header {
    padding: 18px 18px;
  }
  [dir="rtl"] .ffy-accordion-body-inner {
    padding: 0 18px 22px;
  }
  [dir="rtl"] .ffy-faq-tabs {
    margin-bottom: 28px;
  }
  [dir="rtl"] .ffy-faq-support {
    margin-top: 36px;
  }
  [dir="rtl"] .ffy-catalog-controls {
    margin-bottom: 24px;
  }
  [dir="rtl"] .ffy-footer-top {
    padding-bottom: 32px;
  }
  [dir="rtl"] .ffy-footer-bottom {
    padding-top: 20px;
  }
  [dir="rtl"] .ffy-checklist {
    padding: 48px 0 64px;
  }
  [dir="rtl"] .ffy-cl-progress-wrap {
    margin-bottom: 36px;
  }
  [dir="rtl"] .ffy-cl-tabs {
    margin-bottom: 32px;
  }
  [dir="rtl"] .ffy-cl-card {
    padding: 24px 18px;
  }
  [dir="rtl"] .ffy-cl-actions {
    margin-top: 40px;
    padding-top: 28px;
  }
}

/* ================================================================
   END RTL SPACING & ALIGNMENT OVERHAUL v4
   ================================================================ */

/* ================================================================
   RTL SPACING & ALIGNMENT OVERHAUL v5 — GLOBAL AUDIT RESOLUTION
   ================================================================ */

/* Inner page hero clearance */
[dir="rtl"] .ffy-page-hero {
  padding-top: 172px !important;
  padding-bottom: 140px !important;
}

[dir="rtl"] .ffy-page-hero-inner {
  padding-bottom: 24px;
}

[dir="rtl"] .ffy-page-hero-cta {
  margin-top: 12px;
  margin-bottom: 16px;
  gap: 16px;
}

[dir="rtl"] .ffy-page-hero:not(:has(.ffy-page-hero-wave)) {
  padding-bottom: 96px !important;
}

/* Contact page hero typography in RTL */
[dir="rtl"] .ffy-page-hero-badge {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-page-hero-title {
  font-family: 'Amiri', 'Cormorant Garamond', serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-page-hero-sub {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
}

/* Responsive hero padding in RTL */
@media screen and (max-width: 1024px) {
  [dir="rtl"] .ffy-page-hero {
    padding-top: 156px !important;
    padding-bottom: 116px !important;
  }
}

@media screen and (max-width: 767px) {
  [dir="rtl"] .ffy-page-hero {
    padding-top: 140px !important;
    padding-bottom: 100px !important;
  }

  [dir="rtl"] .ffy-page-hero:not(:has(.ffy-page-hero-wave)) {
    padding-bottom: 72px !important;
  }

  [dir="rtl"] .ffy-page-hero-cta {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
    margin-bottom: 14px;
  }

  [dir="rtl"] .ffy-page-hero-cta .ffy-btn {
    width: 100%;
    justify-content: center;
  }
}

@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-page-hero {
    padding-top: 130px !important;
    padding-bottom: 92px !important;
  }
}

/* ================================================================
   END RTL SPACING & ALIGNMENT OVERHAUL v5
   ================================================================ */