/**
 * The booking wizard.
 *
 * Deliberately unopinionated about type and colour: it inherits the theme's
 * font and takes its accent from one custom property, so it sits inside the
 * existing design rather than fighting it.
 */

/* Every root the plugin renders into has to be listed here. A container left
   off the list gets no custom properties at all, and because an undefined
   var() makes the whole declaration invalid, its inputs and cards lose their
   borders entirely rather than falling back to something plainer. */
.cb-wizard,
.cb-status,
.cb-return,
.cb-voucher,
.cb-test {
	/* The theme's palette first, our own only as a fallback. Guessing the
	   scheme from the visitor's operating system is wrong on a site that is
	   dark whatever the visitor prefers: a light default puts a black button
	   and a near-black hairline on a black ground, which is exactly nothing.
	   Where the theme defines its colours we simply take them. */
	--cb-accent: var(--volt, #111);
	--cb-accent-contrast: var(--ink, #fff);
	--cb-line: var(--steel, rgba(0, 0, 0, .12));
	--cb-muted: var(--mute, rgba(0, 0, 0, .55));
	--cb-taken: rgba(214, 54, 56, .12);
	--cb-selected: var(--ink-2, rgba(0, 0, 0, .08));
	--cb-surface: var(--ink-2, transparent);
	--cb-radius: 6px;

	max-width: 720px;
	margin: 0 auto;
	font: inherit;
}

@media (prefers-color-scheme: dark) {
	.cb-wizard,
	.cb-status,
	.cb-return,
	.cb-voucher,
	.cb-test {
		--cb-line: var(--steel, rgba(255, 255, 255, .16));
		--cb-muted: var(--mute, rgba(255, 255, 255, .6));
		--cb-selected: var(--ink-2, rgba(255, 255, 255, .12));
		--cb-accent: var(--volt, #fff);
		--cb-accent-contrast: var(--ink, #111);
	}
}

/* Progress ------------------------------------------------------------- */

.cb-progress {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	counter-reset: cb;
}

.cb-progress__item {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-top: 3px solid var(--cb-line);
	font-size: .85em;
	color: var(--cb-muted);
}

.cb-progress__item.is-active {
	border-top-color: var(--cb-accent);
	color: inherit;
	font-weight: 600;
}

.cb-progress__item.is-done {
	border-top-color: var(--cb-accent);
}

.cb-progress__num {
	display: inline-flex;
	width: 22px;
	height: 22px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-size: .75em;
	flex: none;
}

@media (max-width: 640px) {
	.cb-progress__label {
		display: none;
	}
}

/* Steps ---------------------------------------------------------------- */

.cb-step__title {
	margin: 0 0 6px;
	font-size: 1.4em;
}

.cb-step__hint {
	margin: 0 0 18px;
	color: var(--cb-muted);
	font-size: .9em;
}

.cb-notice {
	padding: 12px 14px;
	border-radius: var(--cb-radius);
	margin: 0 0 18px;
	font-size: .9em;
}

.cb-notice--error {
	background: var(--cb-taken);
	border: 1px solid rgba(214, 54, 56, .35);
}

/* Calendar ------------------------------------------------------------- */

.cb-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.cb-calendar__nav {
	appearance: none;
	background: none;
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-radius);
	padding: 6px 12px;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.cb-calendar__title {
	font-size: 1.05em;
}

.cb-calendar__grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.cb-calendar__grid th {
	padding: 6px 0;
	font-size: .75em;
	font-weight: 600;
	color: var(--cb-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.cb-day {
	height: 46px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid transparent;
	border-radius: var(--cb-radius);
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

.cb-day:hover:not(.is-disabled):not(.cb-day--empty) {
	border-color: var(--cb-accent);
}

.cb-day.is-disabled {
	cursor: not-allowed;
	color: var(--cb-muted);
	text-decoration: line-through;
}

.cb-day.is-booked {
	background: var(--cb-taken);
}

.cb-day.is-blocked,
.cb-day.is-past,
.cb-day.is-horizon {
	opacity: .45;
}

.cb-day.is-selected {
	background: var(--cb-selected);
}

.cb-day.is-edge {
	background: var(--cb-accent);
	color: var(--cb-accent-contrast);
	font-weight: 700;
}

.cb-day--empty {
	cursor: default;
}

.cb-calendar__legend {
	display: flex;
	gap: 16px;
	margin-top: 14px;
	font-size: .8em;
	color: var(--cb-muted);
}

.cb-legend::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 6px;
	border-radius: 3px;
	vertical-align: -2px;
	border: 1px solid var(--cb-line);
}

.cb-legend--taken::before {
	background: var(--cb-taken);
}

.cb-legend--selected::before {
	background: var(--cb-accent);
}

/* Length --------------------------------------------------------------- */

.cb-lengths {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
	margin-bottom: 22px;
}

.cb-length {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px;
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-radius);
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: left;
}

.cb-length span {
	font-size: .85em;
	color: var(--cb-muted);
}

/* The voucher card names its two lines; the wizard's uses <strong> and a
   bare <span>. Both want the same hierarchy — the length reads first, the
   price under it — so the label is pulled back out of the muted rule. */
.cb-length__label {
	font-size: 1em;
	font-weight: 600;
	color: inherit;
}

.cb-length__price {
	font-size: .85em;
	color: var(--cb-muted);
}

.cb-length:hover {
	border-color: var(--cb-accent);
}

.cb-length:focus-visible {
	outline: 2px solid var(--cb-accent);
	outline-offset: 2px;
}

.cb-length.is-active {
	border-color: var(--cb-accent);
	box-shadow: inset 0 0 0 1px var(--cb-accent);
}

.cb-price {
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-radius);
	padding: 16px;
}

.cb-price__line,
.cb-price__total {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
}

.cb-price__total {
	border-top: 1px solid var(--cb-line);
	margin-top: 8px;
	padding-top: 12px;
	font-size: 1.2em;
}

.cb-price__deposit {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--cb-line);
}

.cb-price__deposit small {
	grid-column: 1 / -1;
	color: var(--cb-muted);
	font-size: .8em;
}

.cb-price__km {
	margin-top: 10px;
	font-size: .85em;
	color: var(--cb-muted);
}

/* Discount code --------------------------------------------------------- */

.cb-coupon {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--cb-line);
}

.cb-coupon label {
	display: block;
	margin-bottom: 6px;
	font-size: .85em;
	color: var(--cb-muted);
}

.cb-coupon__row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.cb-coupon__row input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	text-transform: uppercase;
}

.cb-coupon__row .cb-button {
	flex: 0 0 auto;
	padding: 10px 18px;
}

.cb-coupon__status {
	margin: 8px 0 0;
	font-size: .85em;
	color: var(--cb-muted);
}

.cb-coupon__status.is-applied {
	color: #1a7f37;
}

.cb-coupon__status.is-error {
	color: #b32d2e;
}

/* A discount is the one line in the breakdown that gives money back, so it
   is the one line that should not read like another charge. */
.cb-price__line--discount {
	color: #1a7f37;
}

/* Form ----------------------------------------------------------------- */

.cb-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.cb-field--wide {
	grid-column: 1 / -1;
}

.cb-field label {
	display: block;
	margin-bottom: 4px;
	font-size: .85em;
	color: var(--cb-muted);
}

.cb-field input,
.cb-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	transition: border-color .2s ease;
}

