/**
 * WooCommerce — cart, checkout and seat cards.
 *
 * Written mobile first. Almost every visitor arrives from an ad on a phone, so
 * the phone layout is the real layout and the desktop rules are the exception.
 *
 * Tokens match the bootcamp page so the two never look like different sites.
 */

:root {
	--brand: #20244a;
	--gold: #E8F546;
	--gold-dk: #a07800;
	--ink: #1b1f3b;
	--line: #e4e7f2;
	--muted: #5b6480;
	--bg-soft: #f7f8fc;
	--ok: #128a4a;
}

/* ---------------------------------------------------------------- *
 * Shell
 * ---------------------------------------------------------------- */

.woocommerce-page .site-main,
.woocommerce .site-main {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px 18px 64px;
	color: var(--ink);
}

.woocommerce-page h1,
.woocommerce-page h2 {
	color: var(--brand);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.woocommerce-page h1 {
	font-size: clamp(26px, 7vw, 38px);
	margin: 0 0 6px;
}

/* WooCommerce's own headings inside the order table are noise on a phone. */
.woocommerce-checkout h3 {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin: 28px 0 10px;
}

/* ---------------------------------------------------------------- *
 * Form fields
 *
 * 16px is not a style choice: anything smaller makes iOS Safari zoom in on
 * focus, which throws the user out of the layout mid-form.
 * ---------------------------------------------------------------- */

.woocommerce form .form-row {
	padding: 0;
	margin: 0 0 14px;
}

.woocommerce form .form-row label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	color: var(--ink);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
	min-height: 52px;
	padding: 13px 14px;
	font-size: 16px;
	line-height: 1.3;
	color: var(--ink);
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce form .form-row textarea {
	min-height: 88px;
	resize: vertical;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(32, 36, 74, 0.12);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: #d33;
}

/* Two-up only where there is room; stacked on a phone. */
@media (min-width: 560px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: 48.5%;
		float: left;
	}
	.woocommerce form .form-row-last {
		float: right;
	}
}

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

.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	margin: 0 0 18px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 13px 15px;
	font-size: 15px;
	text-align: left;
	border-bottom: 1px solid var(--line);
}

.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
	font-size: 19px;
	font-weight: 800;
	color: var(--brand);
	border-bottom: 0;
}

/* ---------------------------------------------------------------- *
 * Trust block above the pay button
 * ---------------------------------------------------------------- */

.im-trust {
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-left: 4px solid var(--gold);
	border-radius: 10px;
	padding: 14px 16px;
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.5;
}

.im-trust p {
	margin: 0 0 6px;
}

.im-trust p:last-child {
	margin-bottom: 0;
}

.im-trust-guarantee {
	color: var(--ok);
	font-weight: 600;
}

/* ---------------------------------------------------------------- *
 * Payment methods and the pay button
 * ---------------------------------------------------------------- */

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border: 0;
	margin: 0 0 14px;
}

.woocommerce-checkout #payment ul.payment_methods li {
	list-style: none;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	padding: 14px 15px;
	margin: 0 0 10px;
	background: #fff;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--bg-soft);
	font-size: 14px;
	margin: 10px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce #payment #place_order,
.woocommerce .button.alt,
.woocommerce a.button.alt {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 16px 20px;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--brand);
	background: var(--gold);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	transition: transform 0.08s ease, filter 0.15s ease;
}

.woocommerce #payment #place_order:hover,
.woocommerce .button.alt:hover {
	background: var(--gold);
	filter: brightness(0.95);
}

.woocommerce #payment #place_order:active {
	transform: translateY(1px);
}

/* ---------------------------------------------------------------- *
 * Coupon, login and other WooCommerce noise
 *
 * A coupon box on a cold checkout makes people leave to hunt for a code they
 * will never find. The offer already carries its own discount tiers.
 * ---------------------------------------------------------------- */

.woocommerce-form-coupon-toggle,
.checkout_coupon,
.woocommerce-form-login-toggle,
.woocommerce-form-login,
.woocommerce-additional-fields > h3 {
	display: none !important;
}

/* ---------------------------------------------------------------- *
 * Cart page — reached only if someone navigates there directly
 * ---------------------------------------------------------------- */

.woocommerce-cart table.cart img {
	width: 56px;
	border-radius: 8px;
}

.woocommerce-cart .cart_totals {
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 16px;
}

@media (max-width: 559px) {
	.woocommerce-cart table.cart thead {
		display: none;
	}
	.woocommerce-cart table.cart tr {
		display: block;
		border-bottom: 1px solid var(--line);
		padding: 10px 0;
	}
	.woocommerce-cart table.cart td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 0;
		padding: 6px 0;
	}
}

/* ---------------------------------------------------------------- *
 * Notices
 * ---------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--brand);
	background: var(--bg-soft);
	border-radius: 10px;
	font-size: 15px;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--brand);
}

/* Order received page */
.woocommerce-order-overview {
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 16px;
	list-style: none;
	margin: 18px 0;
}

.woocommerce-order-overview li {
	border: 0;
	padding: 6px 0;
	font-size: 15px;
}

/* ---------------------------------------------------------------- *
 * Block checkout
 *
 * The 640px column above is right for the classic checkout, but the block
 * checkout is two columns — at 640px the order summary collapsed to about
 * 160px and broke the product name onto one letter per line. Give the block
 * checkout the room it needs.
 * ---------------------------------------------------------------- */

.woocommerce-checkout .site-main,
.woocommerce-cart .site-main {
	max-width: 1100px;
}

.wc-block-components-product-name {
	font-size: 15px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.wc-block-components-order-summary-item__description,
.wc-block-components-sidebar {
	min-width: 0;
}

.wc-block-components-checkout-place-order-button {
	min-height: 56px;
	font-size: 17px;
	font-weight: 800;
}