/** * RTL (Right-to-Left) Override Stylesheet * * Loaded ONLY when Arabic language is active (dir="rtl" on ). * Uses [dir="rtl"] selectors to override LTR-specific CSS. * Zero-cost for English users — this file is not loaded at all. * * @package Qatarshoes * @since 3.0.0 */ /* ============================================ TYPOGRAPHY — Arabic Font & Adjustments ============================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap'); [dir="rtl"] body { font-family: 'IBM Plex Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .section-title, [dir="rtl"] .hero-title { font-family: 'IBM Plex Sans Arabic', 'Canela Text', Georgia, serif; letter-spacing: 0; } [dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] a, [dir="rtl"] li, [dir="rtl"] label, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] button { letter-spacing: 0; } /* ============================================ DRAWERS — Mobile Menu (slide from right in RTL) ============================================ */ [dir="rtl"].rtl-mirror-drawers .home-mobile-drawer, [dir="rtl"].rtl-mirror-drawers .mobile-drawer { left: auto; right: -100%; transition: right 0.3s ease; } [dir="rtl"].rtl-mirror-drawers .home-mobile-drawer.active, [dir="rtl"].rtl-mirror-drawers .mobile-drawer.active { right: 0; left: auto; } /* Close button — reposition for right-side drawer */ [dir="rtl"].rtl-mirror-drawers .mobile-menu-close-external { left: auto; right: min(calc(85% + 12px), calc(320px + 12px)); } /* ============================================ DRAWERS — Cart (slide from left in RTL) ============================================ */ [dir="rtl"].rtl-mirror-drawers .cart-drawer-content { right: auto; left: 0; transform: translateX(-100%); } [dir="rtl"].rtl-mirror-drawers .cart-drawer.open .cart-drawer-content { transform: translateX(0); } [dir="rtl"].rtl-mirror-drawers .cart-drawer-content { box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1); } /* Cart item removal animation — slide opposite direction */ [dir="rtl"] .cart-drawer-item.removing { transform: translateX(-30px); } /* ============================================ DRAWERS — Wishlist (slide from left in RTL) ============================================ */ [dir="rtl"].rtl-mirror-drawers .wishlist-drawer { right: auto; left: -420px; transition: left 0.3s ease; } [dir="rtl"].rtl-mirror-drawers .wishlist-drawer.open { left: 0; right: auto; } [dir="rtl"].rtl-mirror-drawers .wishlist-drawer { box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15); } /* ============================================ HEADER — Icon Spacing & Layout ============================================ */ [dir="rtl"] .site-hdr-right { flex-direction: row-reverse; } [dir="rtl"] .site-hdr-left { flex-direction: row-reverse; } @media (min-width: 1023px) { [dir="rtl"] .delivery-mode-selector > svg { margin-right: 34px; margin-left: 0; } [dir="rtl"] .delivery-flag { margin-right: 0px; margin-left: 6px; } } @media (max-width: 1023px) { [dir="rtl"] .site-header .delivery-mode-selector, .mobile-delivery-pill{ justify-content: space-between; } [dir="rtl"] .mobile-delivery-pill > svg, [dir="rtl"] .delivery-mode-selector > svg { margin-left: 4px; } [dir="rtl"] .delivery-flag { margin-right: 0px; } } [dir="rtl"] .dept-link{ font-size: 14px; } [dir="rtl"] .nav-link-text { font-size: 16px; } /* Anchor dropdown to right edge; max-content sizes the box to exactly fit flex-column-wrap columns without extra gap */ [dir="rtl"] .hover-box { left: auto; right: 0; min-width: max-content; } /* ============================================ NAVIGATION — Dropdown Panels & Arrows ============================================ */ [dir="rtl"] .panel-right { left: auto; right: 100%; border-radius: 8px 0 0 8px; } [dir="rtl"] .submenu-arrow { transform: scaleX(-1); margin-left: 0; margin-right: 12px; } /* ============================================ MOBILE MENU — Text & Indentation ============================================ */ [dir="rtl"] .drawer-expand-btn, [dir="rtl"] .drawer-expand-btn-nested { text-align: right; } [dir="rtl"] .drawer-submenu a, [dir="rtl"] .wp-drawer-submenu a { padding: 12px 35px 12px 20px; } [dir="rtl"] .drawer-expand-btn-nested { padding: 12px 35px 12px 20px; } [dir="rtl"] .drawer-submenu-nested a, [dir="rtl"] .wp-drawer-submenu-nested a { padding: 10px 50px 10px 20px; } /* Currency symbol spacing */ [dir="rtl"] .drawer-currency-wrapper .currency-symbol { margin-right: 0; margin-left: 2px; } /* ============================================ PRODUCT PAGE — Gallery & Layout ============================================ */ /* Mirror thumbnail position: thumbnails to right side */ /* Product info padding */ [dir="rtl"] .variant-modal-info { padding: 40px 0 40px 40px; } /* Compare price margin */ [dir="rtl"] .product-compare-price { margin-left: 0; margin-right: 10px; } /* Product card text alignment */ [dir="rtl"] .shopify-loaded .product-card { text-align: right !important; } [dir="rtl"] #related-products h2 { text-align: start; } /* ============================================ CHECKOUT — Form Layout ============================================ */ [dir="rtl"] .checkout-form-wrapper { margin-right: 0; margin-left: 30px; } [dir="rtl"] .checkout-right { border-left: none; border-right: 1px solid #e5e5e5; } /* Phone field: flip border-radius corners */ [dir="rtl"] .phone-country-code select { border-right: 1px solid #d1d5db; border-left: none; border-radius: 0 6px 6px 0; } [dir="rtl"] .phone-field-wrapper input[type="tel"] { border-radius: 6px 0 0 6px; } /* Select chevron: swap side */ [dir="rtl"] .select-chevron { right: auto; left: 14px; } /* Phone info icon: swap side */ [dir="rtl"] .phone-info-icon { right: auto; left: 12px; } [dir="rtl"] .radio-custom{ margin-right: 0; margin-left: 12px; } /* ============================================ FOOTER — Layout Adjustments ============================================ */ [dir="rtl"] .footer-columns { flex-direction: row-reverse; } [dir="rtl"] .footer-bottom { flex-direction: row-reverse; } /* ============================================ BADGES & MISC ============================================ */ /* Wishlist badge positioning */ [dir="rtl"] .wishlist-count-badge { right: auto; left: -4px; } /* Cart badge positioning */ [dir="rtl"] .cart-badge { right: auto; left: -4px; } /* General text alignment */ [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } /* Qatar Collection — bullet dots to right side */ [dir="rtl"] .po-expect-bullet-item, .ic-details-bullet, .ic-expect-bullet, .qc-expect-bullet-item { padding-left: 0; padding-right: 20px; text-align: right; } [dir="rtl"] .po-expect-bullet-item::before, .ic-details-bullet::before, .ic-expect-bullet::before, .qc-expect-bullet-item::before { left: auto; right: 0; } [dir="rtl"] .product-card{ border-left: 0.33px solid #e5e5e5; } /* FAQ — right-to-left question rows */ /* dir="rtl" already makes flex-direction:row flow right-to-left natively */ [dir="rtl"] .faq-question { text-align: right; width: 100%; } [dir="rtl"] .faq-question-text { flex: 1; text-align: right; } [dir="rtl"] .faq-answer { text-align: right; } [dir="rtl"] .faq-section-title { text-align: right; } [dir="rtl"] .sitemap-link svg, .faq-sidebar-item svg, .pp-sidebar-item svg, .tos-sidebar-item svg{ scale: -1; } /* About us page RTL */ [dir="rtl"] .about-offer-card { border-right: 0px; border-left: 1px solid rgba(0, 0, 0, 0.2); }