/* ============================================================ RTL (Right-to-Left) Layout Fixes Applied when: ============================================================ */ /* ── Modal close buttons ──────────────────────────────────── Close buttons use absolute right-X top-X which in RTL places them on the START side (overlapping titles). Flip them to the logical end side. ─────────────────────────────────────────────────────────── */ [dir="rtl"] .modal-wishlist-main .close-btn, [dir="rtl"] .modal-cart-main .close-btn, [dir="rtl"] .modal-quickview-main .close-btn, [dir="rtl"] .modal-compare-main .close-btn, [dir="rtl"] .modal-sizeguide-main .close-btn { right: auto !important; left: 1.5rem !important; } /* ── Modal footer (absolute left-0) → flip in RTL ── */ [dir="rtl"] .modal-wishlist-main .footer-modal, [dir="rtl"] .modal-cart-main .footer-modal { left: auto !important; right: 0 !important; } /* ── Newsletter modal close button ── */ [dir="rtl"] .close-newsletter-btn { right: auto !important; left: 1.25rem !important; } /* ── Topbar currency list - anchor to logical end in RTL (left side) ── */ [dir="rtl"] .choose-currency .list-option { right: auto !important; left: 0 !important; } [dir="rtl"] #footerCurrencyList { left: auto !important; right: 0 !important; } /* ── Mobile menu (slides in from the end in RTL) ── */ [dir="rtl"] #menu-mobile { left: auto; right: 0; transform: translateX(100%); } [dir="rtl"] #menu-mobile.open { transform: translateX(0); } /* ── Mobile menu close button flip ── */ [dir="rtl"] #menu-mobile .close-menu-mobile-btn { right: auto !important; left: 1rem !important; } /* ── Product cards: tag & action buttons ── */ [dir="rtl"] .product-thumb .product-tag { left: auto !important; right: 0.75rem !important; } [dir="rtl"] .product-thumb .list-action-right { right: auto !important; left: 0.75rem !important; } /* ── list-action-right slide animation: in RTL buttons are on the LEFT, so the initial translateX should push them LEFT (off-screen left edge) instead of right. ── */ [dir="rtl"] .product-item .product-thumb .list-action-right { transform: translateX(-60px) !important; } [dir="rtl"] .product-item:hover .product-thumb .list-action-right { transform: translateX(0) !important; } /* On mobile (≤1024px) always show with no offset */ @media (max-width: 1024px) { [dir="rtl"] .product-item .product-thumb .list-action-right { transform: translateX(0) !important; } } /* ── Action-button tooltips (tag-action) in RTL: buttons sit at left:0.75rem, so tooltips must appear to the RIGHT (compiled CSS default is right:calc(100%+10px) = to the left = off-screen) ── */ [dir="rtl"] .add-cart-btn .tag-action, [dir="rtl"] .add-wishlist-btn .tag-action, [dir="rtl"] .quick-view-btn .tag-action { right: auto !important; left: calc(100% + 10px) !important; transform: translateX(0) !important; } /* Tooltip arrow: flip to left side (points toward button which is now to the right) */ [dir="rtl"] .add-cart-btn .tag-action::before, [dir="rtl"] .add-wishlist-btn .tag-action::before, [dir="rtl"] .quick-view-btn .tag-action::before { right: auto !important; left: -3px !important; } /* ── Color-dot tooltips (tag-action inside .color-item): appear ABOVE the dot — center them horizontally ── */ [dir="rtl"] .color-item .tag-action { right: auto !important; left: 50% !important; transform: translateX(-50%) !important; } /* ── Scroll-to-top button ── */ [dir="rtl"] .scroll-to-top-btn { right: auto !important; left: 1.5rem !important; } /* ── Bottom menu bar (menu_bar) absolute positions ── */ [dir="rtl"] .menu_bar { direction: rtl; } /* ── Text alignment helpers ── */ [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } /* ── Header RTL fixes ── */ /* Mobile hamburger + icons position handled via PHP-conditional inline styles in header.blade.php */ [dir="rtl"] .header-main > .right { position: static !important; } @media (max-width: 1023px) { [dir="rtl"] .header-main > .right { position: absolute !important; } } [dir="rtl"] .form-search .ph-magnifying-glass { left: auto !important; right: 0.75rem !important; } [dir="rtl"] .form-search input { padding-left: 1rem !important; padding-right: 2.25rem !important; } [dir="rtl"] .login-popup { right: auto !important; left: 0 !important; } [dir="rtl"] .wishlist-icon .quantity, [dir="rtl"] .cart-icon .quantity { right: auto !important; left: -0.375rem !important; } /* ── My Account page RTL ─────────────────────────────────── */ /* Flip the sidebar/content padding sides */ [dir="rtl"] .my-account-block .left { padding-right: 0 !important; padding-left: clamp(1rem, 4vw, 3.125rem); } [dir="rtl"] .my-account-block .right { padding-left: 0 !important; padding-right: 0.625rem; } /* Order table status column: was text-right, flip in RTL */ [dir="rtl"] .my-account-block table th:last-child, [dir="rtl"] .my-account-block table td:last-child { text-align: left !important; } /* Address "default" badge anchors to logical end */ [dir="rtl"] .my-account-block .order_item { direction: rtl; } /* ── Home page product-tab nav buttons in RTL ── */ /* Prev button → physical right edge (start in RTL) */ [dir="rtl"] .home-prev-btn { right: 0 !important; left: auto !important; } /* Next button → physical left edge (end in RTL) */ [dir="rtl"] .home-next-btn { left: 0 !important; right: auto !important; } /* ── Home categories swiper nav: flip prev↔next positions in RTL ── */ /* Buttons are siblings of the swiper (not children), so swiper-rtl rules don't apply */ /* Position flip */ [dir="rtl"] #home-cat-prev { left: auto !important; right: 1.5rem !important; } @media (min-width: 1024px) { [dir="rtl"] #home-cat-prev { right: 2.5rem !important; } } [dir="rtl"] #home-cat-next { right: auto !important; left: 1.5rem !important; } @media (min-width: 1024px) { [dir="rtl"] #home-cat-next { left: 2.5rem !important; } } /* Arrow icon flip — swiper uses ::after content 'prev'/'next' mapped to ←/→ via icon font */ [dir="rtl"] #home-cat-prev::after { content: 'next' !important; } [dir="rtl"] #home-cat-next::after { content: 'prev' !important; }