/**
 * Booking widget — plugin glue styles.
 *
 * Only the small bits the design system doesn't cover: the native date inputs
 * sitting inside a tt-datefield, and the availability state colours. Everything
 * uses design tokens from the theme's tokens.css.
 */

.tt-booking-widget__field {
	cursor: text;
}

.tt-datefield__input {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	padding: 0;
	margin-top: var(--space-2xs);
	background: transparent;
	font: var(--fw-medium) var(--fs-body)/1.2 var(--font-body);
	color: var(--text-primary);
	width: 100%;
}

.tt-datefield__input:focus {
	outline: none;
}

.tt-datefield__input:disabled {
	color: var(--text-secondary);
	opacity: 1;
	-webkit-text-fill-color: var(--text-secondary);
}

/* Availability line states. */
.tt-booking-widget__avail.is-checking span,
.tt-booking-widget__avail.is-idle span {
	color: var(--text-secondary);
}

.tt-booking-widget__avail.is-available span {
	color: var(--accent-primary);
	font-weight: var(--fw-semibold);
}

.tt-booking-widget__avail.is-unavailable span {
	color: var(--status-unavailable-fg, var(--text-primary));
	font-weight: var(--fw-semibold);
}

.tt-booking-widget__avail.is-checking {
	position: relative;
}

.tt-booking-widget__avail.is-checking::before {
	content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-right: var(--space-2xs);
	border: 2px solid var(--border-subtle, currentColor);
	border-top-color: var(--accent-primary);
	border-radius: 50%;
	vertical-align: -2px;
	animation: tt-bw-spin 0.7s linear infinite;
}

@keyframes tt-bw-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tt-booking-widget__avail.is-checking::before {
		animation: none;
	}
}

/* Suggested-next-available + change-dates: text-style buttons. */
.tt-booking-widget__suggest,
.tt-booking-widget__change {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent-primary);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.tt-booking-widget__suggest {
	display: block;
	margin-top: var(--space-2xs);
}

.tt-booking-widget__locked-note {
	margin: 0 0 var(--space-md);
	font: var(--fw-regular) var(--fs-body-sm)/1.4 var(--font-body);
	color: var(--text-secondary);
}