/* ============================================================
   Dr. Salma Bashasha — Main Stylesheet
   Type system: Baskervville (EN headings) + Almarai (body + AR)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital,wght@0,400;0,700;1,400&family=Almarai:wght@300;400;700;800&display=swap');

/* ── TYPE SYSTEM TOKENS ─────────────────────────────────────── */
:root {
  /* Families */
  --font-heading: "Almarai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Almarai", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scale */
  --text-hero:  clamp(2.4rem, 5vw, 3.4rem);
  --text-h1:    clamp(1.8rem, 3.2vw, 2.4rem);
  --text-h2:    clamp(1.35rem, 2.4vw, 1.85rem);
  --text-h3:    1.2rem;
  --text-h4:    1.05rem;
  --text-h5:    0.95rem;
  --text-body:  1rem;
  --text-small: 0.875rem;
  --text-xs:    0.78rem;

  /* Weights */
  --w-heading: 700;
  --w-semi:    600;
  --w-regular: 400;

  /* Leading */
  --lh-heading: 1.15;
  --lh-body:    1.65;

  /* Brand */
  --brand:   #8b1e2d;
  --brand-2: #b11f36;
  --brand-3: #4b0f1a;
  --accent:  #ef4444;

  /* UI */
  --ink:     #111827;
  --muted:   #6b7280;
  --line:    #e5e7eb;
  --bg:      #ffffff;
  --surface: #ffffff;
  --radius:  14px;
  --shadow:      0 10px 30px rgba(17, 24, 39, .12);
  --shadow-soft: 0 8px 18px rgba(17, 24, 39, .08);
  --max:     1320px;
  --gutter:  clamp(24px, 4vw, 28px);
  --section-pad: clamp(44px, 6vw, 84px);
  --btn-radius: 10px;
  --btn-glow:   rgba(177, 31, 54, .35);
}

/* ── ALMARAI: Arabic headings — all contexts ────────────────── */
/* Override CSS variable for full Arabic pages */
html[lang="ar"] { --font-heading: "Almarai", sans-serif; }

/* Explicit selectors — catches Arabic headings on EN pages too,
   mixed content, RTL containers, and :lang(ar) on any element    */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] .h1, html[lang="ar"] .h2, html[lang="ar"] .h3,
html[lang="ar"] .h4, html[lang="ar"] .h5,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3,
[dir="rtl"] .h4, [dir="rtl"] .h5,
h1:lang(ar), h2:lang(ar), h3:lang(ar),
h4:lang(ar), h5:lang(ar), h6:lang(ar),
.h1:lang(ar), .h2:lang(ar), .h3:lang(ar),
.h4:lang(ar), .h5:lang(ar) {
  font-family: 'Almarai', sans-serif !important;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ── TYPE SCALE ─────────────────────────────────────────────── */
/* Applied to semantic tags AND utility classes (.h1–.h5) */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
  font-family: var(--font-heading);
  font-weight: var(--w-heading);
  line-height: var(--lh-heading);
  color: var(--ink);
  margin: 0 0 0.6em;
}

h1, .h1 { font-size: var(--text-h1); }
h2, .h2 { font-size: var(--text-h2); }
h3, .h3 { font-size: var(--text-h3); }
h4, .h4 { font-size: var(--text-h4); font-weight: var(--w-semi); }
h5, .h5 { font-size: var(--text-h5); font-weight: var(--w-semi); }

/* Hero — all headings and text must be white */
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5,
.hero .h1, .hero .h2, .hero .h3, .hero .h4, .hero .h5 { color: #fff; }

/* Hero heading size override */
.hero-copy h2,
.hero-copy .h2 { font-size: var(--text-hero); }

/* Section-band — all headings white */
.section-band h1, .section-band h2, .section-band h3,
.section-band h4, .section-band h5,
.section-band .h1, .section-band .h2, .section-band .h3,
.section-band .h4, .section-band .h5 { color: #fff; }

/* Body text helper */
.p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--muted);
  margin: 0;
}

/* Small / label text */
.label,
.kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--w-semi);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

.text-small { font-size: var(--text-small); }
.text-xs    { font-size: var(--text-xs); }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section { padding: var(--section-pad) 0; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.4rem;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  background: var(--brand-2);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--w-semi);
  line-height: 1.4;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover  { transform: translateY(-1px); box-shadow: 0 14px 26px rgba(0,0,0,.16), 0 0 0 3px var(--btn-glow); }
.btn:active { transform: translateY(0); filter: brightness(.97); }
.btn:focus-visible { outline: 3px solid rgba(255,255,255,.85); outline-offset: 3px; }

