/**
 * SDC — Venue Timezone: courtesy clock.
 *
 * The venue time is the authoritative one, so the "your time" hint is styled to
 * read as clearly subordinate to it — smaller, muted, and never competing for
 * the same visual weight. Tokens come from the sdc theme (§11) with fallbacks,
 * since these surfaces are WooCommerce-rendered.
 *
 * @package SDC_Preview
 */

.sdc-courtesy-clock__hint {
	display: block;
	color: var( --ink-60, rgba( 23, 23, 23, 0.6 ) );
	font-size: 0.8125rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

/* Inline surfaces — sits on the same line as the booking time it qualifies. */
.sdc-courtesy-clock .sdc-courtesy-clock__hint {
	display: inline;
	margin-left: 0.5ch;
}

.sdc-courtesy-clock .sdc-courtesy-clock__hint::before {
	content: '(';
}

.sdc-courtesy-clock .sdc-courtesy-clock__hint::after {
	content: ')';
}

/* Slot picker — stacks under the time so the block stays scannable. */
.block-picker a .sdc-courtesy-clock__hint {
	font-size: 0.75rem;
	opacity: 0.75;
}

/* Timezone notice above the picker. */
.wc-bookings-date-picker-timezone-block.sdc-courtesy-clock__notice {
	color: var( --ink-60, rgba( 23, 23, 23, 0.6 ) );
	font-size: 0.875rem;
	line-height: 1.5;
	max-width: 46ch;
	margin-inline: auto;
	text-wrap: pretty;
}