/* ==========================================================================
rtl_polish.css — Baseet Gulf · cross-cutting Arabic (RTL) + EN↔AR polish
--------------------------------------------------------------------------
ADDITIVE. Load GLOBALLY, LAST — after:
· layout_1_lux.css (landing / theme_1)
· auth_lux.css (login / signup / otp)
· admin_lux.css (admin dashboard)
· every base + bootstrap-rtl sheet
so equal-specificity rules win by source order.
SCOPE = Arabic typography + RTL mirroring gaps + EN/AR structural
consistency + mobile. It layers ON TOP of the per-surface RTL blocks that
already exist in the three *_lux sheets; it does not duplicate them, it
fills the cross-page gaps (menu/storefront has NO lux sheet at all, so the
element-level [dir="rtl"] rules below are its main safety net).
RULES OF ENGAGEMENT (unchanged from the lux sheets)
- Brand ONLY via var(--dcolor) / var(--primary-color) — never a brand hex.
- Prefer logical props (margin-inline / inset-inline / padding-inline).
- Arabic face = Tajawal / Cairo. Latin letter-spacing must NEVER touch Arabic.
- Presentation only. No markup assumptions beyond classes already shipped.
========================================================================== */
/* Safety net: ensure the Arabic faces resolve even if a page forgot the
in header.php. Harmless when they are already loaded (browser de-dupes). */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');
/* --------------------------------------------------------------------------
0. Arabic type tokens (namespaced; no brand color involved)
-------------------------------------------------------------------------- */
:root {
--ar-font: 'Tajawal', 'Cairo', 'Poppins', 'Segoe UI', sans-serif;
--ar-lh-body: 1.85; /* Arabic diacritics/kashida need more leading than Latin */
--ar-lh-head: 1.4; /* headings: looser than the Latin -0.02em/1.12 pairing */
}
/* ==========================================================================
1. GLOBAL ARABIC TYPOGRAPHY (applies to EVERY RTL surface, incl. storefront
menu which ships no lux sheet)
========================================================================== */
[dir="rtl"] {
font-family: var(--ar-font);
line-height: var(--ar-lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] td,
[dir="rtl"] label,
[dir="rtl"] .card-text,
[dir="rtl"] .biz-type-desc,
[dir="rtl"] .why-card-desc,
[dir="rtl"] .ops-pane-desc,
[dir="rtl"] .test-quote,
[dir="rtl"] .accordion-body {
line-height: var(--ar-lh-body);
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
font-family: var(--ar-font);
line-height: var(--ar-lh-head);
word-break: normal;
overflow-wrap: break-word; /* long Arabic compounds never overflow a heading box */
}
/* ---- Kill Latin tracking under RTL (the single biggest Arabic-rendering bug) ----
The base theme + the lux sheets set letter-spacing on headings/buttons/labels
for Latin polish (-0.02em, 0.4px, uppercase labels). On Arabic glyphs this
separates joined letters and looks broken. Reset everywhere, then re-assert on
the few !important offenders. text-transform:none because CSS uppercasing is a
no-op on Arabic but its tracking companion is not. */
[dir="rtl"] * {
letter-spacing: normal;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .btn,
[dir="rtl"] .badge,
[dir="rtl"] label,
[dir="rtl"] .login-header .heading,
[dir="rtl"] .biz-types-heading,
[dir="rtl"] .ops-section-title,
[dir="rtl"] .testimonials-title,
[dir="rtl"] .why-choose-heading,
[dir="rtl"] h2.heading-text,
[dir="rtl"] .hero-title-gold,
[dir="rtl"] .hero-bottom-action > .btn {
letter-spacing: normal !important;
text-transform: none;
}
/* Modest size lift for the smallest Arabic UI text (chips / badges / labels /
form labels) — Arabic reads ~1 step smaller than Latin at the same px. Kept
off structural headings so EN and AR sections stay the SAME height. */
[dir="rtl"] .hero-feature-item,
[dir="rtl"] .hero-badge,
[dir="rtl"] .badge,
[dir="rtl"] .biz-types-badge,
[dir="rtl"] .modern-others-login .badge,
[dir="rtl"] label,
[dir="rtl"] .demo-login-area .loginBTN,
[dir="rtl"] .footer-links a {
font-size: 1.02em;
}
/* ==========================================================================
2. LANDING (theme_1) — fill remaining mirroring / consistency gaps
(the big [dir="rtl"] block in layout_1_lux already handles hero align,
ops, pricing badge, footer hack, whatsapp float, cookie, etc.)
========================================================================== */
/* Heading highlight underline (.style-shape) is positioned bottom-only, mirrors
fine — but the highlight / word wrap can push the brush off in AR;
keep the accent hugging the word. */
[dir="rtl"] .biz-types-heading,
[dir="rtl"] .ops-section-title,
[dir="rtl"] .testimonials-title,
[dir="rtl"] .why-choose-heading {
text-align: center; /* section titles stay centered in both languages */
}
/* Feature / step / service / why cards: right-align their body copy and flip any
icon gutter the base set with a bare margin-right. These sit in a bootstrap row
whose grid mirrors via bootstrap-rtl; we only fix the in-card text + icons. */
[dir="rtl"] .biz-type-card,
[dir="rtl"] .biz-type-title,
[dir="rtl"] .biz-type-desc,
[dir="rtl"] .why-card,
[dir="rtl"] .why-card-title,
[dir="rtl"] .why-card-desc,
[dir="rtl"] .serviceSection .singleService,
[dir="rtl"] .learn_more_link {
text-align: right;
}
/* How-it-works cards are intentionally center-aligned in the base — keep that in AR too */
[dir="rtl"] .how_it_works .single_serivce_area,
[dir="rtl"] .how_it_works .single_serivce_area * {
text-align: center;
}
/* "learn more →" arrow / any leading icon spacing → logical */
[dir="rtl"] .learn_more_link .fa,
[dir="rtl"] .why-ico-wrap .fa {
margin-right: 0;
margin-inline-end: 0;
margin-inline-start: 0.4rem;
}
/* Cross-language card height parity: force cards in a row to fill the tallest,
so an AR translation that runs longer/shorter than EN never staggers the row.
Applies in BOTH languages (loaded globally) — that is what keeps them equal. */
.biz-type-card,
.why-card,
.testimonial-card,
.serviceSection .singleService {
height: 100%;
display: flex;
flex-direction: column;
}
/* FAQ accordion: title text right, count bubble already mirrors via lux; ensure
the question label doesn't collide with the chevron in AR. */
[dir="rtl"] .accordion-btn,
[dir="rtl"] .btn.accordion-btn {
text-align: right;
}
[dir="rtl"] .accordion-btn .count {
margin-left: 0;
margin-inline-end: 0.6rem;
}
/* Footer link rows: base uses list bullets/arrows with margin-right — flip. */
[dir="rtl"] .footer-links a i {
margin-right: 0;
margin-inline-end: 0.45rem;
}
[dir="rtl"] .footer-links,
[dir="rtl"] .contact-item {
text-align: right;
}
[dir="rtl"] .contact-item span,
[dir="rtl"] .contact-item i {
margin-right: 0;
margin-inline-end: 0.4rem;
}
/* ==========================================================================
3. AUTH — top up the auth_lux RTL block
========================================================================== */
[dir="rtl"] .modern-login-card,
[dir="rtl"] .modern-login-card label,
[dir="rtl"] .modern-login-card .login-header {
text-align: right;
}
/* Center the header pair (title + subtitle) exactly like EN — it is centered in
the LTR design; without this the RTL text-align:right above would shove it. */
[dir="rtl"] .modern-login-card .login-header {
text-align: center;
}
/* Row that holds "PASSWORD" label + "Forgot?" link: keep them on opposite ends
in AR just like EN (label right, link left). Base uses a flex justify-between,
which already mirrors — this only guarantees the label side. */
[dir="rtl"] .modern-login-card .forgot-link,
[dir="rtl"] .modern-login-card .signup-link {
letter-spacing: normal;
}
/* Bottom role pills (Staff / Customer / Delivery): the Arabic strings are longer
than the Latin ones and were cramping / clipping in one line. Let them breathe
and never truncate. */
[dir="rtl"] .demo-login-area .loginBTN,
[dir="rtl"] .modern-others-login .badge {
white-space: normal;
line-height: 1.5;
padding-inline: 0.85rem;
}
/* Signup: heading swapped to Arabic in auth_lux; ensure body copy + fields align */
[dir="rtl"] .signup__section .field label,
[dir="rtl"] .signup-form,
[dir="rtl"] .signup__section .form-head {
text-align: right;
}
[dir="rtl"] .signup__section .form-head {
/* the marketing head is centered in EN — keep parity */
text-align: center;
}
/* ==========================================================================
4. STOREFRONT MENU (no lux sheet — element-level RTL safety net)
From menu_ar.png the grid mirrors well already (chips, "New" badge, name +
availability dot). These rules harden alignment + keep prices readable.
========================================================================== */
[dir="rtl"] .menu-item,
[dir="rtl"] .menu-card,
[dir="rtl"] .food-item,
[dir="rtl"] .product-card {
text-align: right;
}
/* Category filter chips row: let long Arabic category names wrap instead of
overflowing the pill on narrow viewports. */
[dir="rtl"] .category-btn,
[dir="rtl"] .menu-category,
[dir="rtl"] .cat-filter-item {
white-space: normal;
line-height: 1.5;
}
/* ==========================================================================
5. NUMBERS, PRICES, EMAIL, PHONE → stay LTR inside RTL text
Isolate numeric/latin runs so "12.00 $", "+965 …", "v1.4.2", emails and the
OTP boxes never reorder next to Arabic. unicode-bidi:isolate keeps the run
coherent WITHOUT forcing the element's box side, so right-alignment holds.
========================================================================== */
[dir="rtl"] .card-price,
[dir="rtl"] .previous_price,
[dir="rtl"] .price,
[dir="rtl"] .menu-price,
[dir="rtl"] .item-price,
[dir="rtl"] .pricing-price,
[dir="rtl"] .amount,
[dir="rtl"] time,
[dir="rtl"] .phone,
[dir="rtl"] .email,
[dir="rtl"] .version,
[dir="rtl"] .app-version {
unicode-bidi: isolate;
}
/* Force true LTR only where the glyph ORDER matters (currency symbol + number,
phone numbers) — right-aligned so it still sits on the Arabic reading edge. */
[dir="rtl"] .card-price,
[dir="rtl"] .previous_price,
[dir="rtl"] .menu-price,
[dir="rtl"] .item-price {
direction: ltr;
text-align: right;
}
/* ==========================================================================
6. ADMIN — Arabic typography + numeric integrity (layout mirroring is owned
by admin_rtl.css / custom_rtl.css; admin_lux already sets the face on key
containers — extend leading + protect table numbers/dates).
========================================================================== */
[dir="rtl"] .adminDashboard,
[dir="rtl"] .content-wrapper,
[dir="rtl"] .modern-card,
[dir="rtl"] .stat-card {
font-family: var(--ar-font);
line-height: 1.7;
}
[dir="rtl"] .adminDashboard h1,
[dir="rtl"] .adminDashboard h2,
[dir="rtl"] .adminDashboard h3,
[dir="rtl"] .adminDashboard h4,
[dir="rtl"] .adminDashboard .stat-value,
[dir="rtl"] .adminDashboard .stat-number {
letter-spacing: normal !important;
}
/* Stat figures / dates / IDs in tables stay LTR-coherent */
[dir="rtl"] .stat-value,
[dir="rtl"] .stat-number,
[dir="rtl"] .adminDashboard td .badge,
[dir="rtl"] .adminDashboard .money,
[dir="rtl"] .adminDashboard .date-cell {
unicode-bidi: isolate;
}
/* ==========================================================================
7. RESPONSIVE — mobile Arabic (from the screenshots the desktop AR is clean;
these guard the narrow breakpoints where Arabic text is most likely to
overflow / truncate).
========================================================================== */
@media (max-width: 575.98px) {
/* Hero feature chips wrap to two lines instead of clipping the long
"دعم على مدار الساعة طوال أيام الأسبوع" string. */
[dir="rtl"] .hero-feature-item {
white-space: normal;
line-height: 1.5;
text-align: center;
}
/* Section headings: slightly tighter leading so a 2-line Arabic title on
mobile doesn't blow the vertical rhythm vs EN. */
[dir="rtl"] .biz-types-heading,
[dir="rtl"] .ops-section-title,
[dir="rtl"] .why-choose-heading,
[dir="rtl"] .testimonials-title {
line-height: 1.35;
}
/* Auth role pills stack cleanly */
[dir="rtl"] .demo-login-area .loginBTN,
[dir="rtl"] .modern-others-login .badge {
white-space: normal;
font-size: 0.8rem;
}
/* Menu cards: name + price never collide on small screens */
[dir="rtl"] .menu-item,
[dir="rtl"] .menu-card,
[dir="rtl"] .food-item {
text-align: right;
}
}
/* End rtl_polish.css */
/* ===== Restaurant logo: no shadow + show full logo (fix right-side crop) ===== */
.users_section .singleShop .leftShopImg,
.leftShopImg,
.shopLogo,
.shopInfo img,
.leftShopImg img {
box-shadow: none !important;
}
.users_section .singleShop .leftShopImg img,
.leftShopImg img,
img.shopLogo {
object-fit: contain !important;
}