/* ============================================================
   Design tokens — lifted verbatim from "Landing Page.dc.html"
   ============================================================ */
:root {
  --bg: #fbfaf8;
  --surface: #fff;
  --ink: #12181f;
  --ink-70: rgba(18, 24, 31, 0.7);
  --ink-68: rgba(18, 24, 31, 0.68);
  --ink-62: rgba(18, 24, 31, 0.62);
  --ink-60: rgba(18, 24, 31, 0.6);
  --ink-58: rgba(18, 24, 31, 0.58);
  --ink-55: rgba(18, 24, 31, 0.55);
  --ink-50: rgba(18, 24, 31, 0.5);
  --ink-48: rgba(18, 24, 31, 0.48);
  --ink-45: rgba(18, 24, 31, 0.45);
  --ink-35: rgba(18, 24, 31, 0.35);
  --line: rgba(18, 24, 31, 0.09);
  --line-soft: rgba(18, 24, 31, 0.07);
  --line-strong: rgba(18, 24, 31, 0.14);

  --primary: oklch(0.42 0.11 245);
  --primary-hover: oklch(0.36 0.11 245);
  --primary-deep: oklch(0.34 0.1 245);
  --primary-tint: oklch(0.95 0.025 245);
  --primary-tint-soft: oklch(0.96 0.02 245);
  --primary-chip: oklch(0.94 0.03 245);
  --primary-underline: oklch(0.8 0.06 245);

  --accent: #03b9ff;
  --accent-hover: #019bd8;

  --teal: oklch(0.62 0.11 195);
  --teal-label: oklch(0.5 0.1 195);

  --azure: oklch(0.45 0.12 233);
  --azure-hover: oklch(0.38 0.11 233);
  --azure-cta: oklch(0.5 0.11 233);

  --green: oklch(0.55 0.13 150);
  --green-tint: oklch(0.96 0.04 150);
  --green-cell: oklch(0.975 0.02 150);
  --green-ink: oklch(0.4 0.1 152);
  --red: oklch(0.62 0.19 25);
  --red-ink: oklch(0.55 0.17 25);
  --red-cell: oklch(0.975 0.02 25);

  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --shell: 1240px;
  --gutter: clamp(20px, 4vw, 36px);
  --section-pad: clamp(56px, 7vw, 92px);
  --ease: 0.18s ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  max-width: 100%;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  color: var(--primary-deep);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Layout primitives
   ============================================================ */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter) 0;
}

.eyebrow {
  font: 500 12.5px/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--teal-label);
}
.eyebrow--azure {
  color: var(--azure);
}

.section-title {
  font: 600 clamp(30px, 3.6vw, 42px) / 1.16 var(--font-display);
  letter-spacing: -0.025em;
  margin: 16px 0 0;
}

.section-lede {
  font: 400 17px/1.7 var(--font-body);
  color: var(--ink-62);
  margin: 12px 0 0;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 13px;
  font: 600 17px/1 var(--font-body);
  padding: 18px 32px;
  transition:
    transform var(--ease),
    box-shadow var(--ease),
    background var(--ease),
    color var(--ease),
    border-color var(--ease);
}
.btn:active {
  transform: translateY(-1px);
}

.btn--accent {
  background-color: var(--accent);
  color: #fff;
}
.btn--accent:hover {
  background-color: var(--accent-hover);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(3, 185, 255, 0.34);
}

.btn--outline {
  border: 1.5px solid rgba(18, 24, 31, 0.18);
  color: var(--ink);
}
.btn--outline:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(18, 24, 31, 0.12);
}

