/**
 * PayEZ with CC — checkout styles.
 *
 * The card fields themselves are drawn by Stripe inside its own frame, so this
 * governs the frame around them: the space they occupy before they arrive, the
 * error line beneath, and a short note about who is handling the card.
 *
 * Written to sit inside somebody else's theme. Colours come from currentColor
 * and a translucent border wherever they can, so the block picks up the
 * surrounding text and background instead of imposing its own palette, and it
 * stays legible on a dark theme without needing to know it is on one.
 */

/*
 * The accent is published by PHP as a custom property so the colour has one
 * source. The fallback here keeps the stylesheet sensible on its own.
 */
:root {
	--wc-spl-accent: #3c77ff;
	--wc-spl-accent-dark: #3162d1;
}

.wc-spl-card-element {
	position: relative;
	margin: 14px 0 0;
	min-height: 44px;
}

/* Stripe's frame carries its own spacing; this stops it doubling up. */
.wc-spl-card-element > iframe {
	display: block;
}

/* ------------------------------------------------------------ Pay button */

/*
 * The one button on the page that matters. Themes style it heavily and with
 * high specificity, so the colour properties are forced -- but only those.
 * Size, spacing and typography are left to the theme, so the button keeps the
 * shape the rest of the checkout gave it.
 */
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order,
#place_order,
.wc-block-components-checkout-place-order-button {
	background-color: var( --wc-spl-accent ) !important;
	border-color: var( --wc-spl-accent ) !important;
	color: #fff !important;
	font-weight: 600;
	transition: background-color .15s ease, box-shadow .15s ease;
}

.woocommerce #payment #place_order:hover,
.woocommerce-checkout #place_order:hover,
#place_order:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var( --wc-spl-accent-dark ) !important;
	border-color: var( --wc-spl-accent-dark ) !important;
}

#place_order:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible {
	outline: 2px solid var( --wc-spl-accent-dark );
	outline-offset: 2px;
}

#place_order:active,
.wc-block-components-checkout-place-order-button:active {
	background-color: var( --wc-spl-accent-dark ) !important;
	transform: translateY( 1px );
}

#place_order:disabled,
#place_order[disabled],
.wc-block-components-checkout-place-order-button:disabled {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	#place_order,
	.wc-block-components-checkout-place-order-button {
		transition: none;
	}

	#place_order:active,
	.wc-block-components-checkout-place-order-button:active {
		transform: none;
	}
}

/* ------------------------------------------------- Redirect fallback */

/*
 * Shown in place of the card fields when they cannot be drawn -- Stripe.js
 * blocked, or a page whose form this script cannot drive. The payment still
 * goes through, on Stripe's own page, so this reads as information rather than
 * as an error.
 */
.wc-spl-redirect-note {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid currentColor;
	border-radius: 6px;
	opacity: .75;
	font-size: .9em;
	line-height: 1.5;
}

/* ------------------------------------------------------- Loading state */

/*
 * Holds the height an empty payment box would otherwise collapse to. Stripe
 * replaces the contents once its iframe is ready.
 */
.wc-spl-card-skeleton {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 2px 0;
}

/*
 * Shaped like what replaces it: one full-width row for the card number, then
 * expiry and CVC side by side. A placeholder that does not match the real
 * fields makes the box jump the moment Stripe arrives, and a checkout that
 * jumps under someone entering a card number is a checkout they leave.
 */
.wc-spl-card-skeleton__row {
	display: flex;
	gap: 12px;
}

/*
 * Height, not flex, on the field itself. Inside the column above, `flex: 1`
 * means a flex-basis of zero in the block direction, so the full-width row
 * collapsed to nothing and the placeholder showed only the pair beneath it.
 */
.wc-spl-card-skeleton__field {
	display: block;
	height: 44px;
	border-radius: 6px;
	background: currentColor;
	opacity: .07;
	animation: wc-spl-pulse 1.4s ease-in-out infinite;
}

/* Only within the row is sharing the width the right behaviour. */
.wc-spl-card-skeleton__row .wc-spl-card-skeleton__field {
	flex: 1 1 0;
}

