/* initace/booking-wizard — layout hooks not covered by preview.html (§2.7:
   plugin CSS holds only ir-*/if-* rules; component look comes from the
   theme's components.css). Every value falls back so the block renders
   sanely under the legacy theme during parallel work. */

.ir-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ir-wizard .cal .days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--space-2, 0.5rem);
}

.ir-wizard .hours {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-2, 0.5rem);
}

.ir-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 0.5rem);
	align-items: center;
}

.ir-cancel-dialog {
	border: 1px solid var(--color-line, #ccc);
	border-radius: var(--radius-lg, 12px);
	padding: var(--space-4, 1rem);
}

.ir-cancel-dialog::backdrop {
	background: rgba(0, 0, 0, 0.4);
}

.ir-cancel-noscript {
	margin-top: var(--space-2, 0.5rem);
}

@media (max-width: 480px) {
	.ir-wizard .hours {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* In-place wizard: screen-reader-only live region, loading skeleton, and the
   theme's grid-based .notice made to hold a plain paragraph. */
.ir-sr,
.ir-wizard .visually-hidden,
.wp-block-initace-booking-card .visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.wp-block-initace-booking-wizard .notice,
.ir-modal .notice {
	display: block;
}

.ir-step-heading {
	font-size: var(--step-2, 1.5rem);
	margin: var(--space-4, 1rem) 0 var(--space-3, 0.75rem);
}

.ir-skeleton {
	display: grid;
	gap: var(--space-2, 0.5rem);
}

.ir-skeleton--days {
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ir-skeleton--hours {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ir-skeleton--form {
	grid-template-columns: minmax(0, 1fr);
}

.ir-skeleton i {
	display: block;
	min-height: 44px;
	background: var(--paper-2, #eee);
	border: 1px solid var(--line, #ddd);
	border-radius: var(--radius, 6px);
	animation: ir-pulse 1.2s ease-in-out infinite;
}

.ir-skeleton--form i {
	min-height: 56px;
}

@keyframes ir-pulse {
	50% {
		opacity: 0.45;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ir-skeleton i {
		animation: none;
	}
}

@media (max-width: 480px) {
	.ir-skeleton--hours {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The step indicator is an ordered list; lay it out as a row of steps. */
.ir-wizard ol.steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 0.5rem) var(--space-5, 1.5rem);
	list-style: none;
	margin: 0 0 var(--space-3, 0.75rem);
	padding: 0;
}

.ir-wizard ol.steps li {
	border-top: 4px solid var(--line, #ddd);
	padding-top: var(--space-1, 0.25rem);
}

.ir-wizard ol.steps li.is-done {
	border-top-color: var(--ink, #000);
}

.ir-wizard ol.steps li.is-current {
	border-top-color: var(--brand, #06c);
	font-weight: var(--weight-semibold, 600);
}

/* The theme styles .day/.hour by aria-pressed/aria-disabled; the wizard uses
   real radio inputs, so map checked/disabled/focus onto the same look. */
.ir-wizard .day:has(input:checked),
.ir-wizard .hour:has(input:checked) {
	background: var(--brand, #06c);
	border-color: var(--brand, #06c);
	color: var(--on-brand, #fff);
	font-weight: var(--weight-semibold, 600);
}

.ir-wizard .day.is-disabled {
	cursor: not-allowed;
	color: var(--color-text-label, #777);
	background-color: var(--paper-2, #eee);
	background-image: repeating-linear-gradient(45deg, var(--line, #ddd) 0 1px, transparent 1px 7px);
}

.ir-wizard .day:has(input:focus-visible),
.ir-wizard .hour:has(input:focus-visible) {
	outline: 3px solid var(--brand-text, currentColor);
	outline-offset: 2px;
}

/* Calendar and hours side by side from 1100 px, stacked below; the data form
   follows underneath once an hour is chosen. */
.ir-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-5, 1.5rem);
	align-items: start;
}

.ir-pane--form {
	margin-top: var(--space-5, 1.5rem);
	scroll-margin-top: var(--space-6, 2rem);
}

.ir-pane--hint {
	min-height: 8rem;
	display: grid;
	place-items: center;
	border: 1px dashed var(--line, #ddd);
	border-radius: var(--radius-lg, 12px);
	padding: var(--space-4, 1rem);
	text-align: center;
}

.ir-pane .ir-step-heading {
	margin-top: 0;
}

.ir-pane .ir-skeleton--hours {
	margin-top: var(--space-4, 1rem);
}

@media (min-width: 1100px) {
	.ir-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ir-js .ir-next,
html.js .wp-block-initace-booking-wizard .ir-next { /* html.js is set before first paint: no shift when the script arrives */
	display: none;
}

@media (max-width: 1099px) {
	.ir-pane--hint {
		display: none;
	}
}

/* Right column: part of the day, then the hours. */
.ir-col {
	display: grid;
	gap: var(--space-5, 1.5rem);
	align-content: start;
	min-width: 0;
}

.ir-bands {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-2, 0.5rem);
	margin-bottom: var(--space-3, 0.75rem);
}

.ir-bands .chip-radio input:disabled + span {
	color: var(--color-text-label, #777);
	background-color: var(--paper-2, #eee);
	background-image: repeating-linear-gradient(45deg, var(--line, #ddd) 0 1px, transparent 1px 7px);
}

.ir-bands .chip-radio input:focus-visible + span {
	outline: 3px solid var(--brand-text, currentColor);
	outline-offset: 2px;
}

.ir-skeleton--bands {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 480px) {
	.ir-bands {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Form rows: two columns where the fields are short. */
.ir-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3, 0.75rem) var(--space-4, 1rem);
}

@media (max-width: 560px) {
	.ir-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ir-view {
	position: relative;
}

.ir-summary {
	display: none;
}

/* The booking dialog opened from cards and links on other pages: wider than
   tall, a summary card on the left and only the current step on the right,
   so every step fits a laptop screen without scrolling. The width is fixed,
   it never changes between steps. */
.ir-modal {
	width: min(64rem, calc(100% - 2rem));
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	padding: 0;
	border: 1px solid var(--line, #ccc);
	border-radius: var(--radius-lg, 12px);
	background: var(--paper, #fff);
	color: var(--ink, #111);
	overflow: auto;
}

.ir-modal::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.ir-modal__bar {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3, 0.75rem);
	padding: var(--space-2, 0.5rem) var(--space-5, 1.5rem);
	border-bottom: 1px solid var(--line, #ccc);
	background: var(--paper, #fff);
}

.ir-modal__bar h2 {
	margin: 0;
	font-size: var(--step-1, 1.25rem);
}

.ir-modal__body {
	padding: var(--space-4, 1rem) var(--space-5, 1.5rem) var(--space-5, 1.5rem);
}

.ir-modal .ir-step-heading {
	font-size: var(--step-1, 1.25rem);
	margin: 0 0 var(--space-3, 0.75rem);
}

.ir-modal .ir-wizard {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
}

.ir-modal .ir-wizard > :not(.ir-summary) {
	margin-bottom: var(--space-3, 0.75rem);
}

.ir-modal .ir-summary {
	display: block;
	border: 1px solid var(--line, #ccc);
	border-radius: var(--radius-lg, 12px);
	background: var(--paper-2, #f4f4f4);
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
	margin-bottom: var(--space-3, 0.75rem);
}

.ir-summary__list {
	margin: 0 0 var(--space-3, 0.75rem);
	display: grid;
	gap: var(--space-2, 0.5rem);
}

.ir-summary__list dt {
	font-size: var(--step--1, 0.85rem);
	color: var(--color-text-muted, #555);
}

.ir-summary__list dd {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-3, 0.75rem);
	align-items: baseline;
	justify-content: space-between;
}

.ir-summary p {
	margin: 0;
}

.ir-modal .ir-note,
.ir-modal .ir-progress > p,
.ir-modal .ir-when {
	display: none;
}

.ir-modal .ir-wizard .steps {
	margin-bottom: 0;
}

.ir-modal .ir-split,
.ir-modal .ir-col {
	display: block;
}

/* Only the current step is shown; the summary card holds the earlier choices. */
.ir-modal .ir-wizard .ir-pane {
	display: none;
}

.ir-modal .ir-wizard[data-ir-current="days"] [data-ir-pane="days"],
.ir-modal .ir-wizard[data-ir-current="band"] [data-ir-pane="band"],
.ir-modal .ir-wizard[data-ir-current="hours"] [data-ir-pane="hours"],
.ir-modal .ir-wizard[data-ir-current="form"] [data-ir-pane="form"] {
	display: block;
	margin-top: 0;
}

.ir-modal .ir-wizard .hours {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ir-modal .ir-wizard .form {
	gap: var(--space-3, 0.75rem);
}

.ir-modal .ir-wizard .form .field textarea {
	min-height: 0;
}

.ir-modal .ir-status,
.ir-modal .ir-confirm {
	max-width: 36rem;
}

.ir-modal .ir-status h2,
.ir-modal .ir-confirm h2 {
	font-size: var(--step-2, 1.5rem);
}

.ir-modal-open {
	overflow: hidden;
}

@media (min-width: 900px) {
	.ir-modal .ir-wizard {
		grid-template-columns: 15rem minmax(0, 1fr);
		column-gap: var(--space-6, 2rem);
		align-items: start;
	}

	.ir-modal .ir-wizard > .ir-summary {
		grid-column: 1;
		grid-row: 1 / span 12;
	}

	.ir-modal .ir-wizard > :not(.ir-summary) {
		grid-column: 2;
	}

	.ir-modal .ir-view {
		min-height: 22rem;
	}
}

@media (max-width: 640px) {
	.ir-modal {
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		margin: 0;
		border: 0;
	}

	.ir-modal__body {
		padding: var(--space-4, 1rem);
	}

	.ir-modal .ir-wizard .hours {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* With JavaScript the calendar, the bands and the hours are their own way back. */
.ir-js .ir-pane form a.btn--ghost,
html.js .wp-block-initace-booking-wizard .ir-pane form a.btn--ghost {
	display: none;
}

.ir-modal .ir-status h2,
.ir-modal .ir-confirm h2 {
	font-size: var(--step-2, 1.5rem);
}

/* Dialog: the summary card already shows the progress and the way back. */
.ir-modal .ir-progress,
.ir-modal .ir-pane--form > a.btn--ghost {
	display: none;
}

.ir-modal .ir-wizard .form {
	max-width: none;
}

/* step headings get focus programmatically (a11y announcement); they are not controls, so no ring */
.ir-step-heading:focus { outline: none; }