.btn--outline-accent {
  border: 2px solid var(--navbar-accent, #03b9ff);
  background: #e8f8ff;
  color: #0284c7;
}
.btn--outline-accent:hover {
  background: var(--navbar-accent, #03b9ff);
  border-color: var(--navbar-accent, #03b9ff);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(3, 185, 255, 0.34);
}

.btn--light {
  background: #fff;
  color: var(--azure);
}
.btn--light:hover {
  color: var(--azure);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(10, 16, 24, 0.24);
}

.btn--ghost-light {
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  color: #fff;
}
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
  transform: translateY(-3px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ============================================================
   Header

   Carried over from the pre-refactor navbar rather than the React
   design: white bar, the clinic logo beside a cyan wordmark, plain
   dark links, and a cyan "Reservasi" pill. The palette and Inter type
   here are deliberately local to the header — the rest of the page
   keeps the tokens defined at the top of this file.
   ============================================================ */
.navbar {
  --navbar-accent: #03b9ff;
  --navbar-accent-hover: #009fdd;

  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  padding: 1rem 0;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  font-family: 'Inter', var(--font-body);
  transition: box-shadow 0.3s;
}

/* Deepens once the page is scrolled, as the old navbar did. */
.navbar.is-scrolled {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.navbar__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  /* 1.5rem as before, but allowed to shrink so the long clinic name
     survives narrow screens without a hamburger to hide behind. */
  font-size: clamp(1.05rem, 3.2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navbar-accent);
  transition: color 0.3s;
}
.navbar-brand:hover {
  color: var(--navbar-accent-hover);
}

.navbar-brand__logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
}

/* Initials fallback when the clinic has no logo on file. */
.navbar-brand__mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navbar-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #fff;
  flex: none;
}

.navbar-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.nav-link {
  display: inline-block;
  margin: 0 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  color: #303030;
  transition: color 0.3s;
}
.nav-link:hover {
  color: var(--navbar-accent);
}

/* The old navbar had no active state; the scroll spy reuses its hover
   colour so the current section still reads without a new treatment. */
.nav-link[aria-current='page'] {
  color: var(--navbar-accent);
}

.nav-link--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-reserve {
  display: inline-block;
  margin: 0 0.5rem;
  padding: 0.625rem 1.5rem;
  border-radius: 6px;
  background: var(--navbar-accent);
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  transition: background 0.3s;
}
.btn-reserve:hover {
  background: var(--navbar-accent-hover);
  color: #fff;
}

/* The hamburger, hidden until the breakpoint below takes over. */
.navbar-toggler {
  display: none;
  width: 46px;
  height: 42px;
  margin-left: auto;
  border: 1px solid rgba(18, 24, 31, 0.25);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.3s,
    background 0.3s;
}
.navbar-toggler:hover {
  border-color: var(--navbar-accent);
}

.navbar-toggler__bars,
.navbar-toggler__bars::before,
.navbar-toggler__bars::after {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: #303030;
}
.navbar-toggler__bars {
  position: relative;
}
.navbar-toggler__bars::before,
.navbar-toggler__bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.navbar-toggler__bars::before {
  top: -7px;
}
.navbar-toggler__bars::after {
  top: 7px;
}

/* The brand plus the eight inline links need ~1105px to sit on one row, so
   below 1140px (leaving headroom for font metrics) they collapse behind the
   hamburger and stack vertically when opened, as the pre-refactor navbar did.
   Kept in step with the matchMedia query in clinicprofile.js. */
@media (max-width: 1139px) {
  .navbar-toggler {
    display: inline-flex;
  }

  /* Brand and hamburger always share one row; on a 320px screen the long
     clinic name wraps to a second line rather than pushing the hamburger
     down onto a row of its own. */
  .navbar__inner {
    flex-wrap: nowrap;
  }
  .navbar-brand {
    min-width: 0;
  }

  /* The panel drops out of flow and hangs below the bar. Keeping it out of
     flow means opening it never changes the sticky header's height, which
     otherwise shifts the whole document and breaks anchor scrolling. */
  .navbar-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 4px 0 12px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    /* Keeps the last items reachable on a short landscape viewport. */
    max-height: calc(100vh - var(--navbar-h, 77px) - 16px);
    overflow-y: auto;
  }
  .navbar.is-open .navbar-nav {
    display: flex;
  }

  .navbar-nav li {
    width: 100%;
    text-align: center;
  }

  .nav-link {
    display: block;
    margin: 0;
    padding: 12px 8px;
  }
  .nav-link--icon {
    justify-content: center;
  }

  .btn-reserve {
    margin: 8px 0;
  }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 80px) var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: 99px;
  background: var(--primary-tint);
}
.pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background: var(--teal);
}
.pill__text {
  font: 500 12.5px/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: oklch(0.4 0.09 245);
}

