/* Booking form [dv_booking] (inc/booking.php, assets/js/booking.js) and the token pages [dv_visit_confirm] /
 * [dv_visit_cancel] (assets/js/visit-token.js, at the end of this file).
 * Tokens and components come from site.css (.dv-btn, .dv-pill, .dv-note); field states follow bookly.css. */

/* /wizyta/ wraps the shortcode in its own .dv-booking card (pages_flow.py): no card inside the card. */
.dv-booking .dv-booking[data-dv-booking] { padding: 0; margin: 0; min-height: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.dv-booking[data-dv-booking] { scroll-margin-top: 96px; }

/* Until the module starts the container is empty; if it never does (blocked or failed script) the phones appear. */
.dv-bk-fallback { margin: 0; visibility: hidden; animation: dv-bk-reveal 0s 8s forwards; }
.dv-bk-noscript { margin: 0; }
.dv-bk-fallback a, .dv-bk-noscript a { color: var(--dv-coral-text); font-weight: 600; white-space: nowrap; }
@keyframes dv-bk-reveal { to { visibility: visible; } }

.dv-bk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; font-size: 15px; line-height: 1.5; color: var(--dv-ink); }
.dv-bk p { margin: 0; }
.dv-bk [hidden] { display: none !important; }
/* Long e-mail addresses and names wrap instead of widening the form. */
.dv-bk .dv-note, .dv-bk__msg, .dv-bk__aside { overflow-wrap: anywhere; }
/* Empty live regions stay in the page (so screen readers announce what appears in them later) but take no room. */
.dv-bk__msg:empty, .dv-bk__loading:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* ---------- Progress ---------- */
.dv-bk__progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.dv-bk__progress-item { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 4px solid var(--dv-border); font: 500 13px/1.3 var(--wp--preset--font-family--inter); color: var(--dv-muted); min-width: 0; }
.dv-bk__progress-num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--dv-border); font: 400 12px/1 var(--dv-mono); }
.dv-bk__progress-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-bk__progress-item.is-done { border-top-color: var(--dv-navy); color: var(--dv-navy); }
.dv-bk__progress-item.is-done .dv-bk__progress-num { border-color: var(--dv-navy); }
.dv-bk__progress-item.is-current { border-top-color: var(--dv-navy); color: var(--dv-navy); font-weight: 600; }
.dv-bk__progress-item.is-current .dv-bk__progress-num { border-color: var(--dv-navy); background: var(--dv-navy); color: #fff; }

/* ---------- Layout: steps + running summary ---------- */
.dv-bk__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.dv-bk__steps { min-width: 0; }
.dv-bk__aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 20px; border-radius: 18px; background: var(--dv-sunken); }
.dv-bk__aside .dv-mono { margin-bottom: 4px; }
.dv-bk__aside-kind { font: 700 16px/1.35 var(--dv-serif); color: var(--dv-navy); }
.dv-bk__aside-line { font-weight: 600; font-variant-numeric: tabular-nums; }
.dv-bk__aside-when { font-size: 14px; color: var(--dv-muted); }
.dv-bk__nowrap { white-space: nowrap; }
@media (min-width: 960px) {
	.dv-bk__layout { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 40px; }
	.dv-bk__steps { grid-column: 1; grid-row: 1; }
	.dv-bk__aside { grid-column: 2; grid-row: 1; position: sticky; top: 112px; padding: 22px 24px; }
}
/* On a phone the first step already shows its own price line. */
@media (max-width: 959px) {
	.dv-bk[data-step="1"] .dv-bk__aside { display: none; }
}