.cb-field input:hover,
.cb-field textarea:hover,
.cb-coupon__row input:hover {
	border-color: var(--cb-muted);
}

/* :focus rather than :focus-visible — a text field that gives no sign it is
   the one receiving keystrokes is a field people type into twice. */
.cb-field input:focus,
.cb-field textarea:focus,
.cb-coupon__row input:focus {
	outline: none;
	border-color: var(--cb-accent);
	box-shadow: inset 0 0 0 1px var(--cb-accent);
}

.cb-field input::placeholder,
.cb-coupon__row input::placeholder {
	color: var(--cb-muted);
}

.cb-button:hover:not([disabled]) {
	opacity: .88;
}

.cb-button:focus-visible {
	outline: 2px solid var(--cb-accent);
	outline-offset: 2px;
}

.cb-consent label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	color: inherit;
	font-size: .95em;
}

.cb-consent input {
	width: auto;
	margin-top: 3px;
}

.cb-terms {
	max-height: 220px;
	overflow-y: auto;
	margin-top: 8px;
	padding: 12px;
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-radius);
	font-size: .85em;
}

/* The link is the part that has to survive an empty summary text: it is what
   puts the full terms in front of the customer before they pay. */
.cb-consent__link {
	margin: 8px 0 0 28px;
	font-size: .85em;
}

/* The honeypot must be unreachable, not merely invisible. */
.cb-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 640px) {
	.cb-form {
		grid-template-columns: 1fr;
	}
}

/* Summary and actions -------------------------------------------------- */

.cb-summary__list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 20px;
	margin: 0 0 18px;
}

.cb-summary__list dt {
	color: var(--cb-muted);
	font-size: .85em;
}

.cb-summary__list dd {
	margin: 0;
}

.cb-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 14px 0;
	border-top: 1px solid var(--cb-line);
	font-size: 1.3em;
}

.cb-summary__total small {
	font-size: .6em;
	color: var(--cb-muted);
}

.cb-summary__terms {
	margin: 18px 0;
	font-size: .9em;
	color: var(--cb-muted);
}

.cb-actions {
	display: flex;
	gap: 10px;
	margin-top: 24px;
}

