/*
 * Elite checkout.
 *
 * Loaded only on the checkout page, never on order received.
 *
 * Mobile first. The design is a single column at 430; the desktop rules at the
 * bottom widen the container and split first and last name into two, and change
 * nothing else.
 *
 * Tuning: the header height and the width of the social proof strip are the two
 * numbers worth adjusting. The strip keeps its aspect ratio at 383 by 101, so if
 * the width changes the height has to change with it.
 */

.woocommerce-checkout {
	--elite-bg: #0d0d0d;
	--elite-card: #1b1b21;
	--elite-inner: #131318;
	--elite-field: #1e1e25;
	--elite-line: #2b2b33;
	--elite-text: #f4f4f6;
	--elite-muted: #9b9ba5;
	--elite-gold: #e3bd7c;
	--elite-green: #4ade80;
	--elite-banner: #1c7a4c;
	--elite-reassure-bg: #14301f;
	--elite-reassure-line: #2a5a3c;
	--elite-radius: 14px;
}

/* ---------- Header ---------- */

.woocommerce-checkout .whb-general-header .container {
	height: 120px;
}

.woocommerce-checkout .whb-general-header-inner {
	height: 100% !important;
	max-height: none !important;
}

.woocommerce-checkout .whb-mobile-left {
	width: 100%;
	justify-content: center;
	flex-direction: column !important;
	margin-left: 0 !important;
}

.woocommerce-checkout .site-logo {
	padding: 0 !important;
	padding-bottom: 10px !important;
}

.woocommerce-checkout .site-logo img {
	max-width: 150px !important;
}

.woocommerce-checkout .whb-mobile-left:after {
	content: '';
	width: 200px;
	height: 53px;
	background: url(/wp-content/uploads/2026/08/LOGO-AFTER.png);
	background-size: cover;
}

/*
 * The hamburger and the cart are the only two ways off this page that are not a
 * deliberate choice, so both go.
 */
.woocommerce-checkout .whb-mobile-right {
	display: none !important;
}

.woocommerce-checkout .wd-page-title {
	display: none !important;
}

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

.woocommerce-checkout .wd-content-layout {
	padding-block: 24px !important;
}

.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	margin-bottom: 20px;
	text-align: center;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
	padding: 0;
	border: 0;
	background: none;
	color: var(--elite-text);
	font-size: 15px;
}

.woocommerce-checkout .woocommerce-form-login-toggle a {
	color: var(--elite-gold);
	font-weight: 600;
}

/*
 * The green success boxes are replaced by the banner below. This is a backstop
 * for any that are printed outside the hooks the PHP clears.
 */
.woocommerce-checkout .woocommerce-message {
	display: none !important;
}

/* ---------- Banner ---------- */

.elite-banner {
	margin-bottom: 24px;
	padding: 24px 20px 20px;
	border-radius: var(--elite-radius);
	background: var(--elite-banner);
	text-align: center;
}

.elite-banner-check {
	display: flex;
	width: 40px;
	height: 40px;
	margin: 0 auto 14px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 20px;
	line-height: 1;
}

.elite-banner-title {
	margin: 0 0 10px;
	color: #fff;
	font-size: 16px;
	line-height: 1.45;
}

.elite-banner-email {
	display: block;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.elite-banner-note {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 13px;
}

/* ---------- Fields ---------- */

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields {
	display: none !important;
}

.woocommerce-checkout .form-row {
	margin-bottom: 18px;
	padding: 0;
}

.woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: 8px;
	color: var(--elite-muted);
	font-size: 14px;
	font-weight: 400;
}

.woocommerce-checkout .form-row label .required {
	color: #e5484d;
	text-decoration: none;
}

.woocommerce-checkout .form-row .input-text {
	width: 100%;
	height: 56px;
	padding: 0 18px;
	border: 1px solid var(--elite-line);
	border-radius: var(--elite-radius);
	background: var(--elite-field);
	color: var(--elite-text);
	font-size: 16px;
}

.woocommerce-checkout .form-row .input-text::placeholder {
	color: #6b6b76;
}

.woocommerce-checkout .form-row .input-text:focus {
	border-color: var(--elite-gold);
	outline: none;
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
	width: 100%;
	float: none;
}

.woocommerce-checkout .password-input {
	display: block;
	position: relative;
}

.woocommerce-checkout .show-password-input {
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
}

/* ---------- Activation code ---------- */

/*
 * Rendered above the checkout form and moved into #customer_details by the
 * script. The margin below is what separates it from the Summary.
 */
.elite-coupon-field {
	margin-bottom: 26px;
}

.elite-coupon-field.is-applying {
	opacity: 0.6;
	pointer-events: none;
}

.elite-coupon-field label {
	display: block;
	margin-bottom: 8px;
	color: var(--elite-gold);
	font-size: 14px;
}

.elite-coupon-row {
	display: flex;
	gap: 10px;
}

