/* Lock background scroll when order modal is open */
body.erx-modal-open {
	overflow: hidden !important;
	height: 100vh !important;
}

/* Desktop: billing details on the left, "Your order" on the right — stacks on mobile by default.
   NOTE: scoped to .erx-lp-order-form (our landing-page embed) AND .woocommerce-checkout
   (the real /checkout/ page) — the body only gets the "woocommerce-checkout" class on the
   actual registered Checkout page, never on a landing page embedding the shortcode. */
@media (min-width: 768px) {
	.erx-lp-order-form form.checkout,
	.woocommerce-checkout form.checkout {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		grid-template-areas:
			"erx-billing erx-heading"
			"erx-billing erx-order" !important;
		column-gap: 40px !important;
		row-gap: 12px !important;
		align-items: start !important;
	}
	.erx-lp-order-form form.checkout #customer_details,
	.woocommerce-checkout form.checkout #customer_details {
		grid-area: erx-billing !important;
		margin: 0 !important;
	}
	.erx-lp-order-form form.checkout #order_review_heading,
	.woocommerce-checkout form.checkout #order_review_heading {
		grid-area: erx-heading !important;
		margin: 0 !important;
		align-self: end !important;
	}
	.erx-lp-order-form form.checkout #order_review,
	.woocommerce-checkout form.checkout #order_review {
		grid-area: erx-order !important;
	}
}
/* Order button — brand gold instead of WooCommerce's default blue */
.erx-lp-order-form #place_order,
.woocommerce-checkout #place_order {
	background-color: #c4a15a !important;
	color: #14100c !important;
	border: none !important;
	font-weight: 700 !important;
	font-size: 19px !important;
	padding: 18px 24px !important;
	width: 100% !important;
	position: relative !important;
	overflow: hidden !important;
}
.erx-lp-order-form #place_order:hover,
.woocommerce-checkout #place_order:hover {
	background-color: #a8823f !important;
}
/* Left-to-right shine sweep, looping */
.erx-lp-order-form #place_order::after,
.woocommerce-checkout #place_order::after {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
	transform: skewX(-20deg);
	animation: erx-btn-shine 2.6s ease-in-out infinite;
}
@keyframes erx-btn-shine {
	0%   { left: -60%; }
	40%  { left: 130%; }
	100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
	.erx-lp-order-form #place_order::after,
	.woocommerce-checkout #place_order::after {
		animation: none;
		display: none;
	}
}

/* Force-hide privacy policy text (filter alone wasn't enough) */
.woocommerce-privacy-policy-text,
.erx-lp-order-form .woocommerce-privacy-policy-text {
	display: none !important;
}

/* ── Dark theme for the embedded checkout, matching the rest of the site ── */
.erx-lp-order-form {
	background: #14100c !important;
	padding: 24px 16px 32px !important;
	border-radius: 0 !important;
}
.erx-lp-order-form #order_review_heading,
.erx-lp-order-form .woocommerce-billing-fields h3,
.erx-lp-order-form h3 {
	color: #f9f6f0 !important;
	margin: 0 !important;
	padding: 10px 14px !important;
	line-height: 1.3 !important;
}
.erx-lp-order-form label {
	color: #d8bd85 !important;
	font-size: 16px !important;
}
.erx-lp-order-form input[type="text"],
.erx-lp-order-form input[type="tel"],
.erx-lp-order-form input[type="email"],
.erx-lp-order-form textarea,
.erx-lp-order-form select {
	background: #1c1712 !important;
	border: 1px solid #3a322a !important;
	color: #f9f6f0 !important;
	font-size: 16px !important;
}
.erx-lp-order-form input::placeholder,
.erx-lp-order-form textarea::placeholder {
	color: #8a7f6f !important;
	font-size: 15px !important;
}
.erx-lp-order-form #order_review,
.erx-lp-order-form table.shop_table,
.erx-lp-order-form .woocommerce-checkout-review-order-table {
	background: #1c1712 !important;
	border: 1px solid #3a322a !important;
	color: #f9f6f0 !important;
}
.erx-lp-order-form table.shop_table th,
.erx-lp-order-form table.shop_table td,
.erx-lp-order-form table.shop_table thead,
.erx-lp-order-form table.shop_table thead th,
.erx-lp-order-form table.shop_table tr {
	color: #f9f6f0 !important;
	background: #1c1712 !important;
	border-color: #3a322a !important;
}
.erx-lp-order-form .woocommerce-Price-amount {
	color: #c4a15a !important;
}
.erx-lp-order-form .wc_payment_methods,
.erx-lp-order-form .payment_box {
	background: #1c1712 !important;
	color: #f9f6f0 !important;
	border: 1px solid #3a322a !important;
}
.erx-lp-order-form a {
	color: #c4a15a !important;
}

/* "Your Products" card row is white by design (product cards) — keep as-is above the dark form */

/* Prevent any element in the cards/checkout area from causing horizontal overflow on mobile */
.erx-lp-cards-form,
.erx-lp-cards,
.erx-lp-card,
.erx-lp-order-form,
.erx-lp-order-form * {
	box-sizing: border-box !important;
	max-width: 100% !important;
}

/* ── "Order Form" intro box — scoped with :not(.elx-mist-bg) because the
   outer page wrapper also carries erx-order-form-box; without this exclusion
   these rules were wrapping/recoloring the ENTIRE page. ── */
