/*
 * Executive Lane Booking Engine - visual date/time picker.
 *
 * Colour tokens mirror the theme's own Presidential/Executive palette
 * (executive-lane.css: --el-pres-navy, --el-exec-blue, --el-exec-red) via
 * the same --wp--preset--color--* custom properties, with the identical
 * hex fallbacks, so this reads as the same design system on any page even
 * where the theme's stylesheet isn't loaded. No black/gold treatment here;
 * gold stays out of the interactive UI per the site's own approved
 * direction. Scoped entirely to .elbe-dtp-* so nothing here can leak into
 * or be affected by the surrounding page.
 */
.elbe-dtp-overlay {
	--dtp-navy: var( --wp--preset--color--presidential-navy, #071C33 );
	--dtp-blue: var( --wp--preset--color--executive-blue, #123C69 );
	--dtp-red: var( --wp--preset--color--executive-red, #C8102E );
	--dtp-red-hover: color-mix( in srgb, var( --dtp-red ) 85%, black );
	--dtp-line: #dfe3e8;
	--dtp-muted: #9aa3ad;
	--dtp-bg: #fff;
	--dtp-bg-off: #f7f8fa;
	--dtp-ink: #1a2430;

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: color-mix( in srgb, var( --dtp-navy ) 55%, transparent );
	color-scheme: light;
}
.elbe-dtp-overlay[hidden] { display: none !important; }
.elbe-dtp-overlay * ,
.elbe-dtp-overlay *::before,
.elbe-dtp-overlay *::after { box-sizing: border-box; }

.elbe-dtp {
	width: 100%;
	max-width: 420px;
	max-height: min( 640px, 92vh );
	max-height: min( 640px, 92dvh );
	display: flex;
	flex-direction: column;
	background: var( --dtp-bg );
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba( 7, 28, 51, 0.32 );
	overflow: hidden;
	font-size: 14px;
	color: var( --dtp-ink );
}
.elbe-dtp:focus { outline: none; }

.elbe-dtp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 18px;
	background: var( --dtp-navy );
	color: #fff;
	flex: none;
}
.elbe-dtp-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.elbe-dtp-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.14 );
	color: #fff;
	cursor: pointer;
}
.elbe-dtp-close:hover { background: rgba( 255, 255, 255, 0.24 ); }
.elbe-dtp-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.elbe-dtp-body {
	overflow-y: auto;
	flex: 1 1 auto;
	-webkit-overflow-scrolling: touch;
}

/* ---- Calendar ---- */
.elbe-dtp-cal { padding: 16px 18px 6px; }
.elbe-dtp-calnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.elbe-dtp-month {
	font-size: 14px;
	font-weight: 700;
	color: var( --dtp-navy );
}
.elbe-dtp-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var( --dtp-line );
	border-radius: 8px;
	background: #fff;
	color: var( --dtp-navy );
	cursor: pointer;
}
.elbe-dtp-nav:hover:not(:disabled) { border-color: var( --dtp-blue ); color: var( --dtp-blue ); }
.elbe-dtp-nav:focus-visible { outline: 2px solid var( --dtp-blue ); outline-offset: 2px; }
.elbe-dtp-nav:disabled { opacity: 0.35; cursor: default; }

.elbe-dtp-weekdays {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	margin-bottom: 4px;
}
.elbe-dtp-weekdays span {
	text-align: center;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --dtp-muted );
	padding: 4px 0;
}

.elbe-dtp-grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 4px;
	padding-bottom: 10px;
}
/* role="row" wrappers (one per week) sit between the grid and its
   gridcells for correct grid/row/gridcell semantics; display:contents
   keeps every gridcell a direct participant in the grid's own column
   layout above, as if the wrapper weren't there. */