.cb-button {
	appearance: none;
	border: 1px solid var(--cb-accent);
	background: var(--cb-accent);
	color: var(--cb-accent-contrast);
	padding: 12px 26px;
	border-radius: var(--cb-radius);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.cb-button[disabled] {
	opacity: .4;
	cursor: not-allowed;
}

.cb-button--ghost {
	background: none;
	color: inherit;
	border-color: var(--cb-line);
	font-weight: 400;
}

/* Return and status pages ---------------------------------------------- */

.cb-return,
.cb-status {
	max-width: 640px;
	margin: 40px auto;
	text-align: center;
}

/*
 * A customer lands here straight from paying, and often comes back to it from
 * the e-mail, so it is built to be read once and then screenshotted: one card,
 * the essentials in order, nothing that needs interpreting.
 */
.cb-status {
	text-align: left;
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-radius);
	padding: 32px clamp(20px, 5vw, 40px) 36px;
	font: inherit;
}

.cb-spinner {
	display: block;
	width: 36px;
	height: 36px;
	margin: 0 auto 18px;
	border: 3px solid rgba(0, 0, 0, .12);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: cb-spin 1s linear infinite;
}

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

.cb-status__eyebrow {
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .75em;
	opacity: .6;
	margin: 0;
}

.cb-status__title {
	margin: .2em 0 .6em;
}

.cb-status__badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--cb-status, #666);
	color: #fff;
	font-size: .85em;
}

.cb-status__list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 24px;
	margin: 24px 0;
}

.cb-status__list dt {
	opacity: .6;
	font-size: .85em;
}

.cb-status__list dd {
	margin: 0;
}

.cb-muted {
	opacity: .6;
}

.cb-status-page {
	padding: 0 16px;
}

.cb-status__list {
	border-top: 1px solid var(--cb-line);
	padding-top: 20px;
}

.cb-status__list dd {
	font-variant-numeric: tabular-nums;
}

.cb-status__section {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--cb-line);
}

.cb-status__section h2 {
	font-size: 1em;
	margin: 0 0 .4em;
}

.cb-status__section h2 ~ h2 {
	margin-top: 1.4em;
}

.cb-status__section p {
	margin: 0;
	color: var(--cb-muted);
}

.cb-status__retry {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--cb-line);
}

.cb-status__retry .cb-muted {
	display: block;
	margin: 10px 0 0;
	font-size: .9em;
}

.cb-status__contact {
	margin: 24px 0 0;
	font-size: .9em;
	color: var(--cb-muted);
}

.cb-status__contact a {
	color: inherit;
}

/* Worth a clean sheet of paper: customers print these. */
@media print {
	.cb-status {
		border: 0;
		padding: 0;
		max-width: none;
	}

	.cb-status__retry,
	.cb-notice {
		display: none;
	}
}

/* ---------------------------------------------------------------- vouchers */

/* The checkout borrows the wizard's fields and buttons wholesale; what it
   needs of its own is a length picker that is a radio group rather than a
   step, and a summary that sits at the bottom instead of on its own screen. */

.cb-voucher .cb-step {
	display: block;
}

.cb-lengths--voucher {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
}

.cb-voucher__summary {
	border-top: 1px solid rgba(0, 0, 0, .1);
	padding-top: 20px;
}

.cb-field__hint {
	margin: 6px 0 0;
	font-size: 13px;
	opacity: .7;
}

/* Test bench ------------------------------------------------------------ */

.cb-test__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-bottom: 16px;
	padding: 10px 14px;
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-radius);
	font-size: .85em;
}

.cb-test__badge {
	padding: 2px 10px;
	border-radius: 999px;
	font-weight: 600;
	color: #fff;
}

.cb-test__badge.is-test {
	background: #1a7f37;
}

/* A live gateway on a test page is the one thing here worth shouting about. */
.cb-test__badge.is-live {
	background: #b32d2e;
}

.cb-test__fact {
	color: var(--cb-muted);
}

.cb-test__link {
	margin-left: auto;
}

.cb-test__link + .cb-test__link {
	margin-left: 0;
}

.cb-notice--warning {
	border-left: 3px solid #bf8700;
}

.cb-test__tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--cb-line);
}

.cb-test__tab {
	appearance: none;
	border: 1px solid transparent;
	border-bottom: none;
	background: none;
	color: var(--cb-muted);
	padding: 10px 18px;
	border-radius: var(--cb-radius) var(--cb-radius) 0 0;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	margin-bottom: -1px;
}

.cb-test__tab.is-active {
	border-color: var(--cb-line);
	background: var(--cb-surface, transparent);
	color: inherit;
}

.cb-test__recent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px dashed var(--cb-line);
	font-size: .85em;
}

.cb-test__recent h3 {
	margin: 0 0 8px;
	font-size: 1em;
}

.cb-test__recent ul {
	margin: 0;
	padding-left: 1.1em;
}

.cb-test__recent li {
	margin-bottom: 4px;
}

.cb-test__hint {
	margin-top: 16px;
	font-size: .8em;
	color: var(--cb-muted);
}