/* Checkout (classic [woocommerce_checkout], custom templates)
 *
 * Two columns: customer details (left) + a sticky order-review card with the
 * payment box (right). Order-received ("thank you") card lives here too. We keep
 * WooCommerce's native field/markup classes and only restyle them, so the
 * checkout AJAX (update_order_review, place order) keeps working untouched.
 */

body.woocommerce-checkout .woocommerce {
	max-width: min(1600px, 94vw);
	margin-left: auto;
	margin-right: auto;
}

/* ----------------------------------------------------------------- Layout */

.bollaert-checkout__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: var(--wp--preset--spacing--6);
	align-items: start;
	margin: var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--12);
}
.bollaert-checkout__main { min-width: 0; }

/* Billing / shipping / additional field groups become cards */
.bollaert-checkout .woocommerce-billing-fields,
.bollaert-checkout .woocommerce-shipping-fields,
.bollaert-checkout .woocommerce-additional-fields,
.bollaert-checkout #ship-to-different-address {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--6);
	box-shadow: var(--wp--preset--shadow--subtle);
	margin-bottom: var(--wp--preset--spacing--5);
}
.bollaert-checkout .woocommerce-billing-fields h3,
.bollaert-checkout .woocommerce-shipping-fields h3,
.bollaert-checkout .woocommerce-additional-fields h3,
.bollaert-checkout #ship-to-different-address label {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--lg);
}
.bollaert-checkout #ship-to-different-address { display: flex; align-items: center; }
.bollaert-checkout #ship-to-different-address label { margin: 0; display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer; }
.bollaert-checkout #ship-to-different-address input { accent-color: var(--wp--preset--color--brand); }

/* On wide screens, billing & shipping sit side by side inside the main column */
@media (min-width: 781px) {
	.bollaert-checkout__details {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--5);
		align-items: start;
	}
	.bollaert-checkout__details .col-1,
	.bollaert-checkout__details .col-2 { min-width: 0; }
	/* When shipping is empty the billing card spans full width */
	.bollaert-checkout__details .col-2:empty { display: none; }
}

/* Neutralise WooCommerce core's `.col2-set .col-1/.col-2 { float; width:48% }`,
 * which otherwise shrinks each grid item to 48% of its column and breaks the
 * placement. Grid items must fill their own column. */
.bollaert-checkout .col2-set .col-1,
.bollaert-checkout .col2-set .col-2 {
	float: none;
	width: auto;
	max-width: none;
	padding: 0;
}

/* WooCommerce core adds a clearfix `.col2-set::before/::after { content:" ";
 * display:table }`. Inside a grid container those pseudo-elements become real
 * grid items, so the grid filled cells in the order ::before, col-1, col-2,
 * ::after — pushing billing into column 2 and shipping onto a second row.
 * Remove them so col-1 and col-2 take the two columns. */
.bollaert-checkout .col2-set::before,
.bollaert-checkout .col2-set::after { content: none; display: none; }

/* ------------------------------------------------------------ Form fields */

.bollaert-checkout .form-row {
	margin: 0 0 var(--wp--preset--spacing--4);
	padding: 0;
}
.bollaert-checkout .form-row label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}
.bollaert-checkout .form-row .required { color: var(--wp--preset--color--danger); border: 0; text-decoration: none; }
.bollaert-checkout .form-row .optional { color: var(--wp--preset--color--muted); }

.bollaert-checkout .input-text,
.bollaert-checkout input[type="text"],
.bollaert-checkout input[type="email"],
.bollaert-checkout input[type="tel"],
.bollaert-checkout input[type="password"],
.bollaert-checkout textarea,
.bollaert-checkout select {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.7em 0.9em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.4;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bollaert-checkout .input-text:focus,
.bollaert-checkout textarea:focus,
.bollaert-checkout select:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px var(--wp--preset--color--brand-tint);
}
.bollaert-checkout textarea { min-height: 90px; }

/* Two-up rows (first/last name) */
@media (min-width: 481px) {
	.bollaert-checkout .form-row-first,
	.bollaert-checkout .form-row-last {
		display: inline-block;
		width: calc(50% - 0.5rem);
		vertical-align: top;
	}
	.bollaert-checkout .form-row-first { margin-right: 1rem; }
}

/* select2 (country / state) — match the plain inputs */
.bollaert-checkout .select2-container .select2-selection--single {
	height: auto;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.35em 0.4em;
}
.bollaert-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.8;
	color: var(--wp--preset--color--text);
}
.bollaert-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }

/* ----------------------------------- Returning customer / coupon toggles */

.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	margin-bottom: var(--wp--preset--spacing--5);
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: var(--wp--preset--color--brand-bg);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.login {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--5);
	margin-bottom: var(--wp--preset--spacing--5);
	box-shadow: var(--wp--preset--shadow--subtle);
}

/* --------------------------------------------------------- Order review */

.bollaert-checkout__aside {
	position: sticky;
	top: 96px;
}
.bollaert-checkout__review-title {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--lg);
}
.bollaert-checkout__review {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--5);
	box-shadow: var(--wp--preset--shadow--medium);
}

