/**
 * BookoTour calendar styles.
 *
 * Kept close to theme-neutral: no external fonts, no resets, and all state
 * colours derive from two variables so a site can retheme with CSS alone.
 */

.bookotour-fields {
	--bookotour-accent: #1a7bb9;
	--bookotour-accent-text: #ffffff;
	--bookotour-full: #dadada;
	--bookotour-muted: #8a8a8a;
	--bookotour-line: rgba( 0, 0, 0, 0.12 );
	--bookotour-soft: rgba( 26, 123, 185, 0.08 );

	margin: 1em 0 1.25em;
	padding: 1em 1.1em;
	border: 1px solid var(--bookotour-line);
	border-radius: 6px;
	background: rgba( 0, 0, 0, 0.015 );
	box-sizing: border-box;
}

.bookotour-fields *,
.bookotour-fields *::before,
.bookotour-fields *::after {
	box-sizing: border-box;
}

/* ---- month header ---- */

.bookotour-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin-bottom: 0.75em;
}

.bookotour-month-label {
	font-weight: 600;
	font-size: 1.05em;
}

.bookotour-prev,
.bookotour-next {
	background: none;
	border: 1px solid var(--bookotour-line);
	border-radius: 4px;
	cursor: pointer;
	line-height: 1;
	padding: 0.35em 0.6em;
	color: inherit;
}

.bookotour-prev:hover:not( :disabled ),
.bookotour-next:hover:not( :disabled ) {
	background: var(--bookotour-soft);
}

.bookotour-prev:disabled,
.bookotour-next:disabled {
	opacity: 0.3;
	cursor: default;
}

/* ---- weekday header ---- */

ul.bookotour-weekdays {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	list-style: none;
	margin: 0 0 0.25em;
	padding: 0;
}

ul.bookotour-weekdays li {
	text-align: center;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--bookotour-muted);
	padding: 0.35em 0;
}

/* ---- grid ---- */

.bookotour-grid {
	transition: opacity 0.15s ease;
}

.bookotour-grid.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

ul.bookotour-week {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	list-style: none;
	margin: 0;
	padding: 0;
}

li.bookotour-day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6em;
	margin: 1px;
	border-radius: 4px;
	font-size: 0.95em;
	user-select: none;
}

li.bookotour-day.is-empty {
	background: none;
}

li.bookotour-day.is-unavailable {
	color: var(--bookotour-muted);
	opacity: 0.45;
}

li.bookotour-day.is-full {
	background: var(--bookotour-full);
	color: var(--bookotour-muted);
	text-decoration: line-through;
	cursor: not-allowed;
}

li.bookotour-day.is-available {
	background: transparent;
	border: 1px solid var(--bookotour-line);
	cursor: pointer;
}

li.bookotour-day.is-available:hover {
	background: var(--bookotour-soft);
}

li.bookotour-day.is-today .bookotour-day-num {
	font-weight: 700;
	text-decoration: underline;
}

li.bookotour-day.is-selected,
li.bookotour-day.is-selected:hover {
	background: var(--bookotour-accent);
	color: var(--bookotour-accent-text);
	border-color: var(--bookotour-accent);
}

.bookotour-day-places {
	position: absolute;
	top: 1px;
	right: 3px;
	font-size: 0.65em;
	line-height: 1;
	color: var(--bookotour-accent);
}

li.bookotour-day.is-selected .bookotour-day-places {
	color: var(--bookotour-accent-text);
}

/*
 * Days a multi-day booking also covers. The day that was clicked keeps
 * `is-selected` and stays the strongest mark, so the run reads as one tour with
 * a clear first day. Nothing is disabled: clicking another day simply moves the
 * start, which is how a guest changes their mind.
 */
li.bookotour-day.is-in-range {
	background: var(--bookotour-soft);
	border-color: var(--bookotour-accent);
}

li.bookotour-day.is-in-range .bookotour-day-num {
	font-weight: 600;
}

li.bookotour-day.is-in-range .bookotour-day-places {
	color: var(--bookotour-accent);
}

