/* Appointment modal — global "Umów wizytę" dialog (Figma 174:107545 / 174:103790).
 * Desktop: centered 470px card over a scrim. Mobile: full-screen with a top bar
 * (back arrow + brand). Loaded on every page; opened by [data-appt-open]. */

/* Bottom-sheet modal: dark translucent scrim (the page + its original menu stay
   visible, dimmed, behind), a white sheet that slides up from the bottom, X to
   close. The back-arrow header belongs to step 2 / confirmation, not here. */
.appt-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center; /* centre the sheet; it sizes to its own content */
  background: rgba(13, 13, 13, .5);
  opacity: 0;
  transition: opacity .25s ease;
}
.appt-modal.is-open { opacity: 1; }
.appt-modal[hidden] { display: none; }
/* The dialog takes focus on open (see appointment-modal.js) — no ring on the
   container itself; the controls inside keep their own focus styles. */
.appt-modal:focus,
.appt-modal:focus-visible { outline: none; }

/* White sheet — a centered column (470px content + side paddings). Its height
   tracks the content (short tabs like "Zadzwoń" stay compact) and is capped to the
   viewport minus a header-height scrim gap top and bottom; past that cap the inner
   content scrolls, so the rounded corners stay clean. Slides up from the bottom. */
.appt-modal__sheet {
  position: relative;
  width: 100%;
  max-width: calc(470px + var(--space-xl) * 2);
  max-height: calc(100% - var(--header-h) * 2);
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
  transform: translateY(calc(100% + var(--header-h)));
  transition: transform .3s ease;
}
.appt-modal.is-open .appt-modal__sheet { transform: translateY(0); }

/* Header — just the X, pinned top-right. The title now lives in the pinned
   intro block under the tabs. */
.appt-modal__head {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: var(--space-s) var(--space-xl) 0;
}
.appt-modal__title { margin: 0; }
.appt-modal__close {
  flex: 0 0 auto;
  display: inline-flex;
  margin-right: calc(-1 * var(--space-2x)); /* pull the icon to the edge */
  padding: var(--space-2x);
  color: var(--color-grey-900);
}
.appt-modal__close:hover { opacity: .7; }

/* ---------- Content column (470px, centered) — the only scroll area, so the
   sheet's rounded corners stay clean; stable gutter avoids width jumps. ---------- */
.appt-modal__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* col grows to its content height, not the viewport —
                              otherwise the sticky header escapes on deep scroll */
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  padding-inline: var(--space-xl);
  padding-bottom: var(--space-3xl);
}
.appt-modal__col { width: 100%; max-width: 470px; }

@media (prefers-reduced-motion: reduce) {
  .appt-modal__sheet { transition: none; }
}

/* ---------- Pinned header block (tabs + centered title/lead) ---------- */
/* Sticky so the tabs AND the title/lead stay visible while the panel below
   scrolls. The block shares the column width, so its white background covers the
   scrolling content underneath without any negative-margin bleed. */
.appt-modal__sticky {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--color-white);
  padding-block: var(--space-2x) var(--space-l);
}
.appt-modal__tabs { display: flex; }
.appt-tabs__track {
  display: flex;
  flex: 1;
  gap: var(--space-2x);
  padding: var(--space-2x);
  background: var(--color-grey-100);
  border-radius: var(--radius-m);
}
.appt-tab {
  flex: 1;
  padding: var(--space-3xs) var(--space-s);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: 500;
  color: var(--color-grey-900);
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.appt-tab.is-active { background: var(--color-grey-900); color: var(--color-grey-100); }

/* ---------- Pinned intro (centered title + lead) under the tabs ---------- */
.appt-modal__body { display: flex; flex-direction: column; }
.appt-modal__intro { text-align: center; margin-top: var(--space-l); }
.appt-modal__lead { margin-top: var(--space-xs); font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--color-grey-900); }
.appt-modal__lead[hidden] { display: none; }

/* ---------- Tab: Zadzwoń — one "city + number" button per clinic ---------- */
.appt-calls { display: flex; flex-direction: column; gap: var(--space-s); }
.appt-calls__btn { width: 100%; }

/* ---------- Tab: Napisz wiadomość — CF7 in the shared .udi-form design ---------- */
.appt-msgform .wpcf7-form > p:first-child { margin-top: 0; }

/* ---------- Booking form ---------- */
.appt-form { display: flex; flex-direction: column; gap: var(--space-s); }
.appt-field { display: flex; flex-direction: column; gap: var(--space-3xs); }
.appt-field__label {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-grey-900);
}