.bollaert-checkout-table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--sm); }
.bollaert-checkout-table thead th {
	text-align: left;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	padding-bottom: var(--wp--preset--spacing--3);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.bollaert-checkout-table thead th.product-total { text-align: right; }
.bollaert-checkout-table tbody td {
	padding: var(--wp--preset--spacing--3) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	vertical-align: top;
}
.bollaert-checkout-table td.product-total { text-align: right; white-space: nowrap; font-weight: 600; }
.bollaert-checkout-table .product-quantity { color: var(--wp--preset--color--muted); font-weight: 600; }

.bollaert-checkout-table tfoot th,
.bollaert-checkout-table tfoot td {
	padding: var(--wp--preset--spacing--2) 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	font-weight: 500;
	text-align: left;
}
.bollaert-checkout-table tfoot td { text-align: right; color: var(--wp--preset--color--text); font-weight: 600; }
.bollaert-checkout-table tfoot tr.order-total th,
.bollaert-checkout-table tfoot tr.order-total td {
	padding-top: var(--wp--preset--spacing--3);
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--text);
}
.bollaert-checkout-table tfoot tr.order-total td {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 800;
	color: var(--wp--preset--color--brand);
}
.bollaert-checkout-table tfoot tr.cart-discount td { color: var(--wp--preset--color--success); }
.bollaert-checkout-table tfoot .woocommerce-shipping-totals ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}
.bollaert-checkout-table tfoot .woocommerce-shipping-totals label { font-weight: 500; }

/* --------------------------------------------------------- Payment box */

.bollaert-checkout__review #payment,
.woocommerce-checkout #payment {
	background: transparent;
	margin-top: var(--wp--preset--spacing--5);
}
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--4);
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
}
.woocommerce-checkout #payment ul.payment_methods li {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-top: 1px solid var(--wp--preset--color--border);
}
.woocommerce-checkout #payment ul.payment_methods li:first-child { border-top: 0; }
.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text);
	cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var(--wp--preset--color--brand); }
.woocommerce-checkout #payment ul.payment_methods li img { max-height: 24px; width: auto; vertical-align: middle; }
.woocommerce-checkout #payment .payment_box {
	background: var(--wp--preset--color--brand-bg);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	margin-top: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}
.woocommerce-checkout #payment .payment_box::before { display: none; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	margin-bottom: var(--wp--preset--spacing--3);
}

/* Place order — vivid green CTA, matching the cart checkout button */
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	padding: 0.95em 1.2em;
	border: 0;
	border-radius: 999px;
	background: #22c55e;
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.15s ease;
}
.woocommerce-checkout #place_order:hover { background: #16a34a; }

/* Trust line under the button */
.bollaert-checkout__assurances {
	margin: var(--wp--preset--spacing--4) 0 0;
	padding: var(--wp--preset--spacing--4) 0 0;
	border-top: 1px solid var(--wp--preset--color--border);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}
.bollaert-checkout__assurances li {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}
.bollaert-checkout__assurances svg { color: var(--wp--preset--color--brand); flex-shrink: 0; }

/* ====================================================================== */
/* Order received (thank you)                                             */
/* ====================================================================== */

.bollaert-thankyou {
	max-width: 720px;
	margin: var(--wp--preset--spacing--8) auto var(--wp--preset--spacing--12);
}
.bollaert-thankyou__head {
	text-align: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--6);
	box-shadow: var(--wp--preset--shadow--subtle);
}
.bollaert-thankyou__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 999px;
	background: #e8f8ef;
	color: var(--wp--preset--color--success);
	margin-bottom: var(--wp--preset--spacing--4);
}
.bollaert-thankyou__head.is-failed .bollaert-thankyou__icon { background: #fdecec; color: var(--wp--preset--color--danger); }
.bollaert-thankyou__title { margin: 0 0 var(--wp--preset--spacing--2); font-size: var(--wp--preset--font-size--2xl); }
.bollaert-thankyou__lead { margin: 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--md); }

.bollaert-thankyou__overview {
	list-style: none;
	margin: var(--wp--preset--spacing--6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--wp--preset--spacing--4);
}
.bollaert-thankyou__overview li {
	background: var(--wp--preset--color--brand-bg);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--4);
	text-align: left;
}
.bollaert-thankyou__overview-label {
	display: block;
	margin-bottom: 2px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.bollaert-thankyou__overview strong { color: var(--wp--preset--color--text); font-size: var(--wp--preset--font-size--md); }
.bollaert-thankyou__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	justify-content: center;
	margin-top: var(--wp--preset--spacing--5);
}
.bollaert-thankyou__actions .bollaert-btn { width: auto; }

/* Order details + customer details tables that WC hooks in below */
.bollaert-thankyou .woocommerce-order-details,
.bollaert-thankyou .woocommerce-customer-details {
	margin-top: var(--wp--preset--spacing--8);
}
.bollaert-thankyou .woocommerce-order-details__title,
.bollaert-thankyou .woocommerce-column__title {
	font-size: var(--wp--preset--font-size--lg);
	margin-bottom: var(--wp--preset--spacing--4);
}
.bollaert-thankyou table.shop_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--sm);
}
.bollaert-thankyou table.shop_table th,
.bollaert-thankyou table.shop_table td {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
}
.bollaert-thankyou table.shop_table tfoot th { color: var(--wp--preset--color--muted); font-weight: 600; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1024px) {
	.bollaert-checkout__layout { grid-template-columns: 1fr; }
	.bollaert-checkout__aside { position: static; }
}