/**
 * RTL overrides — loaded only when is_rtl() (Arabic). Most components
 * already use logical properties (margin-inline-*, padding-inline-*) or
 * have explicit html[dir="rtl"] rules alongside their base styles in
 * header.css / shop.css / components.css; this file catches what's left:
 * global text alignment, icon mirroring, and font.
 */

html[dir="rtl"] body {
	direction: rtl;
	text-align: right;
	font-family: var(--font-arabic);
}

html[dir="rtl"] .afripacka-btn,
html[dir="rtl"] .afripacka-input,
html[dir="rtl"] .afripacka-select,
html[dir="rtl"] .afripacka-textarea {
	text-align: right;
}

/* Directional icons that encode meaning (not the accordion's +, which is
   symmetric) get mirrored — chevrons/arrows used for "next/back" affordances. */
html[dir="rtl"] .afripacka-icon-mirror {
	transform: scaleX(-1);
}

/* Breadcrumb + dropdown + badge positions already have explicit dir="rtl"
   rules colocated with their base styles; nothing further needed here. */

/* Price display: currency placement in Arabic commonly follows the number,
   consistent with the site's existing WooCommerce currency position setting
   — no override needed, but ensure price strings don't wrap awkwardly. */
html[dir="rtl"] .afripacka-product-card__price,
html[dir="rtl"] .afripacka-product-page__price {
	direction: rtl;
	unicode-bidi: plaintext;
}

/* Checkout steps + form labels */
html[dir="rtl"] .afripacka-checkout-steps__nav {
	flex-direction: row-reverse;
}

/* Table headers/cells already flip via colocated rules in components.css;
   ensure wholesale table numbers stay legible (numerals aren't mirrored). */
html[dir="rtl"] .afripacka-table td {
	unicode-bidi: plaintext;
}