/* Lockable field: "twardy tekst + zmień" ⇄ select. Toggle .is-locked. */
.appt-field__locked { display: none; align-items: center; gap: var(--space-xs); }
.appt-field--lock.is-locked .appt-field__locked { display: flex; }
.appt-field--lock.is-locked .appt-select { display: none; }
.appt-field__value {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: 500;
  color: var(--color-grey-700);
}
.appt-field__change { font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 500; color: var(--color-grey-900); padding: var(--space-2x) 0; }
.appt-field__change:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Select ---------- */
.appt-select { position: relative; }
.appt-select__control {
  width: 100%;
  padding: var(--space-2x);
  padding-right: calc(24px + var(--space-2x) * 2);
  border: 1px solid var(--color-grey-500);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-grey-900);
  background: var(--color-white);
  appearance: none;
  -webkit-appearance: none;
}
.appt-select__arrow {
  position: absolute;
  top: 50%;
  right: var(--space-2x);
  transform: translateY(-50%);
  color: var(--color-grey-700);
  pointer-events: none;
}

/* Custom dropdown (booking selects): hidden native select + button + listbox. */
.appt-dd .appt-select__control { display: none; }
.appt-dd__btn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(var(--lh-body-s) + var(--space-2x) * 2 + 2px);
  padding: var(--space-2x);
  padding-right: calc(24px + var(--space-2x) * 2);
  border: 1px solid var(--color-grey-500);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-grey-900);
  text-align: left;
  background: var(--color-white);
  cursor: pointer;
}
.appt-dd.is-open .appt-dd__btn { border-color: var(--color-grey-900); }
.appt-dd__btn.is-placeholder { color: var(--color-grey-700); }
.appt-dd__btn:disabled { color: var(--color-grey-700); background: var(--color-grey-100); cursor: progress; }
.appt-dd .appt-select__arrow { transition: transform .2s ease; }
.appt-dd.is-open .appt-select__arrow { transform: translateY(-50%) rotate(180deg); }
.appt-dd__value { display: flex; align-items: center; gap: var(--space-2x); width: 100%; min-width: 0; }
.appt-dd__value .appt-dd__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.appt-dd__list {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--space-3xs));
  left: 0;
  right: 0;
  max-height: 296px;
  margin: 0;
  padding: var(--space-3xs);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-s);
  box-shadow: 0 8px 24px rgba(13, 13, 13, .08);
  scrollbar-width: thin;
  scrollbar-color: var(--color-grey-700) transparent;
}
.appt-dd__list[hidden] { display: none; }
.appt-dd__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-grey-900);
  cursor: pointer;
}
.appt-dd__opt.is-active { background: var(--color-grey-100); }
.appt-dd__opt[aria-selected="true"] { font-weight: 500; }
.appt-dd__opt--more { color: var(--color-grey-700); }
.appt-dd__price {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-grey-200);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  color: var(--color-grey-900);
  white-space: nowrap;
}

/* ---------- Availability picker (day columns always visible) ---------- */
.appt-cal { position: relative; min-height: 260px; }
/* few / none show an overlay box on top of the hours → hide the toggle there. */
.appt-cal[data-state="few"] .appt-cal__footer,
.appt-cal[data-state="none"] .appt-cal__footer { display: none; }

.appt-cal__viewport { display: flex; align-items: flex-start; gap: var(--space-2x); }
.appt-cal__nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-2x); /* centered on the day-header row */
  padding: var(--space-2x);
  border-radius: var(--radius-pill);
  background: var(--color-grey-100);
  color: var(--color-grey-900);
}
.appt-cal__nav:hover { background: var(--color-grey-200); }
.appt-cal__nav--prev svg { transform: rotate(180deg); }

.appt-cal__days {
  display: flex;
  flex: 1;
  gap: var(--space-s);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.appt-cal__days::-webkit-scrollbar { display: none; }
.appt-cal__day { flex: 0 0 74px; display: flex; flex-direction: column; align-items: center; gap: var(--space-2x); }
.appt-cal__day-head { display: flex; flex-direction: column; align-items: center; color: var(--color-grey-700); }
.appt-cal__day-name { font-size: var(--fs-body-m); line-height: var(--lh-body-m); }
.appt-cal__day-date { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); }
.appt-cal__list { display: flex; flex-direction: column; gap: var(--space-2x); width: 100%; }
.appt-cal__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 73px;
  padding: var(--space-3xs) var(--space-s);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-grey-900);
  background: var(--color-grey-100);
  transition: background-color .15s ease;
}
button.appt-cal__slot:hover { background: var(--color-grey-200); }
button.appt-cal__slot.is-selected { background: var(--color-grey-900); color: var(--color-grey-100); }
.appt-cal__slot--off { background: transparent; }
.appt-cal__slot--more { display: none; }
.appt-cal.is-expanded .appt-cal__slot--more { display: flex; }