.wc-spl-card-skeleton__row .wc-spl-card-skeleton__field:nth-child(2) {
	animation-delay: .2s;
}

@keyframes wc-spl-pulse {
	0%,
	100% {
		opacity: .07;
	}

	50% {
		opacity: .14;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wc-spl-card-skeleton__field {
		animation: none;
	}
}

/*
 * The placeholder is removed by the script once Stripe reports its fields are
 * ready. It cannot be hidden with CSS from here: Stripe appends its iframe
 * after the placeholder, and no sibling selector reaches backwards.
 */

/* Carries the current total for the script; never meant to be seen. */
.wc-spl-total {
	display: none !important;
}

/* ---------------------------------------------------------------- Errors */

/*
 * Two reds, because one cannot do both. The dark red below measures 6.30:1 on
 * white and 2.50:1 on a dark panel -- so on a dark theme the shopper could
 * barely read why their card was declined, at the exact moment they needed to.
 * The dark-scheme red measures 6.52:1 there.
 *
 * prefers-color-scheme is the only signal available: this block sits inside
 * somebody else's theme and cannot ask it what colour its background is.
 */
:root {
	--wc-spl-error: #b32d2e;
	--wc-spl-error-line: rgba( 179, 45, 46, .28 );
	--wc-spl-error-wash: rgba( 179, 45, 46, .07 );
	--wc-spl-error-badge-ink: #fff;
}

@media ( prefers-color-scheme: dark ) {
	:root {
		--wc-spl-error: #ff8085;
		--wc-spl-error-line: rgba( 255, 128, 133, .34 );
		--wc-spl-error-wash: rgba( 255, 128, 133, .1 );
		--wc-spl-error-badge-ink: #2a0d0e;
	}
}

.wc-spl-card-error {
	margin: 0;
	font-size: .875em;
	line-height: 1.45;
	color: var( --wc-spl-error );
}

.wc-spl-card-error:not(:empty) {
	display: flex;
	gap: 7px;
	margin-top: 10px;
	padding: 9px 12px;
	border-radius: 6px;
	border: 1px solid var( --wc-spl-error-line );
	background: var( --wc-spl-error-wash );
}

.wc-spl-card-error:not(:empty)::before {
	content: "!";
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	border-radius: 50%;
	background: var( --wc-spl-error );
	color: var( --wc-spl-error-badge-ink );
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* ----------------------------------------------------------------- Trust */

/*
 * The one place this plugin can say what makes it different, at the moment
 * somebody is deciding whether to type a card number. It was set at .72 opacity,
 * which is faint enough that a reassurance stops reassuring. It now reads as a
 * quiet statement rather than fine print.
 */
.wc-spl-trust {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 14px 0 0;
	padding-top: 13px;
	border-top: 1px solid;
	border-color: color-mix( in srgb, currentColor 12%, transparent );
	font-size: .8125em;
	line-height: 1.5;
	opacity: .85;
}

/* Where color-mix is unsupported, a flat translucent rule instead. */
@supports not ( color: color-mix( in srgb, red 50%, transparent ) ) {
	.wc-spl-trust {
		border-color: rgba( 128, 128, 128, .25 );
	}
}

.wc-spl-trust__lock {
	flex: none;
	width: 14px;
	height: 16px;
	margin-top: 1px;
	background-color: var( --wc-spl-accent, #3c77ff );
	-webkit-mask: var( --wc-spl-lock ) no-repeat center / contain;
	mask: var( --wc-spl-lock ) no-repeat center / contain;
}

.wc-spl-trust {
	--wc-spl-lock: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0z'/%3E%3C/svg%3E" );
}

/* Browsers without mask support still get the sentence, just no glyph. */
@supports not ( ( mask: url( "" ) ) or ( -webkit-mask: url( "" ) ) ) {
	.wc-spl-trust__lock {
		display: none;
	}
}

/* --------------------------------------------------------- Block checkout */

.wc-spl-blocks-fields .wc-spl-card-error {
	margin-top: 10px;
}

.wc-spl-blocks-fields > p:first-child {
	margin-top: 0;
}