li.bookotour-day:focus-visible,
li.bookotour-time:focus-visible {
	outline: 2px solid var(--bookotour-accent);
	outline-offset: 2px;
}

/* ---- times ---- */

.bookotour-times {
	margin-top: 1em;
	padding-top: 0.85em;
	border-top: 1px solid var(--bookotour-line);
}

.bookotour-times-label {
	margin: 0 0 0.5em;
	font-size: 0.9em;
	font-weight: 600;
}

.bookotour-times-date {
	font-weight: 400;
	color: var(--bookotour-muted);
}

ul.bookotour-time-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	list-style: none;
	margin: 0;
	padding: 0;
}

li.bookotour-time {
	position: relative;
	padding: 0.4em 0.7em;
	border: 1px solid var(--bookotour-line);
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.9em;
}

li.bookotour-time:hover {
	background: var(--bookotour-soft );
}

li.bookotour-time.is-selected {
	background: var(--bookotour-accent);
	border-color: var(--bookotour-accent);
	color: var(--bookotour-accent-text);
}

.bookotour-time-places {
	margin-left: 0.35em;
	font-size: 0.75em;
	color: var(--bookotour-accent);
}

li.bookotour-time.is-selected .bookotour-time-places {
	color: var(--bookotour-accent-text);
}

.bookotour-times-empty {
	margin: 0;
	font-size: 0.9em;
	color: var(--bookotour-muted);
}

/* ---- price / info box ---- */

.bookotour-info {
	margin-top: 1em;
	padding: 0.75em 0.9em;
	border-radius: 4px;
	background: var(--bookotour-accent);
	color: var(--bookotour-accent-text);
}

.bookotour-info p {
	margin: 0;
	text-align: center;
}

.bookotour-info-text {
	font-size: 0.9em;
}

.bookotour-info-price {
	margin-top: 0.25em !important;
	font-size: 1.1em;
	font-weight: 700;
}

/* ---- messages ---- */

.bookotour-message {
	margin: 0.6em 0 0;
	font-size: 0.9em;
	min-height: 1.2em;
}

.bookotour-message:not( :empty ) {
	color: #8a1f11;
}

.bookotour-fields .bookotour-message[ role="status" ]:empty {
	display: none;
}

/* ---- button state ---- */

.single_add_to_cart_button.bookotour-needs-slot,
.single_add_to_cart_button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---- participants ---- */

.bookotour-participants {
	margin-top: 1em;
	padding-top: 0.85em;
	border-top: 1px solid var(--bookotour-line);
}

.bookotour-participants-label {
	margin: 0 0 0.5em;
	font-size: 0.9em;
	font-weight: 600;
}

.bookotour-participant-row {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 0.5em;
}

.bookotour-participant-row label {
	flex: 1 1 auto;
	min-width: 6em;
}

.bookotour-participant-row input[type="number"] {
	width: 5.5em;
	text-align: center;
}

.bookotour-participant-hint {
	font-size: 0.8em;
	color: var(--bookotour-muted);
}

@media ( max-width: 480px ) {
	.bookotour-participant-row input[type="number"] {
		width: 4.5em;
	}
}

/* ---- resources ---- */

.bookotour-resources {
	margin-top: 1em;
	padding-top: 0.85em;
	border-top: 1px solid var(--bookotour-line);
}

.bookotour-resources-label {
	margin: 0 0 0.5em;
	font-size: 0.9em;
	font-weight: 600;
}

.bookotour-required {
	margin-left: 0.4em;
	font-size: 0.8em;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #8a1f11;
}

.bookotour-resource-select {
	width: 100%;
	max-width: 22em;
}

ul.bookotour-resource-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

li.bookotour-resource-row {
	margin: 0 0 0.4em;
}

li.bookotour-resource-row label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
}

.bookotour-resource-cost {
	margin-left: auto;
	font-size: 0.9em;
	color: var(--bookotour-muted);
}

/* ---- assets ---- */

.bookotour-assets {
	margin-top: 1em;
	padding-top: 0.85em;
	border-top: 1px solid var(--bookotour-line);
}

