/**
 * Booking modal — step 4, the Stripe Payment Element.
 *
 * There is very little to style here, and that is the point. Almost everything
 * inside `#sp-stripe-element` is rendered in a cross-origin iframe that no
 * stylesheet on this site can reach; it is dressed through the Element's own
 * `appearance` API in assets/js/booking-payment.js, with the same values this
 * file uses. What is left for CSS is the box the iframe sits in and the two
 * states it passes through.
 *
 * design/DESIGN-SYSTEM.md, quoted rather than approximated: the deep ground
 * #111, the 0.16 white field border, the brand red #EC1C24, Poppins at 15px,
 * micro-labels at 12px / .14em / uppercase — and no border radius anywhere,
 * because the whole design has five circles in it and nothing else is softened.
 */

.sp-payment {
	min-height: 220px;
	background: var(--sp-bg-deep);
	border: 1px solid var(--sp-line-strong);
	border-radius: var(--sp-radius);
	padding: var(--sp-5);
	transition: border-color var(--sp-dur-fast) var(--sp-ease);
}

/*
 * Before the Element paints. A striped bar rather than a spinner: the modal has
 * no spinner anywhere else, and this is on screen for a few hundred
 * milliseconds.
 */
.sp-payment.is-loading {
	position: relative;
	border-color: var(--sp-line-field);
}

.sp-payment.is-loading::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--sp-red) 40%,
		var(--sp-red) 60%,
		transparent 100%
	);
	background-size: 220% 100%;
	animation: sp-payment-sweep 1.1s linear infinite;
}

@keyframes sp-payment-sweep {
	from {
		background-position: 120% 0;
	}

	to {
		background-position: -120% 0;
	}
}

.sp-payment.is-ready {
	border-color: var(--sp-line-field);
}

/*
 * While Stripe is confirming. The card fields stay visible and stay put — the
 * customer must be able to see what they submitted — but nothing responds, and
 * the modal is told the same thing through `simpulse:payment-busy` so it can
 * block its own button and its own close.
 */
.sp-payment.is-busy {
	pointer-events: none;
	opacity: 0.62;
}

/*
 * The failure sentence, if the modal provides a slot for it. Red, at the
 * helper-text size, and never hidden behind an icon: a declined card is
 * something the customer has to read and act on.
 */
[data-sp-payment-message] {
	margin: var(--sp-3) 0 0;
	min-height: 1.2em;
	color: var(--sp-red);
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-snug);
}

[data-sp-payment-message]:empty {
	margin-top: 0;
	min-height: 0;
}

/*
 * The fallback submit button, which only exists when the modal renders no pay
 * button of its own. Full width, so it can never be mistaken for the modal's
 * own footer action sitting in the wrong place.
 */
.sp-payment__submit {
	display: block;
	width: 100%;
	margin-top: var(--sp-5);
}

.sp-payment__submit[disabled] {
	cursor: default;
	background: var(--sp-red-disabled);
}