/* =============================================================
   Bass Perfume - RTL corrections for the Joice theme
   -------------------------------------------------------------
   Why this file exists:
     1. The Joice theme ships no rtl.css.
     2. The theme dequeues WooCommerce's own stylesheets, so
        woocommerce-rtl.css / woocommerce-layout-rtl.css never
        load either.
   Layout that relies on flexbox/grid already mirrors correctly
   under dir="rtl"; only the rules below hard-code a side.

   Everything is scoped to [dir="rtl"] so the /en/ version of the
   site is completely unaffected.
   ============================================================= */


/* -------------------------------------------------------------
   1. Off-canvas panels and header dropdowns
   The theme anchors these with right:0 and parks the cart drawer
   off-screen with translateX(100%). Under RTL the header toggles
   sit on the left, so an unmirrored drawer stays off the RIGHT
   edge - which also produced a horizontal scrollbar site-wide.
   ------------------------------------------------------------- */
[dir="rtl"] .cart-box,
[dir="rtl"] .language-box,
[dir="rtl"] .login-box,
[dir="rtl"] .header-search .search-box,
[dir="rtl"] .box {
	right: auto;
	left: 0;
}

[dir="rtl"] .cart-box {
	transform: translateX(-100%);
}

[dir="rtl"] .hbe-toggle.active + .cart-box {
	transform: translateX(0);
}

/* The mobile sticky dashboard slides vertically. Re-assert it after
   the horizontal transform above so it is not overridden. */
[dir="rtl"] .sticky-dashboard .cart-box,
[dir="rtl"] .sticky-dashboard .search-box {
	right: auto;
	left: 0;
	transform: translate(0, 100%);
}

[dir="rtl"] .sticky-dashboard .active + .cart-box,
[dir="rtl"] .sticky-dashboard .active.search-box {
	transform: translate(0, -100%);
}

/* Full-screen product search / filter overlays */
[dir="rtl"] .et-product-search-toggle .search-box,
[dir="rtl"] .et-product-search-toggle .filter-box {
	left: auto;
	right: 0;
}


/* -------------------------------------------------------------
   2. Sale badge and product labels
   Theme pins these to the left of the product image with
   !important, so the mirror needs !important too.
   ------------------------------------------------------------- */
[dir="rtl"] .product .onsale,
[dir="rtl"] ul .product .label,
[dir="rtl"] .single-product-wrapper > .label {
	left: auto !important;
	right: 12px !important;
}

[dir="rtl"] .single-product-wrapper > .label + .label,
[dir="rtl"] .product .onsale + .label {
	left: auto !important;
	right: 56px !important;
}

[dir="rtl"] .product .onsale + .label + .label {
	left: auto !important;
	right: 104px !important;
}


/* -------------------------------------------------------------
   3. Directional icons
   The theme draws arrows with a CSS mask of a right-pointing SVG
   and spaces them with margin-left. Both must flip.
   ------------------------------------------------------------- */
[dir="rtl"] .product .button:after,
[dir="rtl"] .product .added_to_cart:after,
[dir="rtl"] .post-read-more:after,
[dir="rtl"] .pricing-table-item .button .icon {
	margin-left: 0;
	margin-right: 8px;
	transform: scaleX(-1);
}

[dir="rtl"] .menu-item .arrow,
[dir="rtl"] .megamenu .arrow {
	margin-left: 0;
	margin-right: 8px;
}

/* Leading icons (cart glyph). In RTL a :before sits at the right end of
   the inline flow, so its gap has to move to the left or it collides
   with the label. */
[dir="rtl"] .product .button:before,
[dir="rtl"] .product .added_to_cart:before,
[dir="rtl"] .single_add_to_cart_button:before,
[dir="rtl"] .buy-now-button:before,
[dir="rtl"] .comp .product .button:before,
[dir="rtl"] .comp .product .added_to_cart:before,
[dir="rtl"] .comp .product .product_type_variable.button:before,
[dir="rtl"] .comp .product .product_type_variable.added_to_cart:before {
	margin-right: 0;
	margin-left: 8px;
}

/* Post navigation chevrons */
[dir="rtl"] .post-single-navigation a[rel="prev"]:before,
[dir="rtl"] .post-single-navigation a[rel="next"]:after {
	transform: scaleX(-1);
}


/* -------------------------------------------------------------
   4. Mini-cart item remove button
   ------------------------------------------------------------- */
[dir="rtl"] .woocommerce-mini-cart-item .remove_from_cart_button {
	right: auto;
	left: 0;
}

[dir="rtl"] .woocommerce-mini-cart-item {
	padding-left: 24px;
	padding-right: 0;
}


/* -------------------------------------------------------------
   5. Bidirectional text isolation
   Phone numbers, emails and URLs are Latin/neutral runs inside an
   RTL paragraph. Without isolation a leading "+" jumps to the end
   ("+20 12111 46012" renders as "46012 12111 20+").
   unicode-bidi:plaintext resolves each run on its own first strong
   character, so Arabic stays RTL and the phone stays LTR.
   ------------------------------------------------------------- */
[dir="rtl"] .icon-box-content,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .woocommerce-input-wrapper input[type="tel"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] {
	unicode-bidi: plaintext;
}

/* Keep telephone and email inputs typing left-to-right */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] {
	direction: ltr;
	text-align: right;
}

/* Prices: keep the numeric run intact but let the block flow RTL */
[dir="rtl"] .woocommerce-Price-amount {
	unicode-bidi: isolate;
}


/* -------------------------------------------------------------
   6. Carousels
   Swiper is direction-aware, but the theme's nav buttons are
   absolutely positioned.
   ------------------------------------------------------------- */
[dir="rtl"] .swiper-button-prev {
	left: auto;
	right: 0;
	transform: scaleX(-1);
}

[dir="rtl"] .swiper-button-next {
	right: auto;
	left: 0;
	transform: scaleX(-1);
}


/* -------------------------------------------------------------
   7. Guard against horizontal overflow
   RTL layouts expose off-canvas panels that were previously parked
   beyond the right edge. Nothing on the page should scroll sideways.
   ------------------------------------------------------------- */
[dir="rtl"] body {
	overflow-x: hidden;
}


/* -------------------------------------------------------------
   8. Arabic typography
   Cairo is already the body font. Give Arabic text a little more
   line-height than a Latin default and keep numerals legible.
   ------------------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] li {
	line-height: 1.9;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
	line-height: 1.5;
}

/* Arabic has no letter-case and no true italics - a synthetic slant
   and forced uppercase both damage the script. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .section-title,
[dir="rtl"] .widgettitle,
[dir="rtl"] .button,
[dir="rtl"] button {
	letter-spacing: normal;
}

[dir="rtl"] em,
[dir="rtl"] i:not([class]) {
	font-style: normal;
}