.erx-order-form-box:not(.elx-mist-bg) {
	border: 1.5px solid #c4a15a !important;
	border-radius: 16px !important;
	padding: 12px 16px !important;
	box-shadow: 0 6px 24px rgba(196, 161, 90, 0.3) !important;
	animation: erx-order-box-in .6s ease-out both;
}
.erx-order-form-box:not(.elx-mist-bg) h1,
.erx-order-form-box:not(.elx-mist-bg) h2,
.erx-order-form-box:not(.elx-mist-bg) h3,
.erx-order-form-box:not(.elx-mist-bg) h4 {
	color: #f9f6f0 !important;
}
.erx-order-form-box:not(.elx-mist-bg) > p,
.erx-order-form-box:not(.elx-mist-bg) .wp-block-uagb-advanced-heading p {
	color: #d8bd85 !important;
}
.erx-order-form-box:not(.elx-mist-bg) > svg,
.erx-order-form-box:not(.elx-mist-bg) svg,
.erx-order-form-box:not(.elx-mist-bg) .wp-block-uagb-icon svg,
.erx-order-form-box:not(.elx-mist-bg) .wp-block-uagb-icon svg *,
.erx-order-form-box:not(.elx-mist-bg) .uagb-icon svg,
.erx-order-form-box:not(.elx-mist-bg) .uagb-icon svg *,
.erx-order-form-box:not(.elx-mist-bg) .uagb-icon__wrapper svg,
.erx-order-form-box:not(.elx-mist-bg) .uagb-icon__wrapper svg * {
	fill: #c4a15a !important;
	stroke: #c4a15a !important;
	color: #c4a15a !important;
	animation: erx-order-box-icon-pulse 1.8s ease-in-out infinite;
}
.erx-order-form-box:not(.elx-mist-bg) .wp-block-uagb-icon {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	position: relative;
}
.erx-order-form-box:not(.elx-mist-bg) .wp-block-uagb-icon::before,
.erx-order-form-box:not(.elx-mist-bg) .wp-block-uagb-icon::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border: 1.5px solid #c4a15a;
	border-radius: 50%;
	pointer-events: none;
	animation: erx-scent-wave 2.4s ease-out infinite;
}
.erx-order-form-box:not(.elx-mist-bg) .wp-block-uagb-icon::after {
	animation-delay: 1.2s;
}
@keyframes erx-scent-wave {
	0%   { transform: scale(0.6); opacity: 0.8; }
	100% { transform: scale(2.4); opacity: 0; }
}
.erx-order-form-box:not(.elx-mist-bg) h1,
.erx-order-form-box:not(.elx-mist-bg) h2,
.erx-order-form-box:not(.elx-mist-bg) h3,
.erx-order-form-box:not(.elx-mist-bg) h4 {
	margin-top: 2px !important;
}
@keyframes erx-order-box-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes erx-order-box-icon-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.12); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
	.erx-order-form-box:not(.elx-mist-bg),
	.erx-order-form-box:not(.elx-mist-bg) svg {
		animation: none;
	}
}

/* FAQ text left-aligned instead of centered */
.erx-order-form-box:not(.elx-mist-bg) [class*="faq"],
.erx-order-form-box:not(.elx-mist-bg) [class*="faq"] * {
	text-align: left !important;
}

/* Justify on both desktop and mobile — on mobile the block itself is centered (narrower + auto margins), text stays justified */
.erx-justify-text {
	text-align: justify !important;
	font-size: 16px !important;
	margin-top: 4px !important;
}
@media (max-width: 600px) {
	.erx-justify-text {
		text-align: justify !important;
		font-size: 15px !important;
		max-width: 92% !important;
		margin-top: 4px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* The billing_country field is type=hidden but its wrapping <p class="form-row erx-hidden-field">
   and label were still taking up visible space — remove entirely, no gap left behind */
.erx-hidden-field {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
}

/* Desktop: billing inputs fill the full column width */
@media (min-width: 768px) {
	.erx-lp-order-form .form-row-wide,
	.erx-lp-order-form input[type="text"],
	.erx-lp-order-form input[type="tel"],
	.erx-lp-order-form textarea {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ── Cash on Delivery radio — liquid gold instead of default blue, with a
   small water-drop-falling animation next to it ── */
.erx-lp-order-form .payment_methods input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #c4a15a !important;
	background: #1c1712 !important;
	position: relative;
	cursor: pointer;
	vertical-align: middle;
}
.erx-lp-order-form .payment_methods input[type="radio"]:checked {
	background: radial-gradient(circle at 35% 30%, #f2dfa8, #c4a15a 60%, #8a6a35 100%) !important;
	box-shadow: 0 0 10px rgba(196, 161, 90, 0.7) !important;
}
.erx-lp-order-form .payment_methods input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	left: 50%;
	top: -10px;
	width: 4px;
	height: 6px;
	background: #f2dfa8;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	transform: translateX(-50%);
	animation: erx-radio-drip 1.6s ease-in infinite;
}
@keyframes erx-radio-drip {
	0%   { top: -10px; opacity: 0; }
	15%  { opacity: 1; }
	80%  { top: 2px; opacity: 1; }
	100% { top: 4px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.erx-lp-order-form .payment_methods input[type="radio"]:checked::after {
		animation: none;
		display: none;
	}
}