/* DocMedicano template-layout: CSS-only adaptation of ProHealth-style layout patterns (rounded cards, icon discs,
   numbered steps, banded sections, pill CTAs, accordion) using DocMedicano tokens only. Scoped to main[data-dm-tpl].
   Excludes section[data-dm-hero] on the homepage so the hero image and its mobile crop are untouched. No images, no libraries. */

main[data-dm-tpl] {
  --tp-navy: #0f2c69;
  --tp-ink: #1e293b;
  --tp-teal: #00897b;
  --tp-teal-dark: #00685f;
  --tp-cyan: #00b4d8;
  --tp-mint: #f3f8fc;
  --tp-mint-2: #f7fafd;
  --tp-line: #e1ecf7;
  --tp-radius: 25px;
  --tp-shadow: 0 1px 2px rgba(15, 44, 105, .04), 0 18px 44px rgba(15, 44, 105, .08);
  --tp-shadow-hover: 0 2px 4px rgba(15, 44, 105, .05), 0 26px 56px rgba(0, 137, 123, .16);
  --tp-grad: linear-gradient(135deg, #00685f 0%, #00897b 55%, #00b4d8 100%);
}

/* ---------- Section rhythm and backgrounds ---------- */
main[data-dm-tpl] section:not([data-dm-hero]) { position: relative; border-top: 0 !important; }
main[data-dm-tpl][data-dm-design="index"] section:not([data-dm-hero]):not(.hp-cta) {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
main[data-dm-tpl][data-dm-design="index"] #specialties,
main[data-dm-tpl][data-dm-design="index"] #how-it-works,
main[data-dm-tpl][data-dm-design="index"] #plans-pricing { background: #fff; }
main[data-dm-tpl][data-dm-design="index"] #find-doctors,
main[data-dm-tpl][data-dm-design="index"] #services-section,
main[data-dm-tpl][data-dm-design="index"] #faq-section {
  background:
    radial-gradient(520px 320px at 100% 0%, rgba(0, 180, 216, .10), transparent 70%),
    radial-gradient(480px 320px at 0% 100%, rgba(0, 137, 123, .09), transparent 70%),
    var(--tp-mint-2);
}
main[data-dm-tpl][data-dm-design="index"] .hp-about {
  background: linear-gradient(180deg, #fff 0%, var(--tp-mint-2) 100%);
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

/* ---------- Section titles: pill eyebrow + large heading + accent bar ---------- */
main[data-dm-tpl] section:not([data-dm-hero]) span[class*="uppercase"][class*="tracking"]:not([class*="on-primary"]):not([class*="text-white"]),
main[data-dm-tpl] .hp-eyebrow {
  display: inline-block;
  padding: .4rem .95rem;
  border-radius: 999px;
  background: #fff;
  color: var(--tp-teal) !important;
  border: 1px solid var(--tp-line);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  box-shadow: 0 4px 14px rgba(0, 137, 123, .08);
}
main[data-dm-tpl] section:not([data-dm-hero]):not(.hp-cta) h2:not([class*="on-primary"]):not([class*="text-white"]) {
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.12;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  margin-top: .85rem;
  color: var(--tp-navy);
}
main[data-dm-tpl] section:not([data-dm-hero]):not(.hp-cta) h2:not([class*="on-primary"]):not([class*="text-white"]) + p,
main[data-dm-tpl][data-dm-design="index"] section:not([data-dm-hero]) .text-center > p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #4a5b58;
}
main[data-dm-tpl][data-dm-design="index"] section:not([data-dm-hero]) .text-center > h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 1rem auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--tp-teal), var(--tp-cyan));
}

