/* ════════════════════════════════════════════════════════════════ THEME-BRAND-RTL.CSS Arabic / RTL layout overrides for the Jaibak theme. ▸ This file is loaded ONLY when is_rtl() is true (Arabic pages). ▸ It loads AFTER theme-brand.css so it can safely override LTR rules. ▸ All selectors are scoped with html[dir="rtl"] for safety. ARCHITECTURE ───────────────────────────────────────────────────────────────── SECTION 1 · RTL COMMON — direction, mirroring, shared layout SECTION 2 · RTL LIGHT — light-theme specific RTL overrides SECTION 3 · RTL DARK — dark-theme specific RTL overrides NAMING CONVENTION ▸ Each block starts with a labelled comment: /* ── RTL-{N} Short description ──── * / ▸ Mirror rules swap: margin-left ↔ margin-right padding-left ↔ padding-right left ↔ right border-left ↔ border-right ════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════ SECTION 1 · RTL COMMON Applies to BOTH light and dark themes ════════════════════════════════════════════════════════════════ */ /* ── RTL-1 Base direction & font ───────────────────────────── */ html[dir="rtl"] body { text-align: right; } /* ── RTL-2 Header layout ────────────────────────────────────── */ /* DO NOT use flex-direction: row-reverse here. The attribute already flips every flex container's main axis from right-to-left, so the source order header-left → mean__menu-wrapper → header-right naturally paints as [logo on RIGHT] [menu in MIDDLE] [tools on LEFT] which is the correct Arabic layout. Adding row-reverse on top would double-flip and break the order. Keep this block as a no-op anchor for future header-only RTL tweaks. */ /* ── RTL-3 Navigation list ──────────────────────────────────── */ /* Same principle as RTL-2 — the natural RTL flex flow already places the first menu item (Home / الرئيسية) on the RIGHT next to the logo and the last item (Contact / اتصل بنا) on the LEFT. Only the dropdown sub-menu anchor needs an override. */ html[dir="rtl"] .webftechcashlink-nav-list .sub-menu { left: auto; right: 0; text-align: right; } /* ── RTL-4 Section titles ───────────────────────────────────── */ html[dir="rtl"] .section-title, html[dir="rtl"] .section-title h2, html[dir="rtl"] .section-title p { text-align: right; } /* ── RTL-5 Hero banner content ──────────────────────────────── */ /* Two-column row: source order is [content, phone-image]. We want Arabic layout = [image LEFT, content RIGHT]. PROBLEM: main.css line 44 forces body.rtl .swiper { direction: ltr } to keep Swiper's internal transforms LTR-safe. That cascades direction:ltr into the banner row, so natural RTL flex flow does NOT happen — the row stays LTR and text lands on the left. FIX: re-assert direction:rtl on the banner content INSIDE the swiper. Swiper's own .swiper-wrapper / .swiper-slide stay LTR (so transforms still work), but the inner row swaps correctly. */ html[dir="rtl"] .webftechcashlink-home-banner, html[dir="rtl"] .webftechcashlink-home-banner .row { direction: rtl; } /* Mirror LTR left-padding → right-padding */ html[dir="rtl"] .webftechcashlink-home-banner__content { padding: 8px 18px 0 0 !important; /* was: 8px 0 0 18px */ text-align: right !important; direction: rtl; } html[dir="rtl"] .webftechcashlink-home-banner__content h1, html[dir="rtl"] .webftechcashlink-home-banner__content p, html[dir="rtl"] .webftechcashlink-home-banner__content .banner-subtitle { text-align: right !important; direction: rtl; max-width: 100%; } /* ── Arabic banner heading typography fixes ────────────────────── main.css sets letter-spacing: -0.04em; line-height: 1.08; max-width: 500px on .webftechcashlink-home-banner__content h1. Those values are tuned for Latin display type but cause three problems for Arabic: 1) negative letter-spacing makes connected Arabic letters overlap visually (cramped look in the screenshot) 2) line-height 1.08 collides Arabic glyphs across lines 3) 500px max-width prevents the heading from filling the col-lg-7 column you set in home.php Reset all three for Arabic only. */ html[dir="rtl"] .webftechcashlink-home-banner__content h1 { letter-spacing: 0; /* never negative for Arabic */ word-spacing: 0.05em; /* small breathing room between words */ line-height: 1.45; /* tall lines so glyphs don't collide */ max-width: none; /* fill the new col-lg-7 width */ margin-bottom: 22px; /* extra gap before the description */ } /* Description paragraph + subtitle — also benefit from a small line-height bump in Arabic for readability. */ html[dir="rtl"] .webftechcashlink-home-banner__content p, html[dir="rtl"] .webftechcashlink-home-banner__content .banner-subtitle { line-height: 1.85; word-spacing: 0.04em; max-width: 640px; /* wider than LTR's 500px to match col-lg-7 */ } /* Store badges row — right-aligned, badges in a row */ html[dir="rtl"] .webftechcashlink-home-banner__store-row { direction: rtl !important; justify-content: flex-start !important; /* flex-start = RIGHT in RTL */ flex-wrap: wrap; gap: 18px; } /* Individual store badge — mirror icon gap */ html[dir="rtl"] .webftechcashlink-home-banner__store-row .webftechcashlink-store-badge { flex-direction: row-reverse; } html[dir="rtl"] .webftechcashlink-home-banner__store-row .webftechcashlink-store-badge i { margin-right: 0 !important; margin-left: 10px !important; } html[dir="rtl"] .webftechcashlink-home-banner__store-row .webftechcashlink-store-badge span { text-align: right; } /* ── RTL-6 Store badge — icon & text gap ────────────────────── */ html[dir="rtl"] .webftechcashlink-store-badge { flex-direction: row-reverse; } html[dir="rtl"] .webftechcashlink-store-badge i { margin-right: 0; margin-left: 10px; } /* ── RTL-7 Service tiles ────────────────────────────────────── */ html[dir="rtl"] .webftechcashlink-service-tile { text-align: right; } /* ── RTL-8 Journey feature panel ────────────────────────────── */ /* Source order: [content, visual]. Natural RTL flex flow paints them mirrored — no row-reverse override needed. */ html[dir="rtl"] .webftechcashlink-journey-feature__content { text-align: right; } /* Heading typography fixes for Arabic: • font-size: clamp(34, 4vw, 56) → clamp(28, 3vw, 42) (Arabic glyphs are visually heavier than Latin; at 56px the full title needed ~1100px of width and wrapped into THREE lines inside the ~540px column. Stepping the cap down to 42px lets the same text fit on TWO lines.) • letter-spacing: -0.05em → 0 (negative kerning collapses connected Arabic glyphs into each other) • word-spacing: 0.05em (small gap between words) • line-height: 0.96 → 1.5 (visible breathing space between the two lines) • max-width: 560px → none (use the full column width) */ html[dir="rtl"] .webftechcashlink-journey-feature__content h3 { font-size: clamp(28px, 3vw, 42px); letter-spacing: 0; word-spacing: 0.05em; line-height: 1.5; max-width: none; margin-bottom: 26px; } @media (max-width: 991px) { html[dir="rtl"] .webftechcashlink-journey-feature__content h3 { font-size: clamp(24px, 4.5vw, 36px); line-height: 1.4; } } /* ── RTL-9 Journey / value cards ────────────────────────────── */ html[dir="rtl"] .webftechcashlink-value-card, html[dir="rtl"] .webftechcashlink-process-card, html[dir="rtl"] .webftechcashlink-journey-card { text-align: right; } /* ── RTL-10 Check list ──────────────────────────────────────── */ /* Source order: [icon, text]. Natural RTL flow places the bullet icon at the RIGHT (line start in Arabic), text extending to the LEFT — the conventional Arabic bulleted-list layout. */ html[dir="rtl"] .webftechcashlink-check-list, html[dir="rtl"] .webftechcashlink-check-list li { text-align: right; } html[dir="rtl"] .webftechcashlink-check-list__icon { margin-right: 0; margin-left: 12px; } /* ── RTL-11 Why-choice cards ────────────────────────────────── */ /* In LTR the card layout is: [Icon top-LEFT] [Number top-RIGHT] [Heading left-aligned, max-width 88%] [Description left-aligned] In Arabic we want the mirror: [Number top-LEFT] [Icon top-RIGHT] [Heading right-aligned, max-width 88%] [Description right-aligned] main.css positions the number absolutely with right:18px which is unaffected by direction:rtl, so in RTL the number stayed in the top-right corner — directly behind the now right-aligned heading, making it look invisible. Mirror to left:18px. The icon is inline-flex; with text-align:right on the article it should align right naturally, but we also pin it with margin-left:auto on a block-level flex container as a hard safeguard against any LTR-leaning specificity from main.css. */ html[dir="rtl"] .webftechcashlink-why-choice-card, html[dir="rtl"] .webftechcashlink-why-choice-card__content { text-align: right; } html[dir="rtl"] .webftechcashlink-why-choice-card__number { right: auto; left: 18px; } html[dir="rtl"] .webftechcashlink-why-choice-card__icon { display: flex; /* block-level flex, takes its own line */ margin-left: auto; /* push to the right edge of the card */ margin-right: 0; width: 54px; /* preserve the 54×54 size set in main */ height: 54px; } /* ── RTL-12 Download band ───────────────────────────────────── */ /* Source order: [text-and-stores, experience-image]. Natural RTL flex flow paints text on the right, image on the left — correct. */ html[dir="rtl"] .webftechcashlink-download-band h2, html[dir="rtl"] .webftechcashlink-download-band p { text-align: right; } html[dir="rtl"] .webftechcashlink-download-band__stores { justify-content: flex-start; } /* ── RTL-13 Support strip ───────────────────────────────────── */ /* Source order: [heading, action-buttons]. Natural RTL flow puts heading on the right (start) and CTA buttons on the left (end). */ html[dir="rtl"] .webftechcashlink-support-strip h2 { text-align: right; } /* ── RTL-14 Contact / help ──────────────────────────────────── */ /* contact.php uses CSS grid, not Bootstrap .row. RTL-32 below handles the grid mirror. Here we only right-align text. */ html[dir="rtl"] .webftechcashlink-contact-help { text-align: right; } /* ── RTL-15 Footer ──────────────────────────────────────────── */ /* Multi-column footer row: source order is [Logo+Stores, Explore, Key Services, Get In Touch]. Natural RTL flow paints the logo on the right (start side) and the contact column on the left (end side), which mirrors LTR. No row-reverse override needed. */ html[dir="rtl"] .footer-widget, html[dir="rtl"] .footer-list, html[dir="rtl"] .webftechcashlink-footer-address { text-align: right; } html[dir="rtl"] .webftechcashlink-footer-social { justify-content: flex-end; } /* ── RTL-16 About page ──────────────────────────────────────── */ /* Two .row containers on the about page: 1) .about-section .row — source: [image, content]. Natural RTL flow paints them mirrored to [content RIGHT, image LEFT] which is correct for Arabic. 2) .about-page-area-new .row — source: [cards, vision-image]. Natural RTL flow paints [image LEFT, cards RIGHT] which is correct. Vision & Mission text on the right, phone on left. Neither needs a flex-direction override. */ html[dir="rtl"] .about-section .section-title, html[dir="rtl"] .about-content p { text-align: right; } html[dir="rtl"] .card-item { text-align: right; } /* ── RTL-19 Global motion (international) section ───────────── */ /* Source order: [content, visual-with-globe]. Natural RTL flow paints them mirrored — no row-reverse override needed. */ html[dir="rtl"] .webftechcashlink-global-motion__content h2, html[dir="rtl"] .webftechcashlink-global-motion__content p { text-align: right; } /* Heading typography fixes for Arabic — same pattern as RTL-8: • font-size: clamp(34, 3.8vw, 52) → clamp(26, 2.6vw, 38) (Arabic title wraps into 4 short lines at 52px inside the col-lg-5 column; dropping the cap to ~38px lets it sit on 2) • letter-spacing: -0.05em → 0 (no negative kerning) • word-spacing: 0.05em (small inter-word gap) • line-height: 1.08 → 1.55 (visible space between lines) • max-width: 500px → none (use full column width) */ html[dir="rtl"] .webftechcashlink-global-motion__content h2 { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: 0; word-spacing: 0.05em; line-height: 1.55; max-width: none; margin-bottom: 24px; } @media (max-width: 991px) { html[dir="rtl"] .webftechcashlink-global-motion__content h2 { font-size: clamp(22px, 4vw, 32px); line-height: 1.4; } } /* ── RTL-20 FAQ section ─────────────────────────────────────── */ /* Source order: [faq-content (col-lg-4), accordion (col-lg-8)]. Natural RTL flow paints content on the right, accordion on the left — no row-reverse override needed. */ html[dir="rtl"] .faq-content .section-title, html[dir="rtl"] .faq-content p { text-align: right; } /* ── RTL-21 Payments section ────────────────────────────────── */ /* Source order: [content+stores, payments-image]. Natural RTL flex flow places text on the right and image on the left. */ /* ── RTL-17 Arrows / chevron icon flips ─────────────────────── */ html[dir="rtl"] .theme-btn i.fa-arrow-up-right, html[dir="rtl"] .theme-btn i.fa-arrow-right, html[dir="rtl"] .webftechcashlink-clients-strip__arrow--prev i, html[dir="rtl"] .webftechcashlink-clients-strip__arrow--next i { transform: scaleX(-1); } /* ── RTL-18 Back-to-top button position ─────────────────────── */ html[dir="rtl"] #back-top, html[dir="rtl"] .back-to-top { right: auto; left: 30px; } /* ── RTL-22 Desktop dropdown sub-menu anchor ─────────────────── main.css anchors .sub-menu to left:0 inside the header. In RTL the dropdown must open from the right edge of its parent so it stays aligned with the menu item it belongs to. */ html[dir="rtl"] .header-main .main-menu ul li .sub-menu { left: auto !important; right: 0 !important; } /* Sub-menu list items: right-align text & flip hover indent. */ html[dir="rtl"] .header-main .main-menu ul li .sub-menu li a { text-align: right; } html[dir="rtl"] .header-main .main-menu ul li .sub-menu li a:hover { padding-left: 20px; /* restore default left padding */ padding-right: 25px; /* mirror of LTR :hover indent */ } /* ── RTL-23 Menu-item dropdown arrow gap ─────────────────────── main.css adds "▼" after items with children using margin-left. Swap the gap so the arrow sits to the LEFT of the Arabic label. */ html[dir="rtl"] .header-main .main-menu ul li.menu-item-has-children > a::after, html[dir="rtl"] .webftechcashlink-nav-list li.has-dropdown > a > .fa-angle-down, html[dir="rtl"] .webftechcashlink-nav-list li.has-dropdown > a > i.fa-angle-down { margin-left: 0; margin-right: 6px; } /* ── RTL-24 Programmatic .submenu (functions.php helper) ─────── webftechjaibak_render_primary_nav() emits a .submenu (no hyphen). Same right-edge anchoring + right-aligned text as .sub-menu. */ html[dir="rtl"] .webftechcashlink-nav-list .submenu { left: auto !important; right: 0 !important; text-align: right; } html[dir="rtl"] .webftechcashlink-nav-list .submenu li a { text-align: right; } /* ── RTL-25 Note: centred-dropdown rule intentionally omitted ── main.css declares two competing rule sets for sub-menus: (a) .webftechcashlink-nav-list .sub-menu — left:50% + translateX (b) .header-main .main-menu ul li .sub-menu — left:0 Rule (b) is more specific and comes later, so the actually-rendered dropdown is anchored at left:0 in LTR. RTL-22 mirrors that to the right edge. Rule (a) (centred) never wins in the live HTML because the menu is always emitted inside .header-main .main-menu, so no counter-override is needed here. */ /* ── RTL-26 Mobile mean-menu reveal (hamburger) position ─────── meanmenu.css positions a.meanmenu-reveal at right:0 inside the mean-bar. Flip to the left in Arabic so it sits on the natural start edge. */ html[dir="rtl"] .mean-container a.meanmenu-reveal { right: auto !important; left: 0 !important; } /* ── RTL-27 Offcanvas mobile drawer (slide from left) ────────── main.css anchors .offcanvas__info to right:0 and slides it in from off-screen-right. In Arabic the drawer should open from the LEFT (natural start side). */ html[dir="rtl"] .offcanvas__info { right: auto !important; left: 0 !important; border-left: 0 !important; border-right: 2px solid var(--theme) !important; transform: translateX(calc(-100% - 80px)); } html[dir="rtl"] .offcanvas__info.info-open { transform: translateX(0); } /* Mobile menu links inside the offcanvas — right-align Arabic. */ html[dir="rtl"] .offcanvas__info .mobile-menu ul li, html[dir="rtl"] .offcanvas__info .mobile-menu ul li a { text-align: right; } html[dir="rtl"] .webftechcashlink-mobile-tools, html[dir="rtl"] .webftechcashlink-mobile-auth, html[dir="rtl"] .webftechcashlink-mobile-contact { text-align: right; } /* ── RTL-28 FAQ accordion chevron flip ───────────────────────── Bootstrap's .accordion-button uses an embedded SVG chevron with margin-left: auto pushing it to the right edge. In RTL push it to the left edge instead, and right-align the question text. */ html[dir="rtl"] .accordion-button { text-align: right; } html[dir="rtl"] .accordion-button::after { margin-left: 0; margin-right: auto; } /* ── RTL-29 Global motion floating badges — swap left↔right ──── main.css positions four absolute badges by edge keyword in the modifier class (--top-left / --top-right / --bottom-left / --bottom-right). Mirror each badge to the opposite edge so the composition reads correctly in Arabic. */ html[dir="rtl"] .webftechcashlink-global-motion__badge--top-left { left: auto; right: 150px; } html[dir="rtl"] .webftechcashlink-global-motion__badge--top-right { right: auto; left: 34px; } html[dir="rtl"] .webftechcashlink-global-motion__badge--bottom-left { left: auto; right: 138px; } html[dir="rtl"] .webftechcashlink-global-motion__badge--bottom-right { right: auto; left: 22px; } /* Badge layout — source order is [icon, label]. Natural RTL flex flow paints them as [icon RIGHT, label LEFT] which is what we want in Arabic. No flex-direction override needed. */ /* ── RTL-30 Download band — frames & floating cards swap ─────── The decorative ::before/::after frames and the four .webftechcashlink-download-band__card--* modifiers all use left:/right: keyed to the side encoded in the class name. Mirror every value so the visual layout reads R→L in Arabic. */ html[dir="rtl"] .webftechcashlink-download-band__experience::before { left: auto; right: 8%; } html[dir="rtl"] .webftechcashlink-download-band__experience::after { right: auto; left: 6%; } html[dir="rtl"] .webftechcashlink-download-band__card--left-top { left: auto; right: 0; } html[dir="rtl"] .webftechcashlink-download-band__card--left-middle { left: auto; right: 10px; } html[dir="rtl"] .webftechcashlink-download-band__card--right-top { right: auto; left: 8px; } html[dir="rtl"] .webftechcashlink-download-band__card--right-bottom { right: auto; left: 0; } /* Card layout — source order is [icon, label]. Natural RTL flex flow paints them as [icon RIGHT, label LEFT] which is what we want in Arabic. Keep text-align right for the label. */ html[dir="rtl"] .webftechcashlink-download-band__card { text-align: right; } /* ── RTL-31 Service detail page — single-services.php ────────── Hero row + check-list + image slider arrows + slide enter anim. Source order of hero row: [content, visual]. Natural RTL flow handles the mirror — no .row override needed. */ html[dir="rtl"] .webftechcashlink-service-detail-hero__content { text-align: right; } html[dir="rtl"] .webftechcashlink-service-detail-hero__content .webftechcashlink-check-list, html[dir="rtl"] .webftechcashlink-service-detail-hero__content .webftechcashlink-check-list li { text-align: right; } /* Service image slider — flip prev/next arrow positions */ html[dir="rtl"] .webftechcashlink-service-image-slider__arrow--prev { left: auto; right: 28px; } html[dir="rtl"] .webftechcashlink-service-image-slider__arrow--next { right: auto; left: 28px; } html[dir="rtl"] .webftechcashlink-service-image-slider__arrow--prev i, html[dir="rtl"] .webftechcashlink-service-image-slider__arrow--next i { transform: scaleX(-1); } /* Incoming slide enters from the natural start side (right in RTL) */ html[dir="rtl"] .webftechcashlink-service-image-slider__slide { transform: translateX(-18px); } html[dir="rtl"] .webftechcashlink-service-image-slider__slide.is-active { transform: translateX(0); } /* ── RTL-32 Contact page — 2-column grid + form mirroring ────── main.css grid: minmax(0, 1.45fr) minmax(360px, 418px). CSS grid columns are numbered logically; under direction:rtl column 1 paints on the visual right. DOM source order is then , so auto-placement already gives us: visual RIGHT = content (1.45fr — wider, start-side) visual LEFT = panel (418px — narrower, end-side) That is exactly the mirror of the LTR layout, so we do NOT override grid-template-columns. We only add text-alignment rules below. */ html[dir="rtl"] .webftechcashlink-contact-help__content { text-align: right; } html[dir="rtl"] .webftechcashlink-contact-help__cards { text-align: right; } html[dir="rtl"] .webftechcashlink-contact-help__card, html[dir="rtl"] .webftechcashlink-contact-help__card p, html[dir="rtl"] .webftechcashlink-contact-help__card h2, html[dir="rtl"] .webftechcashlink-contact-help__address { text-align: right; } /* Trailing "circle arrow right" link in each card — mirror. */ html[dir="rtl"] .webftechcashlink-contact-help__card a i.fa-circle-arrow-right { transform: scaleX(-1); margin-left: 0; margin-right: 6px; } /* Form direction: right-align labels, inputs, textareas, button. */ html[dir="rtl"] .webftechcashlink-contact-help__form label, html[dir="rtl"] .webftechcashlink-contact-help__form input, html[dir="rtl"] .webftechcashlink-contact-help__form textarea { direction: rtl; text-align: right; } html[dir="rtl"] .webftechcashlink-contact-help__form input[type="email"], html[dir="rtl"] .webftechcashlink-contact-help__form input[type="tel"] { /* Email & phone usually stay LTR even in Arabic UI — keep them left-to-right so digits & latin chars don't render reversed. */ direction: ltr; text-align: right; } /* ── RTL-33 Footer list separator & social row alignment ─────── RTL-15 reverses the row, but the footer-list pipes/dots and the social-icon row need explicit start-side alignment. */ html[dir="rtl"] .footer-bottom-wrapper, html[dir="rtl"] .webftechcashlink-footer-bottom { text-align: right; } html[dir="rtl"] .footer-list, html[dir="rtl"] .webftechcashlink-footer-bottom .footer-list { justify-content: flex-end; } html[dir="rtl"] .webftechcashlink-footer-stores { flex-direction: row-reverse; justify-content: flex-end; } /* ── RTL-34 Theme-btn hover gold-fill direction ──────────────── main.css's ::before slides the gold fill in from the left. Reverse the origin so the fill enters from the right in RTL. */ html[dir="rtl"] .theme-btn::before { left: auto; right: 0; } /* ── RTL-35 About-section header flex direction ──────────────── main.css uses display:flex on .about-section .section-title. With direction:rtl that already lays out R→L, but the inner heading needs explicit right alignment for very long Arabic. */ html[dir="rtl"] .about-section .section-title { flex-direction: row-reverse; } html[dir="rtl"] .about-section .section-title h2 { text-align: right; } /* ── RTL-36 Breadcrumb / page-heading items ──────────────────── 404 + inner page banners use .breadcrumb-items as a flex row of crumbs separated by "/". Natural RTL flow already puts Home on the right (start side) — no row-reverse override needed. */ html[dir="rtl"] .breadcrumb-items { justify-content: flex-end; } html[dir="rtl"] .breadcrumb-items li i.fa-house { margin-left: 6px; margin-right: 0; } /* ── RTL-37 Universal text-input direction (forms outside contact) Catch-all so any plain /