/* =====================================================================
   wemark dental studio — CLINIC THEME (forest) + flat-minimal.
   Linked AFTER wemark.css (and each file's inline <style>) on every
   PATIENT-FACING mockup, so it wins. Re-colors the whole clinic side
   via CSS vars and removes all shadows + gradients (flat fills only).
   Edit the palette here once to restyle every patient screen at once.
   The staff dashboards keep wemark pulse burgundy (they don't load this).
   ===================================================================== */
:root {
  --cream: #e9ede7; /* light sage — page/panels */
  --panel: #dde4dc; /* flat fills (slots, chips, steps) */
  --linen: #84a98c; /* sage — soft accents/dots */
  --camel: #6f8579; /* muted sage — small labels */
  --cocoa: #44574e;
  --walnut: #2f3e46; /* dark slate — text */
  --ink-soft: #5c6e64; /* secondary text */
  --burgundy: #52796f; /* clinic accent — teal-green */
  --burgundy-soft: #6b9384;
  --line: rgba(47, 62, 70, 0.12);
}

/* ---- flat: no shadows anywhere ---- */
* {
  box-shadow: none !important;
}

/* ---- flatten every gradient background (shared + inline) ---- */
.stage {
  background: #cad2c5 !important;
}
.stage::before {
  display: none !important;
}
.chrome {
  background: #e4e8e2 !important;
}
.hero {
  background: var(--cream) !important;
}
.hero-art {
  background: #84a98c !important;
}
.hero-art::after {
  display: none !important;
}
.w-head {
  background: linear-gradient(157deg, #577872 0%, #4b6862 55%, #3f574e 100%) !important;
}
.page {
  background: var(--cream) !important;
}
.mail-head {
  background: var(--cream) !important;
}
.b.in {
  background: var(--panel) !important;
}
.phone,
.notch {
  background: #2f3e46 !important;
}

/* ---- flat buttons: no outlines around tappables ---- */
.slot,
.navbtn,
.fb-field,
.sms-composer,
.ebtns .sec,
.act-sec,
.addcal span {
  border: none !important;
  background: var(--panel) !important;
}
.svc-chip {
  border: none !important;
}

/* ---- drop tiny decorative rules sitting beside text ---- */
.eyebrow-line::before,
.eyebrow::before {
  display: none !important;
}

/* ---- teal accent is dark, so its filled elements get light text ---- */
.day.sel,
.slot.hot,
.step.done .num,
.step.active .num {
  color: #fff !important;
}
.day.sel .av {
  background: rgba(255, 255, 255, 0.85) !important;
}

/* finishing touches: neutral browser URL pill */
.url { background: #f3f3f1 !important; }

/* ---- the chat widget mirrors the live product: keep its depth (exempt from flat) ---- */
.launcher { box-shadow: 0 18px 38px -16px rgba(20, 40, 38, 0.42) !important; }
.launcher .l-dot { box-shadow: 0 0 0 2px #51726f !important; }
.widget { box-shadow: 0 30px 70px -26px rgba(20, 40, 38, 0.5), 0 6px 18px -8px rgba(20, 40, 38, 0.22) !important; }
.card, .c-compose { box-shadow: 0 1px 2px rgba(20, 40, 38, 0.06) !important; }