.wcspl-box {
	--wcspl-accent: #635bff;
	--wcspl-border: rgba(0, 0, 0, .12);
	--wcspl-bg: #fff;
	--wcspl-muted: rgba(0, 0, 0, .62);
	display: block;
	box-sizing: border-box;
	padding: 16px;
	border: 1px solid var(--wcspl-border);
	border-left: 3px solid var(--wcspl-accent);
	border-radius: 12px;
	background: var(--wcspl-bg);
	color: inherit;
	line-height: 1.4;
	text-align: left;
}
.wcspl-box * { box-sizing: border-box; }

.wcspl-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.wcspl-lock {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--wcspl-accent) 12%, transparent);
	color: var(--wcspl-accent);
}
.wcspl-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wcspl-head-text strong { font-size: 1em; font-weight: 600; }
.wcspl-head-text span { font-size: .9em; color: var(--wcspl-muted); }

.wcspl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 12px;
}
.wcspl-chip {
	--chip-bg: #fff;
	--chip-fg: #1f2933;
	--chip-bd: rgba(0, 0, 0, .14);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 auto;
	min-width: 0;
	height: 34px;
	padding: 0 14px;
	border: 1.5px solid var(--chip-bd);
	border-radius: 8px;
	background: var(--chip-bg);
	color: var(--chip-fg);
	transition: transform .15s ease, box-shadow .15s ease;
}
.wcspl-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0, 0, 0, .12); }
.wcspl-chip img { display: block; height: 20px; width: auto; max-width: 60px; }
.wcspl-chip-text {
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Brand-coloured text badges (used when no artwork file is present) */
.wcspl-chip--visa:not(.wcspl-chip--img)       { --chip-bg: #1a237e; --chip-fg: #fff; --chip-bd: #c5cae9; }
.wcspl-chip--visa:not(.wcspl-chip--img) .wcspl-chip-text { font-style: italic; letter-spacing: .02em; }
.wcspl-chip--mastercard:not(.wcspl-chip--img) { --chip-bg: #1d1e22; --chip-fg: #fff; --chip-bd: #c9cbd1; }
.wcspl-chip--amex:not(.wcspl-chip--img)       { --chip-bg: #3f7bbf; --chip-fg: #fff; --chip-bd: #cfe0f3; }
.wcspl-chip--discover:not(.wcspl-chip--img)   { --chip-bg: #f47216; --chip-fg: #fff; --chip-bd: #fbd0b0; }
.wcspl-chip--jcb:not(.wcspl-chip--img)        { --chip-bg: #0b6b3a; --chip-fg: #fff; --chip-bd: #bfe0cd; }
.wcspl-chip--maestro:not(.wcspl-chip--img)    { --chip-bg: #0099df; --chip-fg: #fff; --chip-bd: #bfe6f7; }
.wcspl-chip--paypal:not(.wcspl-chip--img)     { --chip-bg: #fff; --chip-fg: #1b2a49; --chip-bd: #d5d9e0; }
.wcspl-chip--apple_pay:not(.wcspl-chip--img)  { --chip-bg: #fff; --chip-fg: #111; --chip-bd: #d5d9e0; }
.wcspl-chip--google_pay:not(.wcspl-chip--img) { --chip-bg: #fff; --chip-fg: #3c4043; --chip-bd: #d5d9e0; }
.wcspl-chip--amazon_pay:not(.wcspl-chip--img) { --chip-bg: #232f3e; --chip-fg: #ffb340; --chip-bd: #c9cdd3; }
.wcspl-chip--klarna:not(.wcspl-chip--img)     { --chip-bg: #ffb3c7; --chip-fg: #17120f; --chip-bd: #ffd9e3; }
.wcspl-chip--stripe:not(.wcspl-chip--img)     { --chip-bg: #635bff; --chip-fg: #fff; --chip-bd: #cfcbff; }

.wcspl-points {
	list-style: none;
	margin: 0;
	padding: 12px 0 0;
	border-top: 1px dashed var(--wcspl-border);
	display: grid;
	gap: 6px;
	font-size: .88em;
	color: var(--wcspl-muted);
}
.wcspl-points li { position: relative; margin: 0; padding-left: 22px; }
.wcspl-points li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .35em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--wcspl-accent);
	border-bottom: 2px solid var(--wcspl-accent);
	transform: rotate(-45deg);
}

/* Label next to the radio (block checkout) */
.wcspl-label { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Classic checkout: tidy the default payment box */
.woocommerce-checkout #payment div.payment_box.payment_method_wcspl_stripe_link,
.woocommerce-checkout #payment .payment_method_wcspl_stripe_link .payment_box {
	background: transparent;
	padding: 0;
}
.woocommerce-checkout #payment div.payment_box.payment_method_wcspl_stripe_link::before { display: none; }

@media (prefers-color-scheme: dark) {
	.wcspl-box { --wcspl-bg: rgba(255, 255, 255, .04); --wcspl-border: rgba(255, 255, 255, .18); --wcspl-muted: rgba(255, 255, 255, .7); }
}
/* Responsive */
@media (max-width: 600px) {
	.wcspl-box { padding: 14px; }
	.wcspl-chips { gap: 6px; }
	.wcspl-chip { height: 30px; padding: 0 10px; border-radius: 7px; }
	.wcspl-chip-text { font-size: 11.5px; }
	.wcspl-chip img { height: 17px; }
}
@media (max-width: 380px) {
	.wcspl-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wcspl-chip { padding: 0 4px; height: 28px; }
	.wcspl-chip-text { font-size: 9.5px; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; }
}