.bookotour-assets-label {
	margin: 0 0 0.5em;
	font-size: 0.9em;
	font-weight: 600;
}

.bookotour-asset-select {
	width: 100%;
	max-width: 22em;
}

.bookotour-asset-auto {
	margin: 0;
	font-size: 0.9em;
}

.bookotour-asset-note {
	margin-left: 0.4em;
	font-size: 0.8em;
	color: var(--bookotour-muted);
}

/* ---- small screens ---- */

@media ( max-width: 600px ) {
	.bookotour-fields {
		padding: 0.85em 0.7em;
	}

	li.bookotour-day {
		min-height: 2.3em;
		font-size: 0.85em;
	}

	.bookotour-day-places {
		display: none;
	}

	li.bookotour-time {
		padding: 0.45em 0.6em;
	}
}

/* -------------------------------------------------------------------------
   Admin: bookings month view and per-line booking controls.
   ------------------------------------------------------------------------- */

.bookotour-admin-month td {
	height: 84px;
	vertical-align: top;
}

.bookotour-admin-month td.bookotour-pad {
	background: #f6f7f7;
}

.bookotour-admin-month td.bookotour-today {
	box-shadow: inset 0 0 0 2px #2271b1;
}

.bookotour-admin-month td.bookotour-has-bookings {
	background: #f0f6fc;
}

.bookotour-admin-month a {
	display: block;
	text-decoration: none;
	color: #1d2327;
}

.bookotour-admin-month .bookotour-day-num {
	display: block;
	font-weight: 600;
}

.bookotour-admin-month .bookotour-day-count {
	display: block;
	margin-top: 0.35em;
	font-size: 11px;
	color: #2271b1;
}

.bookotour-move-booking {
	margin-top: 0.5em;
	padding: 0.5em 0.75em;
	border-left: 3px solid #2271b1;
	background: #f6f7f7;
}

.bookotour-move-booking p {
	margin: 0.35em 0;
}

.bookotour-line-cancelled {
	color: #b32d2e;
}

/* -------------------------------------------------------------------------
   Calendar designs. The markup is the same; only these modifiers differ.
   Colours come from the custom properties the settings screen writes.
   ------------------------------------------------------------------------- */

.bookotour-fields {
	--bt-month-bg: #f7f7f7;
	--bt-month-text: #333333;
	--bt-weekdays-bg: #ffffff;
	--bt-weekdays-text: #555555;
	--bt-day-bg: #ffffff;
	--bt-day-text: #333333;
	--bt-full-bg: #dadada;
	--bt-selected-bg: #1791ce;
	--bt-selected-text: #ffffff;
	--bt-hover-bg: #4baef1;
	--bt-info-bg: #ffffff;
	--bt-info-text: #000000;
	--bt-button-bg: #1a1a1a;
	--bt-button-text: #ffffff;
	--bt-panel-bg: #1d3268;
	--bt-panel-text: #ffffff;
	--bt-border: #e0e0e0;

	/* Grid design. Its own set, so changing it cannot move the legacy one. */
	--bt-d2-primary: #1791ce;
	--bt-d2-text: #ffffff;
	--bt-d2-hover: #4baef1;
	--bt-d2-booked: #dadada;
	--bt-d2-price-bg: #ffffff;
	--bt-d2-price-text: #000000;
	--bt-d2-button-bg: #1a1a1a;
	--bt-d2-button-text: #ffffff;

	/* Box design. */
	--bt-d3-start: #3f9dbc;
	--bt-d3-selected: #1d3268;
	--bt-d3-full: #dadada;
	--bt-d3-font: #1d3268;
	--bt-d3-wrapper: #1d3268;
	--bt-d3-wrapper-text: #ffffff;
	--bt-d3-button-bg: #1d3268;
	--bt-d3-button-text: #ffffff;
}

/* Design 1: legacy. The plain grid, using the colours above. */
.bookotour--legacy .bookotour-cal-head {
	background: var(--bt-month-bg);
	color: var(--bt-month-text);
}