.appt-cal__footer { display: flex; justify-content: center; margin-top: var(--space-2x); }
.appt-cal__more { font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 500; color: var(--color-grey-900); padding: var(--space-2x); }
.appt-cal__more:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Label follows .is-expanded (not JS), so resetCalendar() in booking.js restores it too. */
.appt-cal__more-label--less,
.appt-cal.is-expanded .appt-cal__more-label--more { display: none; }
.appt-cal.is-expanded .appt-cal__more-label--less { display: inline; }

/* Banner overlays the time-slots area (day headers stay visible above it), so
   clicking "Zobacz wolne terminy" hides it and reveals the hours underneath. */
.appt-cal__banner {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--lh-body-m) + var(--lh-caption) + var(--space-2x)); /* below the day headers */
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  text-align: center;
  padding: var(--space-l);
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-s);
}
.appt-cal__banner[hidden] { display: none; }
.appt-cal__banner-title { font-size: var(--fs-body-m); line-height: var(--lh-body-m); font-weight: 500; }
.appt-cal__banner-text { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--color-grey-700); }

/* Submit */
.appt-form__submit { width: 100%; margin-top: var(--space-2x); scroll-margin-bottom: var(--space-l); }

/* ================= Steps 2 & 3 — full-screen screen ================= */
.appt-modal__screen { display: none; }
.appt-modal[data-step="2"] .appt-modal__sheet,
.appt-modal[data-step="3"] .appt-modal__sheet { display: none; }
.appt-modal[data-step="2"],
.appt-modal[data-step="3"] { background: var(--color-white); }
.appt-modal[data-step="2"] .appt-modal__screen,
.appt-modal[data-step="3"] .appt-modal__screen {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
  background: var(--color-white);
}

/* Top bar (back arrow + centered brand) */
.appt-modal__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2x);
  height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--color-grey-400);
}
.appt-modal__back { display: inline-flex; padding: var(--space-2x); color: var(--color-grey-900); }
.appt-modal__back:hover { opacity: .7; }
.appt-modal__brand { display: inline-flex; align-items: center; justify-content: center; }
.appt-modal__brand img { max-height: 24px; width: auto; }
.appt-modal__brand-text { font-family: var(--font-heading); font-size: 16px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-grey-900); }
.appt-modal__bar-spacer { width: 40px; }

.appt-modal__screenbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-3xl) var(--gutter); }

/* Only the active step is visible. Driven by data-step (higher specificity than
   the sections' own display rules) so it holds even without JS; the [hidden]
   attribute set by JS is a second guard. */
.appt-modal[data-step="2"] .appt-step3,
.appt-modal[data-step="3"] .appt-step2 { display: none; }
.appt-step2[hidden], .appt-step3[hidden] { display: none; }

.appt-step__title { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 40px; letter-spacing: -1px; }

/* ---------- Step 2: form + summary ---------- */
.appt-step2 > .appt-step__title { display: block; max-width: 926px; margin: 0 auto var(--space-2xl); }
.appt-step2__grid { display: flex; gap: var(--space-5xl); align-items: flex-start; max-width: 926px; margin-inline: auto; }
.appt-step2__form { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-s); }

.appt-form2__group { display: flex; flex-direction: column; gap: var(--space-2x); }
.appt-form2__legend { font-size: var(--fs-body-m); line-height: var(--lh-body-m); font-weight: 500; }
.appt-field2 { display: flex; flex-direction: column; gap: var(--space-3xs); }
.appt-field2__label { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--color-grey-900); }
.appt-field2__label i { color: var(--color-accent); font-style: normal; margin-left: 2px; }
.appt-input {
  width: 100%;
  padding: var(--space-xs) var(--space-2x);
  border: 1px solid var(--color-grey-500);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-grey-900);
  background: var(--color-white);
}
.appt-phone { display: flex; align-items: stretch; gap: var(--space-2x); }
.appt-phone__prefix { flex: 0 0 92px; }
.appt-phone .appt-input { flex: 1 1 auto; min-width: 0; }
/* Match the prefix select height to the phone input (same vertical padding). */
.appt-phone .appt-select__control { padding-block: var(--space-xs); }
/* Options read "Polska +48", too long for 92px: the select keeps its box, focus
   ring and native picker, but its own text is hidden and the span shows the code. */
