/* Four-step intake wizard — /e-wizyta/, /e-recepta/, /e-zwolnienie/.

   Self-contained: the document-service stylesheet is not loaded on these pages,
   so nothing competes with the theme. Typography and controls come from
   zp-theme (title-2, title-3, title-6, text, text-3, text-8, btn, input-text,
   input-container); shared shells come from online-care.css. Layout uses the
   theme's Bootstrap grid. */

.zp-request__back { display: inline-block; margin-bottom: 24px; }

/* Form panel -------------------------------------------------------------- */
/* The form is the page. Cap the measure so fields stay readable, but keep the
   left edge shared with the heading above it — the theme is left-aligned.
   No `margin` here: it would tie with the theme's .mt-* utilities on specificity
   and, loading later, silently win. Spacing is set in the markup. */
.zp-wizard__panel {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 860px;
  /* No outline — the card is lifted off the page by light instead. The shadow is
     offset down and to the right so it reads as a single raking light source,
     matching the mark tile's own shadow. */
  border: 0;
  box-shadow: 18px 26px 48px rgba(8, 84, 64, .13), 4px 8px 16px rgba(8, 84, 64, .06);
  /* Gradient across three palette greens, lightest at the bottom right so the
     form reads as opening up towards the submit button. */
  background: linear-gradient(150deg, #D6EFED 0%, var(--zp-third) 44%, #fff 100%);
}
.zp-wizard__title { margin-bottom: 8px; }
.zp-wizard__lead { margin-bottom: 36px; }
/* The selects flow together as one block; nothing to divide off now that the
   appointment step has moved to the next page. */
/* Kept as a step marker only; it holds no content. */
.zp-wizard__summary { margin-top: 0; }
/* The theme's .btn glow goes muddy on the panel's gradient; a neutral, softer
   shadow reads as a raised control instead of a halo. */
.zp-wizard__next.btn {
  box-shadow: 0 6px 16px rgba(8, 84, 64, .18);
  transition: box-shadow .2s ease, transform .2s ease, background .3s ease, color .3s ease;
}
.zp-wizard__next.btn:hover { box-shadow: 0 10px 22px rgba(8, 84, 64, .24); transform: translateY(-1px); }
.zp-wizard__next.btn:active { transform: translateY(0); }
/* The price appears once a service is chosen; the arrow keeps its own distance. */
.zp-wizard__next-price:empty { display: none; }
.zp-wizard__next-price { opacity: .85; }
.zp-wizard__next-arrow { margin-left: 4px; }
.zp-wizard__actions { justify-content: flex-end; }
.zp-wizard__form { margin: 0; }

/* Hero: picture and facts on the left, the booking card on the right ------ */
.zp-wizard__hero { align-items: start; }
/* Stacked, the card follows the stepper immediately and — being the raised,
   opaque element — paints over its last item. Separate the two columns. */
@media (max-width: 991px) {
  .zp-wizard__hero > div:first-child { margin-bottom: 40px; }
}
.zp-wizard__safety { margin: 20px 0 0; }
/* The card rides over the picture's edge, as in the reference. Only from xl,
   where there is gutter to spare — below that it would crowd the facts.
   Everything under the picture is inset by the same amount, so the card covers
   the photograph alone and never clips a fact card. */
/* The card sits lower than the picture beside it. */
@media (min-width: 992px) {
  .zp-wizard__column { margin-top: 60px; }
}
@media (min-width: 1200px) {
  .zp-wizard__column { position: relative; z-index: 2; margin-left: -56px; }
  /* Extra inset so the step numbers in the gutter never touch a fact card. */
  .zp-wizard__hero :is(.zp-care__facts--stack, .zp-wizard__safety) { padding-right: 100px; }
}
.zp-wizard__dots {
  display: block;
  height: 240px;
  margin-top: 48px;
  color: var(--zp-secondary);
  background-image: radial-gradient(currentColor 3px, transparent 3px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(160deg, #000 0 28%, transparent 82%);
  mask-image: linear-gradient(160deg, #000 0 28%, transparent 82%);
  opacity: .55;
}

/* Steps ------------------------------------------------------------------- */
.zp-wizard__step { padding: 0; margin: 0; border: 0; min-width: 0; }
.zp-wizard__step legend { float: none; width: 100%; padding: 0; margin: 0 0 12px; scroll-margin-top: 150px; }
.zp-wizard__step legend:focus { outline: none; }
.zp-wizard__step legend small { display: block; margin-bottom: 10px; }
.zp-wizard__guidance { margin-bottom: 28px; }

/* Card furniture, after the reference booking card ------------------------ */
/* Mark tile riding the card's top edge. */
.zp-wizard__badge {
  position: absolute;
  top: -30px;
  right: 40px;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: var(--zp-radius-soft);
  /* The mark stays as the floor: if the service's own glyph is missing from the
     media library the badge still reads, it just loses its specificity. */
  background: var(--zp-third) url("zp-mark.svg") center / 46px no-repeat;
  box-shadow: 0 8px 20px rgba(8, 84, 64, .12);
}
.zp-wizard__badge-icon { width: 52px; height: 52px; object-fit: contain; }

/* Segmented switch between an in-clinic visit and this online one.
   One thumb slides between the two halves; the labels stay put and only change
   colour. The thumb is exactly half the track's inner width, so translateX(100%)
   — 100% of its own width — lands it precisely on the second half. */
.zp-wizard__toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 6px;
  margin-bottom: 22px;
  border-radius: 100px;
  background: var(--zp-third);
  box-shadow: inset 0 2px 5px rgba(8, 84, 64, .10);
}
.zp-wizard__toggle-thumb {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(50% - 6px);
  height: calc(100% - 12px);
  border-radius: 100px;
  background: var(--zp-primary);
  box-shadow: 0 6px 16px rgba(8, 84, 64, .28);
  transform: translateX(0);
  transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}
.zp-wizard__toggle[data-active="online"] .zp-wizard__toggle-thumb { transform: translateX(100%); }
.zp-wizard__toggle-option {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: auto;
  min-height: 54px;
  padding: 8px 16px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--zp-primary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .28s ease;
}
.zp-wizard__toggle-option::after { display: none; }
.zp-wizard__toggle-option.is-active { color: #fff; }
/* No ring on the control itself — the focused half is shown by a soft halo on
   the whole track, which does not fight the thumb. */
.zp-care .zp-wizard__toggle-option:focus,
.zp-care .zp-wizard__toggle-option:focus-visible { outline: none; }
.zp-wizard__toggle:has(.zp-wizard__toggle-option:focus-visible) {
  box-shadow: inset 0 2px 5px rgba(8, 84, 64, .10), 0 0 0 4px rgba(83, 192, 99, .35);
}
@media (prefers-reduced-motion: reduce) {
  .zp-wizard__toggle-thumb { transition: none; }
}

/* Select and date controls: icon left, chevron right, no native arrow. */
.zp-request__control { position: relative; }
.zp-request__control-icon,
.zp-request__control-chevron {
  position: absolute;
  top: 50%;
  /* The theme gives .input-text `position: relative`, so the field is a
     positioned element too and DOM order decides which of the two paints on top.
     The icon sits BEFORE the input and was therefore covered by its white
     background — every control kept the 56px indent with nothing in it. The
     chevron, coming after, was visible all along, which is why only half the
     furniture showed. */
  z-index: 1;
  display: flex;
  transform: translateY(-50%);
  pointer-events: none;
}
.zp-request__control-icon { left: 20px; color: var(--zp-secondary); }
.zp-request__control-chevron { right: 20px; color: var(--zp-primary); }
.zp-request__control .input-text {
  height: 64px;
  padding: 0 52px 0 56px;
  border: 2px solid var(--zp-secondary);
  border-radius: var(--zp-radius-control);
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
.zp-request__control .input-text:focus { border-color: var(--zp-primary); }
/* The dependent select stays inert until the one above it is answered. */
.zp-request__control .input-text:disabled {
  border-color: transparent;
  background: rgba(255, 255, 255, .45);
  cursor: not-allowed;
}
.zp-request__control:has(.input-text:disabled) :is(.zp-request__control-icon, .zp-request__control-chevron) { opacity: .4; }
.zp-request__control .input-text[type=date] { padding-right: 20px; }

/* One full-width primary action closes the card. Shape, radius and glow are the
   theme's own .btn — the same as every other primary call to action on the site;
   only the width and the inner spacing are ours. */
.zp-wizard__next.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: none;
  min-height: 64px;
  height: auto;
  margin-top: 8px;
}
.zp-wizard__next.btn:hover { transform: translateY(-1px); }
.zp-wizard__next.btn:active { transform: translateY(0); }
/* The price appears once a service is chosen; the arrow keeps its own distance. */
.zp-wizard__next-price:empty { display: none; }
.zp-wizard__next-price { opacity: .85; }
.zp-wizard__next-arrow { margin-left: 4px; }

/* Reassurance strip closing the card. */
.zp-wizard__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  list-style: none;
  margin: 32px 0 0;
  padding: 22px 26px;
  border-radius: var(--zp-radius-soft);
  background: rgba(255, 255, 255, .55);
}
.zp-wizard__trust li { display: flex; align-items: center; gap: 12px; }
.zp-wizard__trust-icon { display: flex; color: var(--zp-secondary); }

/* Fields — the theme's .input-container / .input-text / label rhythm -------- */
.zp-request__field { padding: 0; margin: 0 0 24px; border: 0; min-width: 0; }
.zp-request__field > label,
.zp-request__field > legend { display: block; margin-bottom: 8px; padding-left: 16px; }
.zp-wizard :is(input.input-text, select.input-text, textarea.input-text) { background: #fff; }
.zp-wizard textarea.input-text { height: 140px; resize: vertical; }
.zp-wizard [aria-invalid=true].input-text { border-color: #a32d26; }
.zp-wizard__counter { display: block; text-align: right; margin-top: 8px; }

/* Two fields on one line — the sick note's "from"/"to" pair. Stacks on narrow
   screens, where two date inputs side by side are unusable. */
.zp-wizard__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.zp-wizard__row > .zp-request__field { min-width: 0; }
@media (max-width: 575px) {
  .zp-wizard__row { grid-template-columns: minmax(0, 1fr); }
}

/* Employer NIP: the verdict under the field. The found state is the only one
   that confirms something, so it takes the brand green and a tick; the rest
   reuse the shared error ink already used by .zp-request__error. */
.zp-request__nip { margin: 8px 0 0; padding-left: 16px; }
.zp-request__nip[hidden] { display: none; }
.zp-request__nip.is-loading,
.zp-request__nip.is-note { opacity: .7; }
.zp-request__nip.is-found { color: var(--zp-primary); }
.zp-request__nip.is-found::before { content: "\2713\00a0"; color: var(--zp-secondary); }
.zp-request__nip.is-error { color: #a32d26; }
.zp-wizard .input-text.is-nip-ok { border-color: var(--zp-primary); }
.zp-wizard .input-text.is-nip-bad { border-color: #a32d26; }

/* Choice cards ------------------------------------------------------------ */
.zp-wizard__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.zp-wizard__choices:has([name=contact_method]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zp-wizard__choice { position: relative; display: block; margin: 0; min-width: 0; cursor: pointer; }
.zp-wizard__choice input { position: absolute; top: 20px; left: 16px; width: 20px; height: 20px; accent-color: var(--zp-primary); }
.zp-wizard__choice > span {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 52px 16px 20px;
  border: 2px solid var(--zp-secondary);
  border-radius: var(--zp-radius);
  background: #fff;
}
.zp-wizard__choice input:checked + span { border-color: var(--zp-primary); box-shadow: inset 0 0 0 1px var(--zp-primary); }
.zp-wizard__choice input:focus-visible + span { outline: 3px solid var(--zp-primary); outline-offset: 3px; }
/* The price closes the card, pushed to its foot so two cards of unequal text
   length still line their figures up. */
.zp-wizard__choice-price { margin-top: auto; padding-top: 6px; color: var(--zp-primary); }

/* Consent ----------------------------------------------------------------- */
/* A real control rather than the browser's, so it can carry checked/hover/
   invalid states and a 44px row to press. Centred rather than nudged by a
   magic offset, which held only for one line height. The tick is a data-URI
   background using %23fff — no hex literal, and no reliance on ::after, which
   is unreliable on a replaced input. */
/* Scoped through the wrapper on purpose: `.zp-request__field > label` above
   (0,1,1) sets display:block and beats a lone class, which is why this row used
   to render as a bare box with the sentence jammed against it — the flex never
   applied at all. */
.zp-request__field > .zp-request__consent {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-height: 44px;
  padding: 4px 0;
}
.zp-request__consent input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--zp-secondary);
  border-radius: var(--zp-radius);
  background: #fff no-repeat center;
  background-size: 16px 16px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.zp-request__consent:hover input:not(:checked) { border-color: var(--zp-primary); }
.zp-request__consent input:checked {
  background-color: var(--zp-primary);
  border-color: var(--zp-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E");
}
.zp-request__consent input[aria-invalid=true] { border-color: #a32d26; }

/* Help, errors, status ---------------------------------------------------- */
.zp-request__help { margin: 8px 0 0; padding-left: 16px; }
.zp-request__error { margin: 8px 0 0; padding-left: 16px; color: #a32d26; }
.zp-request__errors {
  margin: 0 0 24px;
  padding: 20px;
  border: 2px solid #a32d26;
  border-radius: var(--zp-radius);
  background: #fff4f2;
  color: #81241f;
}
.zp-request__errors ul { margin: 12px 0 0; padding-left: 20px; }
.zp-request__status { margin: 14px 0 0; }

/* Actions ----------------------------------------------------------------- */
.zp-wizard__actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 28px 0 0; }
.zp-wizard__actions > button:not(.btn),
.zp-wizard__review button {
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  border: 0;
  background: transparent;
  padding: 10px 0;
  cursor: pointer;
}
.zp-wizard__actions > .btn { margin-left: auto; }
.zp-wizard [data-wizard-controls] { display: none; }
.zp-wizard .is-enhanced [data-wizard-controls] { display: flex; }

/* Review ------------------------------------------------------------------ */
.zp-wizard__review section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  padding: 20px 0;
  border-bottom: 2px solid var(--zp-mint);
}
.zp-wizard__review h3 { align-self: center; margin: 0; }
.zp-wizard__review dl { grid-column: 1 / -1; margin: 0; }
.zp-wizard__review dt { margin-top: 14px; }
.zp-wizard__review dd { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

#formularz-konsultacji { scroll-margin-top: 150px; }

@media (max-width: 991px) {
  .zp-wizard .zp-request__submit { width: 100%; }
  .zp-wizard__actions > .btn { margin-left: 0; }
}
@media (max-width: 575px) {
  .zp-wizard__progress { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .zp-wizard__progress li { flex-direction: row; align-items: center; }
  .zp-wizard__progress span { flex: 0 0 28px; width: 28px; height: 28px; }
  .zp-wizard__choices,
  .zp-wizard__choices:has([name=contact_method]) { grid-template-columns: minmax(0, 1fr); }
  .zp-wizard__choice > span { padding: 16px 16px 16px 48px; }
  .zp-wizard__choice input { top: 19px; }
  .zp-wizard__review section { grid-template-columns: minmax(0, 1fr); }
}

/* Modal picker replacing the native select ------------------------------- */
/* The <select> stays in the DOM and keeps owning the value; the button and the
   dialog only drive it, so submission and the no-JS path are untouched. */
.zp-request__control.is-picker .input-text { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.zp-request__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 0 52px 0 56px;
  border: 2px solid var(--zp-secondary);
  border-radius: var(--zp-radius-control);
  background: #fff;
  color: var(--zp-primary);
  text-align: left;
  cursor: pointer;
}
.zp-request__trigger::after { display: none; }
.zp-request__trigger:disabled { border-color: transparent; background: rgba(255, 255, 255, .45); cursor: not-allowed; }
.zp-request__trigger.is-empty { opacity: .75; }

.zp-picker { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; }
.zp-picker[hidden] { display: none; }
.zp-picker__backdrop { position: absolute; inset: 0; background: rgba(8, 84, 64, .45); backdrop-filter: blur(4px); }
.zp-picker__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: min(80vh, 720px);
  border-radius: var(--zp-radius-soft);
  background: #fff;
  box-shadow: 0 24px 60px rgba(8, 84, 64, .28);
  overflow: hidden;
}
.zp-picker__head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 2px solid var(--zp-third);
}
.zp-picker__back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--zp-primary);
  cursor: pointer;
}
.zp-picker__back::after { display: none; }
.zp-picker__back:hover { background: var(--zp-third); }
.zp-picker__title { margin: 0; text-align: center; }
.zp-picker__body { overflow-y: auto; padding: 20px; }
.zp-picker__search { position: relative; display: block; margin-bottom: 22px; }
.zp-picker__search svg { position: absolute; top: 50%; left: 18px; transform: translateY(-50%); color: var(--zp-secondary); }
.zp-picker__search input {
  width: 100%;
  min-height: 56px;
  padding: 0 18px 0 52px;
  border: 2px solid var(--zp-secondary);
  border-radius: var(--zp-radius-control);
  background: #fff;
  color: var(--zp-primary);
  font: inherit;
}
.zp-picker__group { margin: 0 0 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .5; }
.zp-picker__group + .zp-picker__group { margin-top: 20px; }
.zp-picker__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.zp-picker__tile {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 20px 12px;
  border: 0;
  border-radius: var(--zp-radius-control);
  background: var(--zp-third);
  color: var(--zp-primary);
  text-align: center;
  cursor: pointer;
}
.zp-picker__tile::after { display: none; }
.zp-picker__tile:hover { background: var(--zp-mint); }
.zp-picker__tile img, .zp-picker__tile .zp-picker__mark { width: 38px; height: 38px; object-fit: contain; }
.zp-picker__list { list-style: none; margin: 0; padding: 0; }
.zp-picker__option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--zp-radius-control);
  background: transparent;
  color: var(--zp-primary);
  text-align: left;
  cursor: pointer;
}
.zp-picker__option::after { display: none; }
.zp-picker__option:hover, .zp-picker__option:focus-visible { background: var(--zp-third); }
.zp-picker__option img, .zp-picker__option .zp-picker__mark { flex: 0 0 26px; width: 26px; height: 26px; object-fit: contain; }
.zp-picker__mark { display: grid; place-items: center; color: var(--zp-secondary); }
.zp-picker__empty { padding: 20px 16px; opacity: .6; }
@media (max-width: 575px) {
  .zp-picker { padding: 12px; }
  .zp-picker__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* E-visit slot picker (online-slot-picker.js, ported from Mogilska-Med). Layout and
   palette only — type comes from the theme classes the script puts on each node. */
.zp-slotpick [hidden] { display: none !important; }
.zp-slotpick__sublabel { margin-bottom: 12px; }
.zp-slotpick__near { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zp-slotpick__slot {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 6px; border: 2px solid var(--zp-third); border-radius: var(--zp-radius-control);
  background: #fff; color: var(--zp-primary); cursor: pointer;
}
.zp-slotpick__slot:hover { border-color: var(--zp-secondary); }
.zp-slotpick__slot.is-selected { background: var(--zp-primary); border-color: var(--zp-primary); color: #fff; }
.zp-slotpick__slot--near { flex-direction: column; gap: 2px; min-height: 60px; }
.zp-slotpick__more {
  display: block; width: 100%; margin-top: 12px; padding: 10px; border: 2px dashed var(--zp-secondary);
  border-radius: var(--zp-radius-control); background: transparent; color: var(--zp-primary); cursor: pointer;
}
.zp-slotpick__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.zp-slotpick__arrow {
  width: 36px; height: 36px; border: 2px solid var(--zp-third); border-radius: 50%;
  background: #fff; color: var(--zp-primary); cursor: pointer;
}
.zp-slotpick__arrow:disabled { opacity: .35; cursor: not-allowed; }
.zp-slotpick__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.zp-slotpick__dayhead { display: flex; flex-direction: column; align-items: center; margin-bottom: 6px; }
.zp-slotpick__slots { display: flex; flex-direction: column; gap: 6px; }
.zp-slotpick__slots .zp-slotpick__slot { width: 100%; padding: 6px 2px; }
.zp-slotpick__none { text-align: center; opacity: .5; }
.zp-slotpick__msg { margin-top: 12px; opacity: .8; }
.zp-slotpick__picked { margin-top: 14px; }
@media (max-width: 575px) {
  .zp-slotpick__near { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-slotpick__grid { grid-template-columns: repeat(7, minmax(44px, 1fr)); overflow-x: auto; }
}