.bookotour--legacy .bookotour-weekdays {
	background: var(--bt-weekdays-bg);
	color: var(--bt-weekdays-text);
}

.bookotour--legacy .bookotour-day {
	background: var(--bt-day-bg);
	color: var(--bt-day-text);
}

.bookotour--legacy .bookotour-day.is-full,
.bookotour--legacy .bookotour-day.is-unavailable {
	background: var(--bt-full-bg);
}

.bookotour--legacy .bookotour-day.is-selected {
	background: var(--bt-selected-bg);
	color: var(--bt-selected-text);
}

.bookotour--legacy .bookotour-info {
	background: var(--bt-info-bg);
	color: var(--bt-info-text);
}

/* Design 2: grid. Its own colour set, as the reference plugin has. */
.bookotour--design-2 .bookotour-cal-head {
	background: var(--bt-d2-primary);
	color: var(--bt-d2-text);
}

.bookotour--design-2 .bookotour-grid {
	gap: 6px;
}

.bookotour--design-2 .bookotour-day {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--bt-border);
	border-radius: 8px;
	background: var(--bt-day-bg);
	color: var(--bt-day-text);
	transition: background 0.15s ease;
}

.bookotour--design-2 .bookotour-day.is-clickable:hover {
	background: var(--bt-d2-hover);
}

.bookotour--design-2 .bookotour-day.is-full,
.bookotour--design-2 .bookotour-day.is-unavailable {
	background: var(--bt-d2-booked);
}

.bookotour--design-2 .bookotour-day.is-selected {
	background: var(--bt-d2-primary);
	color: var(--bt-d2-text);
}

.bookotour--design-2 .bookotour-info,
.bookotour--design-2 .bookotour-times {
	background: var(--bt-d2-price-bg);
	color: var(--bt-d2-price-text);
	border: 1px solid var(--bt-border);
	border-radius: 8px;
}

.bookotour--design-2 .bookotour-weekdays {
	background: var(--bt-d2-price-bg);
	color: var(--bt-d2-price-text);
}

.bookotour--design-2 form.cart .single_add_to_cart_button,
.bookotour--design-2 .bookotour-book-now {
	background: var(--bt-d2-button-bg);
	color: var(--bt-d2-button-text);
}

/* Design 3: box. Days are boxes and the panel carries the booking. */
.bookotour--design-3 .bookotour-cal-head {
	background: var(--bt-d3-wrapper);
	color: var(--bt-d3-wrapper-text);
}

.bookotour--design-3 .bookotour-day {
	border: 1px solid var(--bt-border);
	border-radius: 4px;
	background: var(--bt-day-bg);
	color: var(--bt-d3-font);
	min-height: 3.5em;
}

.bookotour--design-3 .bookotour-day.is-selected {
	background: var(--bt-d3-selected);
	color: var(--bt-d3-wrapper-text);
}

.bookotour--design-3 .bookotour-day.is-in-range {
	background: var(--bt-d3-start);
	color: var(--bt-d3-wrapper-text);
}

.bookotour--design-3 .bookotour-day.is-full {
	background: var(--bt-d3-full);
}

.bookotour--design-3 .bookotour-info,
.bookotour--design-3 .bookotour-times {
	background: var(--bt-d3-wrapper);
	color: var(--bt-d3-wrapper-text);
	border-radius: 6px;
	padding: 0.75em 1em;
}

.bookotour--design-3 .bookotour-info p,
.bookotour--design-3 .bookotour-times p {
	color: inherit;
}

.bookotour--design-3 .bookotour-time {
	background: rgba(255, 255, 255, 0.12);
	color: inherit;
	border-color: rgba(255, 255, 255, 0.25);
}

.bookotour--design-3 .bookotour-time.is-selected {
	background: var(--bt-d3-start);
}

.bookotour--design-3 form.cart .single_add_to_cart_button,
.bookotour--design-3 .bookotour-book-now {
	background: var(--bt-d3-button-bg);
	color: var(--bt-d3-button-text);
}

.bookotour-month-picker-hint {
	font-size: 0.9em;
	font-style: italic;
	margin: 0.5em 0 0;
}