.appt-phone__prefix .appt-select__control { color: transparent; }
.appt-phone__prefix option { color: var(--color-grey-900); }
.appt-phone__code {
  position: absolute;
  top: 50%;
  left: var(--space-2x);
  transform: translateY(-50%);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-grey-900);
  pointer-events: none;
}
/* Forced colours repaint the select text, which would then overlap the span. */
@media (forced-colors: active) {
  .appt-phone__prefix .appt-select__control { color: CanvasText; }
  .appt-phone__code { display: none; }
}

.appt-consent { display: flex; align-items: flex-start; gap: var(--space-2x); font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.appt-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 5px; accent-color: var(--color-grey-900); }
.appt-consent a { text-decoration: underline; text-underline-offset: 2px; }

.appt-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2x);
  padding: var(--space-xs) var(--space-s);
  background: var(--color-red-100);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-grey-900);
}
.appt-alert svg { flex: 0 0 auto; color: var(--color-accent); }
.appt-alert[hidden] { display: none; }
.appt-step2__submit { width: 100%; margin-top: var(--space-2x); }

/* Summary card */
.appt-sum { flex: 0 0 331px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2x); padding: var(--space-l); border: 1px solid var(--color-grey-200); border-radius: var(--radius-s); }
.appt-sum__photo { width: 100%; aspect-ratio: 283 / 300; border-radius: var(--radius-s); overflow: hidden; background: var(--color-grey-200); }
.appt-sum__photo img { width: 100%; height: 100%; object-fit: cover; }
.appt-sum__block { display: flex; flex-direction: column; }
.appt-sum__label { font-size: var(--fs-body-m); line-height: var(--lh-body-m); font-weight: 500; }
.appt-sum__val { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--color-grey-800); }
.appt-sum__val--dark { color: var(--color-grey-900); }
.appt-sum__div { height: 1px; background: var(--color-grey-200); }
.appt-sum__change { align-self: flex-start; font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 500; color: var(--color-grey-900); padding: var(--space-2x) 0; }
.appt-cal--sum { min-height: 0; }
.appt-cal--sum[hidden] { display: none; }
.appt-sum__changebtn { width: 100%; margin-top: var(--space-2x); }

/* ---------- Step 3: confirmation ---------- */
.appt-step3 { max-width: 600px; margin-inline: auto; display: flex; flex-direction: column; }
.appt-step3__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); text-align: center; margin-bottom: var(--space-2xl); }
.appt-step3__check { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: var(--space-2x); border-radius: var(--radius-pill); background: var(--color-grey-200); color: var(--color-grey-900); }
.appt-step3__lead { max-width: 640px; font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
.appt-step3__lead strong { font-weight: 600; color: var(--color-grey-900); }

.appt-details { display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-l); border: 1px solid var(--color-grey-200); border-radius: var(--radius-s); }
.appt-details__title { font-size: var(--fs-body-m); line-height: var(--lh-body-m); font-weight: 500; margin-bottom: var(--space-2x); }
.appt-details__row { display: flex; flex-direction: column; gap: 2px; }
.appt-details__label { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--color-grey-700); }
.appt-details__val { font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 500; color: var(--color-grey-900); }
.appt-details__val span { display: block; }
.appt-details__div { height: 1px; background: var(--color-grey-200); }