/* ---------- Steps and groups ---------- */
.dv-bk__fieldset { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dv-bk__legend { padding: 0; margin: 0 0 24px; }
.dv-bk__title { margin: 0; font: 700 clamp(22px, 2.4vw, 28px)/1.25 var(--dv-serif); color: var(--dv-navy); }
.dv-bk__title:focus { outline: none; }
.dv-bk__group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dv-bk__group-legend { padding: 0; margin: 0 0 12px; font: 600 12px/1.3 var(--dv-mono); letter-spacing: .5px; text-transform: uppercase; color: var(--dv-muted); }
.dv-bk__hint { font-size: 14px; color: var(--dv-muted); }
.dv-bk__hint--center { text-align: center; }

/* Real radio inputs, visually replaced by the cards, pills and chips that follow them (keyboard and screen readers keep
 * the native behaviour: Tab into the group, arrows to choose). */
.dv-bk__radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.dv-bk__card, .dv-bk__seg-item, .dv-bk__day, .dv-bk__hour { position: relative; display: block; cursor: pointer; }

/* Visit cards */
.dv-bk__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.dv-bk__card-body { position: relative; box-sizing: border-box; display: grid; gap: 4px; height: 100%; padding: 18px 52px 18px 20px; border: 1.5px solid var(--dv-border); border-radius: 18px; background: #fff; transition: border-color .15s var(--dv-ease), background-color .15s var(--dv-ease); }
.dv-bk__card-body::after { content: ""; position: absolute; top: 18px; right: 18px; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--dv-border); background: #fff; }
.dv-bk__card:hover .dv-bk__card-body { border-color: var(--dv-sky-300); }
.dv-bk__radio:checked + .dv-bk__card-body { border-color: var(--dv-navy); background: var(--dv-sky-100); }
.dv-bk__radio:checked + .dv-bk__card-body::after { border: 6px solid var(--dv-navy); }
.dv-bk__card-title { font: 700 17px/1.35 var(--dv-serif); color: var(--dv-navy); }
.dv-bk__card-note { font-size: 14px; color: var(--dv-muted); }
.dv-bk__card-price { margin-top: 10px; font: 700 22px/1 var(--dv-serif); color: var(--dv-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Persons 1–4 */
.dv-bk__seg { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-bk__seg-item .dv-pill { box-sizing: border-box; justify-content: center; min-width: 56px; min-height: 48px; font-size: 16px; font-weight: 600; }
.dv-bk__live { padding: 14px 18px; border-radius: 14px; background: var(--dv-sunken); font-weight: 600; color: var(--dv-navy); font-variant-numeric: tabular-nums; }

/* Selected / focused states shared by pills and chips */
.dv-bk__seg-item:hover .dv-pill, .dv-bk__day:hover .dv-pill, .dv-bk__hour:hover .dv-pill { border-color: var(--dv-navy); }
.dv-bk__radio:checked + .dv-pill { border-color: var(--dv-navy); background: var(--dv-navy); color: #fff; }
.dv-bk__radio:focus-visible + .dv-pill,
.dv-bk__radio:focus-visible + .dv-bk__card-body { outline: 2px solid var(--dv-coral); outline-offset: 3px; }

/* ---------- Date step ---------- */
.dv-bk__window { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; }
.dv-bk__range { flex: 1 1 auto; min-width: 0; text-align: center; font-weight: 600; color: var(--dv-navy); }
.dv-bk__shift { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 10px 16px; border: 1.5px solid var(--dv-border); border-radius: 999px; background: #fff; font: 600 14px/1.2 var(--wp--preset--font-family--inter); color: var(--dv-navy); white-space: nowrap; cursor: pointer; transition: border-color .15s var(--dv-ease); }
.dv-bk__shift:hover { border-color: var(--dv-navy); }
.dv-bk__shift[aria-disabled="true"] { opacity: .45; cursor: default; border-color: var(--dv-border); }
.dv-bk__slots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
.dv-bk__loading { font-size: 14px; color: var(--dv-muted); }
.dv-bk__loading:not(:empty)::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px; border: 2px solid var(--dv-border); border-top-color: var(--dv-navy); border-radius: 50%; animation: dv-bk-spin .8s linear infinite; }
@keyframes dv-bk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dv-bk__loading:not(:empty)::before { animation: none; } }
.dv-bk__days { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 124px), 1fr)); gap: 8px; }
.dv-bk__day-body { box-sizing: border-box; display: grid; justify-items: center; gap: 2px; width: 100%; padding: 10px 8px; border-radius: 14px; text-align: center; }
.dv-bk__day-week { font-size: 13px; font-weight: 500; color: var(--dv-muted); }
.dv-bk__day-date { font-size: 14px; font-weight: 600; color: var(--dv-navy); }
.dv-bk__radio:checked + .dv-pill .dv-bk__day-week,
.dv-bk__radio:checked + .dv-pill .dv-bk__day-date { color: #fff; }
.dv-bk__hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.dv-bk__hour .dv-pill { box-sizing: border-box; justify-content: center; width: 100%; min-height: 44px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dv-bk__step .dv-btn--sm { justify-self: start; }

/* ---------- Messages ---------- */
.dv-bk__msg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; border-radius: 14px; font-size: 14px; line-height: 1.55; }
.dv-bk__msg:focus { outline: none; }
.dv-bk__msg.is-error, .dv-bk__msg.is-info { padding: 14px 18px; }
.dv-bk__msg.is-error { border-left: 4px solid var(--dv-coral); background: var(--dv-coral-50); }
.dv-bk__msg.is-info { background: var(--dv-sunken); }
.dv-bk__msg a { color: var(--dv-coral-text); font-weight: 600; white-space: nowrap; }

/* ---------- Details step (field states as in bookly.css) ---------- */
.dv-bk__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.dv-bk__field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; min-width: 0; }
.dv-bk__field--wide { grid-column: 1 / -1; }
.dv-bk__label { font: 600 12px/1.3 var(--dv-mono); letter-spacing: .5px; text-transform: uppercase; color: var(--dv-muted); }
.dv-bk__input { box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 10px 14px; border: 1px solid var(--dv-border); border-radius: 12px; background-color: #fff; font: 400 16px/1.4 var(--wp--preset--font-family--inter); color: var(--dv-ink); box-shadow: none; }
select.dv-bk__input { appearance: none; padding-right: 42px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23002559' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat; }
.dv-bk__input:focus { outline: 2px solid var(--dv-coral); outline-offset: 2px; border-color: transparent; }
.dv-bk__input[aria-invalid="true"] { border-color: var(--dv-coral-text); background-color: #fff; }
.dv-bk__error { font-size: 13px; color: var(--dv-coral-text); }
.dv-bk__error:empty { display: none; }
.dv-bk__help { font-size: 13px; color: var(--dv-muted); }
.dv-bk__privacy a { color: var(--dv-coral-text); }
/* Bot trap: off-screen, never seen or tabbed to by people. */
.dv-bk__hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Summary step ---------- */
.dv-bk__summary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 28px; margin: 0; padding: 20px 24px; border: 1px solid var(--dv-border); border-radius: 18px; }
.dv-bk__summary dt { font: 600 12px/1.7 var(--dv-mono); letter-spacing: .5px; text-transform: uppercase; color: var(--dv-muted); }
.dv-bk__summary dd { margin: 0; font-weight: 600; color: var(--dv-navy); overflow-wrap: anywhere; }
.dv-bk__turnstile { min-height: 65px; }

/* ---------- Navigation ---------- */
.dv-bk__nav { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--dv-border); }
.dv-bk__nav .dv-btn--primary { margin-left: auto; }
.dv-bk .dv-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

@media (max-width: 640px) {
	.dv-bk { gap: 22px; }
	/* Steps on a phone: the current step takes the room for its name, the others show their number only (their names
	 * stay readable for screen readers). */
	.dv-bk__progress { display: flex; }
	.dv-bk__progress-item { flex: 0 0 44px; }
	.dv-bk__progress-item.is-current { flex: 1 1 auto; }
	.dv-bk__progress-item:not(.is-current) .dv-bk__progress-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
	.dv-bk__window { flex-wrap: wrap; }
	.dv-bk__range { order: -1; flex-basis: 100%; }
	.dv-bk__fields { grid-template-columns: minmax(0, 1fr); }
	.dv-bk__summary { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 16px 18px; }
	.dv-bk__summary dd + dt { margin-top: 12px; }
	.dv-bk__nav { flex-direction: column; }
	.dv-bk__nav .dv-btn { width: 100%; box-sizing: border-box; }
	.dv-bk__nav .dv-btn--primary { margin-left: 0; }
}

/* ---------- Token pages: confirmation (/p/<token>) and cancellation (/odwolaj-wizyte/) ---------- */
.dv-visit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; font-size: 15px; line-height: 1.5; color: var(--dv-ink); text-align: left; }
.dv-visit p { margin: 0; }
.dv-visit__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.dv-visit a:not(.dv-btn) { color: var(--dv-coral-text); font-weight: 600; white-space: nowrap; }

/* The status box: also the live region, so it keeps its place in the page and only its content changes. */
.dv-visit__live { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 20px; border-radius: 14px; overflow-wrap: anywhere; }
.dv-visit__live:empty { display: none; }
.dv-visit__live:focus { outline: none; }
.dv-visit__live.is-ok { border-left: 4px solid #1E7A4B; background: #E6F6EC; }
.dv-visit__live.is-error { border-left: 4px solid var(--dv-coral); background: var(--dv-coral-50); }
.dv-visit__live.is-info, .dv-visit__live.is-loading { background: var(--dv-sunken); }
.dv-visit__live.is-quiet { padding: 0; }
.dv-visit__live.is-loading { display: flex; align-items: center; gap: 12px; color: var(--dv-muted); }
.dv-visit__live.is-loading::before { content: ""; flex: none; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--dv-border); border-top-color: var(--dv-navy); border-radius: 50%; animation: dv-bk-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .dv-visit__live.is-loading::before { animation: none; } }
.dv-visit__title { font: 700 17px/1.35 var(--dv-serif); color: var(--dv-navy); }

/* The visit: term, and the service on the cancellation page. */
.dv-visit__details-box:empty { display: none; }
.dv-visit__details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 18px 22px; border: 1px solid var(--dv-border); border-radius: 18px; background: #fff; }
.dv-visit__row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 20px; align-items: baseline; }
.dv-visit__row dt { font: 600 12px/1.7 var(--dv-mono); letter-spacing: .5px; text-transform: uppercase; color: var(--dv-muted); }
.dv-visit__row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--dv-navy); overflow-wrap: anywhere; }

.dv-visit__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dv-visit__actions:empty, .dv-visit__hint:empty { display: none; }
.dv-visit__actions .dv-btn { flex: 1 1 auto; }
.dv-visit__actions .dv-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
/* „Odwołaj wizytę”: the destructive action is red (the brand's coral in its text shade, white on it keeps contrast above 5:1). */
.dv-visit .dv-btn--danger { background: var(--dv-coral-text); color: #fff !important; box-shadow: 0 10px 24px -6px rgba(200, 48, 74, .3); }
.dv-visit .dv-btn--danger:hover { background: #A82640; }
.dv-visit__hint { font-size: 14px; color: var(--dv-muted); }

@media (max-width: 640px) {
	.dv-visit__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.dv-visit__actions { flex-direction: column; }
	.dv-visit__actions .dv-btn { width: 100%; box-sizing: border-box; }
}