/* ROOMDRAFT | مُخطَّط: Arabic / RTL layer. Loaded only by /ar/ pages, after styles.css (and home.css). */

html[dir="rtl"] {
  /* Latin and digits keep Young Serif / the Arabic glyphs fall through to Noto Naskh Arabic */
  --serif: "Young Serif", "Noto Naskh Arabic", Georgia, serif;
  --serif-ar: "Noto Naskh Arabic", "Young Serif", Georgia, serif;
  --sans: "IBM Plex Sans Arabic", "Instrument Sans", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  font-synthesis: none;
}
html[dir="rtl"] body { line-height: 1.85; }

/* ---------- Type: no letter-spacing or uppercase on Arabic, taller lines ---------- */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { font-weight: 600; letter-spacing: 0; line-height: 1.45; }
html[dir="rtl"] h1 { line-height: 1.4; }
html[dir="rtl"] .h-hero h1 { line-height: 1.38; font-size: clamp(38px, 4.6vw, 64px); }
html[dir="rtl"] h2 { font-size: clamp(30px, 3.7vw, 46px); }
html[dir="rtl"] .chip,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .tag,
html[dir="rtl"] .badge,
html[dir="rtl"] .num { letter-spacing: 0; text-transform: none; }
html[dir="rtl"] .chip { font-size: 13px; padding: 5px 13px 6px; }
html[dir="rtl"] .eyebrow { font-size: 14.5px; }
html[dir="rtl"] .tag { font-size: 13px; padding: 4px 12px 6px; }
html[dir="rtl"] .h-sub { line-height: 1.85; max-width: 30em; }
html[dir="rtl"] .lede { line-height: 1.85; }
html[dir="rtl"] .steps b,
html[dir="rtl"] .bento-tile b { font-weight: 600; line-height: 1.5; }
html[dir="rtl"] .steps b { font-size: 23px; }
html[dir="rtl"] .h-proof b { font-weight: 400; }
html[dir="rtl"] .h-proof span { line-height: 1.5; }
html[dir="rtl"] .choice b { line-height: 1.5; }
html[dir="rtl"] .choice span:not(.ch-ico) { line-height: 1.6; }
html[dir="rtl"] .result-body h3 { line-height: 1.4; }
html[dir="rtl"] .price-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
html[dir="rtl"] .price-big small { margin: 0; vertical-align: 0; font-size: 16px; }
html[dir="rtl"] .price-big small.pre { order: -1; }
html[dir="rtl"] .final-cities { letter-spacing: 0; font-size: 15px; }
html[dir="rtl"] summary { line-height: 1.6; }
html[dir="rtl"] .legal h2 { line-height: 1.5; font-family: var(--serif-ar); }
html[dir="rtl"] label { font-weight: 600; }
html[dir="rtl"] .who-tags li { line-height: 1.5; }

/* Latin snippets inside Arabic text */
html[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- Brand lockup: ROOMDRAFT | مُخطَّط (swap .brand-lockup for the final logo later) ---------- */
.logo.brand-lockup { display: inline-flex; align-items: center; gap: 11px; letter-spacing: 0; line-height: 1; white-space: nowrap; }
.logo.brand-lockup .logo-en { direction: ltr; unicode-bidi: isolate; letter-spacing: .14em; color: var(--ink); font-family: "Young Serif", Georgia, serif; }
.logo.brand-lockup .logo-en > span { color: var(--accent); }
.logo.brand-lockup .logo-sep { width: 1px; height: 20px; background: currentColor; opacity: .22; color: var(--ink); }
.logo.brand-lockup .logo-ar { font-family: var(--serif-ar); font-weight: 700; font-size: 22px; letter-spacing: 0; color: var(--ink); line-height: 1; padding-bottom: 4px; }

/* ---------- Floating nav (home) ---------- */
html[dir="rtl"] .island { padding: 8px 22px 8px 8px; }
html[dir="rtl"] .island-links { font-size: 15px; }

/* ---------- Buttons: mirrored padding and arrow direction ---------- */
html[dir="rtl"] .pill-btn { padding: 8px 24px 8px 8px; }
html[dir="rtl"] .pill-btn:not(:has(.pill-ico)) { padding: 8px 24px; }
html[dir="rtl"] .pill-btn.small { padding: 5px 16px 5px 5px; }
html[dir="rtl"] .pill-ico svg { transform: scaleX(-1); }
html[dir="rtl"] .pill-btn:hover .pill-ico { transform: translate(-2px,-1px) scale(1.06); }
html[dir="rtl"] .mc-txt { line-height: 1.35; }
html[dir="rtl"] .mc-txt small { margin-top: 1px; }

/* ---------- Before / after slider ---------- */
html[dir="rtl"] .tag.l { left: auto; right: 14px; }
html[dir="rtl"] .tag.r { right: auto; left: 14px; }
html[dir="rtl"] .compare .handle::after { direction: ltr; }

/* ---------- Steps, chooser, results ---------- */
html[dir="rtl"] .steps li::after { right: auto; left: 28px; }
html[dir="rtl"] .choice { text-align: right; }
html[dir="rtl"] .ticks2 li { padding-left: 0; padding-right: 26px; }
html[dir="rtl"] .ticks2 li::before { left: auto; right: 0; top: 8px; }
html[dir="rtl"] .table-wrap th:first-child { text-align: right; }
html[dir="rtl"] .ticks li::before { margin-right: 0; margin-left: 7px; }
html[dir="rtl"] .price li { padding: 7px 24px 7px 0; }
html[dir="rtl"] .price li::before { left: auto; right: 0; }
html[dir="rtl"] .badge { left: auto; right: 26px; }

/* ---------- Modals, forms, floating button ---------- */
html[dir="rtl"] .close { right: auto; left: 14px; }
html[dir="rtl"] .hp { left: auto; right: auto; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"] { direction: ltr; text-align: right; }

html[dir="rtl"] .wa { left: auto; right: 18px; }
html[dir="rtl"] .form-error { line-height: 1.7; }
html[dir="rtl"] .sheet .muted { line-height: 1.75; }

@media (max-width: 900px) {
  html[dir="rtl"] .steps li { padding: 18px 18px 18px 44px; }
  html[dir="rtl"] .steps li::after { right: auto; left: 18px; }
  html[dir="rtl"] .steps b { font-size: 19px; }
  html[dir="rtl"] .h-hero h1 { font-size: clamp(31px, 8.4vw, 42px); line-height: 1.42; }
  html[dir="rtl"] h2 { font-size: clamp(27px, 7.4vw, 36px); }
  html[dir="rtl"] .final-core h2 { font-size: 29px; }
  html[dir="rtl"] .bento-tile b { font-size: 18px; }
  html[dir="rtl"] .room-tabs button { font-size: 13.5px; padding: 9px 2px 11px; line-height: 1.3; }
}
@media (max-width: 600px) {
  html[dir="rtl"] .modal .close { right: auto; left: 6px; }
}
@media (max-width: 480px) {
  .logo.brand-lockup { gap: 8px; }
  .logo.brand-lockup .logo-en { font-size: 15px; letter-spacing: .1em; }
  .logo.brand-lockup .logo-ar { font-size: 19px; }
  .logo.brand-lockup .logo-sep { height: 16px; }
  html[dir="rtl"] .island { gap: 10px; padding: 6px 16px 6px 6px; }
}
@media (max-width: 380px) {
  .logo.brand-lockup .logo-sep, .logo.brand-lockup .logo-en { display: none; }
}