/* Icon above the text (design 2026-10): title + one paragraph per notice. */
.appt-note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2x); margin-top: var(--space-s); padding: var(--space-l); background: var(--color-grey-100); border-radius: var(--radius-s); }
.appt-note svg { flex: 0 0 auto; color: var(--color-grey-700); }
.appt-note__title { font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 600; }
.appt-note__text { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--color-grey-900); }
.appt-note__text + .appt-note__text { margin-top: var(--space-2x); }
.appt-step3__home { width: 100%; margin-top: var(--space-l); }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  /* Full-screen sheet: no scrim gap, edge-to-edge, no rounded corners. */
  .appt-modal { align-items: stretch; }
  .appt-modal__sheet { max-width: none; max-height: none; border-radius: 0; }
  /* Tabs: the 3 long PL labels can't share one row on a phone - swipeable one-line
     track with edge fades, same pattern as the treatment anchor nav (client). */
  .appt-modal__tabs { position: relative; --atab-pad: 20px; }
  .appt-tabs__track {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--atab-pad);
    scroll-snap-type: x mandatory;
  }
  .appt-tabs__track::-webkit-scrollbar { display: none; }
  /* Caption size like .anchor-nav__item: a third tab has to peek in at the edge. */
  .appt-tab { flex: 0 0 auto; scroll-snap-align: start; padding-inline: var(--space-xs); font-size: var(--fs-caption); }
  /* Mobile design order: the short "Zadzwoń" second, so ~half of "Napisz
     wiadomość" peeks in as the swipe hint (2.5 tabs visible). */
  .appt-tab[data-appt-tab="call"] { order: 1; }
  .appt-tab[data-appt-tab="message"] { order: 2; }
  /* Fades span the full bar height (see .anchor-nav__controls in treatment.css). */
  .appt-modal__tabs::before,
  .appt-modal__tabs::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--atab-pad);
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    transition: opacity .2s ease;
  }
  .appt-modal__tabs::before {
    left: 0;
    border-radius: var(--radius-m) 0 0 var(--radius-m);
    background: linear-gradient(270deg, rgba(249, 249, 249, 0) 0, var(--color-grey-100) var(--space-2x));
  }
  .appt-modal__tabs::after {
    right: 0;
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    background: linear-gradient(90deg, rgba(249, 249, 249, 0) 0, var(--color-grey-100) var(--space-2x));
  }
  .appt-modal__tabs.has-prev::before,
  .appt-modal__tabs.has-next::after { opacity: 1; }
  .appt-modal__head { padding-inline: var(--space-m); }
  .appt-modal__main { padding-inline: var(--space-m); padding-bottom: var(--space-l); }
  .appt-modal__screenbody { padding: var(--space-l) var(--space-m); }
  .appt-step2__grid { flex-direction: column; gap: var(--space-l); }
  /* Mobile design order: visit summary above the patient form. */
  .appt-sum { flex: 1 1 auto; width: 100%; order: -1; }
}

/* iOS/Safari zooms the page in when a focused control's font-size is below 16px
   — every control in the sheet goes to 16px on touch screens. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .appt-input,
  .appt-modal textarea,
  .appt-select__control,
  .appt-phone__code { font-size: 16px; }
}

/* ================= Booking (live data from the EDM proxy) ================= */

/* Placeholder / loading / error states share the banner overlay; the
   "więcej godzin" toggle only makes sense when real hours are rendered. */
/* No calendar at all until service, clinic and specialist are all picked (client). */
.appt-cal[data-state="idle"] { display: none; }
.appt-cal[data-state="loading"] .appt-cal__footer,
.appt-cal[data-state="error"] .appt-cal__footer { display: none; }
.appt-cal[data-state="loading"] .appt-cal__banner-title { color: var(--color-grey-700); }
.appt-cal[data-state="loading"] .appt-cal__slot--off { opacity: .4; }

/* Selects while the lists are (re)loading. */
.appt-select__control:disabled { color: var(--color-grey-700); background: var(--color-grey-100); cursor: progress; }
.appt-form.is-loading-lists .appt-select__arrow { opacity: .4; }

/* Inline error under the calendar (lists / network). */
.appt-form__error {
  padding: var(--space-xs) var(--space-s);
  background: var(--color-red-100);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color-grey-900);
}
.appt-form__error[hidden] { display: none; }

/* Step 2: validation + busy state. */
.appt-input.is-invalid { border-color: var(--color-accent); }
.appt-step2__submit.is-busy { opacity: .7; cursor: progress; }
.appt-consent i { color: var(--color-accent); font-style: normal; margin-left: 2px; }
.appt-sum__photo[hidden] { display: none; }
.appt-sum__val[hidden] { display: none; }

/* reCAPTCHA v3: badge hidden, replaced by the mandatory notice under the button. */
.grecaptcha-badge { visibility: hidden; }
.appt-captcha-note { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-grey-700); text-align: center; }
.appt-captcha-note a { text-decoration: underline; text-underline-offset: 2px; }
.appt-captcha-note[hidden] { display: none; }

/* Step 3: price row hidden when the slot carries no price. */
.appt-details__row[hidden], .appt-details__div[hidden] { display: none; }

/* "wyczyść wybór" under the three selects (shown only when something is chosen). */
.appt-form__tools { display: flex; justify-content: flex-end; margin-top: calc(-1 * var(--space-2x)); }
.appt-form__tools:has(> [hidden]) { display: none; }
.appt-form__reset { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--color-grey-700); padding: var(--space-3xs) 0; }
.appt-form__reset:hover { color: var(--color-grey-900); text-decoration: underline; text-underline-offset: 2px; }

/* Honeypot (wpo-edm-booking): off-screen, not focusable, not for assistive tech. */
.appt-hp {
	position: absolute !important;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}