/* ════════════════════════════════════════════════════════════ rtl.css — Comprehensive RTL styles for all themes Loaded conditionally when site['rtl'] is true. Activates when dir="rtl" is set on by the theme's layout template. Covers: Tajawal font, sidebar, navbar, tables, forms, cards, alerts, pagination, dropdowns, flex, icons, general. ════════════════════════════════════════════════════════════ */ /* ── 1. TAJAWAL FONT FOR ARABIC ──────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap'); html[dir="rtl"] body, html[dir="rtl"] .body, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] .form-control, html[dir="rtl"] .btn, html[dir="rtl"] .card, html[dir="rtl"] .table, html[dir="rtl"] .navbar, html[dir="rtl"] .alert, html[dir="rtl"] .badge, html[dir="rtl"] .pagination, html[dir="rtl"] .modal, html[dir="rtl"] .dropdown-menu, html[dir="rtl"] .component-sidebar__menu-item-link, html[dir="rtl"] .component-navbar-nav-link, html[dir="rtl"] .navbar-dropdown__name, html[dir="rtl"] .balance-dropdown__name { font-family: 'Tajawal', 'Barlow', sans-serif !important; } /* ── 2. SIDEBAR — FLIP FROM LEFT TO RIGHT ───────────────── */ html[dir="rtl"] .component-sidebar_wrapper { right: 0; left: auto; } #block_162 .sidebar-block__left { right: 0; left: auto !important; } #block_162 .sidebar-block__top { right: auto !important; left: 0; } #block_162 .component-navbar-collapse { margin-left: 0 !important; } .search-dropdown .input-wrapper .form-control { padding-right: 35px !important; } .search-dropdown .list-group-item .svc-id { margin-left: 6px; } html[dir="rtl"] .component-sidebar__menu { direction: rtl; } html[dir="rtl"] .component-sidebar__menu-logo { justify-content: flex-start; } html[dir="rtl"] .component-sidebar__menu-item-link { padding-left: 16px; padding-right: 16px; margin-left: 16px; margin-right: 16px; text-align: right; } html[dir="rtl"] .component-sidebar__menu-item-link .badge { margin-left: auto; margin-right: 8px; } html[dir="rtl"] .wrapper-sidebar-navbar .wrapper-content { padding-top: 64px; padding-right: 0; } html[dir="rtl"] .component-navbar__navbar-private { --navbar-margin: 250px; width: calc(100% - var(--navbar-margin) - var(--editor-sidebar)); margin-left: 0; margin-right: 0; } /* ── 3. TOP NAVBAR (PRIVATE & PUBLIC) ───────────────────── */ html[dir="rtl"] .navbar { direction: rtl; } html[dir="rtl"] .navbar-nav { padding-right: 0; padding-left: 0; } html[dir="rtl"] .component-navbar-nav-link .component-navbar-nav-link-icon { margin-left: 6px; margin-right: 0; } html[dir="rtl"] .navbar-icon { margin-right: 0; margin-left: 8px; } html[dir="rtl"] .component-navbar-collapse { margin-left: 0; margin-right: auto; } html[dir="rtl"] .balance-dropdown__toggle:after { margin-left: 0; margin-right: 12px; } html[dir="rtl"] .navbar-burger-line:before, html[dir="rtl"] .navbar-burger-line:after { left: auto; right: 0; } html[dir="rtl"] .navbar-languages { padding-left: 0; padding-right: 12px; } /* ── 4. TABLES — FLIP PADDING & BORDER RADIUS ────────────── */ html[dir="rtl"] .table thead tr th:first-child { padding-left: 7px; padding-right: 16px; border-top-left-radius: 0; border-top-right-radius: 8px; } html[dir="rtl"] .table thead tr th:last-child { padding-right: 7px; padding-left: 16px; border-top-right-radius: 0; border-top-left-radius: 8px; } html[dir="rtl"] .table tbody tr td:first-child { padding-left: 7px; padding-right: 16px; } html[dir="rtl"] .table tbody tr td:last-child { padding-right: 7px; padding-left: 16px; } html[dir="rtl"] .table tbody tr:last-child td:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 8px; } html[dir="rtl"] .table tbody tr:last-child td:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 8px; } html[dir="rtl"] .table thead tr th, html[dir="rtl"] .table tbody tr td { text-align: right; } /* ── 5. FORMS ────────────────────────────────────────────── */ html[dir="rtl"] .form-group label { text-align: right; } html[dir="rtl"] .form-control { text-align: right; } html[dir="rtl"] select.form-control:not([multiple]) { background-position: left 12px top 50%, 0 0; } html[dir="rtl"] .input-group .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } html[dir="rtl"] .input-group-append .btn { border-bottom-right-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 8px; border-top-left-radius: 8px; } html[dir="rtl"] .input-group-prepend .btn { border-top-left-radius: 8px; border-bottom-left-radius: 8px; border-top-right-radius: 0; border-bottom-right-radius: 0; } html[dir="rtl"] .dropdown-menu { right: 0; left: auto; text-align: start; } html[dir="rtl"] .dropdown-toggle::after { margin-right: 0.255em; margin-left: 0; } .full_content { margin-left: 0 !important; } .svc-id { margin-left: 6px; } .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered { padding: 0 10px 0 0px !important; } #block_164 .component-navbar-collapse { margin-left: 0 !important; } html[dir="rtl"] .form-group small { text-align: right; } html[dir="rtl"] textarea.form-control { text-align: right; } /* ── 6. CARDS ─────────────────────────────────────────────── */ html[dir="rtl"] .card { text-align: right; } html[dir="rtl"] .card h1, html[dir="rtl"] .card h2, html[dir="rtl"] .card h3, html[dir="rtl"] .card h4, html[dir="rtl"] .card h5, html[dir="rtl"] .card h6 { text-align: right; } html[dir="rtl"] .card p, html[dir="rtl"] .card span, html[dir="rtl"] .card small, html[dir="rtl"] .card label { text-align: right; } /* ── 7. ALERTS ────────────────────────────────────────────── */ html[dir="rtl"] .alert { text-align: right; direction: rtl; } html[dir="rtl"] .alert .close { float: left; } /* ── 8. PAGINATION ────────────────────────────────────────── */ html[dir="rtl"] .pagination { direction: rtl; } html[dir="rtl"] .pagination .pagination-link { margin-right: 0; margin-left: 8px; } /* ── 9. DROPDOWNS ─────────────────────────────────────────── */ html[dir="rtl"] .navbar-dropdown__container { text-align: right; right: 0; left: auto; } html[dir="rtl"] .navbar-dropdown__toggle:after { margin-left: 0; margin-right: 12px; } html[dir="rtl"] .balance-dropdown__container { text-align: right; right: 0; left: auto; } html[dir="rtl"] .balance-dropdown__toggle:after { margin-left: 0; margin-right: 12px; } /* ── 10. FLEX LAYOUTS & GENERAL ─────────────────────────── */ html[dir="rtl"] .d-flex { direction: rtl; } html[dir="rtl"] .justify-content-start { justify-content: flex-end !important; } html[dir="rtl"] .justify-content-end { justify-content: flex-start !important; } html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } html[dir="rtl"] .float-left { float: right !important; } html[dir="rtl"] .float-right { float: left !important; } html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } /* ── 11. DIRECTIONAL ICONS — FLIP HORIZONTAL ────────────── */ html[dir="rtl"] .fa-chevron-left, html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-arrow-left, html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-angle-left, html[dir="rtl"] .fa-angle-right, html[dir="rtl"] .fa-caret-left, html[dir="rtl"] .fa-caret-right, html[dir="rtl"] .fa-long-arrow-alt-left, html[dir="rtl"] .fa-long-arrow-alt-right, html[dir="rtl"] .fa-arrow-circle-left, html[dir="rtl"] .fa-arrow-circle-right, html[dir="rtl"] .fa-backward, html[dir="rtl"] .fa-forward, html[dir="rtl"] .fa-step-backward, html[dir="rtl"] .fa-step-forward, html[dir="rtl"] .fa-sign-in-alt, html[dir="rtl"] .fa-sign-out-alt, html[dir="rtl"] .fa-undo, html[dir="rtl"] .fa-redo, html[dir="rtl"] .fa-reply, html[dir="rtl"] .fa-share, html[dir="rtl"] .fa-external-link-alt { transform: scaleX(-1); } /* ── 12. BUTTONS ─────────────────────────────────────────── */ html[dir="rtl"] .btn .fa { margin-left: 0.25em; margin-right: 0; } html[dir="rtl"] .btn-big-primary, html[dir="rtl"] .btn-big-secondary, html[dir="rtl"] .btn-actions { text-align: center; } html[dir="rtl"] .btn-block { text-align: center; } /* ── 13. BADGES & LABELS ─────────────────────────────────── */ html[dir="rtl"] .badge { margin-left: 0.25em; margin-right: 0.5em; } html[dir="rtl"] .label { margin-left: 4px; margin-right: 0; } /* ── 14. NAV PILLS / TABS ────────────────────────────────── */ html[dir="rtl"] .nav-pills, html[dir="rtl"] .nav-tabs, html[dir="rtl"] .tab .nav { direction: rtl; } html[dir="rtl"] .tab .nav-item { margin-right: 0; margin-left: 8px; } /* ── 15. MODALS ──────────────────────────────────────────── */ html[dir="rtl"] .modal-content { text-align: right; } html[dir="rtl"] .modal-header .close { margin: -1rem auto -1rem -1rem; float: left; } /* ── 16. TICKET DIALOG ───────────────────────────────────── */ html[dir="rtl"] .ticket-dialog__row-admin { padding-left: 24px; padding-right: 0; } html[dir="rtl"] .ticket-dialog__row-user { padding-right: 24px; padding-left: 0; } html[dir="rtl"] .ticket-dialog__row-admin .ticket-dialog__row-message { text-align: right; } html[dir="rtl"] .ticket-dialog__row-user .ticket-dialog__row-message { text-align: right; } html[dir="rtl"] .ticket-dialog__row-user .ticket-dialog__row-bottom { justify-content: flex-start; text-align: left; } html[dir="rtl"] .ticket-dialog__row-admin .ticket-dialog__row-bottom { text-align: left; } html[dir="rtl"] .ticket-dialog__row-admin .ticket-dialog__row-bottom .ticket-dialog__row-bottom-name { padding-right: 0; padding-left: 7px; } html[dir="rtl"] .ticket-dialog__row-user .ticket-dialog__row-bottom .ticket-dialog__row-bottom-name { padding-right: 0; padding-left: 7px; } /* ── 17. ADD FUNDS / NEW ORDER PAGES ─────────────────────── */ html[dir="rtl"] .add-funds__form, html[dir="rtl"] .new_order-block, html[dir="rtl"] .mass-order__alignment { direction: rtl; text-align: right; } html[dir="rtl"] .component_form_group { direction: rtl; text-align: right; } /* ── 18. ORDERS / SERVICES / LISTS ───────────────────────── */ html[dir="rtl"] .orders-history { direction: rtl; } html[dir="rtl"] .orders-history-actions { text-align: left; } html[dir="rtl"] .orders-history__margin-search, html[dir="rtl"] .tickets-list__margin-search, html[dir="rtl"] .add-funds__list { direction: rtl; } html[dir="rtl"] .input-group .btn { border-top-left-radius: 8px; border-bottom-left-radius: 8px; border-top-right-radius: 0; border-bottom-right-radius: 0; } /* ── 19. PLATFORMS / SERVICE CARDS ───────────────────────── */ html[dir="rtl"] .platforms { direction: rtl; } html[dir="rtl"] .platforms-item__icon { margin-left: 8px; margin-right: 0; } /* ── 20. FOOTER ──────────────────────────────────────────── */ html[dir="rtl"] .footer, html[dir="rtl"] .component-footer__public-copyright { direction: rtl; text-align: center; } /* ── 21. WELL / CONTENT BLOCKS ───────────────────────────── */ html[dir="rtl"] .well { text-align: right; direction: rtl; } html[dir="rtl"] pre { direction: ltr; text-align: left; } /* ── 22. CHECKBOXES / RADIOS ─────────────────────────────── */ html[dir="rtl"] .form-group__checkbox-label { margin-right: 0; margin-left: 8px; } html[dir="rtl"] .checkmark, html[dir="rtl"] .radiomark { left: auto; right: 0; } html[dir="rtl"] .form-group__checkbox label { padding-right: 24px; padding-left: 0; } /* ── 23. RTL TEMPLATE CLASSES (.rtl-*) ───────────────────── */ .rtl-alert { direction: rtl; text-align: right; } .rtl-alert .close { float: left; } .rtl-form { direction: rtl; text-align: right; } .rtl-form label { text-align: right; } .rtl-form .form-control { text-align: right; } .rtl-form select.form-control:not([multiple]) { background-position: left 12px top 50%, 0 0; } .rtl-form .input-group .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .rtl-form .input-group-append .btn { border-bottom-right-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 8px; border-top-left-radius: 8px; } .rtl-form .dropdown-menu { right: 0; left: auto; text-align: start; } .rtl-form .select2-container { left: auto !important; } .rtl-table { direction: rtl; } .rtl-table th, .rtl-table td { text-align: right; } .rtl-nav { direction: rtl; } .rtl-nav .nav-item { margin-right: 0; margin-left: 8px; } .rtl-pagination { direction: rtl; } .rtl-pagination .pagination { direction: rtl; } .rtl-pagination .pagination .pagination-link { margin-right: 0; margin-left: 8px; } .rtl-content { direction: rtl; text-align: right; } /* ── 24. RESPONSIVE RTL OVERRIDES ─────────────────────────── */ @media (max-width: 991px) { html[dir="rtl"] .component-sidebar_wrapper { display: none; } html[dir="rtl"] .component-navbar__navbar-private { width: 100%; } html[dir="rtl"] .component-navbar-collapse { margin-right: 0; } html[dir="rtl"] .navbar-nav-currencies { padding-left: 0; padding-right: 0; } } @media (max-width: 768px) { html[dir="rtl"] .tab .nav-item { margin-left: 0; margin-bottom: 8px; } html[dir="rtl"] .pagination .pagination-link { margin-left: 4px; } }