.hero__title {
  font: 600 clamp(40px, 5.2vw, 62px) / 1.07 var(--font-display);
  letter-spacing: -0.028em;
  margin: 24px 0 0;
  text-wrap: balance;
}

.hero__lede {
  font: 400 18px/1.75 var(--font-body);
  color: var(--ink-68);
  margin: 24px 0 0;
  max-width: 580px;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero__hours {
  display: inline-flex;
  gap: 11px;
  margin-top: 34px;
  align-items: center;
  font: 600 16px/1.5 var(--font-body);
  color: var(--ink);
  background: oklch(0.96 0.03 195);
  border: 1px solid oklch(0.86 0.06 195);
  border-radius: 12px;
  padding: 13px 18px;
}

.carousel {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 4.2;
  background: #e7e4de;
  box-shadow: 0 30px 70px rgba(18, 24, 31, 0.14);
}

.carousel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel__nav {
  position: absolute;
  top: 20px;
  width: 46px;
  height: 46px;
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(10, 16, 24, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition:
    transform var(--ease),
    background var(--ease);
}
.carousel__nav:hover {
  background: #fff;
  transform: scale(1.08);
}
.carousel__nav:active {
  transform: scale(0.96);
}
.carousel__nav--prev {
  left: 16px;
}
.carousel__nav--next {
  right: 16px;
}

.carousel__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(10, 16, 24, 0.72), rgba(10, 16, 24, 0));
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  justify-content: space-between;
  z-index: 1;
}
.carousel__kicker {
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
}
.carousel__title {
  font: 600 20px/1.3 var(--font-display);
  color: #fff;
  margin-top: 8px;
}

.dots {
  display: flex;
  align-items: center;
  gap: 7px;
}
.dots button {
  height: 9px;
  width: 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.42);
  transition:
    width 0.35s ease,
    background 0.35s ease;
  padding: 0;
}
.dots button[aria-current='true'] {
  width: 26px;
  background: #fff;
}

/* ============================================================
   Services — split intro + accordion, from the pre-refactor page
   ============================================================ */
