/* ============================================================
   Fix My Appointment — Core design system  (style.css)
   Palette: clinical teal / ink / saffron CTA / verified green
   Type: Sora (display) + Inter (body) — loaded per-page from Google Fonts
   Signature: ECG "pulse line" motif (hero + section dividers)
   ============================================================ */

:root {
  /* Color tokens */
  --teal-700: #0A5751;
  --teal-600: #0C6B63;          /* primary */
  --teal-100: #DCEFEC;
  --teal-050: #F2FAF8;
  --ink-900: #102E2C;           /* headings / footer */
  --ink-600: #3D5654;           /* body text */
  --ink-400: #6E8A87;           /* muted */
  --saffron-600: #D97116;
  --saffron-500: #E8862E;       /* CTA accent */
  --saffron-100: #FCEEDF;
  --green-600: #178A50;         /* verified */
  --green-100: #E1F5EA;
  --red-600: #C6383C;
  --red-100: #FBE7E7;
  --amber-600: #B07C10;
  --amber-100: #FBF3DC;
  --surface: #FFFFFF;
  --bg: #F6FAF9;
  --border: #E1ECEA;

  /* Type */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Shape / depth */
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(16, 46, 44, 0.08);
  --shadow-md: 0 6px 20px rgba(16, 46, 44, 0.10);
  --shadow-lg: 0 16px 44px rgba(16, 46, 44, 0.14);

  --nav-height: 68px;
  --max-width: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-600);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-900); line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--teal-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

:focus-visible { outline: 3px solid var(--saffron-500); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 22px; }
.section { padding: 72px 0; }
.section-alt { background: var(--surface); }
.section-eyebrow {
  display: inline-block; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-600);
  background: var(--teal-100); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.section-lead { max-width: 640px; color: var(--ink-400); font-size: 1.05rem; }
.center { text-align: center; }
.center .section-lead { margin: 0 auto 1em; }

/* ---------- Signature: ECG pulse divider ---------- */
.pulse-divider { display: block; width: 190px; height: 26px; margin: 10px 0 22px; }
.center .pulse-divider { margin-left: auto; margin-right: auto; }
.pulse-divider path {
  fill: none; stroke: url(#pulseGradient); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* fallback if gradient defs missing */
.pulse-divider path { stroke: var(--teal-600); }

/* ============================================================
   NAVBAR  (Component: Navbar_Public)
   ============================================================ */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  height: var(--nav-height);
}
.navbar-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 0 22px;
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.14rem; color: var(--ink-900); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-700));
  display: grid; place-items: center; color: #fff;
}
.brand-mark svg { width: 22px; height: 14px; }
.brand span em { color: var(--teal-600); font-style: normal; }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  padding: 8px 12px; border-radius: 8px; color: var(--ink-600); font-weight: 500; font-size: 0.94rem;
}
.nav-links a:hover { background: var(--teal-050); color: var(--teal-700); text-decoration: none; }
.nav-links a.active { color: var(--teal-700); background: var(--teal-100); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--border); border-radius: 8px;
  width: 42px; height: 42px; cursor: pointer; color: var(--ink-900); font-size: 1.2rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  padding: 12px 22px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--teal-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--teal-700); box-shadow: var(--shadow-md); }
.btn-accent { background: var(--saffron-500); color: #fff; box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--saffron-600); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--teal-700); border-color: var(--teal-600); }
.btn-outline:hover { background: var(--teal-050); }
.btn-ghost { background: transparent; color: var(--ink-600); }
.btn-ghost:hover { background: var(--teal-050); }
.btn-danger { background: var(--red-600); color: #fff; }
.btn-sm { padding: 8px 14px; font-size: 0.86rem; border-radius: 8px; }
.btn-lg { padding: 15px 30px; font-size: 1.05rem; }
.btn-block { width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] {
  background: #CBD9D7; color: #7B918F; cursor: not-allowed; transform: none; box-shadow: none;
  border-color: transparent;
}

/* Disabled button with tooltip (Component: Tooltip_Disabled) */
.tooltip-wrap { position: relative; display: inline-block; }
.tooltip-wrap .tooltip {
  visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%); background: var(--ink-900); color: #fff; font-size: 0.8rem;
  padding: 8px 12px; border-radius: 8px; white-space: nowrap; z-index: 60;
  transition: opacity 0.15s ease; pointer-events: none;
}
.tooltip-wrap .tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--ink-900);
}
.tooltip-wrap:hover .tooltip, .tooltip-wrap:focus-within .tooltip { visibility: visible; opacity: 1; }

/* ============================================================
   HERO  (Section_Hero)
   ============================================================ */
