/**
 * reservation.css — the Contact-Form-7 reservation DATE PICKER (custom
 * accessible month calendar that greys out closed days).
 *
 * Enqueued alongside the reservation picker module (see WPB_Reservations::
 * enqueue_assets) on pages where CF7 assets load. The picker is progressive
 * enhancement: reservation.js visually hides the native `<input type="date">`
 * (the value holder CF7 posts + validates) and renders this calendar. With JS
 * off — or if the calendar window fails to load — the native input stays
 * visible and this file styles nothing, so the no-JS fallback is untouched.
 *
 * Self-contained: no external assets, no fonts, no jQuery. Brand-matchable via
 * the shared `--wpb-*` design tokens (identical set in consent.css/announce.css)
 * — each is used here WITH a fallback equal to the plugin's shipped value, so
 * this stylesheet renders correctly even on a CF7 page where neither the consent
 * nor the announce stylesheet (which declare the `:root` token block) is loaded.
 */

.wpb-cal,
.wpb-cal *,
.wpb-cal *::before,
.wpb-cal *::after {
	box-sizing: border-box;
}

/*
 * The native date input, kept in the DOM as the value holder once the calendar
 * takes over. Visually hidden (not display:none) so it stays submittable AND
 * programmatically focusable for CF7 / native constraint validation; JS also
 * sets tabindex=-1 so it never becomes an invisible Tab stop.
 */
.wpb-resdate.wpb-cal-native-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.wpb-cal {
	position: relative;
	display: inline-block;
	max-width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: var(--wpb-text, #1a1a1a);
}

/* -------------------------------------------------------------------------- *
 * Trigger button (shows the chosen date, or „Datum wählen")                  *
 * -------------------------------------------------------------------------- */

.wpb-cal-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	font: inherit;
	color: inherit;
	text-align: left;
	background: var(--wpb-surface, #ffffff);
	border: 1px solid var(--wpb-border, #d0d5dd);
	border-radius: var(--wpb-radius, 10px);
	cursor: pointer;
}

.wpb-cal-trigger::before {
	content: "\1F4C5"; /* 📅 calendar emoji — a pure text glyph, no asset. */
	font-size: 1em;
	line-height: 1;
}

.wpb-cal-trigger.is-empty {
	color: var(--wpb-muted, #475467);
}

.wpb-cal-trigger:hover {
	border-color: var(--wpb-muted, #475467);
}

.wpb-cal-trigger.wpb-cal-invalid {
	border-color: #b32d2e;
}

/* -------------------------------------------------------------------------- *
 * Popup (absolutely positioned month panel)                                  *
 * -------------------------------------------------------------------------- */

.wpb-cal-popup {
	position: absolute;
	z-index: 2147480000; /* above page content, below the consent modal band. */
	top: calc(100% + 6px);
	left: 0;
	width: 320px;
	max-width: calc(100vw - 24px);
	padding: 12px;
	background: var(--wpb-surface, #ffffff);
	color: var(--wpb-text, #1a1a1a);
	border: 1px solid var(--wpb-border, #d0d5dd);
	border-radius: var(--wpb-radius, 10px);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
}

.wpb-cal-popup[hidden] {
	display: none;
}

/* Header: prev / month-title / next. */
.wpb-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.wpb-cal-title {
	flex: 1 1 auto;
	text-align: center;
	font-weight: 600;
	color: var(--wpb-heading, #101828);
}

.wpb-cal-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--wpb-text, #1a1a1a);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
}

.wpb-cal-nav:hover:not(:disabled) {
	background: rgba(0, 0, 0, 0.06);
}

.wpb-cal-nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------- *
 * Grid                                                                        *
 * -------------------------------------------------------------------------- */

.wpb-cal-row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.wpb-cal-weekdays {
	margin-bottom: 4px;
}

.wpb-cal-weekday {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	font-size: 12px;
	font-weight: 600;
	color: var(--wpb-muted, #475467);
}

.wpb-cal-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0;
	font: inherit;
	font-variant-numeric: tabular-nums;
	color: var(--wpb-text, #1a1a1a);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
}

.wpb-cal-blank {
	background: transparent;
	border: 0;
}

/* Selectable day. */
.wpb-cal-day {
	cursor: pointer;
}

.wpb-cal-day:hover:not(.is-disabled) {
	background: var(--wpb-divider, #eaecf0);
}

/* Greyed / closed / out-of-range day: clearly muted, not clickable. */
.wpb-cal-day.is-disabled {
	color: var(--wpb-muted, #475467);
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Selected day: highlighted. */
.wpb-cal-day.is-selected {
	color: var(--wpb-accent-contrast, #ffffff);
	background: var(--wpb-accent, #1f2937);
	border-color: var(--wpb-accent, #1f2937);
	font-weight: 600;
}

.wpb-cal-day.is-selected:hover {
	background: var(--wpb-accent-hover, #111827);
}

/* -------------------------------------------------------------------------- *
 * Focus (keyboard) — visible ring on every interactive control (WCAG 2.4.7)  *
 * -------------------------------------------------------------------------- */

.wpb-cal-trigger:focus-visible,
.wpb-cal-nav:focus-visible,
.wpb-cal-day:focus-visible,
.wpb-cal-day:focus {
	outline: 3px solid var(--wpb-focus, #2563eb);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------- *
 * Small screens — keep tap targets comfortable                               *
 * -------------------------------------------------------------------------- */

@media (max-width: 400px) {
	.wpb-cal-popup {
		width: calc(100vw - 24px);
	}

	.wpb-cal-cell {
		height: 42px;
	}
}