.elbe-dtp-row { display: contents; }
.elbe-dtp-day {
	position: relative;
	aspect-ratio: 1 / 1;
	min-height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #fff;
	color: var( --dtp-ink );
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.elbe-dtp-day-pad { visibility: hidden; cursor: default; border: 0; background: none; }
.elbe-dtp-day:hover:not(.is-disabled):not(.is-selected) { border-color: var( --dtp-blue ); color: var( --dtp-blue ); }
.elbe-dtp-day:focus-visible { outline: 2px solid var( --dtp-blue ); outline-offset: 2px; }
.elbe-dtp-day.is-today::after {
	content: "";
	position: absolute;
	bottom: 5px;
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: var( --dtp-blue );
}
.elbe-dtp-day.is-selected {
	background: var( --dtp-navy );
	border-color: var( --dtp-navy );
	color: #fff;
}
.elbe-dtp-day.is-selected.is-today::after { background: #fff; }
.elbe-dtp-day.is-disabled {
	background: var( --dtp-bg-off );
	color: var( --dtp-muted );
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-color: color-mix( in srgb, var( --dtp-muted ) 60%, transparent );
}

/* ---- Times ---- */
.elbe-dtp-times {
	padding: 4px 18px 18px;
	border-top: 1px solid var( --dtp-line );
	margin-top: 4px;
}
.elbe-dtp-times-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --dtp-muted );
	margin: 14px 0 2px;
}
/* Subtle helper line under the label -- not uppercase/bold like the label
   itself, so it reads as a quiet aside rather than a second heading. */
.elbe-dtp-times-hint {
	display: block;
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var( --dtp-muted );
}
.elbe-dtp-times-empty {
	margin: 0;
	padding: 18px 4px;
	text-align: center;
	color: var( --dtp-muted );
	font-size: 13px;
}
/*
 * Contained scroll area rather than a tall list of nearly every slot in the
 * day -- the picker used to grow to fit ~48 buttons, making the whole modal
 * feel long, especially on mobile. Desktop: ~190px shows 3 full rows of the
 * 3-column grid plus a hint of a 4th (a visible scroll affordance, not a
 * hard cutoff). Mobile gets its own explicit height below rather than
 * inheriting this one, since its row height and column count differ.
 * overflow-y:auto (not scroll) keeps the scrollbar hidden until content
 * actually overflows, and never a horizontal one since the grid's own
 * column tracks are what determine width, not content.
 */
.elbe-dtp-times-list {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px;
	max-height: 190px;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 2px;
}
.elbe-dtp-time {
	min-height: 44px;
	padding: 8px 6px;
	border: 1px solid var( --dtp-line );
	border-radius: 8px;
	background: #fff;
	color: var( --dtp-ink );
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}
.elbe-dtp-time:hover:not(:disabled):not(.is-selected) { border-color: var( --dtp-blue ); color: var( --dtp-blue ); }
.elbe-dtp-time:focus-visible { outline: 2px solid var( --dtp-blue ); outline-offset: 2px; }
.elbe-dtp-time.is-selected {
	background: var( --dtp-red );
	border-color: var( --dtp-red );
	color: #fff;
}
.elbe-dtp-time:disabled {
	background: var( --dtp-bg-off );
	color: var( --dtp-muted );
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-color: color-mix( in srgb, var( --dtp-muted ) 60%, transparent );
}

/* ---- Mobile: bottom sheet, full width, large tap targets ---- */
@media ( max-width: 640px ) {
	.elbe-dtp-overlay {
		align-items: flex-end;
		padding: 0;
	}
	.elbe-dtp {
		max-width: none;
		max-height: 88vh;
		max-height: 88dvh;
		border-radius: 16px 16px 0 0;
	}
	.elbe-dtp-times-list {
		grid-template-columns: repeat( 2, 1fr );
		/* 2 columns x 48px rows: ~3 full rows (6 choices) plus a peek of a
		   4th (7th-8th), independent of the desktop height above. */
		max-height: 200px;
	}
	.elbe-dtp-time { min-height: 48px; font-size: 14px; }
	.elbe-dtp-day { min-height: 42px; }
}

@media ( prefers-reduced-motion: no-preference ) {
	.elbe-dtp { animation: elbe-dtp-in 0.16s ease-out; }
}
@keyframes elbe-dtp-in {
	from { opacity: 0; transform: translateY( 8px ); }
	to { opacity: 1; transform: translateY( 0 ); }
}

@media ( prefers-color-scheme: dark ) {
	/* The booking form itself is fixed light (color-scheme: light on
	   .elbe-book), so the picker matches it deliberately rather than
	   inverting -- opening a dark picker over a light form would read as
	   broken, not themed. */
	.elbe-dtp-overlay { color-scheme: light; }
}