.services {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.services__title {
  font: 800 clamp(1.8rem, 3.2vw, 2.75rem) / 1.2 var(--font-display);
  color: var(--ink);
  margin: 0;
}
.services__title span {
  color: var(--navbar-accent, #03b9ff);
}

.services__lede {
  font: 400 17px / 1.8 var(--font-body);
  color: var(--ink-62);
  margin: 1.5rem 0 0;
  max-width: 42ch;
}

.services__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.service-acc {
  border-radius: 14px;
  overflow: hidden;
}

.service-acc__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.75rem;
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  border-radius: 14px;
  font: 600 1.0625rem / 1.35 var(--font-body);
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.3s,
    color 0.3s,
    box-shadow 0.3s;
}
.service-acc__toggle:hover,
.service-acc.is-open .service-acc__toggle {
  background: linear-gradient(135deg, #03b9ff, #0284c7);
  color: #fff;
  box-shadow: 0 8px 25px rgba(3, 185, 255, 0.3);
}
.service-acc.is-open .service-acc__toggle {
  border-radius: 14px 14px 0 0;
}

.service-acc__chevron {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s;
}
.service-acc.is-open .service-acc__chevron {
  transform: rotate(180deg);
}

.service-acc__panel {
  display: none;
  padding: 1.5rem 1.75rem;
  background: #f8fafc;
  border: 2px solid #e0f2fe;
  border-top: none;
  border-radius: 0 0 14px 14px;
}
.service-acc.is-open .service-acc__panel {
  display: block;
}
.service-acc__panel p {
  margin: 0;
  font: 400 0.9375rem / 1.7 var(--font-body);
  color: #475569;
}

@media (max-width: 900px) {
  .services {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Doctors
   ============================================================ */
.legend {
  display: flex;
  align-items: center;
  gap: 18px;
  font: 500 14px/1 var(--font-body);
  color: var(--ink-60);
}
.legend span {
  display: flex;
  align-items: center;
  gap: 9px;
}
.legend i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: block;
}
.legend .is-open {
  background: var(--green);
}
.legend .is-closed {
  background: var(--red);
}

.stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 40px;
}

.doctor-card {
  background: #fff;
  border: 1px solid rgba(18, 24, 31, 0.08);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 4px 18px rgba(18, 24, 31, 0.04);
  display: flex;
  flex-wrap: wrap;
  gap: 24px 28px;
  align-items: center;
}

.doctor-card__identity {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 280px;
  min-width: 0;
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  object-fit: cover;
  background: #e7e4de;
  flex: none;
}

.avatar--initials {
  background: var(--primary-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 21px/1 var(--font-display);
  color: var(--primary);
}

.doctor-card__name {
  font: 600 19px/1.3 var(--font-display);
}

.doctor-card__meta {
  font: 400 12.5px/1.3 var(--font-mono);
  color: var(--ink-48);
  margin-top: 6px;
}

.doctor-card__schedule {
  flex: 2 1 560px;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.week {
  min-width: 430px;
  border: 1px solid rgba(18, 24, 31, 0.1);
  border-radius: 12px;
  overflow: hidden;
  /* Containing block for the .sr-only day labels inside each slot. Without
     it they resolve against the page and escape the horizontal scroll on
     .doctor-card__schedule, widening the whole document on small screens. */
  position: relative;
}

.week__head,
.week__body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.week__head {
  background: var(--green);
}

.week__day {
  padding: 13px 3px;
  text-align: center;
  font: 600 14px/1.2 var(--font-body);
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.week__day:last-child {
  border-right: none;
}

.week__slot {
  padding: 17px 3px;
  text-align: center;
  font: 500 13.5px/1.3 var(--font-body);
  color: var(--ink);
  background: var(--green-cell);
  border-right: 1px solid var(--line-soft);
}
.week__slot:last-child {
  border-right: none;
}
.week__slot--off {
  font: 500 15px/1.3 var(--font-body);
  color: var(--red-ink);
  background: var(--red-cell);
}

.doctor-card__footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.chip-green {
  display: inline-block;
  padding: 9px 15px;
  border-radius: 9px;
  background: var(--green-tint);
  font: 600 16px/1 var(--font-body);
  color: var(--green-ink);
}

/* ============================================================
   Queue
   ============================================================ */
.queue {
  margin-top: var(--section-pad);
  background: oklch(0.97 0.014 245);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.queue__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--gutter);
}

.live-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid rgba(18, 24, 31, 0.1);
  font: 600 15px/1 var(--font-body);
}
.live-badge i {
  width: 9px;
  height: 9px;
  border-radius: 5px;
  background: oklch(0.7 0.16 145);
  display: block;
}

.queue__stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.queue-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(18, 24, 31, 0.05);
}

.queue-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: oklch(0.975 0.012 245);
  border-bottom: 1px solid rgba(18, 24, 31, 0.08);
}

.queue-card__avatar {
  width: 46px;
  height: 46px;
  border-radius: 23px;
  object-fit: cover;
  background: #e7e4de;
  flex: none;
}
.queue-card__avatar--initials {
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 16px/1 var(--font-display);
  color: #fff;
}

.queue-card__name {
  flex: 1;
  min-width: 0;
  font: 600 19px/1.3 var(--font-display);
}

.queue-card__count {
  padding: 9px 16px;
  border-radius: 9px;
  font: 600 15px/1 var(--font-body);
  color: #fff;
  white-space: nowrap;
  background-color: var(--accent);
}

.queue-card__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.queue-rows {
  min-width: 600px;
}

.queue-row {
  display: grid;
  grid-template-columns: 76px 92px minmax(0, 1fr) 118px 132px;
  align-items: center;
  gap: 18px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(18, 24, 31, 0.06);
}
.queue-row:nth-child(even) {
  background: oklch(0.985 0.006 245);
}
.queue-row:last-child {
  border-bottom: none;
}

.queue-row__no {
  padding: 9px 0;
  border-radius: 9px;
  background: var(--primary-chip);
  font: 600 17px/1 var(--font-body);
  color: var(--primary);
  text-align: center;
}

.queue-row__time {
  display: block;
  font: 600 21px/1.1 var(--font-display);
}
.queue-row__tz {
  display: block;
  font: 500 12px/1 var(--font-body);
  color: var(--ink-45);
  margin-top: 4px;
}

.queue-row__label {
  display: block;
  font: 600 13px/1 var(--font-body);
  color: var(--ink-50);
}
.queue-row__patient {
  display: block;
  font: 400 16px/1.3 var(--font-mono);
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-row__poli-label {
  display: block;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--ink-45);
}
.queue-row__poli {
  display: inline-block;
  margin-top: 7px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--primary-chip);
  font: 600 14px/1 var(--font-body);
  color: var(--primary);
}

