/* ══════════════════════════════════════════ ARABIC / RTL OVERRIDES Loaded AFTER ../style.css and ../animations.css on every page inside /ar. Handles the Arabic webfont and the direction-specific tweaks that physical CSS properties in style.css don't flip automatically. ══════════════════════════════════════════ */ /* ── Arabic webfont ── Loaded via in each page ; applied here so the whole site picks it up without touching style.css. */ :root { --font-ar: "Cairo", "DM Sans", "Segoe UI", Tahoma, sans-serif; } html[dir="rtl"] body, html[dir="rtl"] .nav-link, html[dir="rtl"] .btn, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] button { font-family: var(--font-ar); } /* Arabic reads more comfortably without forced uppercase (uppercase is meaningless for Arabic script anyway) */ html[dir="rtl"] .nav-link, html[dir="rtl"] .own-dropdown .dropdown-item, html[dir="rtl"] .btn-nav-cta, html[dir="rtl"] .section-heading, html[dir="rtl"] .footer-nav a, html[dir="rtl"] .footer-policy a { text-transform: none; letter-spacing: 0; } /* ── Generic direction fixes ── */ html[dir="rtl"] body { text-align: right; } /* Bootstrap-icons arrows that imply "forward" should point left in RTL */ html[dir="rtl"] .bi-arrow-right::before { content: "\f12f"; } /* arrow-left glyph */ /* Hero / model spec rows keep their natural order but align text start */ html[dir="rtl"] .hero-bottom, html[dir="rtl"] .hero-specs, html[dir="rtl"] .hero-model-brand { text-align: right; } /* Carousel control icons: swap prev/next so they feel native in RTL */ html[dir="rtl"] .carousel-control-prev { right: 0; left: auto; } html[dir="rtl"] .carousel-control-next { left: 0; right: auto; } /* Model carousel arrows mirror */ html[dir="rtl"] .model-carousel-prev .bi-chevron-left::before { content: "\f285"; } /* chevron-right */ html[dir="rtl"] .model-carousel-next .bi-chevron-right::before { content: "\f284"; } /* chevron-left */ /* Design (explore) arrow-slider: "next" reveals left-ward content in RTL, so mirror the prev/next chevrons to point the intuitive way */ html[dir="rtl"] .iv-slide-prev .bi-chevron-left::before { content: "\f285"; } /* chevron-right */ html[dir="rtl"] .iv-slide-next .bi-chevron-right::before { content: "\f284"; } /* chevron-left */ /* Marquee text reads RTL */ html[dir="rtl"] .hill-marquee-text { direction: rtl; } /* Footer rows: let flex follow document direction */ html[dir="rtl"] .footer-top, html[dir="rtl"] .footer-bottom { direction: rtl; } /* AM logo divider: style.css puts the border/padding on the left — mirror it to the right in Arabic so it sits between the logos. */ html[dir="rtl"] .footer-am-logo { border-left: 0; padding-left: 0; border-right: 1px solid var(--gray-light); padding-right: 1rem; } /* .title-block uses margin-left:10% in style.css — mirror to the right in RTL */ html[dir="rtl"] .title-block { margin-left: 0; margin-right: 10%; } /* Model section titles are forced text-align:left in style.css — flip to right in Arabic, but keep the intentionally-centred variants centred. */ html[dir="rtl"] .model-section-title { text-align: right !important; } html[dir="rtl"] .technology h2.model-section-title, html[dir="rtl"] .model-description .model-section-title, html[dir="rtl"] .safety-highlights-section .model-section-title { text-align: center !important; } /* Forms: labels and inputs align right */ html[dir="rtl"] label, html[dir="rtl"] .form-label { text-align: right; } html[dir="rtl"] .form-control, html[dir="rtl"] .form-select { text-align: right; } /* Numbers, model codes, prices and units stay LTR for legibility */ html[dir="rtl"] .spec-val, html[dir="rtl"] .spec-unit, html[dir="rtl"] [data-counter], html[dir="rtl"] .model-slide-price, html[dir="rtl"] .ltr { direction: ltr; unicode-bidi: embed; display: inline-block; } /* Keep brand names / model codes (iCAUR, V27, 03T, REEV, SAR) upright LTR when they appear inline inside Arabic text */ html[dir="rtl"] bdi { unicode-bidi: isolate; } /* Language switcher in navbar */ .lang-switch { font-weight: 600; letter-spacing: .04em; padding: .4rem .7rem; border: 1px solid var(--gray-light); border-radius: 6px; color: var(--dark); transition: background .2s, color .2s; } .lang-switch:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .interior-section { padding: 5rem 5rem 5rem 0rem; } .interior-panel img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 2; border-top-right-radius: 2rem; border-bottom-right-radius: 2rem; border-top: 5px solid var(--primary); border-right: 5px solid var(--primary); border-bottom: 5px solid var(--primary); border-left: none; border-bottom-left-radius: 0; border-top-left-radius: 0; } .interior-tab { display: flex; align-items: center; gap: 1.1rem; position: relative; width: 100%; background: none; border: none; border-right: 2px solid rgba(255, 255, 255, .1); padding: 1.2rem 1rem 1.2rem 1.5rem; cursor: pointer; text-align: right; transition: border-color .3s, background .3s; } .interior-section { background: var(--dark); padding: 5rem 5rem 5rem 0; overflow: hidden; } .interior-tab::before { right: -2px; } .iv-slide-prev { right: 10%; } .iv-slide-next { right: calc(10% + 60px); }