/* ══════════════════════════════════════════════════════════════════════ RTL ↔ LTR — Directional Overrides Default: RTL (Arabic). These rules flip everything for LTR locales. Uses the html[dir="ltr"] selector so everything auto-flips when the middleware sets dir="ltr" on the tag. ══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────── § 1 BASE DIRECTION & ALIGNMENT ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] body { text-align: left; direction: ltr; } html[dir="ltr"] .text-start-flip { text-align: left !important; } html[dir="ltr"] .text-end-flip { text-align: right !important; } /* ───────────────────────────────────────────────────────────────────── § 2 ICONS — Flip directional icons (arrows, chevrons) ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .bi-arrow-right, html[dir="ltr"] .bi-chevron-right, html[dir="ltr"] .bi-arrow-left, html[dir="ltr"] .bi-chevron-left, html[dir="ltr"] .bi-box-arrow-right, html[dir="ltr"] .bi-caret-right-fill, html[dir="ltr"] .bi-caret-left-fill, html[dir="ltr"] .bi-arrow-right-circle, html[dir="ltr"] .bi-arrow-left-circle, html[dir="ltr"] .bi-reply { transform: scaleX(-1); display: inline-block; } /* ───────────────────────────────────────────────────────────────────── § 3 BOOTSTRAP MARGIN / PADDING REMOVED: me/ms/pe/ps overrides were conflicting with Bootstrap 5. The layout loads bootstrap.min.css (LTR) or bootstrap.rtl.min.css (RTL) which already maps these to the correct physical side. Manual overrides were DOUBLE-SWAPPING, causing wrong spacing. ───────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────── § 4 FLOAT & POSITION OVERRIDES REMOVED: Bootstrap 5 LTR bundle handles float-start/end correctly. ───────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────── § 5 NAVBAR ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .navbar-nav { flex-direction: row; } html[dir="ltr"] .navbar-brand { margin-left: 0; margin-right: 0; } html[dir="ltr"] .dropdown-menu-end { --bs-position: end; right: auto; left: 0; } /* ───────────────────────────────────────────────────────────────────── § 6 CAMPAIGN CARD — Badge position flip ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .campaign-badge { left: auto; right: 12px; } /* ───────────────────────────────────────────────────────────────────── § 7 CARD FORM — Icon & padding flip ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .card-number-row .form-control { padding-left: 15px; padding-right: 50px; } html[dir="ltr"] .card-icon { left: auto; right: 15px; } /* ───────────────────────────────────────────────────────────────────── § 8 HERO SECTION — Glow position flip ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .hero-section::before { right: auto; left: -200px; } /* ───────────────────────────────────────────────────────────────────── § 9 BREADCRUMBS — Divider direction ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .breadcrumb-item+.breadcrumb-item::before { content: '/'; float: left; padding-right: 0.5rem; padding-left: 0; } /* ───────────────────────────────────────────────────────────────────── § 10 FORM ELEMENTS — Input group, search ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .input-group>.form-control:not(:last-child), html[dir="ltr"] .input-group>.form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); } html[dir="ltr"] .input-group>.form-control:not(:first-child), html[dir="ltr"] .input-group>.form-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); } /* ───────────────────────────────────────────────────────────────────── § 11 LISTS & BULLETS ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] ul, html[dir="ltr"] ol { padding-left: 2rem; padding-right: 0; } /* ───────────────────────────────────────────────────────────────────── § 12 ACCORDION — Arrow direction ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .accordion-button::after { margin-left: auto; margin-right: 0; } /* ───────────────────────────────────────────────────────────────────── § 13 PROGRESS BAR — Gradient direction ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .progress-bar { background: var(--btn-gradient, linear-gradient(90deg, var(--primary), var(--secondary))); } html[dir="ltr"] .progress { direction: ltr; } /* ───────────────────────────────────────────────────────────────────── § 14 TABLE — Text alignment ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .table { text-align: left; } html[dir="ltr"] .table th, html[dir="ltr"] .table td { text-align: left; } /* ───────────────────────────────────────────────────────────────────── § 15 LANGUAGE SWITCHER ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .dropdown-toggle::after { margin-left: 0.255em; margin-right: 0; } /* ───────────────────────────────────────────────────────────────────── § 16 CART BADGE POSITION ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .position-absolute.start-100 { left: auto !important; right: 0 !important; transform: translate(50%, -50%) !important; } /* ───────────────────────────────────────────────────────────────────── § 17 CTA BUTTON — pill shape REMOVED: Bootstrap 5 me-1 on the icon handles spacing correctly. ───────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────── § 18 CHECKOUT STEPS — flow direction ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .checkout-steps { direction: ltr; } /* ───────────────────────────────────────────────────────────────────── § 19 FOOTER ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .site-footer { text-align: left; } html[dir="ltr"] .site-footer .social-links { justify-content: flex-start; } /* ───────────────────────────────────────────────────────────────────── § 20 BORDER RADIUS — Asymmetric corners flip ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .rounded-start { border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius) !important; } html[dir="ltr"] .rounded-end { border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0 !important; } /* ───────────────────────────────────────────────────────────────────── § 21 TEXT ALIGNMENT REMOVED: Bootstrap 5 LTR bundle handles text-start/end correctly. ───────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────── § 22 FORM CHECK / SWITCH REMOVED: Bootstrap 5 LTR bundle handles form-check/switch correctly. ───────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────── § 23 MODAL — Close button position ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .modal-header .btn-close { margin: -0.5rem auto -0.5rem -0.5rem; } /* ───────────────────────────────────────────────────────────────────── § 24 OFFCANVAS ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .offcanvas-start { left: 0; right: auto; transform: translateX(-100%); } html[dir="ltr"] .offcanvas-end { right: 0; left: auto; transform: translateX(100%); } /* ───────────────────────────────────────────────────────────────────── § 25 STAT CARD — Icon side ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .stat-card { flex-direction: row; } /* ───────────────────────────────────────────────────────────────────── § 26 BORDER DIRECTIONAL REMOVED: Bootstrap 5 LTR bundle handles border-start/end correctly. ───────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────── § 27 ALERT — icon + dismiss positioning ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .alert-dismissible .btn-close { right: 0; left: auto; } /* ───────────────────────────────────────────────────────────────────── § 28 DONATE AMOUNT INPUT — Currency symbol ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .input-group-text:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); } /* ───────────────────────────────────────────────────────────────────── § 29 ANIMATION DIRECTION ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] .slide-in-right { animation-name: slideInLeft; } @keyframes slideInLeft { from { transform: translateX(-30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ───────────────────────────────────────────────────────────────────── § 30 FONT ADJUSTMENTS for LTR ───────────────────────────────────────────────────────────────────── */ html[dir="ltr"] body { font-family: 'Inter', 'Segoe UI', sans-serif; letter-spacing: normal; }