.hero {
  background:
    radial-gradient(1000px 500px at 85% -10%, var(--teal-100), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, var(--saffron-100), transparent 55%),
    var(--bg);
  padding: 84px 0 70px;
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.hero h1 em { font-style: normal; color: var(--teal-600); position: relative; }
/* --ink-600, not --ink-400: at 1.12rem this is "normal" text under WCAG, so
   it needs 4.5:1. The muted tone measured 3.5:1 against the hero background
   (a pre-existing failure, not introduced by the photo backdrop); --ink-600
   takes it to ~7.9:1 while staying visibly lighter than the headline. */
.hero-sub { font-size: 1.12rem; color: var(--ink-600); max-width: 560px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-trust { display: flex; gap: 26px; margin-top: 36px; flex-wrap: wrap; }
.hero-trust b { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--ink-900); }
.hero-trust small { color: var(--ink-400); }

/* Hero visual card mock */
.hero-visual { position: relative; }
.hero-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 22px;
}
.hero-card .pulse-anim {
  width: 100%; height: 54px; display: block; margin-bottom: 8px;
}
.pulse-anim path {
  fill: none; stroke: var(--teal-600); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 640; stroke-dashoffset: 640;
  animation: pulseDraw 3.2s ease-in-out infinite;
}
@keyframes pulseDraw { 45% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -640; } }
.hero-slot {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--teal-050); border: 1px solid var(--teal-100); border-radius: 10px;
  padding: 12px 14px; margin-top: 10px; font-size: 0.9rem;
}
.hero-slot b { color: var(--ink-900); font-family: var(--font-display); }
/* Photo-background hero. The image sits as a real CSS background rather than
   an <img>, so the doctor can be anchored to the right edge and stay
   uncropped at every viewport width — the previous approach cropped the
   source file, which sliced through her arm at some sizes.
   A left-to-right white scrim guarantees text contrast regardless of how the
   photo reflows: without it, the copy would sit on whatever part of the
   photo happens to land under it at a given width. */
.hero-photo-bg {
  position: relative;
  background-image: url("../img/hero-clinic-doctor.jpg");
  background-size: cover;
  /* right 15%, NOT right center. background-size:cover scales the image to
     the hero's WIDTH, so on a wide monitor a 1536px-wide photo is blown up
     well past the hero's height and the excess is cropped vertically. With
     centre alignment that excess is split evenly top and bottom, which eats
     into her head: measured clearance was +45px at 1440px but -71px at
     1920px and -225px at 2560px. Biasing to 15% keeps clearance at a steady
     88-108px from 1280px all the way to 3840px. The cost is losing more of
     the image's lower edge on very wide screens, which is the right trade —
     that area is her coat, not her face. */
  background-position: right 15%;
  background-repeat: no-repeat;
  padding: 96px 0 84px;
  min-height: 560px;
  display: flex;
  align-items: center;
}
/* Progressive enhancement: browsers that support WebP get the 68KB version,
   the rest fall back to the 122KB progressive JPEG above. */
@supports (background-image: url("x.webp")) {
  .hero-photo-bg { background-image: url("../img/hero-clinic-doctor.webp"); }
}
.hero-photo-bg::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.94) 34%,
    rgba(255,255,255,0.72) 46%,
    rgba(255,255,255,0.15) 58%,
    rgba(255,255,255,0) 68%);
}
/* width:100% is load-bearing. .container relies on max-width + margin:0 auto,
   but as a flex item it shrinks to fit its content instead of filling the
   line — which then let margin:auto centre the shrunken box, pushing the
   copy ~250px right of where every other section on the page starts. */
.hero-photo-bg > .container { position: relative; z-index: 1; width: 100%; }
.hero-copy { max-width: 620px; }
.hero-features-band { background: var(--surface); border-bottom: 1px solid var(--border); padding: 22px 0; }
.hero-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hero-feature {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 10px; text-align: center; box-shadow: var(--shadow-sm);
}
.hero-feature-icon {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--teal-100); color: var(--teal-700); font-size: 1.1rem; margin: 0 auto 8px;
}
.hero-feature span { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-900); line-height: 1.25; }

/* ============================================================
   BADGES & CHIPS
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.76rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-display); letter-spacing: 0.02em;
}
.badge-verified { background: var(--green-100); color: var(--green-600); }
.badge-pending { background: var(--amber-100); color: var(--amber-600); }
.badge-danger { background: var(--red-100); color: var(--red-600); }
.badge-info { background: var(--teal-100); color: var(--teal-700); }
.badge-muted { background: #EEF3F2; color: var(--ink-400); }

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--teal-100); color: var(--teal-700); font-size: 1.3rem; margin-bottom: 14px;
}
.card h3 { margin-bottom: 6px; }
.card p { color: var(--ink-400); font-size: 0.94rem; margin: 0; }

/* Doctor card (Component: Card_Doctor) */
.doctor-card { display: flex; gap: 18px; align-items: flex-start; }
.doctor-avatar {
  width: 72px; height: 72px; border-radius: 50%; flex: none; object-fit: cover;
  background: var(--teal-100); display: grid; place-items: center;
  color: var(--teal-700); font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
}
.doctor-meta small { color: var(--ink-400); display: block; }
.doctor-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.doctor-actions { margin-left: auto; text-align: right; }
.doctor-fee { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }

/* ============================================================
   STEPS / HOW IT WORKS
   ============================================================ */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step-card { position: relative; padding-top: 58px; }
.step-card::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 20px; left: 26px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--teal-600);
}

/* ============================================================
   FAQ  (Section_FAQ)
   ============================================================ */
.faq details {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px 20px; margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; font-family: var(--font-display); font-weight: 600; color: var(--ink-900);
  padding: 14px 0; list-style: none; position: relative;
}
.faq summary::after { content: "+"; position: absolute; right: 0; color: var(--teal-600); font-size: 1.3rem; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-400); padding-bottom: 14px; margin: 0; }

/* ============================================================
   TABLES  (Component: Table_*)
   ============================================================ */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 640px; }
.data-table th {
  text-align: left; font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-400); padding: 14px 16px; border-bottom: 2px solid var(--border);
  background: var(--teal-050);
}
.data-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--ink-600); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--teal-050); }

/* ============================================================
   MODALS  (Component: Modal_*)
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(16, 46, 44, 0.55); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; padding: 30px;
  animation: modalIn 0.22s ease;
}
.modal-wide { max-width: 720px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--ink-400); line-height: 1; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }

/* ============================================================
   TOASTS  (Component: Toast_Global)
   ============================================================ */
#Toast_Container { position: fixed; bottom: 22px; right: 22px; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--ink-900); color: #fff; padding: 13px 18px; border-radius: 10px;
  box-shadow: var(--shadow-lg); font-size: 0.92rem; max-width: 360px;
  display: flex; gap: 10px; align-items: center; animation: toastIn 0.25s ease;
}
.toast-success { background: var(--green-600); }
.toast-error { background: var(--red-600); }
.toast-warn { background: var(--amber-600); }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } }

/* ============================================================
   SPINNERS / EMPTY STATES
   ============================================================ */
.spinner {
  width: 22px; height: 22px; border: 3px solid var(--teal-100); border-top-color: var(--teal-600);
  border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; vertical-align: middle;
}
.spinner-lg { width: 44px; height: 44px; border-width: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { text-align: center; padding: 56px 24px; color: var(--ink-400); }
.empty-state .empty-icon { font-size: 2.6rem; margin-bottom: 10px; opacity: 0.6; }
.empty-state h3 { color: var(--ink-600); }

/* ============================================================
   FOOTER  (Section_Footer)
   ============================================================ */
.footer { background: var(--ink-900); color: #B9CFCC; padding: 60px 0 26px; margin-top: 0; }
.footer a { color: #DDEBE9; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 36px; }
.footer h4 { color: #fff; font-size: 0.95rem; margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; font-size: 0.9rem; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 20px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.84rem;
}
.footer .brand { color: #fff; margin-bottom: 12px; }

/* Utilities */
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 26px; } .mt-4 { margin-top: 40px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 26px; }
.muted { color: var(--ink-400); } .small { font-size: 0.86rem; }
.flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hidden { display: none !important; }
.text-success { color: var(--green-600); } .text-danger { color: var(--red-600); } .text-accent { color: var(--teal-700); font-weight: 600; }

/* ============================================================
   HERO COVERAGE GATE — location pill + no-coverage note
   ============================================================ */
#Panel_HeroLocation { margin-bottom: 14px; }
.loc-pill {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 18px 9px 14px;
  box-shadow: var(--shadow-sm); font-size: 0.92rem;
}
.loc-pin { font-size: 1rem; line-height: 1; }
.loc-text { font-weight: 600; color: var(--ink-900); }
.loc-note { color: var(--ink-600); font-size: 0.82rem; }
/* Explains WHY the booking buttons aren't there. An empty gap where two
   buttons used to be reads as a broken page; a sentence reads as a product
   that hasn't reached you yet — and turns a dead end into a clinic signup. */
.hero-coverage-note {
  margin: 4px 0 0; max-width: 520px; font-size: 0.92rem; color: var(--ink-600);
  background: var(--teal-050); border: 1px solid var(--teal-100);
  border-left: 3px solid var(--teal-600);
  border-radius: var(--radius); padding: 12px 14px;
}
.hero-coverage-note a { font-weight: 600; }