.queue-row__status {
  padding: 11px 0;
  border-radius: 10px;
  font: 600 15px/1 var(--font-body);
  text-align: center;
  background: var(--primary-chip);
  color: oklch(0.4 0.1 245);
}
.queue-row__status--done {
  background: var(--green-tint);
  color: oklch(0.42 0.1 152);
}

.queue__toggle {
  margin-top: 22px;
  width: 100%;
  padding: 17px 22px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(18, 24, 31, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font: 600 16px/1 var(--font-body);
  color: var(--azure);
  text-align: left;
  transition:
    transform var(--ease),
    box-shadow var(--ease),
    border-color var(--ease);
}
.queue__toggle:hover {
  border-color: var(--azure);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(18, 24, 31, 0.08);
}
.queue__toggle:active {
  transform: translateY(0);
}
.queue__toggle svg {
  transition: transform var(--ease);
  flex: none;
}
.queue__toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.day-divider {
  margin-top: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 10px rgba(18, 24, 31, 0.04);
}
.day-divider i {
  width: 4px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--primary);
  display: block;
}
.day-divider span {
  font: 600 clamp(20px, 2.2vw, 26px) / 1.3 var(--font-display);
}

.queue__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 14px;
  margin-top: 32px;
}

.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
}
.stat__value {
  font: 600 34px/1 var(--font-display);
}
.stat__value--done {
  color: oklch(0.5 0.12 152);
}
.stat__value--waiting {
  color: var(--primary);
}
.stat__label {
  font: 400 15px/1.4 var(--font-body);
  color: var(--ink-55);
  margin-top: 10px;
}

.queue__note {
  font: 400 15px/1.6 var(--font-body);
  color: var(--ink-50);
  margin-top: 18px;
}

.queue__empty {
  background: #fff;
  border: 1px dashed rgba(18, 24, 31, 0.18);
  border-radius: 22px;
  padding: 40px 28px;
  text-align: center;
  font: 400 16px/1.7 var(--font-body);
  color: var(--ink-55);
}

/* ============================================================
   Reservation
   ============================================================ */
.reservation {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(36px, 4vw, 56px);
  align-items: start;
}