.btn-outline,
.btn.btn--outline,
.btn.learn-more {
  background: #7b1626;
  color: #fff;
  border-color: #fff;
}
.btn-outline:hover,
.btn.btn--outline:hover,
.btn.learn-more:hover { background: #64111f; }

.btn--ghost {
  background: transparent;
  color: var(--brand-2);
  border-color: rgba(177,31,54,.35);
  box-shadow: none;
}

.btn--light {
  background: #fff;
  color: var(--brand-2);
  border-color: rgba(255,255,255,.55);
}

/* ── ICON ────────────────────────────────────────────────────── */
.icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* ── HEADER ──────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(75,15,26,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--gutter);
  max-width: calc(var(--max) + (var(--gutter) * 2));
  margin-inline: auto;
  gap: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.brand strong { color: #fff; font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--w-semi); letter-spacing: .02em; }
.brand small  { display: block; color: rgba(255,255,255,.72); font-size: var(--text-xs); margin-top: -2px; }

/* Nav links */
.nav { display: flex; align-items: center; gap: 18px; }
.nav a {
  color: rgba(255,255,255,.82);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--w-semi);
  padding: 10px 6px;
  border-radius: 10px;
  transition: background .12s;
}
.nav a:hover { background: rgba(255,255,255,.08); }

.header-right { display: flex; align-items: center; gap: 10px; }
.social       { display: flex; align-items: center; gap: 8px; }
.social a:hover { background: rgba(255,255,255,.16); border-radius: 24px; }

.user-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 800;
}
.menu-btn {
  display: none;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}

/* ── MOBILE DRAWER ───────────────────────────────────────────── */
.drawer { display: none; position: fixed; inset: 0; background: rgba(17,24,39,.55); z-index: 80; }
.drawer[aria-hidden="false"] { display: block; }
.drawer-panel {
  position: absolute; top: 0; right: 0;
  height: 100%; width: min(360px, 92vw);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.drawer-header { display: flex; align-items: center; justify-content: space-between; }
.drawer-title  { font-family: var(--font-body); font-weight: 900; color: var(--brand-3); }
.drawer-nav    { display: flex; flex-direction: column; gap: 6px; }
.drawer-nav a  {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--w-semi);
}
.drawer-nav a:hover { background: #f9fafb; }
.drawer-actions { margin-top: auto; display: grid; gap: 10px; }
.drawer-social  {
  margin-top: auto;
  display: flex; gap: 10px; align-items: center;
  padding-top: 8px;
}
.drawer-social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--brand-3);
  border: 1px solid rgba(75,15,26,.25);
}
.drawer-social .icon { width: 18px; height: 18px; }
/* Close button inside drawer gets a visible light background */
.drawer-header .menu-btn {
  display: inline-grid;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #374151;
}
.drawer-header .menu-btn .icon { filter: invert(0) brightness(0.3); }

