/* ============================================================
   RTL MODE — LIGHTWEIGHT VERSION
   Only flips what must visually flip in Arabic
   ============================================================ */

/* Core direction */
html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* ---------------------------------------
   1) Background: flip horizontal alignment
   --------------------------------------- */
html[dir="rtl"] .hero-primary,
html[dir="rtl"] .hero-secondary,
html[dir="rtl"] .hero-accent-forest,
html[dir="rtl"] .bg-primary-wide,
html[dir="rtl"] .bg-secondary-wide,
html[dir="rtl"] .bg-accent-forest-wide,
html[dir="rtl"] .bg-accent-sand-wide,
html[dir="rtl"] .donate-bg {
  background-position: right !important;
}

/* ---------------------------------------
   2) Inline paddings flip (ps ↔ pe)
   --------------------------------------- */
/*html[dir="rtl"] .hero-primary,
html[dir="rtl"] .hero-secondary,
html[dir="rtl"] .hero-accent-forest {
  padding-inline-start: 1rem !important;
  padding-inline-end: 5rem !important;
}*/

/* ---------------------------------------
   3) Flip rounded corners (common in hero)
   --------------------------------------- */
html[dir="rtl"] .hero-primary,
html[dir="rtl"] .hero-secondary,
html[dir="rtl"] .hero-accent-forest {
  border-bottom-left-radius: 2rem !important;
  border-bottom-right-radius: 0 !important;
}

/* ---------------------------------------
   4) Navigation alignment
   --------------------------------------- */
html[dir="rtl"] .menu {
  direction: rtl;
}

html[dir="rtl"] .nav-items,
html[dir="rtl"] .nested-nav-items,
html[dir="rtl"] .nested-nav-items-2 {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .nested-nav-items {
  left: auto !important;
  right: 0 !important;
}

html[dir="rtl"] .nested-nav-items-2 {
  left: auto !important;
  right: 100% !important;
}

/* ---------------------------------------
   5) Sliders & overlays
   --------------------------------------- */
html[dir="rtl"] .overflow {
  left: auto;
  right: 0;
}

html[dir="rtl"] .slider-content,
html[dir="rtl"] .slider-image {
  direction: rtl;
}

/* ---------------------------------------
   6) Lists inside custom sections
   --------------------------------------- */
html[dir="rtl"] .wp-block-aa-custom-section li {
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
}

html[dir="rtl"] .wp-block-aa-custom-section li::before {
  left: auto !important;
  right: 0 !important;
}

/* ---------------------------------------
   7) Quote decoration
   --------------------------------------- */
html[dir="rtl"] .blog-content .wp-block-quote::before {
  left: auto !important;
  right: 2.5rem !important;
}

/* ---------------------------------------
   8) Donation toggle knob
   --------------------------------------- */
html[dir="rtl"] .peer:checked + div .toggle-knob {
  transform: translateX(-20px) !important;
}

html[dir="rtl"] blockquote {
  border-left: 0 !important;
  border-right: 4px solid var(--color-primary) !important;
  padding-left: 0 !important;
  padding-right: 1rem !important;
}

/*html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
  text-align: right;
}*/

/* ==========================================
   RTL — Donate Bar fixes
   ========================================== */

/* Icons position */
html[dir="rtl"] .donatebar .fa-chevron-down {
  right: auto !important;
  left: 0.75rem !important;
}

/* Select padding */
html[dir="rtl"] .donatebar select {
  padding-right: 0.5rem !important;
  padding-left: 2rem !important;
}

/* Toggle knob base position */
html[dir="rtl"] .donatebar .toggle-knob {
  left: auto !important;
  right: -1px !important;
}

/* Toggle movement */
html[dir="rtl"] .donatebar .peer:checked + div .toggle-knob {
  transform: translateX(-20px) !important;
}

/* Inputs alignment */
html[dir="rtl"] .donatebar input {
  text-align: right;
}

/* Currency dropdown icon */
html[dir="rtl"] .donatebar .currency-icon {
  right: auto !important;
  left: 0 !important;
}

/* ============================================================
   RTL — Donate Drawer (FINAL FIX)
   ============================================================ */

/* RTL: مغلق = خارج الشاشة (يمين) */
html[dir="rtl"] .donate-drawer {
  left: 0;
  right: auto;
  transform: translateX(-100%);
  border-left: none;
  border-right: 1px solid rgb(229 231 235);
}

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

/* ============================================================
   RTL — NAV menu
   ============================================================ */
/* ---------------------------------------
   Primary nav items
--------------------------------------- */
html[dir="rtl"] .nav-items {
  direction: rtl;
  text-align: right;
}

/* ---------------------------------------
   Dropdowns (level 1)
--------------------------------------- */
html[dir="rtl"] .nested-nav-items {
  left: auto !important;
  right: 0 !important;
  text-align: right;
}

/* ---------------------------------------
   Dropdowns (level 2)
--------------------------------------- */
html[dir="rtl"] .nested-nav-items-2 {
  left: auto !important;
  right: 100% !important;
  text-align: right;
}

/* ---------------------------------------
   Dropdown buttons text alignment
--------------------------------------- */
html[dir="rtl"] .nested-nav-item-button-2 {
  text-align: right;
}

/* ---------------------------------------
   Right-side action buttons group
--------------------------------------- */
html[dir="rtl"] .menu > div {
  flex-direction: row-reverse;
}

/* ---------------------------------------
   Basket count badge
--------------------------------------- */
html[dir="rtl"] .basket-count {
  right: auto !important;
  left: -0.5rem !important;
}

/* ---------------------------------------
   Search modal icon inside input
--------------------------------------- */
html[dir="rtl"] #search-modal form .absolute {
  left: auto !important;
  right: 0 !important;
  padding-left: 0 !important;
  padding-right: 1rem !important;
}

/* Search input padding flip */
html[dir="rtl"] #search-modal input {
  padding-left: 1rem !important;
  padding-right: 3rem !important;
  text-align: right;
}

/* ---------------------------------------
   Mobile navbar buttons
--------------------------------------- */
html[dir="rtl"] .mob-nav {
  flex-direction: row-reverse;
}

/* Burger icon stays logical */
html[dir="rtl"] .menu-button {
  margin-left: 0;
  margin-right: 0.5rem;
}

html[dir="rtl"] .text-left{
  text-align: right !important;
}
html[dir="rtl"] .text-right{
  text-align: left !important;
}