.steps {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.step {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.step__no {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--primary-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font: 600 16px/1 var(--font-display);
  color: var(--primary);
}
.step__title {
  font: 600 17px/1.4 var(--font-body);
}
.step__body {
  font: 400 15.5px/1.6 var(--font-body);
  color: var(--ink-58);
  margin-top: 3px;
}

.form-card {
  background: #fff;
  border: 1px solid rgba(18, 24, 31, 0.08);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 20px 50px rgba(18, 24, 31, 0.07);
}

.form-card__legend {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--ink-48);
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.segmented button {
  padding: 16px;
  border-radius: 13px;
  border: 2px solid #bfe9ff;
  background: #f0faff;
  font: 600 16px/1 var(--font-body);
  color: #0369a1;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.segmented button:hover {
  border-color: var(--navbar-accent, #03b9ff);
  background: #e0f6ff;
  color: #0369a1;
}
.segmented button[aria-pressed='true'] {
  border-color: var(--navbar-accent, #03b9ff);
  background: var(--navbar-accent, #03b9ff);
  color: #fff;
  box-shadow: 0 6px 16px rgba(3, 185, 255, 0.35);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 16px;
  margin-top: 26px;
}

.field {
  min-width: 0;
}
.field--wide {
  margin-top: 16px;
}
.field label {
  display: block;
  font: 500 14.5px/1 var(--font-body);
  color: var(--ink-60);
  margin-bottom: 9px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  border: 1.5px solid var(--line-strong);
  background: #fff;
  font: 400 16px/1.4 var(--font-body);
  color: var(--ink);
  transition: border-color var(--ease);
}
.field textarea {
  min-height: 76px;
  resize: vertical;
  line-height: 1.6;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='rgba(18,24,31,.45)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-35);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--primary);
  outline: none;
}
.field input[aria-invalid='true'],
.field select[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-color: var(--red-ink);
}

.field__error {
  font: 500 13.5px/1.5 var(--font-body);
  color: var(--red-ink);
  margin-top: 7px;
}

.form-card__submit {
  margin-top: 26px;
  width: 100%;
  padding: 19px 24px;
  border-radius: 13px;
  font: 600 17px/1 var(--font-body);
  color: #fff;
  text-align: center;
  background-color: var(--accent);
  transition:
    background var(--ease),
    transform var(--ease),
    box-shadow var(--ease);
}
.form-card__submit:hover:not(:disabled) {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(3, 185, 255, 0.34);
}
.form-card__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.form-card__hint {
  font: 400 14.5px/1.5 var(--font-body);
  color: var(--ink-50);
  text-align: center;
  margin-top: 14px;
}

.alert {
  margin-top: 20px;
  border-radius: 12px;
  padding: 16px 18px;
  font: 500 15.5px/1.6 var(--font-body);
}
.alert--ok {
  background: var(--green-tint);
  color: var(--green-ink);
  border: 1px solid oklch(0.86 0.07 150);
}
.alert--error {
  background: oklch(0.96 0.04 25);
  color: var(--red-ink);
  border: 1px solid oklch(0.87 0.08 25);
}

[data-when-patient='returning'] > .field {
  margin-top: 26px;
}

.lookup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.lookup-row button {
  padding: 13px 20px;
  border-radius: 11px;
  border: 1.5px solid var(--line-strong);
  font: 600 15px/1 var(--font-body);
  color: var(--primary);
  transition:
    border-color var(--ease),
    transform var(--ease);
}
.lookup-row button:hover:not(:disabled) {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.lookup-row span {
  font: 500 14.5px/1.5 var(--font-body);
  color: var(--ink-58);
}

.lookup-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.lookup-choices button {
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border-radius: 11px;
  border: 1.5px solid var(--line-strong);
  background: #fff;
  font: 500 15px/1.4 var(--font-body);
  color: var(--ink);
  cursor: pointer;
}
.lookup-choices button:hover {
  border-color: var(--primary);
}

/* ============================================================
   Location
   ============================================================ */
.location__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  margin-top: 36px;
  align-items: stretch;
}

.location-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.location-card__label {
  font: 600 13px/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--ink-50);
}
.location-card__value {
  font: 500 18px/1.65 var(--font-body);
  margin-top: 10px;
}
.location-card__closed {
  color: var(--red-ink);
}

.location-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

.btn--maps {
  padding: 16px 24px;
  border-radius: 12px;
  background: var(--azure);
  font: 600 16px/1 var(--font-body);
  color: #fff;
}
.btn--maps:hover {
  background: var(--azure-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(18, 24, 31, 0.18);
}

.btn--wa {
  padding: 16px 24px;
  border-radius: 12px;
  border: 1.5px solid rgba(18, 24, 31, 0.18);
  font: 600 16px/1 var(--font-body);
  color: var(--ink);
}
.btn--wa:hover {
  border-color: #25d366;
  color: var(--ink);
  transform: translateY(-2px);
}

.map-embed {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 300px;
  background: oklch(0.975 0.014 233);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
}

.map-placeholder {
  border-radius: 20px;
  border: 1.5px dashed rgba(18, 24, 31, 0.22);
  background: oklch(0.975 0.014 233);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
}
.map-placeholder__title {
  font: 600 17px/1.4 var(--font-body);
  color: var(--ink-60);
}
.map-placeholder__body {
  font: 400 15px/1.6 var(--font-body);
  color: var(--ink-50);
  max-width: 280px;
}

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
  margin-top: 36px;
}

.testimonial {
  background: #fff;
  border: 1px solid rgba(18, 24, 31, 0.08);
  border-radius: 20px;
  padding: 30px 28px;
}
.testimonial__quote {
  font: 600 38px/1 var(--font-display);
  color: oklch(0.84 0.05 245);
}
.testimonial__body {
  font: 400 17px/1.75 var(--font-body);
  color: rgba(18, 24, 31, 0.76);
  margin: 10px 0 0;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: oklch(0.94 0.02 245);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 17px/1 var(--font-display);
  color: var(--primary);
  flex: none;
}
.testimonial__name {
  font: 600 16px/1.2 var(--font-body);
}
.testimonial__date {
  font: 400 12.5px/1.2 var(--font-mono);
  color: var(--ink-48);
  margin-top: 5px;
}

/* ============================================================
   Closing CTA
   ============================================================ */
.cta {
  border-radius: 26px;
  padding: clamp(36px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  text-align: center;
  background: var(--azure-cta);
}
.cta__title {
  font: 600 clamp(28px, 3.2vw, 38px) / 1.2 var(--font-display);
  letter-spacing: -0.025em;
  margin: 0;
  color: #fff;
}
.cta__lede {
  font: 400 17px/1.7 var(--font-body);
  color: rgba(255, 255, 255, 0.76);
  margin: 14px auto 0;
  max-width: 540px;
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 6vw, 84px) var(--gutter) 40px;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 40px 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(18, 24, 31, 0.1);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 17px/1 var(--font-display);
  color: #fff;
  flex: none;
}
.footer__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: none;
}
.footer__name {
  font: 600 17px/1.15 var(--font-display);
}
.footer__about {
  font: 400 15.5px/1.75 var(--font-body);
  color: var(--ink-58);
  margin: 18px 0 0;
  max-width: 340px;
}

.footer__heading {
  font: 600 16px/1 var(--font-body);
  margin-bottom: 18px;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font: 400 15.5px/1 var(--font-body);
}
.footer__text {
  font: 400 15.5px/1.85 var(--font-body);
  color: var(--ink-60);
}

.link-underline {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--primary-underline);
  text-underline-offset: 4px;
  font-weight: 500;
  transition: color var(--ease);
}
.link-underline:hover {
  color: oklch(0.32 0.1 245);
  text-decoration-color: var(--primary);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  font: 400 15.5px/1.4 var(--font-body);
}
.footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font: 400 14px/1.5 var(--font-body);
  color: var(--ink-48);
}

/* ============================================================
   Floating CTA
   ============================================================ */
.fab {
  position: fixed;
  right: clamp(18px, 3vw, 32px);
  bottom: clamp(18px, 3vw, 32px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: clamp(14px, 2vw, 18px) clamp(18px, 2.4vw, 26px);
  border-radius: 99px;
  font: 600 clamp(15px, 1.6vw, 17px) / 1 var(--font-body);
  color: #fff;
  box-shadow: 0 14px 34px rgba(18, 24, 31, 0.28);
  background-color: var(--accent);
  transition:
    transform var(--ease),
    box-shadow var(--ease),
    background var(--ease);
}
.fab:hover {
  background-color: var(--accent-hover);
  color: #fff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 40px rgba(18, 24, 31, 0.34);
}
.fab:active {
  transform: translateY(0) scale(1);
}

/* ============================================================
   Loading / error shells
   ============================================================ */
.page-state {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px var(--gutter);
  text-align: center;
}
.page-state h1 {
  font: 600 clamp(26px, 3vw, 34px) / 1.2 var(--font-display);
  margin: 0;
}
.page-state p {
  font: 400 17px/1.7 var(--font-body);
  color: var(--ink-62);
  margin: 0;
  max-width: 460px;
}

.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--primary-chip);
  border-top-color: var(--primary);
  animation: spin 0.85s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Server-rendered additions

   The React app scrolls with JavaScript and renders one section at a
   time; this page ships every section in the HTML and navigates with
   plain anchors, so it needs anchor offsets for the sticky header and
   a couple of extra pieces the client-side version has no markup for.
   ============================================================ */
html {
  scroll-behavior: smooth;
  /* --navbar-h is kept in sync with the sticky header by clinicprofile.js,
     since the header wraps to two or three rows on narrow screens and a
     fixed offset would drop anchor targets underneath it. */
  scroll-padding-top: calc(var(--navbar-h, 77px) + 20px);
}

[hidden] {
  display: none !important;
}

/* Slot list returned by the appointment-conflict check. */
.alert__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 2px 24px;
  margin-top: 10px;
  font: 400 14.5px/1.7 var(--font-mono);
}
.alert__list p {
  margin: 0;
}
.alert__self {
  font-weight: 600;
}