/* ============================================================ VAKAPP — RTL Override for Arabic (AR) Loaded AFTER style.css on all /ar/ pages dir="rtl" is set on — this file handles edge cases ============================================================ */ /* ── Arabic font ────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap'); :root { --font-body: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; --font-display: 'Amiri', 'Cairo', Georgia, serif; } /* ── Base direction ─────────────────────────────────────────── */ html, body { direction: rtl; text-align: right; } /* ── Navbar ─────────────────────────────────────────────────── */ .navbar-inner { flex-direction: row-reverse; } .navbar-nav { flex-direction: row-reverse; } /* Logo: reverse internal order */ .navbar-logo { flex-direction: row-reverse; } /* Dropdown menu: align to left (= start in RTL = right edge in LTR) */ .navbar-dropdown-menu { left: 0; right: auto; } /* Lang dropdown: stays left-anchored visually */ .navbar-dropdown .lang-dropdown-menu { left: 0; right: auto; } /* Underline animation: reverse origin */ .navbar-nav a::after { left: auto; right: 0; transform-origin: right; } .navbar-nav a:hover::after, .navbar-nav a.active::after { transform: scaleX(1); transform-origin: right; } /* Hamburger: move to left side */ .hamburger { order: -1; margin-left: 0; margin-right: auto; } /* Mobile nav open: slide from right */ @media (max-width: 900px) { .navbar-nav { right: auto; left: 0; transform: translateX(-100%); } .navbar-nav.open { transform: translateX(0); } .navbar-inner { flex-direction: row; } .hamburger { order: unset; margin-right: 0; } } /* ── Hero ────────────────────────────────────────────────────── */ .hero-content { text-align: right; } .hero-cta, .hero-actions { justify-content: flex-start; flex-direction: row-reverse; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ── Page hero ───────────────────────────────────────────────── */ .page-hero-content { text-align: right; } /* ── Sections ────────────────────────────────────────────────── */ .section-label { text-align: right; display: block; } .section-title { text-align: right; } .divider { margin-right: 0; margin-left: auto; } /* ── Cards & grids ───────────────────────────────────────────── */ .card { text-align: right; } /* ── Stats / icon rows ───────────────────────────────────────── */ .stats-row, .amenity-row { flex-direction: row-reverse; } /* ── Reveal animation: slide from left in RTL ────────────────── */ /* RTL: reveal uses same JS-gated pattern as LTR */ .js-reveal-ready .reveal { transform: translateY(22px); } .js-reveal-ready .reveal.revealed { transform: translateY(0); } /* ── Footer ──────────────────────────────────────────────────── */ footer { direction: rtl; text-align: right; } .footer-grid { direction: rtl; } .footer-brand { text-align: right; } .footer-brand > div { flex-direction: row-reverse; } /* ── Booking strip ───────────────────────────────────────────── */ .booking-strip { flex-direction: row-reverse; } /* ── Guide fixed button: move to left side ───────────────────── */ .guide-btn-fixed { right: auto; left: 2rem; flex-direction: row-reverse; } /* ── Breadcrumb nav ──────────────────────────────────────────── */ nav[style*="font-size:0.75rem"] { text-align: right; } /* ── Form labels & inputs ────────────────────────────────────── */ label { text-align: right; display: block; } input, textarea { text-align: right; direction: rtl; } /* ── Accordion ───────────────────────────────────────────────── */ .accordion-trigger { text-align: right; flex-direction: row-reverse; } /* ── List items with flex ────────────────────────────────────── */ .footer-col ul { text-align: right; } /* ── Inline flex containers used throughout pages ────────────── */ [style*="display:flex"][style*="gap"] { /* Cannot globally flip — handled per-component */ } /* ── Specific icon+text rows (contact cards, amenity items) ─── */ /* These use inline style flex — we override with a global rule */ a[style*="display:flex"][style*="gap:1rem"][style*="align-items:center"], div[style*="display:flex"][style*="gap:1rem"][style*="align-items:center"], div[style*="display:flex"][style*="gap:0.75rem"][style*="align-items:center"] { flex-direction: row-reverse; } /* ── Grid text alignment ─────────────────────────────────────── */ .grid-2 > *, .grid-3 > *, .grid-4 > * { text-align: right; } /* ── Buttons: keep internal flex direction natural ───────────── */ .btn, .btn-airbnb, .btn-booking { direction: rtl; } /* ── Lightbox ────────────────────────────────────────────────── */ .lightbox-close { left: 1.5rem; right: auto; } /* ── Tarif table ─────────────────────────────────────────────── */ .tarif-table th, .tarif-table td { text-align: right; } /* ── Section label letter-spacing: reduce for Arabic ─────────── */ /* Arabic doesn't use letter-spacing the same way */ .section-label, .navbar-nav a, .footer-col h5 { letter-spacing: 0; } /* ── Navbar logo text ────────────────────────────────────────── */ .navbar-logo-sub { letter-spacing: 0; } /* ── Hero eyebrow / tag ──────────────────────────────────────── */ .hero-tag, .hero-eyebrow { letter-spacing: 0; }