/* ===== everdental.clinic/sa — Riyadh branch =====
   Layers on top of /styles.css: it keeps the botanical bone × evergreen system unchanged and only
   adds what an Arabic, right-to-left page needs. Nothing here is loaded by the English site, so the
   Singapore page cannot regress from a change in this file. */

:root{
  /* Arabic faces. Naskh carries the calm, bookish feel Fraunces gives the Latin page; Plex Sans
     Arabic is the text companion. Both fall back to the Latin pair, which is what English mode uses. */
  --display-ar:'Noto Naskh Arabic','Fraunces',Georgia,serif;
  --sans-ar:'IBM Plex Sans Arabic','Instrument Sans',system-ui,sans-serif;
}

/* ---------- Arabic typography ---------- */
html[lang="ar"] body{font-family:var(--sans-ar);font-size:16.5px;line-height:1.75}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-family:var(--display-ar);line-height:1.28}
html[lang="ar"] .logo-text strong,html[lang="ar"] .footer-logo strong,
html[lang="ar"] .stat strong,html[lang="ar"] .urgent-hotline .phone,
html[lang="ar"] .form-head strong,html[lang="ar"] .hours-head strong,
html[lang="ar"] .contact-card-title,html[lang="ar"] .faq-item summary,
html[lang="ar"] .quote-card blockquote,html[lang="ar"] .step-n{font-family:var(--display-ar)}
/* styles.css uses <em> for the accented word in a heading. Arabic script has no italic form, so
   the browser synthesises an oblique that distorts Naskh — keep the colour, drop the slant. */
html[lang="ar"] em{font-style:normal}
html[lang="ar"] .quote-card blockquote{font-style:normal}
html[lang="ar"] .btn,html[lang="ar"] .field input,html[lang="ar"] .field select,
html[lang="ar"] .field textarea,html[lang="ar"] .seg,html[lang="ar"] .voice-cta,
html[lang="ar"] .faq-chat{font-family:var(--sans-ar)}

/* Latin display letter-spacing is negative and the eyebrows are wide-tracked — both are wrong for a
   joined script, and tracking in particular can visibly break the cursive connections. */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,
html[lang="ar"] .eyebrow,html[lang="ar"] .logo-text small,html[lang="ar"] .footer-col-title,
html[lang="ar"] .urgent-hotline .label,html[lang="ar"] .contact-item small,
html[lang="ar"] .wa-preview-label,html[lang="ar"] .voice-cta-live{letter-spacing:normal}
/* text-transform is a no-op on Arabic but still applies to the Latin words mixed into these labels. */
html[lang="ar"] .eyebrow,html[lang="ar"] .logo-text small,html[lang="ar"] .footer-col-title,
html[lang="ar"] .urgent-hotline .label,html[lang="ar"] .contact-item small,
html[lang="ar"] .wa-preview-label,html[lang="ar"] .voice-cta-live{text-transform:none}
/* Arabic sits lower and taller in the em box; the Latin sizes read oversized unless nudged down. */
html[lang="ar"] .hero h1{font-size:64px;line-height:1.18}
html[lang="ar"] .section-head h2{font-size:44px}
html[lang="ar"] .urgent-left h2,html[lang="ar"] .footer-cta h2,
html[lang="ar"] .booking-left h2,html[lang="ar"] .experience-copy h2,
html[lang="ar"] .faq-left h2{font-size:42px}
html[lang="ar"] .faq-item summary{font-size:19.5px}
/* Phone numbers, prices and times stay left-to-right inside Arabic sentences. */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---------- right-to-left: the physical offsets styles.css sets ---------- */
/* Everything laid out with flex/grid mirrors itself; these are the rules that name a side. */
[dir="rtl"] .skip-link{left:auto;right:-999px;border-radius:0 0 0 8px}
[dir="rtl"] .skip-link:focus{right:0}
[dir="rtl"] .float-card-tl{left:auto;right:28px}
[dir="rtl"] .float-card-br{right:auto;left:28px}
[dir="rtl"] .avatars i:nth-child(2),[dir="rtl"] .avatars i:nth-child(3){margin-left:0;margin-right:-12px}
[dir="rtl"] .stat+.stat{border-left:none;border-right:1px solid var(--line)}
[dir="rtl"] .stat:first-child{border-right:none}
[dir="rtl"] .gallery-item figcaption{left:auto;right:20px}
[dir="rtl"] .urgent-glow{left:auto;right:38%}
[dir="rtl"] .voice-cta,[dir="rtl"] .faq-chat{text-align:right}
[dir="rtl"] .voice-cta{padding:14px 14px 14px 18px}
[dir="rtl"] .voice-cta-live{margin-left:0;margin-right:auto}
[dir="rtl"] .wa-preview-body{border-top-left-radius:10px;border-top-right-radius:2px}
[dir="rtl"] .mobile-menu{inset:0 auto 0 0;box-shadow:12px 0 40px rgba(30,58,48,.18)}
[dir="rtl"] .service-foot .arrow,[dir="rtl"] .btn .ico.arrow{transform:scaleX(-1)}
/* The Atmatic chat + voice launchers are fixed bottom-RIGHT whatever the page direction, so the
   mobile bar keeps its pocket on the right in both modes — deliberately not mirrored. */

/* ---------- language switch ---------- */
.lang-toggle{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1.5px solid var(--primary);
  border-radius:var(--r-pill);background:transparent;color:var(--primary);font-family:var(--sans);
  font-size:13px;font-weight:600;cursor:pointer;transition:background .2s;white-space:nowrap}
.lang-toggle:hover{background:rgba(30,58,48,.06)}
.lang-toggle .ico{width:15px;height:15px}
.topbar .lang-toggle{border-color:rgba(220,230,216,.4);color:#EAF0E4;padding:4px 12px;font-size:12px}
.topbar .lang-toggle:hover{background:rgba(220,230,216,.12)}
.mobile-menu .lang-toggle{width:100%;justify-content:center;padding:13px}
/* Until sa.js runs, show the Arabic copy the markup already carries — never a flash of both. */
[data-en]{}

/* ---------- region banner ---------- */
.region-note{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:13px 20px;background:var(--sage);color:var(--primary);font-size:14px;text-align:center}
.region-note a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.region-note .ico{width:17px;height:17px}

/* ---------- receptionist card (the page's own AI entry point) ---------- */
.noura{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:34px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,#24463A 0%,#1E3A30 70%);color:#DCE6D8;align-items:center}
.noura-copy{display:flex;flex-direction:column;gap:14px}
.noura h2{color:#FFFDF8;font-size:36px;line-height:1.2}
.noura p{font-size:16px;line-height:1.7;color:#C4D2BE}
.noura-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.noura-langs{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 0;padding:0;list-style:none}
.noura-langs li{padding:7px 14px;border-radius:var(--r-pill);border:1px solid rgba(220,230,216,.28);font-size:13.5px}
.noura-card{background:rgba(255,253,248,.07);border:1px solid rgba(220,230,216,.18);border-radius:var(--r-md);padding:22px}
.noura-line{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(220,230,216,.14);font-size:14.5px;line-height:1.6}
.noura-line:last-child{border-bottom:none}
.noura-line b{color:#FFFDF8;font-weight:600;flex:0 0 auto}
@media (max-width:1120px){.noura{grid-template-columns:1fr;gap:26px}}
@media (max-width:860px){.noura{padding:26px 22px}.noura h2{font-size:30px}}