/* ---------- Cards ---------- */
main[data-dm-tpl][data-dm-design="index"] #specialties a[href],
main[data-dm-tpl] section:not([data-dm-hero]) [data-dm-card],
main[data-dm-tpl][data-dm-design="index"] #how-it-works [data-dm-grid] > div,
main[data-dm-tpl][data-dm-design="index"] #plans-pricing [data-dm-grid] > div {
  border-radius: var(--tp-radius);
  border: 1px solid var(--tp-line);
  background: #fff;
  box-shadow: var(--tp-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (hover: hover) {
  main[data-dm-tpl][data-dm-design="index"] #specialties a[href]:hover,
  main[data-dm-tpl] section:not([data-dm-hero]) [data-dm-card]:hover,
  main[data-dm-tpl][data-dm-design="index"] #how-it-works [data-dm-grid] > div:hover,
  main[data-dm-tpl][data-dm-design="index"] #plans-pricing [data-dm-grid] > div:hover {
    transform: translateY(-6px);
    box-shadow: var(--tp-shadow-hover);
    border-color: #9fd3c9;
  }
}
main[data-dm-tpl][data-dm-design="index"] #specialties a[href] { padding: 1.75rem; }
main[data-dm-tpl][data-dm-design="index"] #specialties a[href] p,
main[data-dm-tpl][data-dm-design="index"] #services-section [data-dm-card] p,
main[data-dm-tpl][data-dm-design="index"] #how-it-works [data-dm-grid] > div p { font-size: .9rem; line-height: 1.65; color: #52615e; }
main[data-dm-tpl][data-dm-design="index"] #specialties a[href] h3,
main[data-dm-tpl][data-dm-design="index"] #services-section [data-dm-card] h3,
main[data-dm-tpl][data-dm-design="index"] #how-it-works h3 { font-size: 1.15rem; font-weight: 800; color: var(--tp-navy); letter-spacing: -.01em; }

/* ---------- Icon discs (ProHealth iconbox) ---------- */
main[data-dm-tpl] section:not([data-dm-hero]) div[class*="w-12"][class*="h-12"]:has(> svg) {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--tp-grad) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0, 137, 123, .28), 0 0 0 6px rgba(0, 137, 123, .08);
}
main[data-dm-tpl] section:not([data-dm-hero]) div[class*="w-12"][class*="h-12"]:has(> svg) svg { font-size: 1.6rem; }

/* Preserve specialty-specific icon colors instead of applying the shared teal gradient. */
main[data-dm-tpl][data-dm-design="index"] #specialties [data-specialty-icon] {
  --specialty-icon-bg: #e6f7f5;
  --specialty-icon-color: #00685f;
  --specialty-icon-border: #b8e4de;
  --specialty-icon-shadow: rgb(0 104 95 / 16%);
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  place-items: center;
  border: 1px solid var(--specialty-icon-border);
  border-radius: 17px;
  background: linear-gradient(145deg, var(--specialty-icon-bg), #fff 135%) !important;
  color: var(--specialty-icon-color) !important;
  box-shadow: 0 5px 14px var(--specialty-icon-shadow), inset 0 1px 0 #fff;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
main[data-dm-tpl][data-dm-design="index"] #specialties [data-specialty-icon="internal"] {
  --specialty-icon-bg: #eaf6ff;
  --specialty-icon-color: #1769aa;
  --specialty-icon-border: #c5e3f7;
  --specialty-icon-shadow: rgb(23 105 170 / 16%);
}
main[data-dm-tpl][data-dm-design="index"] #specialties [data-specialty-icon="cardiology"] {
  --specialty-icon-bg: #fff1f2;
  --specialty-icon-color: #c2415d;
  --specialty-icon-border: #fecdd3;
  --specialty-icon-shadow: rgb(194 65 93 / 16%);
}
main[data-dm-tpl][data-dm-design="index"] #specialties [data-specialty-icon="orthopaedics"] {
  --specialty-icon-bg: #fff7e6;
  --specialty-icon-color: #a16207;
  --specialty-icon-border: #f3d9a1;
  --specialty-icon-shadow: rgb(161 98 7 / 16%);
}
main[data-dm-tpl][data-dm-design="index"] #specialties [data-specialty-icon="dermatology"] {
  --specialty-icon-bg: #f5efff;
  --specialty-icon-color: #7e22ce;
  --specialty-icon-border: #e3d2fb;
  --specialty-icon-shadow: rgb(126 34 206 / 16%);
}
main[data-dm-tpl][data-dm-design="index"] #specialties [data-specialty-icon="paediatrics"] {
  --specialty-icon-bg: #eff6ff;
  --specialty-icon-color: #2563eb;
  --specialty-icon-border: #c7dafa;
  --specialty-icon-shadow: rgb(37 99 235 / 16%);
}
main[data-dm-tpl][data-dm-design="index"] #specialties [data-specialty-icon="psychiatry"] {
  --specialty-icon-bg: #ecfdf5;
  --specialty-icon-color: #047857;
  --specialty-icon-border: #b7ead2;
  --specialty-icon-shadow: rgb(4 120 87 / 16%);
}
main[data-dm-tpl][data-dm-design="index"] #specialties [data-specialty-icon] > svg {
  color: currentColor;
  font-size: 1.5rem;
  transition: transform .2s ease;
}
@media (hover: hover) {
  main[data-dm-tpl][data-dm-design="index"] #specialties a:hover > [data-specialty-icon] {
    transform: translateY(-2px) scale(1.04);
    background: var(--specialty-icon-color) !important;
    color: #fff !important;
    box-shadow: 0 9px 20px var(--specialty-icon-shadow), 0 0 0 4px var(--specialty-icon-bg);
  }
  main[data-dm-tpl][data-dm-design="index"] #specialties a:hover > [data-specialty-icon] > svg {
    transform: scale(1.08);
  }
}
main[data-dm-tpl][data-dm-design="index"] #specialties a:focus-visible > [data-specialty-icon] {
  outline: 3px solid var(--specialty-icon-color);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  main[data-dm-tpl][data-dm-design="index"] #specialties [data-specialty-icon],
  main[data-dm-tpl][data-dm-design="index"] #specialties [data-specialty-icon] > svg {
    transition: none;
  }
  main[data-dm-tpl][data-dm-design="index"] #specialties a:hover > [data-specialty-icon] {
    transform: none;
  }
}
@media (hover: hover) {
  main[data-dm-tpl] section:not([data-dm-hero]) a:hover > div[class*="w-12"][class*="h-12"]:has(> svg),
  main[data-dm-tpl] section:not([data-dm-hero]) [data-dm-card]:hover div[class*="w-12"][class*="h-12"]:has(> svg) {
    box-shadow: 0 12px 26px rgba(0, 137, 123, .36), 0 0 0 9px rgba(0, 180, 216, .12);
  }
}

