/* ==========================================================================
   ARABIC / RTL STYLESHEET
   Loaded only when the site is showing Arabic (xtocash_is_arabic()).
   Mirrors the layout so it reads naturally right-to-left: flex/grid
   direction reversals, text alignment, icon/search positioning, and
   spacing (margin-left/right swaps) for every major component.
   ========================================================================== */

body{ direction: rtl; text-align: right; }

/* Arabic-friendly font stack + no negative tracking (negative
   letter-spacing breaks Arabic letter joining and looks broken) */
:root{ --xc-font-ui: -apple-system, BlinkMacSystemFont, 'SF Arabic', 'Segoe UI', Tahoma, 'Noto Sans Arabic', Arial, sans-serif; }
.xc-header, .xc-header *, .xc-mega-menu, .xc-mega-menu *, .xc-promo-bar, .xc-promo-bar *,
.xc-nav-drawer, .xc-nav-drawer *, .xc-search-panel__form input,
h1, h2, h3, .xc-hero h1, .xc-trust-grid .cell .stat{ letter-spacing:0 !important; }

/* Header: direction:rtl mirrors the flex row by itself (logo on the
   right, icons on the left) — no row-reverse needed. */
.xc-logo__bigx{ margin:0; }
.xc-header__inner{ padding:0 16px 0 8px; }
@media (min-width: 900px){ .xc-header__inner{ padding:0 22px 0 16px; } }
.xc-search-panel__form input{ text-align:right; }
.xc-promo-bar a::after{ content:' \2039'; } /* chevron points left in RTL */
.xc-nav-drawer{ transform: translateX(-100%); }
.xc-nav-drawer.is-open{ transform: translateX(0); }
.xc-nav-drawer__list a{ text-align:right; }
.xc-mega-menu__panel a{ text-align:right; }
.xc-search{ flex-direction: row; }
.xc-search input{ text-align: right; }

/* Promo bar / marquee — text direction follows body, no extra change needed beyond direction:rtl above */

/* Hero */
.xc-hero{ text-align: center; }
.xc-hero h1{ line-height:1.35; } /* Arabic needs more line height so marks don't clip */
.xc-hero p{ margin-left:auto; margin-right:auto; }

/* Featured split (category list + phone image): dir=rtl already puts the
   category list on the right and the image on the left, so no reversing. */
.xc-featured__categories{ margin-left:0; margin-right:14px; }
.xc-featured__cat-link{ text-align: right; }
.xc-featured__cat-link .icon{ margin:0; }

/* Trust card: natural RTL order (first item on the right) */

/* Category / brand grids — grid direction naturally follows body dir,
   only need to fix any hardcoded left/right offsets */
.xc-cat-grid a, .xc-quicklinks{ text-align: center; }

/* Search dropdown */
.xc-search-dropdown{ text-align: right; }
.xc-search-dropdown__item{ text-align: right; }

/* Bottom mobile nav — icon/label stack stays centered, no mirroring needed,
   but ensure row order reads naturally */
.xc-bottom-nav{ direction: rtl; }

/* Sell Flow: breadcrumbs, cards, price block, condition tabs */
.xc-flow__crumbs{ flex-direction: row-reverse; justify-content: flex-end; }
.xc-flow__grid{ direction: rtl; }
.xc-flow__card{ text-align: center; }
.xc-flow__back{ text-align: right; }
.xc-flow__box-pills{ flex-direction: row-reverse; }
.xc-flow__condition-tabs{ direction: rtl; }
.xc-flow__criteria-list li{ flex-direction: row-reverse; text-align: right; }
.xc-flow__criteria-arrow{ transform: scaleX(-1); } /* → becomes ← to point the natural reading direction */
.xc-price-block{ text-align: center; }
.xc-price-block__meta, .xc-price-block__disclaimer{ text-align: center; }
.xc-flow__summary{ flex-direction: row-reverse; }
.xc-flow__summary-details{ text-align: right; }
.xc-flow__summary-row{ align-items: flex-end; }
.xc-flow__benefits-list li{ padding:8px 26px 8px 0; }
.xc-flow__benefits-list li::before{ left:auto; right:0; }
.xc-flow__faq-item summary::after{ float:left; }
.xc-flow__storage-card{ text-align: center; }

/* Footer */
.xc-footer .contact-row{ text-align: right; }
.xc-social{ flex-direction: row-reverse; }

/* Back-to-top / help icon: keep them visually anchored the same
   physical corner (bottom-right in both languages) since that's a
   universal mobile convention, not a text-direction concern. */

/* Desktop hero: style.css positions the text and image with hard-coded
   left/right offsets, which do not mirror on their own. Flip them so the
   image sits on the left and the text block fills the space on the right. */
@media (min-width: 900px){
  .xc-hero-featured-desktop .xc-hero{ left:452px; right:32px; }
  .xc-hero-featured-desktop .xc-featured__image{ left:0; right:auto; }
}