/**
 * Bank transfer page — theme polish layer.
 *
 * @package WhatSender_Pro
 */

.wsp-checkout--bank-transfer {
	padding-top: calc(var(--wsp-header-h) + 0.5rem);
	padding-bottom: 4rem;
}

.wsp-checkout--bank-transfer .wslc-bank-transfer--theme {
	margin: 0;
}

/* Main form — subtle animated border glow */
.wsp-checkout--bank-transfer .wsp-checkout__main.wslc-bt-main {
	position: relative;
	border-radius: 32px;
	background: linear-gradient(145deg, #fff 0%, #faf8f4 40%, #f0fdf4 100%);
	box-shadow:
		0 24px 64px rgba(17, 17, 17, 0.07),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.wsp-checkout--bank-transfer .wsp-checkout__main.wslc-bt-main::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(37, 211, 102, 0.35), rgba(184, 255, 60, 0.2), rgba(37, 211, 102, 0.1));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	opacity: 0.85;
}

.wsp-checkout--bank-transfer .wslc-bt-stepper {
	margin-bottom: 1.25rem;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(8px);
	box-shadow: 0 4px 20px rgba(17, 17, 17, 0.04);
}

.wsp-checkout--bank-transfer .wslc-bt-stepper span.is-active {
	background: linear-gradient(135deg, var(--wsp-ink) 0%, #14532d 100%);
	box-shadow: 0 4px 14px rgba(20, 83, 45, 0.25);
}

.wsp-checkout--bank-transfer .wslc-bt-panel.wslc-panel {
	background: linear-gradient(145deg, #fff 0%, #faf8f4 55%, #f3fbf6 100%);
	border: 1px solid rgba(17, 17, 17, 0.05);
	transition: box-shadow 0.25s var(--wsp-ease), transform 0.25s var(--wsp-ease);
}

.wsp-checkout--bank-transfer .wslc-bt-panel.wslc-panel:hover {
	box-shadow: 0 12px 36px rgba(17, 17, 17, 0.06);
}

.wsp-checkout--bank-transfer .wslc-picker-block--devices {
	background: linear-gradient(160deg, #fff 0%, #f8fafc 35%, #ecfdf5 100%) !important;
	border: 1px solid rgba(37, 211, 102, 0.12) !important;
	box-shadow: 0 10px 32px rgba(37, 211, 102, 0.06) !important;
}

/* Active savings tier highlight */
.wsp-checkout--bank-transfer .wslc-savings-step.is-active {
	background: linear-gradient(180deg, rgba(37, 211, 102, 0.12), rgba(184, 255, 60, 0.08));
	box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.35);
	transform: translateY(-3px);
}

.wsp-checkout--bank-transfer .wslc-savings-step.is-active .wslc-savings-step__off {
	background: linear-gradient(90deg, var(--wsp-lime), #d4ff7a);
	color: var(--wsp-ink);
	border-color: transparent;
}

.wsp-checkout--bank-transfer .wslc-device-card__ribbon {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 0.18rem 0.35rem;
	font-size: 0.5rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wsp-ink);
	background: linear-gradient(90deg, var(--wsp-lime), #d4ff7a);
	border-radius: 18px 18px 0 0;
}

.wsp-checkout--bank-transfer .wslc-device-card:has(.wslc-device-card__ribbon) {
	padding-top: 1.35rem;
}

.wsp-checkout--bank-transfer .wslc-bt-guide {
	background: linear-gradient(180deg, #fff 0%, var(--wsp-cream) 120%);
	border: 1px solid rgba(17, 17, 17, 0.06);
}

.wsp-checkout--bank-transfer .wsp-checkout__order.wslc-bt-order {
	box-shadow:
		0 28px 70px rgba(17, 17, 17, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.wsp-checkout--bank-transfer .wslc-bt-success {
	animation: wsp-bt-success-in 0.5s var(--wsp-ease) both;
}

@keyframes wsp-bt-success-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wsp-checkout--bank-transfer .wslc-bt-submit .wslc-bt-submit__arrow {
	display: inline-block;
	transition: transform 0.2s var(--wsp-ease);
}

.wsp-checkout--bank-transfer .wslc-bt-submit:hover .wslc-bt-submit__arrow {
	transform: translateX(4px);
}

@media (max-width: 960px) {
	.wsp-checkout--bank-transfer .wsp-checkout__hero-card {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wsp-checkout--bank-transfer .wslc-bt-success {
		animation: none;
	}
	.wsp-checkout--bank-transfer .wslc-bt-panel.wslc-panel {
		transition: none;
	}
}