/* ==========================================================================
   Shared checkout-flow shell — Figma "Checkout / 0N ..." desktop + mobile.
   Used by every step's page (cart.css for "Koszyk", dane-klienta.css for
   "Dane klienta", and whichever stylesheets "Dostawa"/"Płatność"/
   "Podsumowanie" get once designed): page header, step indicator, the
   order-summary card, and the cream benefits band. Load this before the
   step-specific stylesheet — it only covers what's identical across steps.
   ========================================================================== */

.site-content {
	overflow-x: hidden;
}

/* Notices (empty-cart message, coupon errors, "cart updated"…) — same look
   as assets/css/account.css, the only other place in the theme that styles
   these; duplicated rather than shared since neither file loads on the
   other's pages. */

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	list-style: none;
	margin: 0 0 24px;
	padding: 16px 20px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-left: 4px solid var(--deercoffe-color-error);
	font-family: var(--deercoffe-font-body);
	font-size: 14px;
	color: var(--deercoffe-color-text);
	outline: none;
}

.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
	content: none;
}

.woocommerce-message,
.woocommerce-info {
	border-left-color: var(--deercoffe-color-accent);
}

/* Page shell ---------------------------------------------------------------- */

.checkout-page {
	padding: 56px 0 72px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.checkout-page-header {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.checkout-page-title {
	font-family: var(--deercoffe-font-heading);
	font-weight: 400;
	font-size: 34px;
	color: var(--deercoffe-color-text);
	margin: 0;
}

.checkout-page-subtitle {
	font-family: var(--deercoffe-font-body);
	font-size: 15px;
	color: var(--deercoffe-color-muted);
	margin: 0;
}

/* Step indicator — desktop: numbered circles ------------------------------ */

.checkout-steps-mobile {
	display: none;
}

.checkout-steps-desktop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.checkout-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 1 1 0;
	min-width: 0;
}

.checkout-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 14px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	font-family: var(--deercoffe-font-body);
	font-size: 15px;
	color: var(--deercoffe-color-muted);
	background: #fff;
	text-decoration: none !important;
}

.checkout-step-label {
	font-family: var(--deercoffe-font-body);
	font-size: 15px;
	color: var(--deercoffe-color-muted);
	white-space: nowrap;
}

.checkout-step--is-done .checkout-step-number,
.checkout-step--is-current .checkout-step-number {
	background: var(--deercoffe-color-green);
	border-color: var(--deercoffe-color-green);
	color: #fff !important;
}

a.checkout-step-number:hover,
a.checkout-step-number:focus-visible {
	background: var(--deercoffe-color-primary-dark);
	border-color: var(--deercoffe-color-primary-dark);
}

/* Step indicator — mobile: "Krok X z 5" + progress bar --------------------- */

.checkout-steps-mobile-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--deercoffe-font-body);
	font-size: 15px;
	color: var(--deercoffe-color-muted);
}

.checkout-steps-mobile-track {
	display: flex;
	gap: 8px;
}

.checkout-steps-mobile-segment {
	flex: 1 1 0;
	height: 4px;
	border-radius: 2px;
	background: var(--deercoffe-color-gray-200);
}

.checkout-steps-mobile-segment.is-current {
	background: var(--deercoffe-color-green);
}

/* Two-panel layout (primary panel + order summary) ------------------------- */

.checkout-panels {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.checkout-panel-primary,
.checkout-summary {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 2px;
	display: flex;
	flex-direction: column;
}

.checkout-panel-primary {
	flex: 1 1 auto;
	min-width: 0;
	padding: 28px;
}

.checkout-panel-title {
	font-family: var(--deercoffe-font-heading);
	font-weight: 400;
	font-size: 34px;
	color: var(--deercoffe-color-text);
	margin: 0;
}

/* Order summary card --------------------------------------------------------- */

.checkout-summary {
	flex: 0 0 400px;
	width: 400px;
	padding: 28px;
	gap: 20px;
}

.checkout-summary-lines {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.checkout-summary-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--deercoffe-font-body);
	font-size: 15px;
	color: var(--deercoffe-color-muted);
	margin: 0;
}

.checkout-summary-total {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	font-family: var(--deercoffe-font-heading);
	font-weight: 400;
	font-size: 34px;
	color: var(--deercoffe-color-text);
	margin: 0;
}

.checkout-summary-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 18px 30px;
	background: var(--deercoffe-color-primary);
	color: var(--deercoffe-color-bg) !important;
	font-family: var(--deercoffe-font-body);
	font-size: 15px;
	font-weight: 400;
	border: 0;
	border-radius: 4px;
	text-decoration: none !important;
	cursor: pointer;
}

.checkout-summary-cta:hover,
.checkout-summary-cta:focus {
	background: var(--deercoffe-color-primary-dark);
	color: var(--deercoffe-color-bg) !important;
}

.checkout-summary-helper {
	font-family: var(--deercoffe-font-body);
	font-size: 15px;
	color: var(--deercoffe-color-muted);
	margin: 0;
}

/* Benefits band — full-bleed cream band under the checkout content --------- */

.checkout-benefits {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background: var(--deercoffe-color-cream-light);
}

.checkout-benefits-inner {
	max-width: var(--deercoffe-container-width);
	margin: 0 auto;
	padding: 24px 20px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.checkout-benefits-inner p {
	font-family: var(--deercoffe-font-body);
	font-size: 15px;
	color: var(--deercoffe-color-muted);
	margin: 0;
	white-space: nowrap;
}

/* ==========================================================================
   Mobile (<=900px) — single-column stack with the Figma mobile step
   indicator. The threshold is wider than the theme's usual 782px cutoff
   because the two-column desktop layout has a fixed-width summary card that
   gets uncomfortably tight for the flexible panel next to it below that.
   ========================================================================== */

@media (max-width: 900px) {
	.checkout-page {
		padding: 32px 0 40px;
		gap: 24px;
	}

	.checkout-page-title {
		font-size: 27px;
		letter-spacing: 0.04em;
	}

	.checkout-page-subtitle {
		font-size: 14px;
	}

	.checkout-steps-desktop {
		display: none;
	}

	.checkout-steps-mobile {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.checkout-panels {
		flex-direction: column;
		gap: 24px;
	}

	.checkout-panel-primary,
	.checkout-summary {
		width: 100%;
		flex: none;
		padding: 20px;
	}

	.checkout-panel-title {
		font-size: 27px;
		letter-spacing: 0.04em;
	}

	.checkout-summary-line {
		font-size: 14px;
	}

	.checkout-summary-total {
		font-size: 27px;
		letter-spacing: 0.04em;
	}

	.checkout-summary-helper {
		font-size: 14px;
	}

	.checkout-benefits-inner {
		flex-direction: column;
		gap: 8px;
	}

	.checkout-benefits-inner p {
		white-space: normal;
	}
}