/* ---------- Numbered steps ---------- */
main[data-dm-tpl] section:not([data-dm-hero]) div[class*="w-10"][class*="h-10"][class*="rounded-full"] {
  width: 56px; height: 56px;
  font-size: 1.1rem; font-weight: 800;
  background: var(--tp-grad) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0, 137, 123, .28), 0 0 0 7px rgba(0, 137, 123, .09);
}
@media (min-width: 768px) {
  main[data-dm-tpl][data-dm-design="index"] #how-it-works [data-dm-grid] { position: relative; }
  main[data-dm-tpl][data-dm-design="index"] #how-it-works [data-dm-grid]::before {
    content: "";
    position: absolute; z-index: 0;
    top: 3.4rem; left: 12%; right: 12%;
    border-top: 2px dashed #a9d6cd;
  }
  main[data-dm-tpl][data-dm-design="index"] #how-it-works [data-dm-grid] > div { position: relative; z-index: 1; }
}

/* ---------- Pill buttons ---------- */
main[data-dm-tpl] section:not([data-dm-hero]) [data-dm-action],
main[data-dm-tpl] section:not([data-dm-hero]) a[class*="rounded-lg"][class*="px-"],
main[data-dm-tpl] section:not([data-dm-hero]) a[class*="rounded-xl"][class*="px-"],
main[data-dm-tpl] section:not([data-dm-hero]) button[class*="rounded-lg"][class*="px-"] {
  border-radius: 999px;
  min-height: 48px;
  font-weight: 700;
  letter-spacing: .01em;
}
main[data-dm-tpl] section:not([data-dm-hero]) a[class*="bg-brand-teal"],
main[data-dm-tpl] section:not([data-dm-hero]) a[class*="bg-primary"],
main[data-dm-tpl] section:not([data-dm-hero]) button[class*="bg-brand-teal"] {
  background: var(--tp-grad) !important;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 137, 123, .28);
}
@media (hover: hover) {
  main[data-dm-tpl] section:not([data-dm-hero]) a[class*="bg-brand-teal"]:hover,
  main[data-dm-tpl] section:not([data-dm-hero]) a[class*="bg-primary"]:hover { box-shadow: 0 14px 30px rgba(0, 137, 123, .38); }
}

/* ---------- Pricing cards ---------- */
main[data-dm-tpl][data-dm-design="index"] #plans-pricing [data-dm-grid] > div { padding: 1.75rem; }
main[data-dm-tpl][data-dm-design="index"] #plans-pricing [data-dm-grid] > div:last-child {
  border-color: var(--tp-teal);
  box-shadow: 0 2px 4px rgba(15, 44, 105, .05), 0 26px 56px rgba(0, 137, 123, .2);
}

