/* کلینیک اعتمادمحور — IBM Plex Sans Arabic, clinical blue/teal */
:root {
  --bg: #f0f4f8;
  --ink: #0f2744;
  --teal: #0d9488;
  --blue: #1e40af;
  --card: #ffffff;
  --muted: #64748b;
  --line: #dbe3ee;
}
body.clinic {
  font-family: "IBM Plex Sans Arabic", "Tahoma", sans-serif;
  background: var(--bg);
  color: var(--ink);
}
.cl-header {
  background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.cl-header .inner {
  width: min(1080px, 92%); margin: 0 auto; padding: .9rem 0;
  display: flex; justify-content: space-between; align-items: center;
}
.cl-header .brand { font-weight: 700; font-size: 1.15rem; color: var(--blue); }
.cl-header .brand small { display: block; font-weight: 400; font-size: .7rem; color: var(--muted); }
.cl-header nav a { margin-right: 1rem; font-size: .88rem; font-weight: 500; }
.cl-header nav a:hover { color: var(--teal); }
/* HERO: trust badges + credentials strip — NOT image-first */
.cl-trust-hero {
  width: min(1080px, 92%); margin: 2rem auto 0;
  background: linear-gradient(135deg, #0f2744 0%, #1e3a5f 100%);
  color: #fff; border-radius: 20px; padding: 2.5rem 2rem;
}
.cl-trust-hero .badge-row {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem;
}
.cl-trust-hero .badge {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: .3rem .75rem; font-size: .75rem; font-weight: 600;
}
.cl-trust-hero h1 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 700; margin-bottom: .75rem; max-width: 18em; }
.cl-trust-hero p { opacity: .85; max-width: 36em; margin-bottom: 1.5rem; }
.cl-trust-hero .stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.25rem;
}
@media (max-width: 700px) { .cl-trust-hero .stats { grid-template-columns: 1fr 1fr; } }
.cl-trust-hero .stats strong { display: block; font-size: 1.5rem; color: #5eead4; }
.cl-trust-hero .stats span { font-size: .8rem; opacity: .75; }
/* Section order: Services → Doctors team → Appointment CTA */
.cl-section { width: min(1080px, 92%); margin: 0 auto; padding: 3rem 0 1rem; }
.cl-section h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: .35rem; }
.cl-section .lead { color: var(--muted); margin-bottom: 1.5rem; font-size: .95rem; }
.cl-services {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
@media (max-width: 640px) { .cl-services { grid-template-columns: 1fr; } }
.cl-svc {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.25rem 1.35rem; display: flex; gap: 1rem; align-items: flex-start;
}
.cl-svc .num {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  background: #ccfbf1; color: var(--teal); font-weight: 700;
  display: grid; place-items: center; font-size: .9rem;
}
.cl-svc h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.cl-svc p { color: var(--muted); font-size: .88rem; }
.cl-doctors {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
@media (max-width: 800px) { .cl-doctors { grid-template-columns: 1fr; } }
.cl-doc {
  background: var(--card); border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); text-align: center;
}
.cl-doc img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cl-doc .meta { padding: 1rem 1rem 1.25rem; }
.cl-doc h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.cl-doc .role { color: var(--teal); font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.cl-doc p { color: var(--muted); font-size: .82rem; }
.cl-cta {
  width: min(1080px, 92%); margin: 2.5rem auto 3.5rem;
  background: var(--card); border: 2px solid var(--teal); border-radius: 18px;
  padding: 2rem; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.25rem;
}
.cl-cta h2 { font-size: 1.35rem; margin-bottom: .35rem; }
.cl-cta p { color: var(--muted); font-size: .9rem; }
.cl-cta a {
  background: var(--teal); color: #fff; padding: .85rem 1.5rem;
  border-radius: 999px; font-weight: 700; white-space: nowrap;
}
.cl-cta a:hover { filter: brightness(1.08); }
.cl-footer {
  text-align: center; padding: 1.5rem; font-size: .85rem; color: var(--muted);
  border-top: 1px solid var(--line); background: var(--card);
}