/**
 * Storefront calendar session picker.
 *
 * Colour accent tokens: uses --wp--preset--color--primary (FSE / block themes)
 * with a neutral fallback so the picker matches the active theme without
 * requiring any per-theme customisation. No colours are hard-coded.
 *
 * Layout: two columns on desktop (≥640 px), single column stacked on mobile.
 */

/* ---- Tokens ---------------------------------------------------------------- */
.wce-cp {
	--wce-accent:      var( --wp--preset--color--primary, #0071a1 );
	--wce-accent-text: var( --wp--preset--color--background, #ffffff );
	--wce-border:      #ddd;
	--wce-muted:       #999;
	--wce-sold-bg:     #f5f5f5;
	margin: 1em 0;
}

/* ---- Two-column layout ---------------------------------------------------- */
.wce-cp__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5em;
	align-items: start;
}

@media ( max-width: 640px ) {
	.wce-cp__layout { display: block; }
	.wce-cp__panel  { margin-top: 1.25em; }
}

/* ---- Month navigation bar ------------------------------------------------- */
.wce-cp__bar {
	display: flex;
	align-items: center;
	margin-bottom: 0.6em;
	gap: 0.25em;
}

.wce-cp__bar-title {
	flex: 1 1 auto;
	text-align: center;
	font-weight: 600;
	font-size: 1em;
}

.wce-cp__nav {
	background: transparent;
	border: 1px solid var( --wce-border );
	border-radius: 4px;
	padding: 0.2em 0.55em;
	font-size: 1.1em;
	line-height: 1;
	cursor: pointer;
	color: inherit;
}
.wce-cp__nav:hover:not( :disabled ) {
	background: var( --wce-accent );
	border-color: var( --wce-accent );
	color: var( --wce-accent-text );
}
.wce-cp__nav:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* ---- Calendar grid -------------------------------------------------------- */
.wce-cp__grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 2px;
}

.wce-cp__dow {
	text-align: center;
	font-size: 0.75em;
	font-weight: 600;
	padding: 3px 0 5px;
	color: var( --wce-muted );
}

.wce-cp__blank { /* intentionally empty */ }

.wce-cp__day {
	text-align: center;
	padding: 6px 2px;
	font-size: 0.9em;
	border-radius: 4px;
	min-height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: var( --wce-muted );
	user-select: none;
}

/* Available — highlighted with the theme accent colour. */
.wce-cp__day.is-available {
	background: var( --wce-accent );
	color: var( --wce-accent-text );
	cursor: pointer;
	font-weight: 600;
}
.wce-cp__day.is-available:hover {
	opacity: 0.82;
}

/* Sold out — visible but non-interactive. */
.wce-cp__day.is-sold-out {
	background: var( --wce-sold-bg );
	color: var( --wce-muted );
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Selected date — outline ring on top of the available style. */
.wce-cp__day.is-selected {
	outline: 3px solid var( --wce-accent );
	outline-offset: 2px;
}
/* When the selected date is available keep the accent bg; just add the ring. */
.wce-cp__day.is-selected.is-available {
	background: var( --wce-accent );
	color: var( --wce-accent-text );
}

/* Today — small underline dot so it stands out even when not selected. */
.wce-cp__day.is-today {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Slot panel ----------------------------------------------------------- */
.wce-cp__panel-heading {
	margin: 0 0 0.6em;
	font-weight: 600;
	font-size: 0.95em;
}

.wce-cp__slots {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wce-cp__slot {
	margin-bottom: 0.4em;
}

.wce-cp__slot-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	padding: 0.55em 0.85em;
	border: 1px solid var( --wce-accent );
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	font-size: 0.95em;
	color: inherit;
	text-align: left;
}
.wce-cp__slot-btn:hover:not( :disabled ) {
	background: var( --wce-accent );
	color: var( --wce-accent-text );
}

/* Selected slot — filled accent. */
.wce-cp__slot.is-selected .wce-cp__slot-btn {
	background: var( --wce-accent );
	color: var( --wce-accent-text );
	font-weight: 600;
}

/* Sold-out slot — muted, unclickable but still visible. */
.wce-cp__slot.is-sold-out .wce-cp__slot-btn {
	border-color: var( --wce-border );
	color: var( --wce-muted );
	cursor: not-allowed;
}

.wce-cp__slot-time   { font-weight: 500; }
.wce-cp__slot-status { font-size: 0.85em; opacity: 0.8; white-space: nowrap; }
.wce-cp__slot.is-selected .wce-cp__slot-status { opacity: 1; }

/* ---- Loading / error states ----------------------------------------------- */
.wce-cp__loading,
.wce-cp__no-slots {
	font-style: italic;
	font-size: 0.9em;
	opacity: 0.7;
	margin: 0.5em 0;
}

.wce-cp__error {
	color: #b94a48;
	font-size: 0.9em;
	margin: 0.5em 0;
}

/* ---- Submit button "not-yet-chosen" state ---------------------------------- */
.single_add_to_cart_button.wc-events-disabled {
	opacity: 0.6;
	cursor: not-allowed;
}