/* ---------- CTA band (fixes navy heading on navy overlay) ---------- */
main[data-dm-tpl] .hp-cta { padding: 1rem 1rem clamp(3.5rem, 7vw, 6rem); background: #fff; }
main[data-dm-tpl] .hp-cta__box {
  border-radius: 32px;
  background:
    radial-gradient(420px 260px at 90% 10%, rgba(0, 180, 216, .35), transparent 70%),
    linear-gradient(135deg, rgba(15, 44, 105, .92), rgba(0, 104, 95, .86)),
    url("assets/healthcare/clinic-team.jpg") center/cover no-repeat;
  box-shadow: 0 30px 70px rgba(15, 44, 105, .28);
  padding: clamp(3rem, 8vw, 5.5rem) 1.5rem;
}
main[data-dm-tpl] .hp-cta__box h2 { color: #fff; font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); letter-spacing: -.02em; }
main[data-dm-tpl] .hp-cta__box p { color: #e1ecf7; font-size: 1.0625rem; }
main[data-dm-tpl] .hp-cta__btn { border-radius: 999px; padding: .95rem 2.1rem; box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }

/* ---------- FAQ accordion ---------- */
main[data-dm-tpl][data-dm-design="index"] #faq-section .space-y-4 > div {
  border-radius: 20px;
  border: 1px solid var(--tp-line);
  background: #fff;
  box-shadow: var(--tp-shadow);
}
main[data-dm-tpl][data-dm-design="index"] #faq-section button { padding: 1.25rem 1.5rem; font-size: 1rem; color: var(--tp-navy); }
main[data-dm-tpl][data-dm-design="index"] #faq-section button svg { color: var(--tp-teal); }

/* ---------- About / inner-page heroes (homepage hero excluded) ---------- */
main[data-dm-tpl]:not([data-dm-design="index"]) section[data-dm-hero] {
  border-radius: 0 0 44px 44px;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0, 137, 123, .14) 1px, transparent 1.5px),
    radial-gradient(640px 380px at 90% 0%, rgba(0, 180, 216, .20), transparent 70%),
    radial-gradient(560px 360px at 0% 100%, rgba(0, 137, 123, .16), transparent 70%),
    linear-gradient(135deg, #eef5fb, #fafcfe) !important;
  background-size: 26px 26px, auto, auto, auto !important;
}
main[data-dm-tpl]:not([data-dm-design="index"]) section[data-dm-hero] h1 {
  letter-spacing: -.03em;
  line-height: 1.06;
  font-weight: 800;
}

/* ---------- Inner-page section bands ---------- */
main[data-dm-tpl]:not([data-dm-design="index"]) section[id]:not([data-dm-hero]):nth-of-type(odd) {
  background-image:
    radial-gradient(520px 300px at 100% 0%, rgba(0, 180, 216, .08), transparent 70%),
    radial-gradient(460px 300px at 0% 100%, rgba(0, 137, 123, .07), transparent 70%);
}
main[data-dm-tpl][data-dm-design="consult-online"] section[id]:not([data-dm-hero]) > div {
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow);
  border: 1px solid var(--tp-line);
  position: relative;
  overflow: hidden;
}
main[data-dm-tpl][data-dm-design="consult-online"] section[id]:not([data-dm-hero]) > div::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, var(--tp-teal), var(--tp-cyan));
}

/* About page: unify card radius and charter rows */
main[data-dm-tpl][data-dm-design="about"] [data-dm-grid] > div[class*="rounded"] {
  border-radius: var(--tp-radius);
  border: 1px solid var(--tp-line);
  box-shadow: var(--tp-shadow);
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
  main[data-dm-tpl][data-dm-design="about"] [data-dm-grid] > div[class*="rounded"]:hover { transform: translateY(-5px); box-shadow: var(--tp-shadow-hover); }
}

@media (prefers-reduced-motion: reduce) {
  main[data-dm-tpl] * { transition: none !important; transform: none !important; }
}

/* QA fix: faint helper text in plan cards (was slate-400, ~2.6:1) */
main[data-dm-tpl][data-dm-design="index"] #plans-pricing .text-slate-400,
main[data-dm-tpl][data-dm-design="index"] #specialties .text-slate-400 { color: #64748b; }