/* Services accordion */
.drawer-dd { margin-top: 6px; }
.drawer-dd-row {
  display: flex; align-items: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.drawer-toplink {
  flex: 1;
  padding: 12px;
  font-size: var(--text-small);
  font-weight: var(--w-semi);
  border: none;
  border-radius: 0;
}
.drawer-toplink:hover { background: #f9fafb; }
.drawer-dd-toggle {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: transparent;
  border: none;
  border-left: 1px solid var(--line);
  color: var(--brand-3);
  cursor: pointer;
  transition: background .15s;
}
.drawer-dd-toggle:hover { background: #f9fafb; }
.drawer-dd-toggle svg { transition: transform .25s; }
.drawer-dd.is-open .drawer-dd-toggle svg { transform: rotate(180deg); }
.drawer-sub { display: grid; gap: 6px; padding-left: 10px; margin-top: 6px; }

/* Language switcher pill inside drawer */
.drawer-lang-pill {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(75,15,26,.08);
  border: 1px solid rgba(75,15,26,.18);
  color: var(--brand-3);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 800;
  transition: background .15s;
}

/* ── DROPDOWN ────────────────────────────────────────────────── */
.nav-dd { position: relative; }
.nav-dd .nav-dd-trigger { display: inline-flex; align-items: center; gap: 8px; }
.nav-dd .dd-panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 320px; width: max-content;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: none;
  gap: 4px;
  z-index: 60;
}
.nav-dd:hover .dd-panel { display: grid; }
.dd-panel a {
  padding: 10px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--w-semi);
  color: var(--ink);
  border: 1px solid transparent;
  white-space: nowrap;
}
.dd-panel a:hover { background: #8b1e2d; border-color: var(--line); color: #fff; }

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 75% 0%, rgba(177,31,54,.55), rgba(75,15,26,1) 60%),
    linear-gradient(135deg, rgba(75,15,26,1), rgba(139,30,45,1));
  color: #fff;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: -30%;
  background:
    radial-gradient(circle at 20% 35%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(circle at 65% 15%, rgba(239,68,68,.15), transparent 50%);
  transform: rotate(-9deg);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(18px, 4vw, 34px);
  align-items: end;
  padding: clamp(40px, 7vw, 80px) 0;
  position: relative; z-index: 1;
}
.hero .p { color: #fff; padding-bottom: 20px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.hero-media-bottom { display: flex; align-items: flex-end; justify-content: flex-end; height: 100%; }
.hero-media-bottom img { display: block; width: min(420px, 100%); height: auto; }

/* ── PAGE HERO (inner pages) ─────────────────────────────────── */
.page-hero {
  
  background: linear-gradient(115deg, #4b0f1a 0%, #7a2e33 52%, #b11f36 100%);
  color: #fff;
  padding: clamp(22px, 4vw, 36px) 0;


}
.page-hero-inner { display: flex; flex-direction: column; gap: 10px; }
.page-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 3.3vw, 2.35rem);
  font-weight: var(--w-heading);
  line-height: var(--lh-heading);
  letter-spacing: -.02em;
  color: #fff;
}
/* Almarai on page hero title when Arabic/RTL */
html[lang="ar"] .page-title,
html[dir="rtl"] .page-title {
  font-family: 'Almarai', sans-serif !important;
  letter-spacing: 0;
}
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--text-small); opacity: .92; }
.bc-link, .bc-current { color: rgba(255,255,255,.92); font-family: var(--font-body); }
.bc-link:hover { text-decoration: underline; color: #fff; }
.bc-sep { opacity: .7; }
.page-intro { margin: 0 0 18px; color: rgba(31,41,55,.85); font-family: var(--font-body); }

/* ── SECTIONS ────────────────────────────────────────────────── */
.section-band {
  background:
    radial-gradient(1200px 400px at 50% 0%, rgba(177,31,54,.25), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(75,15,26,1), rgba(46,10,18,1));
  color: #fff;
}
.section-band h1, .section-band h2, .section-band h3,
.section-band .h1, .section-band .h2, .section-band .h3,
.section-band .p { color: #fff; }
.section-band .btn { border-color: rgba(255,255,255,.35); }

.bg-red-light { background: #faeded; }
.band {
  background: linear-gradient(180deg, var(--brand-3), #2a0710);
  color: #fff;
}
.band .container { text-align: center; }
.band p { color: rgba(255,255,255,.82); max-width: 85ch; margin: 0 auto; }
.band .btn { margin-top: 18px; }

/* ── CARDS / PANELS ──────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: none;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}
.card-pad { padding: 18px; }
.panel {
  background: rgba(255,255,255,.92);
  border: none;
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  padding: 18px;
}
.panel img { border-radius: 14px; text-align: center; }
.panel--flat { background: transparent; box-shadow: none; padding: 0; }
.panel-no-shadow { border: none; border-radius: 16px; padding: 18px; }
.panel-shadow {
  background: #60121f;
  border: none;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.6);
  padding: 4px;
}

/* ── GRIDS / SPLITS ──────────────────────────────────────────── */
.home-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}
.split--flip { grid-template-areas: "media copy"; }
.split--flip .split-media { grid-area: media; }
.split--flip .split-copy  { grid-area: copy; }

/* ── VIDEO THUMB ─────────────────────────────────────────────── */
.video-thumb { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,0,0,.06); }
.video-thumb img { display: block; width: 100%; height: auto; }
.video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-play button {
  width: 56px; height: 56px; border-radius: 999px;
  border: 0; background: rgba(255,255,255,.85);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.video-play button:focus-visible { outline: 3px solid rgba(177,31,54,.65); outline-offset: 4px; }
.video-play svg { width: 18px; height: 18px; transform: translateX(1px); }

/* ── CONTACT ─────────────────────────────────────────────────── */
/* ── CONTACT INFO GRID (contact page) ────────────────────────── */
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(16px, 3vw, 32px);
  margin-top: 28px;
  align-items: start;
}
.contact-info-card {
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 16px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.contact-info-icon {
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.contact-info-title {
  font-size: var(--text-h4);
  font-weight: var(--w-heading);
  margin: 0 0 20px;
  color: var(--brand);
}
.contact-info-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f3f4f6;
}
.contact-info-row:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.contact-info-label {
  font-size: var(--text-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted, #6b7280);
}
.contact-info-value {
  font-size: var(--text-body);
  font-weight: var(--w-semi);
  color: var(--brand-2);
  text-decoration: none;
  transition: color .12s;
}
.contact-info-value:hover { color: var(--brand); text-decoration: underline; }
.contact-info-value.plain { color: var(--ink); font-weight: var(--w-regular); }
.contact-hint {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
  font-size: var(--text-small);
  color: var(--text-muted, #6b7280);
}

/* Book a consultation card */
.contact-book-card {
  background: linear-gradient(135deg, #4b0f1a 0%, #7a2e33 60%, #b11f36 100%);
  border-radius: 16px;
  padding: clamp(24px, 3.5vw, 40px);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 20px rgba(75,15,26,.25);
  min-height: 100%;
}
.contact-book-icon { font-size: 2rem; opacity: .9; }
.contact-book-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--w-heading);
  margin: 0;
  color: #fff;
  line-height: 1.3;
}
html[lang="ar"] .contact-book-title,
html[dir="rtl"] .contact-book-title {
  font-family: 'Almarai', sans-serif !important;
}
.contact-book-body {
  font-size: var(--text-body);
  color: rgba(255,255,255,.88);
  margin: 0;
  line-height: var(--lh-body);
  flex: 1;
}
.contact-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--brand) !important;
  font-weight: 700;
  padding: 12px 24px !important;
  border-radius: 8px;
  font-size: var(--text-body);
  text-decoration: none;
  transition: background .14s, transform .12s;
  align-self: flex-start;
  margin-top: 6px;
}
.contact-book-btn:hover {
  background: rgba(255,255,255,.92);
  transform: translateY(-1px);
}
html[dir="rtl"] .contact-book-btn { align-self: flex-end; }

@media (max-width: 768px) {
  .contact-info-grid { grid-template-columns: 1fr; }
}

.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(18px, 4vw, 34px); align-items: start; }
/* ── CONTACT LINKS — brand color on white backgrounds ─────── */
a[href^="tel:"],
a[href^="mailto:"] {
  color: var(--brand-2);
  font-weight: var(--w-semi);
  text-decoration: none;
  transition: color .12s, text-decoration .12s;
}
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover {
  color: var(--brand);
  text-decoration: underline;
}
/* Keep white on dark/hero backgrounds */
.page-hero a[href^="tel:"],
.page-hero a[href^="mailto:"],
.section-band a[href^="tel:"],
.section-band a[href^="mailto:"],
.contact-copy a[href^="tel:"],
/* .contact-copy a[href^="mailto:"], */
footer a[href^="tel:"],
footer a[href^="mailto:"] {
  color: #fff;
  font-weight: var(--w-semi);
}
.contact-link { color: var(--brand-2); font-weight: var(--w-semi); }
.contact-link:hover { text-decoration: underline; }
.contact-form { padding: 16px; }
.contact-fields { display: grid; gap: 12px; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(75,15,26,.45);
  background: #fafafa;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--text-body);
}
.contact-form textarea { resize: vertical; min-height: 160px; border-color: transparent; background: #eef1f4; }
.contact-form select   { direction: ltr; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { box-shadow: 0 0 0 3px rgba(177,31,54,.18); }
.contact-form input:hover,
.contact-form textarea:hover { border-color: rgba(75,15,26,.55); }
.contact-submit { width: 100%; margin-top: 14px; border-radius: 0; background: var(--brand-2); }

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer { padding: 0; background: var(--brand-3); color: rgba(255,255,255,.88); }
.footer-top { padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.10); }
.footer-top-grid { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.footer-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-logo { width: 200px; max-width: 70vw; height: auto; border-radius: 10px; }
.footer-social { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.footer-social a:hover { background: rgba(255,255,255,.10); }
.footer-social .icon { width: 32px; height: 32px; }
.footer-bottom { padding: 14px 0; }
.footer-bottom-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: center; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a {
  color: rgba(255,255,255,.86);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--w-semi);
}
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-support { text-align: center; font-size: var(--text-small); color: rgba(255,255,255,.82); }
.footer-support a { color: #fff; font-weight: var(--w-semi); }
.footer-copy { text-align: right; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; font-size: var(--text-small); }
.footer-muted { color: rgba(255,255,255,.72); }

/* ── FLOATING WHATSAPP ───────────────────────────────────────── */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 90; text-decoration: none; }
.wa-circle {
  width: 62px; height: 62px; border-radius: 999px;
  background: #25D366;
  box-shadow: 0 14px 28px rgba(0,0,0,.20);
  display: grid; place-items: center;
  border: 3px solid rgba(255,255,255,.20);
}
.wa-icon { width: 32px; height: 32px; }
.wa-float:hover .wa-circle { filter: brightness(.98); transform: translateY(-1px); transition: transform .15s ease, filter .15s ease; }

/* ── UTILITY ─────────────────────────────────────────────────── */
.sr-only { position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.lead    { font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--w-semi); color: inherit; max-width: 100%; }
.tag     { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .65rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: var(--text-xs); color: rgba(255,255,255,.85); }
.pill    { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 10px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; font-size: var(--text-xs); font-weight: var(--w-semi); letter-spacing: .10em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.pill:empty { display: none; }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 0 2px rgba(177,31,54,.3); flex-shrink: 0; }

.icon-wrap  { display: flex; justify-content: center; align-items: center; margin-bottom: 16px; }
.icon-title { color: var(--brand); }
.panel-icon { width: 48px; height: 48px; }

.bg-red-light { background: #faeded; }
.legal-page   { max-width: 980px; }
.legal-page h2 { margin-top: 18px; }
.page-kicker  { font-size: var(--text-body); opacity: .95; }
.page-intro   { margin: 0 0 18px; color: rgba(31,41,55,.85); }

.cms-richtext ul, .cms-richtext ol   { padding-left: 1.25rem; }
[dir="rtl"] .cms-richtext ul,
[dir="rtl"] .cms-richtext ol         { padding-left: 0; padding-right: 1.25rem; }
.cms-richtext p:last-child,
.cms-richtext ul:last-child,
.cms-richtext ol:last-child,
.cms-richtext blockquote:last-child   { margin-bottom: 0; }

/* LTR fix for phone numbers in RTL */
.ltr-num, a[href^="tel:"], a[href*="wa.me"] {
  direction: ltr!important; unicode-bidi: isolate!important;
  display: inline-block; text-align: left!important;
}

/* Bootstrap overrides */
.btn-primary          { background: #7a2e33; border-color: #7a2e33; }
.btn-primary:hover,
.btn-primary:focus    { background: #622428; border-color: #622428; }
.btn-outline-secondary:hover,
.btn-outline-secondary:focus { color: #fff; }

/* ── JOURNEY STEPS ───────────────────────────────────────────── */
.journey-wrap { margin-top: 22px; }
.journey-steps { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; align-items: flex-start; margin-top: 18px; }
.journey-step  { width: 92px; text-align: center; }
.journey-dot   {
  width: 44px; height: 44px; border-radius: 999px;
  margin: 0 auto 10px;
  border: 2px solid rgba(177,31,54,.35);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08);
  color: var(--brand-2);
  font-family: var(--font-body);
  font-weight: 800;
}
.journey-label { font-size: var(--text-xs); line-height: 1.2; opacity: .85; }

/* ── ACCESSIBILITY ────────────────────────────────────────────── */
a:focus-visible, summary:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(177,31,54,.65); outline-offset: 3px;
}
.nav a:focus-visible, .footer-nav a:focus-visible, .footer-links a:focus-visible {
  border-radius: 10px; background: rgba(255,255,255,.10);
}
.drawer-nav a:focus-visible { background: #f4f4f5; border-color: rgba(177,31,54,.25); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 980px) {
  .nav      { display: none; }
  .menu-btn { display: inline-grid; place-items: center; }
  .hero-grid { grid-template-columns: 1fr; align-items: start; padding: 30px; }
  .home-two  { grid-template-columns: 1fr; }
  .split     { grid-template-columns: 1fr; }
  .split--flip .split-copy  { order: 1; }
  .split--flip .split-media { order: 2; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-bottom-grid { grid-template-columns: 1fr; }
  .footer-support { text-align: left; }
  .footer-copy { justify-content: flex-start; text-align: left; }
}
@media (max-width: 520px) {
  .social  { display: none; }
  .brand   { min-width: auto; }
  .btn     { width: 100%; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .journey-step { width: 100px; }
}

/* ============================================================
   ALMARAI ENFORCEMENT — Arabic font final override
   Must be at end of file to win cascade over all other rules.
   Covers: headings, body, all elements on AR pages & RTL blocks.
   ============================================================ */
html[lang="ar"],
html[lang="ar"] *,
html[dir="rtl"],
html[dir="rtl"] * {
  font-family: 'Almarai', sans-serif !important;
}