/* ── PAGE BASE ── */
body {
	background: #f8fafc;
}

.checkout-page {
	max-width: 100rem;
	margin: 0 auto;
	padding: var(--space-6);
}

/* ── PAGE TITLE ── */
.checkout-page-title {
	margin: 0 auto var(--space-6);
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.checkout-page-title h1 {
	font-size: var(--text-deal, 2.125rem);
	font-weight: 900;
	color: var(--gray-800);
	letter-spacing: -0.04em;
}

.checkout-layout {
	margin: 0 auto;
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: var(--space-4);
	align-items: start;
}

.checkout-form-card,
.checkout-summary-card {
	background: white;
	border: 0.0625rem solid var(--gray-200);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
}

.checkout-title {
	font-size: var(--text-3xl);
	font-weight: 800;
	margin-bottom: var(--space-4);
	color: var(--gray-800);
}

.checkout-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.checkout-form input {
	border: 0.0625rem solid var(--gray-200);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	font-size: var(--text-md);
	font-family: inherit;
	outline: none;
	transition: border-color 0.2s;
}

.checkout-form input:focus {
	border-color: var(--blue);
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	flex: 1;
}

.form-group label {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--gray-700);
}

.form-group label span {
	color: var(--red);
	font-weight: 700;
}

.form-group input {
	border: 0.0625rem solid var(--gray-200);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	font-size: var(--text-md);
	font-family: inherit;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 0.125rem rgba(26, 111, 212, 0.15);
}

.form-row {
	display: flex;
	gap: var(--space-4);
}

@media (max-width: 56.25rem) {
	.form-row {
		flex-direction: column;
	}
}

.checkout-continue {
	margin-top: var(--space-4);
}

.checkout-summary {
	margin-top: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.summary-row {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-md);
}

.total-row {
	font-size: var(--text-xl);
	font-weight: 800;
	color: var(--red);
}

.qr-section {
	margin-top: var(--space-6);
	text-align: center;
}

.qr-wrapper {
	margin-top: var(--space-3);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: filter 0.3s ease;
}

.qr-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}

.qr-wrapper.blurred {
	filter: blur(12px);
	pointer-events: none;
}

/* Responsive */
@media (max-width: 56.25rem) {
	.checkout-layout {
		grid-template-columns: 1fr;
	}
}