/* ===========================================================================
   عيادة أسنان — "clinical clarity"
   ---------------------------------------------------------------------------
   What the best dental sites actually do, and what this file implements:
   flat white cards with a hairline border instead of shadowed floating ones,
   generous white space, an icon paired with a short line of text, a booking
   button repeated down the page, and a hero that reads as information rather
   than decoration. Nothing here is a colour swap — the shapes change.
   =========================================================================== */

body.demo-dental {
  --border: #dbe7e9;
  --surface: #ffffff;
  --shadow: none;
}

/* Hero — a light, split panel with a rule. Not the salon's gradient blob. */
body.demo-dental .hero {
  background: linear-gradient(180deg, #f2f8f9, #ffffff);
  color: var(--deep);
  border: 1px solid var(--border);
  border-top: 4px solid var(--teal);
  border-radius: 12px;
  box-shadow: none;
  padding: 52px 44px;
  align-items: flex-start;
}
body.demo-dental .hero .kicker {
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
body.demo-dental .hero h1 {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: var(--deep);
}
body.demo-dental .hero .gem { opacity: .18; font-size: 120px; filter: none; }

/* Section heads — a small rule above a plain heading. */
body.demo-dental .section-head { display: block; margin-bottom: 22px; }
body.demo-dental .section-head h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  padding-top: 12px;
  border-top: 3px solid var(--teal);
  display: inline-block;
}

/* Cards — flat, bordered, no lift. Precision, not showmanship. */
body.demo-dental .card {
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: none;
}
body.demo-dental .card:hover {
  transform: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal) inset;
}

/* Category tiles — squares, not circles. Reads as a chart, not jewellery. */
body.demo-dental .cat-card { padding: 24px 14px; }
body.demo-dental .cat-card .ic {
  width: 56px; height: 56px;
  border-radius: 10px;
  background: #eaf4f5;
  color: var(--teal);
  font-size: 26px;
}
body.demo-dental .cat-card:hover { transform: none; }
body.demo-dental .grid.cats { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }

/* Buttons — squared and solid. High contrast, easy to spot, never red. */
body.demo-dental .btn {
  border-radius: 6px !important;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 13px 26px;
}
body.demo-dental .btn-gold { background: var(--teal); color: #fff; }
body.demo-dental .btn-outline {
  background: transparent;
  border: 1.5px solid var(--teal);
  color: var(--teal);
}

/* More air between sections than the salon look wants. */
body.demo-dental section { margin: 56px 0; }
body.demo-dental .container { max-width: 1120px; }

/* The kids and call-to-action panels shared one gradient with every other
   sector. A clinic states its offer on a calm tinted panel, not a coloured
   slab, and keeps the text dark so it reads like information. */
body.demo-dental .kids {
  background: #EAF4F5 !important;
  color: var(--deep);
  border: 1px solid var(--border);
  border-inline-start: 5px solid var(--teal);
  border-radius: 10px;
  padding: 26px 28px;
}
body.demo-dental .kids h3 { color: var(--deep); font-weight: 700; }
body.demo-dental .kids .tag {
  background: var(--teal); color: #fff;
  border-radius: 4px; padding: 3px 10px; font-size: 12px; letter-spacing: .5px;
}
body.demo-dental .kids .emoji { font-size: 46px; }