/*
 * Cancellation and date change. design/DESIGN-SYSTEM.md §4.13 (form controls),
 * §4.18 (time chips), §4.22 (left accent), §3.4 (grids).
 *
 * Nothing here invents a control. The panels are the account panel's recipe,
 * the fields are .sp-field / .sp-input exactly as the contact form uses them,
 * and the slot picker is the checkout's own .sp-times / .sp-time chip — the
 * customer is choosing a start time, and it should look like the one place
 * they have already chosen one.
 *
 * The one idea that is this component's own is the verdict line: the sentence
 * that says whether money comes back. It sits above the button, never beside
 * it, and it is the only thing on the page allowed to carry the accent. A
 * refund is stated in the brand red because it is the fact the customer came
 * for; a refusal is stated in the muted body colour, because shouting at
 * somebody who is already too late to get their money back is not the job.
 *
 * Radius 0 throughout, per the design system. The only circle is the notice
 * glyph, which comes from form.css.
 */

.sp-cancel__notice,
.sp-cancel__refused,
.sp-cancel__done {
	margin-top: var(--sp-9);
}

/* ============================================================== booking */

.sp-cancel__booking {
	margin-top: var(--sp-11);
	padding: clamp(20px, 2.4vw, 26px);
	background: var(--sp-surface);
	border: var(--sp-border);
	border-left: 2px solid var(--sp-red);
}

.sp-cancel__booking-title {
	margin: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-md-lg);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-cancel__when {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-3);
	margin: var(--sp-5) 0 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: var(--sp-fs-xl);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-cancel__hours {
	font-family: var(--sp-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: var(--sp-fs-md);
	text-transform: none;
	color: var(--sp-text-78);
}

.sp-cancel__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-7);
	margin: 0;
	padding-top: var(--sp-5);
	margin-top: var(--sp-5);
	border-top: 1px solid var(--sp-line-faint);
}

.sp-cancel__fact {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.sp-cancel__fact dd {
	margin: 0;
	font-size: var(--sp-fs-md);
	color: var(--sp-text);
}

/* ================================================================ panel */

.sp-cancel__panel {
	margin-top: var(--sp-11);
	padding: clamp(22px, 3vw, 34px);
	background: var(--sp-bg-deep);
	border: 1px solid var(--sp-line-card);
}

.sp-cancel__panel-title {
	margin: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-20);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-cancel__panel-intro {
	margin: var(--sp-3) 0 0;
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}

/* -------------------------------------------------------- the verdict */

/*
 * The sentence ticket 32 is really about. It is printed before the button and
 * never after it, so it gets the type size of a statement rather than of help
 * text.
 */
.sp-cancel__verdict {
	margin: var(--sp-7) 0 0;
	padding-left: var(--sp-5);
	border-left: 2px solid var(--sp-line-strong);
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-78);
}

.sp-cancel__verdict--refund {
	border-left-color: var(--sp-red);
	color: var(--sp-text);
}

.sp-cancel__verdict--stop {
	border-left-color: var(--sp-red);
	color: var(--sp-text-78);
}

.sp-cancel__deadline {
	margin: var(--sp-2) 0 0;
	padding-left: var(--sp-5);
}

.sp-cancel__closed {
	margin: var(--sp-11) 0 0;
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}

/* --------------------------------------------------------------- forms */

.sp-cancel__form {
	margin-top: var(--sp-9);
}

.sp-cancel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-5);
	margin-top: var(--sp-7);
}

.sp-cancel__pick {
	margin-top: var(--sp-9);
}

.sp-cancel__pick-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--sp-5);
}

.sp-cancel__pick-row .sp-field {
	flex: 1 1 200px;
}

.sp-cancel__pick-go,
.sp-cancel__pick-continue {
	flex: 0 0 auto;
}

/*
 * With JavaScript the day picker submits itself, so its button is redundant —
 * and a button that does nothing is worse than no button. The script sets the
 * flag; without it the button stays and the page still works.
 */
.sp-cancel--auto .sp-cancel__pick-go {
	display: none;
}

/* --------------------------------------------------------------- slots */

.sp-cancel__slots {
	margin: var(--sp-9) 0 0;
	padding: 0;
	border: 0;
}

.sp-cancel__slots legend {
	padding: 0;
	margin-bottom: var(--sp-3);
}

/*
 * The chip is a <label> wrapping a visually hidden radio, so the whole thing
 * is clickable, keyboard-reachable and needs no JavaScript. :focus-within
 * carries the focus ring the hidden input would otherwise take away.
 */
.sp-cancel__slots .sp-time {
	display: block;
	position: relative;
}

.sp-cancel__slots .sp-time:focus-within {
	border-color: var(--sp-red);
	box-shadow: 0 0 0 3px var(--sp-tint-red-25);
}

.sp-cancel__slots .sp-time:has(input:checked) {
	background: var(--sp-tint-red-16);
	border-color: var(--sp-red);
}

.sp-cancel__pick-continue {
	margin-top: var(--sp-7);
}

/* --------------------------------------------------------------- quote */

.sp-cancel__quote {
	margin-top: var(--sp-11);
	padding-top: var(--sp-9);
	border-top: 1px solid var(--sp-line-card);
}

.sp-cancel__quote-when {
	margin: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-md-lg);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-cancel__back {
	margin: var(--sp-9) 0 0;
	font-size: var(--sp-fs-sm);
}

/* ================================================================= help */

.sp-cancel__help {
	margin-top: clamp(34px, 4.5vw, 62px);
	padding-top: clamp(26px, 3.5vw, 44px);
	border-top: 1px solid var(--sp-line-card);
}

.sp-cancel__help-title {
	margin: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-md-lg);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-cancel__help-contact,
.sp-cancel__help-back {
	margin: var(--sp-3) 0 0;
	font-size: var(--sp-fs-sm);
	color: var(--sp-text-78);
}

/* ============================================================== the top-up */

/*
 * A dearer move, paid for here — ticket 33's third criterion.
 *
 * Two faces, one of which is always hidden with the `hidden` attribute rather
 * than a class, so the no-JavaScript state is the one the server rendered and
 * nothing has to be un-styled to reach it. There is no query in this block:
 * the panel is already inside the page's text column and needs none.
 *
 * The Element's own box is `.sp-payment` from components/payment.css — the
 * same box, the same loading sweep and the same busy dimming the checkout
 * modal uses, because it is the same module mounting into it.
 */

.sp-cancel__topup {
	margin-top: var(--sp-7);
	padding-left: var(--sp-5);
	border-left: 2px solid var(--sp-red);
}

.sp-cancel__topup-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-5);
}

.sp-cancel__topup-amount {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: var(--sp-fs-xl);
	line-height: var(--sp-lh-tight);
	color: var(--sp-text);
}

.sp-cancel__topup-mount {
	min-height: 220px;
}

/*
 * The sentence slot booking-payment.js writes a declined card into. Its red is
 * inherited from components/payment.css; `is-progress` is the one sentence of
 * ours that goes there and is not a problem.
 */
.sp-cancel__topup-message.is-progress {
	color: var(--sp-text-78);
}

.sp-cancel__topup-safe {
	margin: var(--sp-3) 0 0;
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-snug);
	color: var(--sp-text-60);
}