/*
 * Enaya Hub - RTL Stylesheet (rtl.css)
 *
 * Loaded automatically by WordPress when is_rtl() is true
 * (i.e. the site is using an RTL locale such as Arabic).
 *
 * This file mirrors every LTR-biased physical property so the entire
 * website renders with correct right-to-left horizontal layout:
 *   - Header / navbar / main navigation (starts from the RIGHT)
 *   - Mobile navigation (slides from the left / end side)
 *   - Cart counter, wishlist buttons, sale badges
 *   - Product grids, product cards, breadcrumbs
 *   - Hero content, sliders, carousels
 *   - Footer, newsletter, FAQ, reviews
 *   - WooCommerce notices, review comments, tabs
 *   - Toast notifications, scroll-to-top button
 *
 * IMPORTANT:
 *   - No colors, typography, spacing-scale, or animations are changed.
 *   - English content (brand names, prices, URLs) stays readable via
 *     the Unicode bidirectional algorithm.
 *   - Flexbox and CSS Grid auto-flip with dir="rtl", so only physical
 *     left/right offsets, margins, paddings, transforms, and
 *     border-radii need explicit mirroring here.
 */

/* ============================================================
 * BASE (mirrors rules from assets/css/base.css)
 * ============================================================ */

/* Skip-link: top-right -> top-left */
.skip-link {
	right: auto;
	left: 0;
	border-radius: 0 0 var(--radius-sm) 0;
}

/* Screen-reader focus: mirror position */
.screen-reader-text:focus {
	right: auto;
	left: 5px;
}

/* WordPress .alignleft / .alignright remain semantic (always float to the
   named physical side) per WordPress core convention. */

/* ============================================================
 * LAYOUT (mirrors rules from assets/css/layout.css)
 * ============================================================ */

/* List indentation: left margin -> right margin (indent from start) */
.entry-content ul,
.entry-content ol {
	margin: 0 1.2em 1.2em 0;
}

/* Entry meta icon spacing: margin-left -> margin-right */
.entry-meta i {
	margin-left: 0;
	margin-right: 4px;
}

/* ============================================================
 * HEADER & NAVIGATION (mirrors rules from assets/css/header.css)
 * ============================================================
 * The navbar uses flexbox (justify-content: space-between) which
 * auto-flips with dir="rtl", so the brand naturally starts from the
 * RIGHT and actions move to the LEFT. Only physical offsets need
 * mirroring below.
 */

/* Cart counter badge: top-left of button -> top-right of button */
.cart-counter {
	left: auto;
	right: 2px;
}

/* Mobile menu: slide from the LEFT (end side in RTL) instead of right */
.mobile-menu {
	right: auto;
	left: -300px;
	transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.open {
	right: auto;
	left: 0;
}

/* ============================================================
 * BUTTONS (mirrors rules from assets/css/buttons.css)
 * ============================================================ */

/* Wishlist heart button: top-left -> top-right of product image */
.product-wishlist-btn {
	left: auto;
	right: 12px;
}

/* Scroll-to-top: bottom-left -> bottom-right */
.scroll-top-btn {
	left: auto;
	right: 28px;
}

/* ============================================================
 * PRODUCTS (mirrors rules from assets/css/products.css)
 * ============================================================ */

/* Sale / discount badge: top-right -> top-left of product image */
.product-badge {
	right: auto;
	left: 12px;
}

.new-arrival-badge {
	right: auto;
	left: 12px;
}

/* WooCommerce on-sale flash (loop + single): mirror to top-left */
.woocommerce ul.products li.product .onsale {
	right: auto;
	left: 12px;
}

.woocommerce span.onsale {
	right: auto;
	left: 12px;
}

/* WooCommerce notice padding: icon (::before) sits at the start (right)
   in RTL, so padding moves to the right side. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 16px 50px 16px 20px;
}

/* ============================================================
 * REVIEWS (mirrors rules from assets/css/reviews.css)
 * ============================================================ */

/* WooCommerce review comment text: avatar on right, text indented left */
.woocommerce #reviews #comments .comment-text {
	padding: 0 24px 0 0 !important;
	margin-right: 0 !important;
	margin-left: 70px !important;
}

/* ============================================================
 * PROMO (mirrors rules from assets/css/promo.css)
 * ============================================================ */

/* Promo badge icon spacing */
.promo-badge i {
	margin-left: 0;
	margin-right: 6px;
}

/* Countdown stays LTR (numbers are universal) - already has direction:ltr
   in promo.css, no change needed. */

/* ============================================================
 * NEWSLETTER (mirrors rules from assets/css/newsletter.css)
 * ============================================================ */

/* Newsletter success icon spacing */
.newsletter-success i {
	margin-left: 0;
	margin-right: 6px;
}

/* Mirror decorative background circles */
.newsletter-section::before {
	right: auto;
	left: -20%;
}

.newsletter-section::after {
	left: auto;
	right: -10%;
}

/* ============================================================
 * FOOTER (mirrors rules from assets/css/footer.css)
 * ============================================================ */

/* Footer link hover indent: shift toward start (right) */
.footer-links a:hover {
	padding-right: 0;
	padding-left: 6px;
}

/* ============================================================
 * ANIMATIONS (mirrors rules from assets/css/animations.css)
 * ============================================================ */

/* Toast container: bottom-right -> bottom-left */
.toast-container {
	right: auto;
	left: 28px;
}

/* Toast slide-in: from the left instead of right */
@keyframes toastIn {
	from { opacity: 0; transform: translateX(-40px); }
	to { opacity: 1; transform: translateX(0); }
}

/* Toast slide-out: to the left instead of right */
@keyframes toastOut {
	from { opacity: 1; transform: translateX(0); }
	to { opacity: 0; transform: translateX(-40px); }
}

/* ============================================================
 * RESPONSIVE RTL OVERRIDES (mirrors rules from assets/css/responsive.css)
 * ============================================================ */

@media (max-width: 768px) {
	/* Toast container: mirror tablet layout */
	.toast-container {
		right: 80px;
		left: 16px;
	}
}

@media (max-width: 480px) {
	/* Scroll-to-top: bottom-left -> bottom-right on mobile */
	.scroll-top-btn {
		left: auto;
		right: 16px;
	}

	/* Toast container: symmetric on small mobile (same as LTR) */
	.toast-container {
		right: 16px;
		left: 16px;
	}
}

/* ============================================================
 * WOOCOMMERCE-SPECIFIC RTL
 * ============================================================ */

/* Ensure WooCommerce form labels and inputs read right-to-left.
   WooCommerce core already ships RTL styles for most form elements;
   these tweaks complement them where our theme overrides styles. */

/* Product meta on single product page: natural RTL flow (no change
   needed - display:block + dir="rtl" handles it). */

/* WooCommerce breadcrumb: flows right-to-left naturally with dir="rtl".
   The "/" separator is symmetric. No override needed. */

/* WooCommerce pagination: flex + justify-content:center auto-flips.
   Prev/Next arrow text is handled by WooCommerce core RTL. No override. */

/* ============================================================
 * PROTECT LTR-SENSITIVE CONTENT
 * ============================================================
 * English / numeric strings (countdown, prices within WooCommerce
 * structured price elements) remain readable thanks to the Unicode
 * bidirectional algorithm. The countdown already forces direction:ltr
 * in promo.css. No additional overrides required.
 */