/* The button follows the chosen colours whatever the design. */
.bookotour-fields .bookotour-info-price {
	color: inherit;
}

form.cart .single_add_to_cart_button:not(.bookotour-needs-slot) {
	background: var(--bt-button-bg);
	color: var(--bt-button-text);
}

/* -------------------------------------------------------------------------
   Mobile view. The calendar becomes a single column with larger tap targets
   and the time list stacks, which a phone-width screen needs and a fixed grid
   cannot give it.
   ------------------------------------------------------------------------- */

@media screen and (max-width: 950px) {
	.bookotour-fields .bookotour-grid .bookotour-week {
		gap: 4px;
	}

	.bookotour-fields .bookotour-day {
		min-height: 2.75em;
		font-size: 16px;
	}

	.bookotour-fields .bookotour-time {
		padding: 0.65em 0.75em;
	}

	.bookotour-fields .bookotour-cal-head,
	.bookotour-fields .bookotour-info,
	.bookotour-fields .bookotour-times {
		padding: 0.75em;
	}
}

@media screen and (max-width: 560px) {
	.bookotour-fields .bookotour-grid .bookotour-week {
		display: flex;
		flex-wrap: wrap;
	}

	.bookotour-fields .bookotour-day {
		min-height: 3em;
		font-size: 15px;
	}

	.bookotour-fields .bookotour-time-list {
		display: block;
	}

	.bookotour-fields .bookotour-participant-row,
	.bookotour-fields .bookotour-resource-row,
	.bookotour-fields .bookotour-field,
	.bookotour-fields .bookotour-field--end {
		display: block;
		width: 100%;
	}

	.bookotour-fields .bookotour-participant-row label,
	.bookotour-fields .bookotour-field label {
		display: block;
		margin-bottom: 0.25em;
	}

	.bookotour-fields input[type="number"],
	.bookotour-fields input[type="date"],
	.bookotour-fields input[type="datetime-local"],
	.bookotour-fields select {
		width: 100%;
		max-width: 100%;
	}
}

/* -------------------------------------------------------------------------
   Availability search widget and the calendar shortcode.
   ------------------------------------------------------------------------- */

.bookotour-search-widget {
	margin: 0 0 1.5em;
}

.bookotour-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: flex-end;
	margin: 0 0 1em;
}

.bookotour-search-field {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.bookotour-search-field label {
	font-size: 0.9em;
	margin-bottom: 0.2em;
}

.bookotour-search-submit {
	margin: 0;
}

.bookotour-search-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bookotour-search-result a {
	display: block;
	height: 100%;
	padding: 0.85em;
	border: 1px solid var(--bt-border, #e0e0e0);
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	background: var(--bt-day-bg, #ffffff);
}

.bookotour-search-result a:hover {
	background: var(--bt-hover-bg, #4baef1);
}

.bookotour-search-result img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 0.5em;
}

.bookotour-search-result-title {
	display: block;
	font-weight: 600;
}

.bookotour-search-result-price {
	display: block;
	margin: 0.35em 0;
}

.bookotour-search-result-cta {
	display: inline-block;
	padding: 0.4em 0.9em;
	border-radius: 4px;
	background: var(--bt-button-bg, #1a1a1a);
	color: var(--bt-button-text, #ffffff);
	font-size: 0.9em;
}

.bookotour-search-empty {
	padding: 0.75em 0;
}

.bookotour-shortcode-calendar {
	margin: 0 0 1.5em;
}

.bookotour-shortcode-calendar .bookotour-cal-head {
	justify-content: center;
}

.bookotour-shortcode-calendar .bookotour-day-link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.bookotour-shortcode-cta {
	margin: 0.75em 0 0;
}

@media screen and (max-width: 560px) {
	.bookotour-search {
		display: block;
	}

	.bookotour-search-field,
	.bookotour-search-submit {
		margin-bottom: 0.6em;
		width: 100%;
	}

	.bookotour-search-field input {
		width: 100%;
	}

	.bookotour-search-results {
		grid-template-columns: 1fr;
	}
}