/* ==========================================================================
   ASICO right-to-left layer (Arabic). Loaded after site.css on /ar/ pages only.
   1 type  ·  2 mirrored layout  ·  3 things that stay left-to-right
   Almarai covers Arabic glyphs only (see fonts.css), Latin letters and digits stay in Manrope.
   ========================================================================== */

/* Almarai's Latin subset is loaded on Arabic pages only, so digits, prices and English names there match the Arabic text */
@font-face { font-family: 'Almarai'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/almarai-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Almarai'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/almarai-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Almarai'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/almarai-latin-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- 1. type -------------------------------------------------------------- */
:root {
  --font-display: 'Almarai', 'Soliden', 'Manrope', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-text: 'Almarai', 'Neue Haas Grotesk Text', 'Manrope', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --lh-body: 1.85; --lh-tight: 1.4; --lh-snug: 1.45; --track-mono: 0;
}
/* letter-spacing breaks the joining of Arabic letters */
*, *::before, *::after { letter-spacing: 0 !important; }
h1, h2, h3, h4 { font-weight: 800; }
.lead { line-height: 1.8; }
.label, .mono { font-family: var(--font-text); text-transform: none; font-weight: 700; font-size: var(--fs-small); }
.card-title, .post-card h3, .mega-feature b { line-height: 1.55; }
.btn, .pill, .opt, .act { line-height: 1.2; }

/* ---- 2. mirrored layout ---------------------------------------------------- */
.skip-link { left: auto; right: 1rem; }
.select { padding-right: .95rem; padding-left: 2.4rem; background-position: left .85rem center; }
.check em { margin-left: 0; margin-right: auto; }
.i.flip { transform: scaleX(-1); }
.link-arrow:hover .i.flip, .btn:hover .i.flip:last-child:not(:first-child), .mega-more:hover .i.flip { transform: scaleX(-1) translateX(3px); }
.link-arrow:hover .i:not(.flip), .btn:hover .i:last-child:not(:first-child):not(.flip) { transform: none; }
.btn .i:last-child:not(:first-child) { margin-right: 0; margin-left: -.1rem; }
.crumbs li + li::before { margin-right: 0; margin-left: .55rem; }

.primary { margin-left: 0; margin-right: var(--s-2); }
.nav-link { padding: 0 .8rem 0 .35rem; }
.nav-link::after { left: .35rem; right: .8rem; transform-origin: right; }
.nav-toggle { margin-left: 0; margin-right: -.25rem; }
.header-tools { margin-left: 0; margin-right: auto; }
.dot { right: auto; left: 1px; }
.mega-col { border-right: 0; border-left: 1px solid var(--line); }
.mega-col:first-child { padding-left: var(--s-5); padding-right: 0; }
.mega-feature { padding: var(--s-6) var(--s-5) var(--s-6) 0; }
.mega-aside { padding: var(--s-6) var(--s-6) var(--s-6) 0; }
.mega-aside.dark { padding: var(--s-6); }
.foot-bottom span a + a { margin-left: 0; margin-right: 1.25rem; }

.card-flags { left: auto; right: .6rem; }
.fav { right: auto; left: .55rem; }
.photo-count { right: auto; left: .55rem; }
.search-card { text-align: right; }
.finder { border-radius: var(--r-4) 0 var(--r-4) var(--r-4); }
.hero::after { background: linear-gradient(270deg, rgba(6,22,48,.94) 0%, rgba(6,22,48,.74) 46%, rgba(6,22,48,.32) 100%), linear-gradient(180deg, rgba(6,22,48,.15) 55%, rgba(6,22,48,.7) 100%); }
.hero h1 { line-height: 1.25; }
.dd-panel { left: auto; right: 0; }
@media (max-width: 1060px) { .dd-panel { left: var(--gutter); right: var(--gutter); } }
.related-links em { margin-left: 0; margin-right: .4rem; }
.gallery .all { right: auto; left: 1rem; }
.facts dd { text-align: left; }
.cost-table td:last-child { text-align: left; }
.token-table th, .token-table td { text-align: right; }
.toc ol { border-left: 0; border-right: 2px solid var(--line); }
.toc a { padding: .4rem var(--s-4) .4rem 0; margin-left: 0; margin-right: -2px; border-left: 0; border-right: 2px solid transparent; }
.toc a:hover, .toc a.on { border-left-color: transparent; border-right-color: var(--gold-500); }
.prose li { padding-left: 0; padding-right: 1.4rem; }
.prose li::before { left: auto; right: 0; }
.callout { border-left: 1px solid var(--gold-200); border-right: 5px solid var(--gold-400); }
.drawer { right: auto; left: 0; transform: translateX(-100%); }
.drawer.open { transform: none; }
.modal-card .x { right: auto; left: .75rem; }

/* ---- 3. stays left-to-right ------------------------------------------------ */
/* photo carousels slide in a fixed direction, maps and their pins are not text */
.carousel, .gallery, .lightbox-stage, .lightbox-thumbs { direction: ltr; }
.car-nav .i, .lightbox .nav-btn .i { transform: none; }
.map-box, .leaflet-container, .gm-style { direction: ltr; }
.pop-card { direction: rtl; text-align: right; }
/* phone, e-mail, date and number fields are typed left-to-right but aligned with the page */
.input[type="tel"], .input[type="email"], .input[type="date"], .input[inputmode="numeric"], .input[inputmode="decimal"] { direction: ltr; text-align: right; }
.input[type="tel"]::placeholder, .input[type="email"]::placeholder { text-align: right; }
bdi[dir="ltr"] { unicode-bidi: isolate; }