/**
 * Multi-resource reservation selection.
 *
 * All controls are explicitly styled so the workflow remains consistent
 * across classic and block themes.
 */

/* stylelint-disable no-descending-specificity */

.zsi-selection-panel,
.zsi-selection-panel *,
.zsi-selection-toast,
.zsi-selection-toast * {
	box-sizing: border-box;
}

.zsi-selection-toggle {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9998;
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 1px solid var(--dr-primary, #1e4a5f);
	border-radius: 999px;
	background: var(--dr-primary, #1e4a5f);
	box-shadow: 0 12px 32px -14px rgba(20, 30, 45, 0.55);
	color: var(--dr-on-primary, #fff);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.zsi-selection-toggle:hover {
	border-color: var(--dr-primary-hover, #163a4b);
	background: var(--dr-primary-hover, #163a4b);
	color: var(--dr-on-primary, #fff);
}

.zsi-selection-toggle span {
	display: inline-grid;
	min-width: 24px;
	min-height: 24px;
	margin-left: 8px;
	place-items: center;
	border-radius: 999px;
	background: var(--dr-surface, #fff);
	color: var(--dr-primary, #1e4a5f);
	font-size: 12px;
}

.zsi-selection-panel {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 9999;
	width: min(100%, 560px);
	overflow: auto;
	background: var(--dr-surface, #fff);
	box-shadow: -12px 0 42px rgba(20, 30, 45, 0.22);
	color: var(--dr-text, #3c4655);
}

.zsi-selection-inline {
	position: static;
	width: min(100% - 24px, 920px);
	max-width: none;
	margin: 32px auto 64px;
	overflow: visible;
	border: 1px solid var(--dr-line, #e6e9ee);
	border-radius: 22px;
	box-shadow: 0 24px 70px -42px rgba(20, 30, 45, 0.38);
}

.zsi-selection-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	background: var(--dr-primary, #1e4a5f);
	color: var(--dr-on-primary, #fff);
}

.zsi-selection-inline .zsi-selection-header {
	position: static;
	padding: 28px 32px 22px;
	border-bottom: 1px solid var(--dr-line, #e6e9ee);
	border-radius: 22px 22px 0 0;
	background: transparent;
}

.zsi-selection-header h2 {
	margin: 0;
	color: inherit;
	font-size: clamp(1.35rem, 3vw, 1.85rem);
	line-height: 1.2;
	letter-spacing: -0.025em;
}

.zsi-selection-inline .zsi-selection-header h2 {
	color: var(--dr-ink, #1a2231);
}

.zsi-selection-close {
	display: inline-grid;
	width: 42px;
	height: 42px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.zsi-selection-close:hover {
	background: rgba(255, 255, 255, 0.14);
}

.zsi-selection-content {
	padding: 30px 32px 36px;
}

.zsi-selection-progress {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	font-size: 0.78rem;
	font-weight: 650;
	text-align: center;
}

.zsi-selection-progress::before {
	position: absolute;
	top: 17px;
	right: 12.5%;
	left: 12.5%;
	height: 2px;
	background: var(--dr-line, #e6e9ee);
	content: "";
}

.zsi-selection-progress li {
	position: relative;
	z-index: 1;
	padding: 0 4px;
	color: var(--dr-muted, #6b7686);
}

.zsi-selection-progress span {
	display: grid;
	width: 36px;
	height: 36px;
	margin: 0 auto 7px;
	place-items: center;
	border: 2px solid var(--dr-line, #e6e9ee);
	border-radius: 50%;
	background: var(--dr-surface, #fff);
	color: var(--dr-muted, #6b7686);
}

.zsi-selection-progress .is-active,
.zsi-selection-progress .is-complete {
	color: var(--dr-primary, #1e4a5f);
	font-weight: 750;
}

.zsi-selection-progress .is-active span,
.zsi-selection-progress .is-complete span {
	border-color: var(--dr-primary, #1e4a5f);
	background: var(--dr-primary, #1e4a5f);
	color: var(--dr-on-primary, #fff);
}

[data-selection-empty] {
	margin: 0;
	padding: 24px;
	border: 1px dashed var(--dr-line-strong, #d4d9e0);
	border-radius: 14px;
	background: var(--dr-panel, #f5f6f8);
	text-align: center;
}

[data-selection-empty] a {
	display: inline-block;
	margin-left: 6px;
	color: var(--dr-primary, #1e4a5f);
	font-weight: 700;
}

.zsi-selection-items {
	display: grid;
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.zsi-selection-item {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border: 1px solid var(--dr-line, #e6e9ee);
	border-radius: 14px;
	background: var(--dr-surface, #fff);
	box-shadow: 0 8px 24px -22px rgba(20, 30, 45, 0.5);
}

.zsi-selection-item.is-available {
	border-color: #9ed4aa;
	background: #f1fbf4;
}

.zsi-selection-item.is-unavailable {
	border-color: #e2a7a2;
	background: #fff3f2;
}

.zsi-selection-item-info {
	display: flex;
	min-width: 0;
	gap: 14px;
	align-items: center;
}

.zsi-selection-item-info img {
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
	border-radius: 10px;
	background: var(--dr-panel, #f5f6f8);
	object-fit: cover;
}

.zsi-selection-item-info a {
	color: var(--dr-ink, #1a2231);
	font-weight: 750;
	text-decoration: none;
}

.zsi-selection-item-info p {
	margin: 4px 0 0;
	font-size: 0.875rem;
}

.zsi-selection-item-info small {
	display: block;
	margin-top: 3px;
	color: var(--dr-muted, #6b7686);
}

.zsi-selection-item-controls {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
	align-items: center;
}

.zsi-selection-item-controls input {
	width: 72px;
}

.zsi-selection-item-controls input,
.zsi-selection-period input,
.zsi-selection-customer input:not([type="checkbox"]),
.zsi-selection-customer textarea {
	min-height: 44px;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid var(--dr-line-strong, #d4d9e0);
	border-radius: 9px;
	background: var(--dr-surface, #fff);
	color: var(--dr-ink, #1a2231);
	font: inherit;
	line-height: 1.35;
}

.zsi-selection-period input,
.zsi-selection-customer input:not([type="checkbox"]),
.zsi-selection-customer textarea {
	width: 100%;
}

.zsi-selection-customer textarea {
	min-height: 104px;
	resize: vertical;
}

.zsi-selection-item-controls input:focus,
.zsi-selection-period input:focus,
.zsi-selection-customer input:focus,
.zsi-selection-customer textarea:focus {
	border-color: var(--dr-primary, #1e4a5f);
	outline: 0;
	box-shadow: 0 0 0 3px var(--dr-primary-tint, #eaf1f3);
}

.zsi-selection-item-controls button,
[data-selection-check],
.zsi-selection-customer > button[type="submit"],
.zsi-selection-suggestions button,
.zsi-selection-toast .button {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border: 1px solid var(--dr-primary, #1e4a5f);
	border-radius: 9px;
	background: var(--dr-primary, #1e4a5f);
	color: var(--dr-on-primary, #fff);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.zsi-selection-item-controls button {
	min-width: 44px;
	padding: 8px;
	border-color: var(--dr-line-strong, #d4d9e0);
	background: var(--dr-surface, #fff);
	color: #9a2b2c;
	font-size: 1.2rem;
}

.zsi-selection-item-controls button:hover,
.zsi-selection-toast [data-selection-toast-close]:hover {
	background: var(--dr-panel, #f5f6f8);
}

[data-selection-check]:hover,
.zsi-selection-customer > button[type="submit"]:hover,
.zsi-selection-suggestions button:hover,
.zsi-selection-toast [data-selection-toast-view]:hover {
	border-color: var(--dr-primary-hover, #163a4b);
	background: var(--dr-primary-hover, #163a4b);
	color: var(--dr-on-primary, #fff);
}

.zsi-selection-period,
.zsi-selection-customer {
	margin-top: 24px;
	padding: 24px;
	border: 1px solid var(--dr-line, #e6e9ee);
	border-radius: 16px;
	background: var(--dr-panel, #f5f6f8);
}

.zsi-selection-period h3,
.zsi-selection-customer h3,
.zsi-selection-review h3 {
	margin: 0 0 18px;
	color: var(--dr-ink, #1a2231);
	font-size: 1.2rem;
	line-height: 1.3;
}

.zsi-selection-period label,
.zsi-selection-customer > label {
	display: grid;
	gap: 7px;
	margin: 0;
	color: var(--dr-text, #3c4655);
	font-size: 0.84rem;
	font-weight: 700;
}

.zsi-selection-period [data-selection-day-fields],
.zsi-selection-period [data-selection-time-fields] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.zsi-selection-calendar {
	grid-column: 1 / -1;
	padding: 20px;
	border: 1px solid var(--dr-line, #e6e9ee);
	border-radius: 14px;
	background: var(--dr-surface, #fff);
}

.zsi-selection-calendar-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

/*
 * No `text-transform: capitalize` here (WP-17): it was the whole reason this
 * calendar said "Červenec 2026" where the single-resource one said "červenec
 * 2026" for the same month. Czech month names are lowercase, and `Intl`
 * already returns the form the locale wants.
 */
.zsi-selection-calendar-toolbar strong {
	color: var(--dr-ink, #1a2231);
	font-size: 1.05rem;
}

.zsi-selection-calendar-toolbar button {
	min-width: 42px;
	min-height: 42px;
	padding: 0;
	border: 1px solid var(--dr-line-strong, #d4d9e0);
	border-radius: 9px;
	background: var(--dr-surface, #fff);
	color: var(--dr-primary, #1e4a5f);
	font: inherit;
	cursor: pointer;
}

.zsi-selection-calendar-weekdays,
.zsi-selection-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(32px, 1fr));
	gap: 5px;
	text-align: center;
}

.zsi-selection-calendar-weekdays {
	margin-bottom: 6px;
	color: var(--dr-muted, #6b7686);
	font-size: 0.76rem;
	font-weight: 700;
	/* "PO ÚT ST", as the single-resource calendar has always shown them. */
	text-transform: uppercase;
}

.zsi-selection-calendar-day {
	min-height: 42px;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: var(--dr-panel, #f5f6f8);
	color: var(--dr-muted, #6b7686);
	font: inherit;
	font-weight: 650;
}

.zsi-selection-calendar-day.is-available {
	background: #e9f7ec;
	color: #146c2e;
	cursor: pointer;
}

.zsi-selection-calendar-day.is-available:hover {
	box-shadow: inset 0 0 0 2px #268545;
}

.zsi-selection-calendar-day.is-unavailable {
	background: #fff3f2;
	color: #9a2b2c;
}

.zsi-selection-calendar-day.is-in-range {
	background: var(--dr-primary-tint, #eaf1f3);
	color: var(--dr-primary, #1e4a5f);
}

.zsi-selection-calendar-day.is-range-start,
.zsi-selection-calendar-day.is-range-end {
	background: var(--dr-primary, #1e4a5f);
	color: var(--dr-on-primary, #fff);
}

.zsi-selection-calendar p {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--dr-line, #e6e9ee);
	color: var(--dr-muted, #6b7686);
	font-size: 0.84rem;
	line-height: 1.5;
}

.zsi-selection-native-dates {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.is-calendar-enhanced .zsi-selection-native-dates {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

[data-selection-check] {
	margin-top: 16px;
}

.zsi-selection-message,
.zsi-selection-error {
	min-height: 1.5em;
	font-weight: 650;
}

.zsi-selection-message {
	margin: 12px 0 0;
}

.zsi-selection-error {
	color: #9a2b2c;
}

.zsi-selection-suggestions {
	margin: 16px 0 0;
	padding: 16px;
	border: 1px solid var(--dr-line, #e6e9ee);
	border-radius: 12px;
	background: var(--dr-surface, #fff);
}

.zsi-selection-suggestions h4 {
	margin: 0 0 12px;
}

.zsi-selection-suggestions [data-selection-suggestion-list] {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.zsi-selection-customer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.zsi-selection-customer > h3,
.zsi-selection-field-wide,
.zsi-selection-consent,
.zsi-selection-review,
.zsi-selection-customer > button,
.zsi-selection-customer > .zsi-selection-error {
	grid-column: 1 / -1;
}

/* The honeypot, using the same class and clip technique as the single-resource
   form (frontend-form.css). Duplicated here rather than shared because this
   page loads only reservation-selection.css. display:none is deliberately NOT
   used -- some bots skip fields hidden that way, which is the whole point. */
.zsi-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.zsi-selection-consent {
	display: grid !important;
	grid-template-columns: 20px 1fr !important;
	gap: 10px !important;
	padding: 4px 0;
	font-weight: 500 !important;
	line-height: 1.5;
}

.zsi-selection-consent input {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--dr-primary, #1e4a5f);
}

.zsi-selection-review {
	margin: 4px 0 0;
	padding: 20px;
	border: 1px solid var(--dr-line-strong, #d4d9e0);
	border-radius: 14px;
	background: var(--dr-surface, #fff);
}

.zsi-selection-customer > button[type="submit"] {
	width: 100%;
	min-height: 52px;
	font-size: 1rem;
}

.zsi-selection-success {
	padding: 20px;
	border: 1px solid #9ed4aa;
	border-radius: 14px;
	background: #f1fbf4;
	color: #146c2e;
}

.zsi-selection-toast {
	position: fixed;
	right: 20px;
	bottom: 86px;
	z-index: 10000;
	width: min(420px, calc(100% - 40px));
	padding: 18px;
	border: 1px solid var(--dr-line, #e6e9ee);
	border-left: 5px solid #268545;
	border-radius: 14px;
	background: var(--dr-surface, #fff);
	box-shadow: 0 18px 48px -20px rgba(20, 30, 45, 0.48);
	color: var(--dr-text, #3c4655);
}

.zsi-selection-toast p {
	margin: 0 0 14px;
}

.zsi-selection-toast div {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.zsi-selection-toast [data-selection-toast-close] {
	border-color: var(--dr-line-strong, #d4d9e0);
	background: var(--dr-surface, #fff);
	color: var(--dr-primary, #1e4a5f);
}

/*
 * The booking-mode badge, now a sibling of the add button rather than a child
 * of it (QA S-07).
 *
 * `display: block` was for its old home inside the button, and did not even
 * work there: the button is a flex container, so the span became a flex item
 * laid out in the same row and "Add to reservation" ran straight into "Full
 * day". Out here it sits in the card's metadata row beside the category and
 * location, so it is styled like the quiet chip it always meant to be.
 */
.zsi-resource-mode {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border: 1px solid var(--dr-line, #e2e6ec);
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 450;
	line-height: 1.6;
	white-space: nowrap;
	opacity: 0.82;
}

.zsi-selection-add.is-incompatible {
	opacity: 0.55;
}

.zsi-selection-open {
	overflow: hidden;
}

@media (max-width: 700px) {

	.zsi-selection-inline {
		margin-top: 20px;
		border-radius: 16px;
	}

	.zsi-selection-inline .zsi-selection-header,
	.zsi-selection-content {
		padding-right: 18px;
		padding-left: 18px;
	}

	.zsi-selection-progress {
		gap: 2px;
		font-size: 0.66rem;
	}

	.zsi-selection-item {
		align-items: flex-start;
		flex-direction: column;
	}

	.zsi-selection-item-controls {
		width: 100%;
		justify-content: flex-end;
	}

	.zsi-selection-period,
	.zsi-selection-customer {
		padding: 18px;
	}

	.zsi-selection-customer,
	.zsi-selection-period [data-selection-day-fields],
	.zsi-selection-period [data-selection-time-fields],
	.zsi-selection-native-dates {
		grid-template-columns: 1fr;
	}

	.zsi-selection-customer > label,
	.zsi-selection-customer > h3,
	.zsi-selection-field-wide,
	.zsi-selection-consent,
	.zsi-selection-review,
	.zsi-selection-customer > button,
	.zsi-selection-customer > .zsi-selection-error {
		grid-column: 1;
	}

	.zsi-selection-calendar {
		padding: 12px;
	}

	.zsi-selection-calendar-weekdays,
	.zsi-selection-calendar-grid {
		grid-template-columns: repeat(7, minmax(28px, 1fr));
		gap: 3px;
	}

	.zsi-selection-calendar-day {
		min-height: 36px;
	}
}

@media (max-width: 480px) {

	.zsi-selection-toggle {
		right: 0;
		bottom: 0;
		left: 0;
		border-radius: 0;
	}

	.zsi-selection-panel:not(.zsi-selection-inline) {
		inset: 0;
		width: 100%;
	}

	.zsi-selection-toast {
		right: 8px;
		bottom: 68px;
		width: calc(100% - 16px);
	}
}

@media (prefers-reduced-motion: reduce) {

	.zsi-selection-panel *,
	.zsi-selection-toast * {
		transition-duration: 0.001ms !important;
	}
}

/*
 * `hidden` must actually hide.
 *
 * The UA stylesheet's `[hidden] { display: none }` loses to ANY author
 * `display` declaration on the same element, regardless of specificity --
 * author styles beat user-agent styles by origin. `.zsi-selection-customer`
 * sets `display: grid`, so `form.hidden = true` set the attribute and changed
 * nothing: after a successful submission the customer's name and e-mail stayed
 * on screen inside the review section.
 *
 * Scoped to this panel's own components rather than made global, so it cannot
 * surprise a theme.
 */
.zsi-selection-panel [hidden],
.zsi-selection-customer[hidden],
.zsi-selection-period[hidden],
.zsi-selection-success[hidden],
.zsi-selection-suggestions[hidden],
.zsi-selection-toast[hidden] {
	display: none !important;
}

/* The confirmation is the first thing on the panel after a submission. */
.zsi-selection-success {
	order: -1;
	margin-bottom: 20px;
	padding: 20px;
	border: 1px solid var(--dr-ok-line, #b7ddb9);
	border-radius: 16px;
	background: var(--dr-ok-bg, #f1f9f1);
}

.zsi-selection-success:focus {
	outline: 2px solid var(--dr-primary, #2a6df4);
	outline-offset: 2px;
}

.zsi-selection-success p {
	margin: 0 0 12px;
}

.zsi-selection-success p:last-child {
	margin-bottom: 0;
}