/* Media Corner — Arabic typography + RTL UI polish. * Target: Bootstrap 4 / twenty-one theme / Font Awesome 5 Pro. * * Two principles: * 1. Apply IBM Plex Sans Arabic only to text containers — NOT to icon elements. * 2. Manually flip Bootstrap LTR utilities on RTL pages since BS4 doesn't auto-mirror. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap'); /* ─── Logo sizing in navbar (matches mediacorner.om: h-11 desktop / h-10 mobile) ─ */ .navbar-brand .logo-img { height: 44px; width: auto; max-width: none; object-fit: contain; } @media (max-width: 767.98px) { .navbar-brand .logo-img { height: 40px; } } /* ─── Media Corner brand palette (verified from mediacorner.om CSS) ────── * Primary brand color is a purple-blue (#5646ef), not Tailwind blue. */ :root { --mc-primary: #5646ef; /* purple-blue — buttons, primary CTAs */ --mc-primary-hover: #4936d5; /* darker hover */ --mc-primary-light: #6b62fa; /* lighter variant */ --mc-primary-dark: #3c2dab; /* deepest, for active states */ --mc-primary-bg: #f4f6ff; /* very light tinted bg, used for highlights */ --mc-primary-bg-2: #edefff; /* slightly darker tint */ --mc-secondary: #3b82f6; /* blue-500 — secondary buttons / info */ --mc-dark: #0f172a; /* slate-900 — footer, headings */ --mc-dark-2: #1e293b; /* slate-800 */ --mc-text: #334155; /* slate-700 */ --mc-muted: #94a3b8; /* slate-400 */ --mc-border: #cbd5e1; /* slate-300 */ --mc-bg-light: #f8fafc; /* slate-50 */ --mc-success: #10b981; --mc-success-bg: #e7fbf1; --mc-whatsapp: #25d366; } /* Buttons */ .btn-primary, .btn.btn-primary:not(:disabled):not(.disabled) { background-color: var(--mc-primary) !important; border-color: var(--mc-primary) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn.btn-primary:not(:disabled):not(.disabled):hover, .btn.btn-primary:not(:disabled):not(.disabled):focus, .btn.btn-primary:not(:disabled):not(.disabled):active { background-color: var(--mc-primary-hover) !important; border-color: var(--mc-primary-hover) !important; } .btn-outline-primary { color: var(--mc-primary) !important; border-color: var(--mc-primary) !important; } .btn-outline-primary:hover { background-color: var(--mc-primary) !important; color: #fff !important; } .btn-success { background-color: var(--mc-success); border-color: var(--mc-success); } .btn-success:hover { background-color: #0e9e6f; border-color: #0e9e6f; } /* Links */ a, a:link { color: var(--mc-primary); } a:hover { color: var(--mc-primary-hover); } /* Focus rings — rgba(86, 70, 239) matches --mc-primary */ .btn:focus, .form-control:focus, .custom-select:focus { box-shadow: 0 0 0 0.2rem rgba(86, 70, 239, 0.25) !important; border-color: var(--mc-primary) !important; } /* Headings tint */ h1, h2, h3 { color: var(--mc-dark); } /* Active nav / breadcrumb / pagination */ .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--mc-primary); } .page-item.active .page-link { background-color: var(--mc-primary); border-color: var(--mc-primary); } .breadcrumb-item.active a { color: var(--mc-primary); } /* Badges */ .badge-primary, .badge.badge-primary { background-color: var(--mc-primary); } .badge-info, .badge.badge-info { background-color: var(--mc-accent); } .badge-success, .badge.badge-success { background-color: var(--mc-success); } /* Alerts */ .alert-primary { color: var(--mc-primary-hover); background-color: rgba(86, 70, 239, 0.08); border-color: rgba(86, 70, 239, 0.18); } .alert-success { color: #065f46; background-color: var(--mc-success-bg); border-color: rgba(16, 185, 129, 0.2); } /* Cards on the cart — subtle accent on the recommended/active plan */ .product-name { color: var(--mc-dark); } .product-pricing .price { color: var(--mc-primary); font-weight: 600; } /* Top navbar tweaks if applicable */ .navbar.bg-primary { background-color: var(--mc-primary) !important; } /* ─── Blanket primary-color overrides (theme uses #369 with !important) ─── */ .bg-primary, .bg-primary > a { background-color: var(--mc-primary) !important; } .text-primary { color: var(--mc-primary) !important; } .text-primary:hover { color: var(--mc-primary-hover) !important; } .border-primary { border-color: var(--mc-primary) !important; } .btn-primary, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--mc-primary) !important; border-color: var(--mc-primary) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--mc-primary-hover) !important; border-color: var(--mc-primary-hover) !important; } .btn-outline-primary, .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--mc-primary) !important; border-color: var(--mc-primary) !important; background-color: transparent !important; } .btn-outline-primary:hover { color: #fff !important; background-color: var(--mc-primary) !important; } a.text-primary:hover, a.text-primary:focus { color: var(--mc-primary-hover) !important; } /* Success: theme defaults to #28a745 / #5cb85c — replace with brand-friendlier emerald */ .bg-success { background-color: var(--mc-success) !important; } .text-success { color: var(--mc-success) !important; } .border-success { border-color: var(--mc-success) !important; } .btn-success, .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active { background-color: var(--mc-success) !important; border-color: var(--mc-success) !important; } .btn-success:hover, .btn-success:focus { background-color: #0e9e6f !important; border-color: #0e9e6f !important; } .btn-outline-success { color: var(--mc-success) !important; border-color: var(--mc-success) !important; } /* Info: theme uses #17a2b8 (teal) — align to secondary blue from brand */ .bg-info { background-color: var(--mc-secondary) !important; } .text-info { color: var(--mc-secondary) !important; } .btn-info, .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active { background-color: var(--mc-secondary) !important; border-color: var(--mc-secondary) !important; } /* Pagination active uses bg-primary path */ .page-item.active .page-link { background-color: var(--mc-primary) !important; border-color: var(--mc-primary) !important; } .page-link { color: var(--mc-primary) !important; } .page-link:hover { color: var(--mc-primary-hover) !important; } /* Form check + radio: Bootstrap 4 uses bg-primary on checked state */ .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--mc-primary) !important; border-color: var(--mc-primary) !important; } .custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--mc-primary) !important; } /* Order Now / cart CTA buttons typically btn-success — make them primary brand color */ .btn-order-now { background-color: var(--mc-primary) !important; border-color: var(--mc-primary) !important; color: #fff !important; } .btn-order-now:hover { background-color: var(--mc-primary-hover) !important; border-color: var(--mc-primary-hover) !important; } /* Active-tab / nav-pill default uses .active.bg-primary path */ .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--mc-primary) !important; color: #fff !important; } /* Cards highlighted as "popular" / "featured" sometimes use .border-primary */ .card.border-primary { border: 2px solid var(--mc-primary) !important; } .card.border-primary .card-header { background-color: var(--mc-primary); color: #fff; } /* ─── Domain Checker page (cart.php?a=add&domain=register) ─────────────── */ /* Hero search container — KEEP the original yellow gradient (per user preference) */ .domain-checker-container { border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); overflow: hidden; } /* Keep the globe.png background */ @media (max-width: 991.98px) { .domain-checker-bg { padding: 36px 0 !important; } } /* Inside the yellow hero, the SEARCH button needs contrast — make it dark/black * instead of brand-purple, so it pops against yellow rather than vibrating with it. */ .domain-checker-container .btn-primary.domain-check-availability { background-color: var(--mc-dark) !important; border-color: var(--mc-dark) !important; color: #fff !important; } .domain-checker-container .btn-primary.domain-check-availability:hover, .domain-checker-container .btn-primary.domain-check-availability:focus { background-color: var(--mc-dark-2) !important; border-color: var(--mc-dark-2) !important; } /* TLD category filter chips — were Bootstrap .badge-secondary (muted gray that * looked greenish next to surrounding elements). Make them brand-tinted pills. */ .tld-filters .badge-secondary, .tld-filters a.badge { background-color: var(--mc-primary-bg) !important; color: var(--mc-primary) !important; border: 1px solid rgba(86, 70, 239, 0.18); padding: 0.45em 0.85em; font-size: 0.82rem; font-weight: 500; text-decoration: none; border-radius: 999px; margin: 0 4px 6px 0; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease; } .tld-filters .badge-secondary:hover, .tld-filters a.badge:hover { background-color: var(--mc-primary) !important; color: #fff !important; transform: translateY(-1px); } .tld-filters .badge-secondary.active, .tld-filters a.badge.active { background-color: var(--mc-primary) !important; color: #fff !important; border-color: var(--mc-primary) !important; } html[dir="rtl"] .tld-filters .badge { margin: 0 0 6px 4px; } /* Inner white search box pill */ .domain-checker-container .input-group-box { background-color: #fff !important; border-radius: 10px !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12); max-width: 720px; padding: 12px !important; } /* Result headline (e.g. "domain is available!") — improve color contrast */ #order-standard_cart .domain-checker-result-headline { font-size: 1.5em !important; font-weight: 600; margin: 24px 0 !important; } #order-standard_cart .domain-checker-available { color: var(--mc-success) !important; } #order-standard_cart .domain-checker-unavailable, #order-standard_cart .domain-checker-invalid { color: #ef4444 !important; } /* Transfer-eligible callout — softer brand-tinted styling */ #order-standard_cart .transfer-eligible { background-color: var(--mc-success-bg) !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; color: #065f46 !important; border-radius: 10px; } #order-standard_cart .transfer-not-eligible { background-color: var(--mc-bg-light) !important; border: 1px solid var(--mc-border) !important; color: var(--mc-text) !important; border-radius: 10px; } /* TLD pricing columns — header strip in brand color */ .domain-pricing .tld-pricing-header .tld-column { background-color: var(--mc-primary-bg) !important; color: var(--mc-primary-dark) !important; font-weight: 600; border: 1px solid rgba(86, 70, 239, 0.15); } .tld-column { transition: transform 0.18s ease, box-shadow 0.18s ease; } .tld-column:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(86, 70, 239, 0.12); } /* Domain suggestion list items */ #order-standard_cart .domain-suggestion { border: 1px solid var(--mc-border) !important; border-radius: 8px !important; margin-bottom: 6px !important; transition: border-color 0.18s ease, background-color 0.18s ease; } #order-standard_cart .domain-suggestion:hover { border-color: var(--mc-primary) !important; background-color: var(--mc-primary-bg) !important; } .domain-suggestion .domain { font-weight: 600; color: var(--mc-dark); } .domain-suggestion .domain-price { color: var(--mc-primary); font-weight: 600; direction: ltr; unicode-bidi: embed; display: inline-block; } /* Promo box / "best price" callout */ .domain-promo-box { border-radius: 10px; border: 1px solid var(--mc-border); background: linear-gradient(135deg, var(--mc-primary-bg) 0%, var(--mc-primary-bg-2) 100%); padding: 16px 20px !important; } /* Main check button — bigger and brand-coloured */ .domain-check-availability { width: auto !important; min-width: 120px; padding: 0.6rem 1.5rem !important; font-weight: 600 !important; background-color: var(--mc-primary) !important; border-color: var(--mc-primary) !important; } .domain-check-availability:hover { background-color: var(--mc-primary-hover) !important; border-color: var(--mc-primary-hover) !important; } /* The domain input itself — bigger, friendlier */ .domain-checker-container .input-group-box .form-control { font-size: 1.05rem; padding: 0.6rem 1rem; direction: ltr; text-align: left; } html[dir="rtl"] .domain-checker-container .input-group-box .form-control { text-align: right; /* placeholder reads right-aligned in RTL */ } html[dir="rtl"] .domain-checker-container .input-group-box .form-control:focus, html[dir="rtl"] .domain-checker-container .input-group-box .form-control:not(:placeholder-shown) { /* but typed domain stays LTR (domains are always ASCII left-to-right) */ direction: ltr; text-align: left; } /* IDN Language picker — long alphabetical list shouldn't crowd the layout */ #idnLanguage, select[name="idnlanguage"] { max-width: 280px; } /* "Add Hosting" / "Transfer Domain" headings under search box */ .domain-checker-container ~ * h3.font-size-22, .domain-checker-container ~ * h3.font-size-24 { color: var(--mc-dark); font-weight: 600; } /* ─── Cart view page (cart.php?a=view) ─────────────────────────────────── */ /* The big green CHECKOUT button — make it brand primary, not green */ .btn-checkout, .btn.btn-success.btn-checkout, a.btn-success.btn-checkout { background-color: var(--mc-primary) !important; border-color: var(--mc-primary) !important; color: #fff !important; } .btn-checkout:hover, .btn-checkout:focus, .btn.btn-success.btn-checkout:hover, .btn.btn-success.btn-checkout:focus { background-color: var(--mc-primary-hover) !important; border-color: var(--mc-primary-hover) !important; } .btn-checkout.disabled, .btn-checkout:disabled { background-color: var(--mc-primary-light) !important; border-color: var(--mc-primary-light) !important; opacity: 0.6; } /* Continue shopping / promo / quantity buttons — keep neutral but with brand hover */ .btn-default { color: var(--mc-text) !important; background-color: #fff !important; border-color: var(--mc-border) !important; } .btn-default:hover, .btn-default:focus, .btn-default:active { color: var(--mc-primary) !important; background-color: var(--mc-primary-bg) !important; border-color: var(--mc-primary) !important; } .btn-continue-shopping { color: var(--mc-primary) !important; } .btn-continue-shopping:hover { color: var(--mc-primary-hover) !important; } /* Sidebar list group active state — was #666 gray, now brand */ .sidebar .list-group-item.active, .sidebar .list-group-item.active:focus, .sidebar .list-group-item.active:hover, .list-group-item.active { background-color: var(--mc-primary) !important; border-color: var(--mc-primary) !important; color: #fff !important; } /* Order summary / sidebar background — subtle brand-tinted card */ .order-summary, #orderSummary, .cart-sidebar, .panel-default { background-color: var(--mc-bg-light); border-color: var(--mc-border); } /* Promo code input row */ .promo-code-input .input-group-text { background-color: var(--mc-primary-bg); border-color: var(--mc-border); color: var(--mc-primary); } /* Cart badge / item count in nav */ .cart-btn .badge, .nav-item .badge.badge-pill { background-color: var(--mc-primary) !important; color: #fff !important; } /* Modal headers using bg-primary already covered by .bg-primary override */ /* Subtotal / total rows in order summary — let total stand out in brand */ .order-summary .total-row, .order-summary .grand-total, #orderSummary .total-row, #orderSummary .grand-total, .cart-totals .total { color: var(--mc-primary) !important; font-weight: 700; } /* ─── #order-standard_cart wholesale color sweep ──────────────────────── */ /* The order form CSS hardcodes navy #058, blue #4687FF, blue #3090e0, green #5cb85c. * Map all of them to the brand palette so the cart never shows non-brand colors. */ #order-standard_cart .sub-heading span, #order-standard_cart .sub-heading-borderless span { color: var(--mc-primary) !important; } #order-standard_cart .panel-addon .panel-add, #order-standard_cart .panel-addon-selected .panel-add { background-color: var(--mc-primary) !important; color: #fff !important; } #order-standard_cart .domain-checker-available { color: var(--mc-success) !important; } #order-standard_cart .view-cart-items-header { background-color: var(--mc-primary) !important; color: #fff !important; } #order-standard_cart .view-cart-items { border-bottom: 2px solid var(--mc-primary) !important; } #order-standard_cart .upgrades-block-active, #order-standard_cart [style*="#4687FF"], #order-standard_cart [style*="#3090e0"] { background-color: var(--mc-primary) !important; border-color: var(--mc-primary) !important; color: #fff !important; } /* Any element using the legacy blue/green via class — generic catch-all */ #order-standard_cart .text-blue, #order-standard_cart .text-success { color: var(--mc-primary) !important; } #order-standard_cart .bg-blue { background-color: var(--mc-primary) !important; } #order-standard_cart a:not(.btn) { color: var(--mc-primary); } #order-standard_cart a:not(.btn):hover { color: var(--mc-primary-hover); } /* Selected radio/checkbox row in order forms */ #order-standard_cart .panel-addon.panel-addon-selected, #order-standard_cart .panel-cycle.panel-cycle-selected, #order-standard_cart .domain-options-selected { border-color: var(--mc-primary) !important; box-shadow: 0 0 0 2px rgba(86, 70, 239, 0.15); } /* "Recommended" / "Popular" ribbons that may use yellow/orange in the theme */ #order-standard_cart .recommended, #order-standard_cart .popular, #order-standard_cart .ribbon { background-color: var(--mc-primary) !important; color: #fff !important; } /* ─── RTL fix for .prepend-icon form fields (checkout / billing forms) ─── * The theme uses absolute-positioned icon labels with padding-left:36px on * the input. In RTL the icon naturally sits at the right edge (start of * inline flow) but the padding stays on the left, causing placeholder text * to overlap the icon. Flip both the padding and the icon's anchor. */ html[dir="rtl"] #order-standard_cart .prepend-icon .field, html[dir="rtl"] .prepend-icon .field, html[dir="rtl"] .form-group.prepend-icon .form-control { padding-left: 12px !important; padding-right: 42px !important; } html[dir="rtl"] #order-standard_cart .prepend-icon .field-icon, html[dir="rtl"] .prepend-icon .field-icon, html[dir="rtl"] .form-group.prepend-icon .field-icon { left: auto !important; right: 0 !important; } /* Same pattern for .append-icon (icon on the trailing edge) */ html[dir="rtl"] #order-standard_cart .append-icon .field, html[dir="rtl"] .append-icon .field { padding-right: 12px !important; padding-left: 42px !important; } html[dir="rtl"] #order-standard_cart .append-icon .field-icon, html[dir="rtl"] .append-icon .field-icon { right: auto !important; left: 0 !important; } /* Also handle the WHMCS .prepended-form-control / .appended-form-control pattern * (used in nav search and a few other places). */ html[dir="rtl"] .prepended-form-control { border-radius: 0 0.25rem 0.25rem 0 !important; } html[dir="rtl"] .appended-form-control { border-radius: 0.25rem 0 0 0.25rem !important; } /* ─── RTL: phone field with intl-tel-input flag ───────────────────────── * The flag-container auto-sits at right:0 in CSS. In RTL, my generic * .prepend-icon fix also forces the phone icon overlay to right:0, so the * flag and icon overlap. Fix by moving the flag to the LEFT in RTL and * leaving the phone icon on the right. */ html[dir="rtl"] .intl-tel-input .flag-container { right: auto !important; left: 0 !important; } html[dir="rtl"] .intl-tel-input .selected-flag { padding: 0 8px 0 0 !important; } html[dir="rtl"] .intl-tel-input .selected-flag .iti-arrow { right: auto !important; left: 6px !important; } /* Country dropdown list opens aligned to the flag (left in RTL) */ html[dir="rtl"] .intl-tel-input .country-list { text-align: right !important; left: 0 !important; right: auto !important; } /* Phone input — leave padding-left to intl-tel-input's own sdc-N rules * (it picks 52/66/74/76 etc based on dial-code digit count). We only need * to ensure padding-right is small so the phone-icon doesn't claim space * on the wrong side, and force LTR digit reading. */ html[dir="rtl"] .intl-tel-input input, html[dir="rtl"] .intl-tel-input input[type="tel"], html[dir="rtl"] .intl-tel-input input[type="text"] { padding-right: 12px !important; text-align: right; direction: ltr; /* phone numbers should read LTR even on RTL page */ unicode-bidi: embed; } /* Make the flag container wide enough for the +968 dial code on Oman. * Override the base 36px so even before JS adds .iti-sdc-3, the layout * has room for flag + dial code + arrow. */ html[dir="rtl"] .intl-tel-input .selected-flag, .intl-tel-input.separate-dial-code .selected-flag { min-width: 70px !important; width: auto !important; } .intl-tel-input.separate-dial-code .selected-dial-code { padding-left: 6px; padding-right: 4px; font-size: 0.9rem; } /* When intl-tel-input wraps a .prepend-icon .field, the phone icon overlay * already gets right:0 padding-right:42px from earlier rule. That stays — * the flag now lives on the LEFT, so no collision. */ /* Generic blue/green safety net across order form */ #order-standard_cart .btn-primary, #order-standard_cart .btn-success { background-color: var(--mc-primary) !important; border-color: var(--mc-primary) !important; color: #fff !important; } /* Empty cart message button — was navy #058 */ #order-standard_cart .empty-cart .btn { background-color: var(--mc-primary) !important; color: #fff !important; border: 0 !important; } #order-standard_cart .empty-cart .btn:hover { background-color: var(--mc-primary-hover) !important; } /* Order summary card — was solid gray #666; replace with brand gradient header */ #order-standard_cart .order-summary { background-color: #fff !important; border: 1px solid var(--mc-border) !important; border-bottom: 3px solid var(--mc-primary) !important; } #order-standard_cart .order-summary h2 { background-color: var(--mc-primary) !important; color: #fff !important; border-radius: 4px 4px 0 0; } #order-standard_cart .order-summary .summary-totals { border-top-color: var(--mc-border) !important; border-bottom-color: var(--mc-border) !important; } #order-standard_cart .order-summary .product-name { color: var(--mc-dark); } /* ─── RTL: mirror directional icons only ──────────────────────────────── */ /* Don't flip non-directional icons (check, search, gear, hamburger, brand logos). */ html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-arrow-left, html[dir="rtl"] .fa-arrow-circle-right, html[dir="rtl"] .fa-arrow-circle-left, html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-chevron-left, html[dir="rtl"] .fa-chevron-circle-right, html[dir="rtl"] .fa-chevron-circle-left, html[dir="rtl"] .fa-angle-right, html[dir="rtl"] .fa-angle-left, html[dir="rtl"] .fa-angle-double-right, html[dir="rtl"] .fa-angle-double-left, html[dir="rtl"] .fa-caret-right, html[dir="rtl"] .fa-caret-left, html[dir="rtl"] .fa-long-arrow-right, html[dir="rtl"] .fa-long-arrow-left, html[dir="rtl"] .fa-long-arrow-alt-right, html[dir="rtl"] .fa-long-arrow-alt-left, html[dir="rtl"] .fa-hand-point-right, html[dir="rtl"] .fa-hand-point-left, html[dir="rtl"] .fa-arrow-alt-circle-right, html[dir="rtl"] .fa-arrow-alt-circle-left, html[dir="rtl"] .fa-reply, html[dir="rtl"] .fa-share, html[dir="rtl"] .fa-share-square, html[dir="rtl"] .fa-sign-out-alt, html[dir="rtl"] .fa-sign-in-alt { transform: scaleX(-1); display: inline-block; } /* Pagination prev/next arrows */ html[dir="rtl"] .page-link[aria-label*="Previous"] i, html[dir="rtl"] .page-link[aria-label*="Next"] i, html[dir="rtl"] .carousel-control-prev-icon, html[dir="rtl"] .carousel-control-next-icon { transform: scaleX(-1); } /* ─── Font: text only, scoped to RTL/Arabic ─────────────────────────────── */ html[dir="rtl"] body { font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; line-height: 1.7; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Explicitly re-apply Plex to common text containers so component-specific * font-family resets don't fall back to Tahoma. Inheritance handles most. */ 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"] p, html[dir="rtl"] a, html[dir="rtl"] li, html[dir="rtl"] td, html[dir="rtl"] th, html[dir="rtl"] label, html[dir="rtl"] .btn, html[dir="rtl"] .nav-link, html[dir="rtl"] .navbar-brand, html[dir="rtl"] .card-title, html[dir="rtl"] .card-body, html[dir="rtl"] .product-name, html[dir="rtl"] .product-desc { font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; } /* Preserve Font Awesome on every icon class — DO NOT override. */ html[dir="rtl"] .fa, html[dir="rtl"] .fas, html[dir="rtl"] .far, html[dir="rtl"] .fal, html[dir="rtl"] .fad, html[dir="rtl"] .fab, html[dir="rtl"] [class^="fa-"], html[dir="rtl"] [class*=" fa-"], html[dir="rtl"] i[class*="fa-"] { font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 6 Free" !important; } html[dir="rtl"] .fab, html[dir="rtl"] [class*=" fab"] { font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands" !important; } /* Tabular numerals on prices so OMR digits line up across rows */ html[dir="rtl"] .price, html[dir="rtl"] .product-pricing, html[dir="rtl"] .currency-code, html[dir="rtl"] code { font-variant-numeric: tabular-nums; } /* ─── RTL UI flips for Bootstrap 4 utilities (BS4 isn't natively RTL) ─── */ /* Floats */ html[dir="rtl"] .float-left { float: right !important; } html[dir="rtl"] .float-right { float: left !important; } /* Text alignment — only flip when the utility means "start"/"end" */ html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } /* Margin utilities ml-* / mr-* */ html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; } html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; } html[dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; } html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; } html[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; } html[dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; } html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } /* Padding utilities pl-* / pr-* */ html[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; } html[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; } html[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; } html[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; } html[dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 3rem !important; } html[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; } html[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; } html[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; } html[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; } html[dir="rtl"] .pr-5 { padding-right: 0 !important; padding-left: 3rem !important; } /* Dropdown menu alignment + caret position */ html[dir="rtl"] .dropdown-menu { right: 0; left: auto; text-align: right; } html[dir="rtl"] .dropdown-menu-right { right: auto; left: 0; } html[dir="rtl"] .dropdown-toggle::after { margin-left: 0; margin-right: 0.255em; } /* Navbar items align right in RTL */ html[dir="rtl"] .navbar-nav { padding-right: 0; } html[dir="rtl"] .navbar-brand { margin-right: 0; margin-left: 1rem; } /* Form controls — input groups + checkboxes */ /* Reverse the flex order so prepend (icon) ends up on the right in RTL */ html[dir="rtl"] .input-group { flex-direction: row-reverse; } html[dir="rtl"] .input-group > .form-control { border-radius: 0; } html[dir="rtl"] .input-group > .input-group-prepend > .input-group-text, html[dir="rtl"] .input-group > .input-group-prepend > .btn { border-radius: 0 0.25rem 0.25rem 0; border-left: 0; border-right: 1px solid #ced4da; } html[dir="rtl"] .input-group > .input-group-append > .input-group-text, html[dir="rtl"] .input-group > .input-group-append > .btn { border-radius: 0.25rem 0 0 0.25rem; border-right: 0; border-left: 1px solid #ced4da; } html[dir="rtl"] .input-group > .input-group-prepend > .input-group-text + .input-group-text, html[dir="rtl"] .input-group > .input-group-append > .input-group-text + .input-group-text { border-radius: 0; } /* When ONLY prepend exists, the form-control gets left rounded corners */ html[dir="rtl"] .input-group > .input-group-prepend + .form-control, html[dir="rtl"] .input-group > .input-group-prepend + .form-control + :not(.input-group-append) { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } /* When append exists, form-control gets right rounded corners */ html[dir="rtl"] .input-group > .form-control:first-child, html[dir="rtl"] .input-group > .input-group-append:last-child ~ .form-control { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } /* Custom checkbox/radio: indicator on the right side */ html[dir="rtl"] .custom-control { padding-left: 0; padding-right: 1.5rem; } html[dir="rtl"] .custom-control-label::before, html[dir="rtl"] .custom-control-label::after { left: auto; right: -1.5rem; } html[dir="rtl"] .form-check { padding-left: 0; padding-right: 1.25rem; } html[dir="rtl"] .form-check-input { margin-left: 0; margin-right: -1.25rem; } html[dir="rtl"] .form-check-label { padding-right: 0.25rem; } /* Breadcrumb separator direction */ html[dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-right: 0.5rem; padding-left: 0; } html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { padding-left: 0.5rem; padding-right: 0; } /* List icons / glyphs that hang on the wrong side */ html[dir="rtl"] ul.fa-ul, html[dir="rtl"] .list-unstyled .fa { margin-right: 0; margin-left: 0.5rem; } /* Order summary table — keep numerics LTR even inside RTL container */ html[dir="rtl"] .price-amount, html[dir="rtl"] .invoice-total, html[dir="rtl"] .product-pricing .price { direction: ltr; unicode-bidi: embed; display: inline-block; } /* Buttons with icons — icon should sit on the start side; flip ml-/mr- inside */ html[dir="rtl"] .btn .fa, html[dir="rtl"] .btn .fas, html[dir="rtl"] .btn .far, html[dir="rtl"] .btn .fab { margin-left: 0.4em; margin-right: 0; } /* ─── Text alignment defaults for RTL ──────────────────────────────────── */ /* Body and common text containers default to right-aligned in RTL */ html[dir="rtl"] body { text-align: right; } html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] dd, html[dir="rtl"] dt, html[dir="rtl"] caption, html[dir="rtl"] figcaption, html[dir="rtl"] .lead, html[dir="rtl"] .small, html[dir="rtl"] .alert, html[dir="rtl"] .form-text { text-align: right; } /* Headings: keep their alignment unless explicitly center/end utility */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { text-align: right; } /* Cards and tiles */ html[dir="rtl"] .card-body, html[dir="rtl"] .card-text, html[dir="rtl"] .card-title:not(.text-center):not(.text-left):not(.text-right) { text-align: right; } /* Tables — header + cell default */ html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; } html[dir="rtl"] .table th, html[dir="rtl"] .table td { text-align: right; } html[dir="rtl"] thead th { text-align: right; } /* Forms — labels, inputs, validation */ html[dir="rtl"] label, html[dir="rtl"] .col-form-label, html[dir="rtl"] .form-check-label, html[dir="rtl"] .invalid-feedback, html[dir="rtl"] .valid-feedback { text-align: right; } html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } html[dir="rtl"] input[type="number"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="tel"] { text-align: left; direction: ltr; } /* Modals */ html[dir="rtl"] .modal-header, html[dir="rtl"] .modal-body, html[dir="rtl"] .modal-footer { text-align: right; } html[dir="rtl"] .modal-header .close { margin: -1rem auto -1rem -1rem; } /* Lists — bullets/numbers belong on the right side in RTL */ html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 2rem; padding-left: 0; } html[dir="rtl"] dl dd { margin-right: 0; margin-left: auto; } /* Product description list (the