/* ===================================================================
   RTL / Arabic overrides.
   Loaded on every page, but every rule is scoped under [dir="rtl"] so
   it has zero effect until Arabic mode is switched on — safe to load
   always with no LTR side-effects.

   Most of the theme's layout already flips correctly for free: flexbox
   "row" and CSS Grid auto-placement both follow the text direction per
   spec, and the WhatsApp button already uses the logical
   `inset-inline-end` property instead of a physical `right`. The rules
   below only cover the handful of spots that use physical left/right
   values or Latin-only type, found by an actual audit of the theme's
   CSS rather than guessed blind.
=================================================================== */

[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button {
	font-family: 'Cairo', 'Tajawal', var(--font-body, 'Karla', sans-serif);
}

/* Headings keep a distinct look in Arabic too — Cairo reads better at
   display sizes than forcing Fraunces (a Latin serif) onto Arabic glyphs,
   which most browsers can't render properly anyway and will silently
   fall back from. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
	font-family: 'Cairo', var(--font-heading, 'Fraunces', serif);
}

/* Skip-link: was left:-9999px so it hides off-screen to the left;
   in RTL the visual "off-screen" direction is the right edge. */
[dir="rtl"] .screen-reader-text { left: auto; right: -9999px; }
[dir="rtl"] .skip-link:focus { left: auto; right: 10px; }

/* Cart-count bubble: mirror it to the opposite corner of the icon. */
[dir="rtl"] .header-cart .count,
[dir="rtl"] .cart-btn .count {
	right: auto; left: -4px;
}

/* Promo ribbon's diagonal edge accents — swap so the taper still reads
   correctly instead of both landing on the same side. */
[dir="rtl"] .promo::before { left: auto; right: 0; }
[dir="rtl"] .promo::after  { right: auto; left: 0; }

/* Bouquet Builder text blocks that were explicitly left-aligned for
   English copy — flip to right so Arabic copy doesn't read against
   the grain. (The visual bouquet canvas itself is deliberately left
   un-mirrored: it's a piece of generated art, not a text-flow element,
   and mirroring flower positions has no semantic meaning either way.) */
[dir="rtl"] .bb-pick-card,
[dir="rtl"] .bb-delivery-box,
[dir="rtl"] .bb-card-msg-box,
[dir="rtl"] .bb-flower-card {
	text-align: right;
}
[dir="rtl"] .bb-swatches,
[dir="rtl"] .bb-stepper {
	direction: rtl;
}

/* Mobile menu dropdown edge — was left:0/right:0 (symmetric already,
   no change needed) but list markers and nested alignment inside it
   should still read right-to-left. */
[dir="rtl"] .main-nav ul { text-align: right; }

/* Language-switcher button itself, plus generic small gap fix so icon
   + label pairs (like the WhatsApp/contact chips) don't visually
   collide when the browser mirrors inline flow. */
[dir="rtl"] .lang-switch { direction: ltr; } /* button LABEL itself (e.g. "English") stays in its own script's natural direction */

/* WooCommerce: form field labels, table headers, and quantity inputs
   read more naturally right-aligned in Arabic. Scoped narrowly to
   avoid fighting WooCommerce's own responsive table CSS. */
[dir="rtl"] .woocommerce table.shop_table th,
[dir="rtl"] .woocommerce table.shop_table td,
[dir="rtl"] .woocommerce-checkout label,
[dir="rtl"] .woocommerce-billing-fields label,
[dir="rtl"] .woocommerce-shipping-fields label {
	text-align: right;
}
[dir="rtl"] .quantity input.qty { direction: rtl; text-align: center; }