.elite-coupon-row .input-text {
	flex: 1 1 auto;
	min-width: 0;
	height: 56px;
	padding: 0 18px;
	border: 1px solid var(--elite-line);
	border-radius: var(--elite-radius);
	background: var(--elite-field);
	color: var(--elite-text);
	font-size: 16px;
}

.elite-coupon-row .button {
	flex: 0 0 auto;
	height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--elite-radius);
	background: linear-gradient(135deg, #d7a95c, #b8813a);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

.elite-coupon-notice {
	margin: 10px 0 0;
	color: #ff6b6b;
	font-size: 13px;
}

/* ---------- Summary ---------- */

.woocommerce-checkout #order_review_heading {
	display: none;
}

.elite-legacy-review {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.elite-summary {
	margin-top: 8px;
	padding: 22px 18px;
	border-radius: 20px;
	background: var(--elite-card);
}

.elite-summary-heading {
	margin: 0 0 18px;
	color: var(--elite-text);
	font-size: 20px;
	font-weight: 600;
}

.elite-summary-card {
	padding: 4px 16px;
	border-radius: var(--elite-radius);
	background: var(--elite-inner);
}

.elite-summary-row {
	display: flex;
	padding: 16px 0;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 1px solid var(--elite-line);
}

.elite-summary-row:last-of-type {
	border-bottom: 0;
}

.elite-summary-label {
	color: var(--elite-text);
	font-size: 15px;
	font-weight: 600;
}

.elite-summary-value {
	color: var(--elite-text);
	font-size: 15px;
	text-align: right;
}

.elite-summary-muted {
	color: var(--elite-muted);
	font-weight: 400;
}

.elite-summary-value del {
	margin-right: 6px;
	color: var(--elite-muted);
	font-weight: 400;
}

.elite-accent {
	color: var(--elite-green);
}

.elite-summary-total {
	display: block;
	font-size: 20px;
}

.elite-summary-code {
	display: block;
	margin-top: 2px;
	color: var(--elite-muted);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- Reassurance ---------- */

.elite-reassurance {
	margin: 4px 0 16px;
	padding: 14px 16px;
	border: 1px solid var(--elite-reassure-line);
	border-radius: 12px;
	background: var(--elite-reassure-bg);
	text-align: center;
}

.elite-reassurance-title {
	margin: 0 0 6px;
	color: var(--elite-green);
	font-size: 14px;
	font-weight: 700;
}

.elite-reassurance-note {
	margin: 0;
	color: #cfe9d9;
	font-size: 13px;
	line-height: 1.5;
}

/* ---------- Gateway ---------- */

.woocommerce-checkout #payment {
	padding: 0;
	border: 0;
	background: none;
}

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

.woocommerce-checkout #payment li.wc_payment_method > label {
	display: none;
}

.woocommerce-checkout #payment div.payment_box {
	margin: 16px 0 0;
	padding: 18px;
	border-radius: var(--elite-radius);
	background: #26262e;
	color: var(--elite-muted);
	font-size: 14px;
}

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

.woocommerce-checkout #payment div.payment_box p {
	margin: 0 0 8px;
}

.woocommerce-checkout #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout #payment div.payment_box p.secure {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--elite-text);
	font-size: 17px;
	font-weight: 600;
}

.woocommerce-checkout #payment div.payment_box p.secure img {
	max-height: 22px;
}

/* ---------- Button ---------- */

.woocommerce-checkout #payment .place-order {
	display: flex;
	flex-direction: column;
	margin-top: 18px;
	padding: 0;
}

.woocommerce-checkout #payment #place_order {
	order: 1;
	width: 100%;
	padding: 20px 16px 6px;
	border: 0;
	border-radius: var(--elite-radius) var(--elite-radius) 0 0;
	background: #fff;
	color: #101014;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
}

.elite-button-note {
	order: 2;
	margin: 0;
	padding: 0 16px 18px;
	border-radius: 0 0 var(--elite-radius) var(--elite-radius);
	background: #fff;
	color: #17913f;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	order: 3;
	margin-top: 16px;
}

.woocommerce-checkout .woocommerce-privacy-policy-text p {
	margin: 0;
	color: #6b6b76;
	font-size: 12px;
	line-height: 1.55;
	text-align: center;
}

.woocommerce-checkout .woocommerce-privacy-policy-text a {
	color: #8a8a95;
	font-weight: 700;
}

/* ---------- Desktop ---------- */

@media (min-width: 1025px) {

	.woocommerce-checkout .woocommerce-checkout {
		max-width: 620px;
		margin: 0 auto;
	}

	.woocommerce-checkout #customer_details,
	.woocommerce-checkout .checkout-order-review {
		width: 100%;
		float: none;
	}

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 0 18px;
	}

	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last {
		flex: 1 1 calc(50% - 9px);
	}

	.woocommerce-checkout .form-row-wide {
		flex: 1 1 100%;
	}
}