/* Magnify Coaching — on-brand restyle of the standard WooCommerce cart → checkout
   page (e.g. buying a Magnipack). Scoped to body.woocommerce-checkout so it
   never touches the order-pay page, which has its own stylesheet (pay.css).

   Rendered by the Essential Addons "Woo Checkout" Elementor widget, which uses
   its own markup (ul.ea-order-review-table, div.woo-checkout-payment, etc.)
   instead of the plain WooCommerce table/#order_review markup — every
   selector below was pulled from the live DOM, not the WooCommerce defaults.
   !important is used throughout to beat the widget's own inline/per-element
   Elementor styles, which otherwise win on load order. */

:root { --mc-gold:#C9A227; --mc-gold-dark:#a8861c; }

/* ── Page card ──────────────────────────────────────────────────────────── */
body.woocommerce-checkout .ea-woo-checkout {
	max-width:1360px;
	margin:40px auto;
	padding:40px;
	background:rgba(0,0,0,.75);
	border-radius:24px;
	box-shadow:0 20px 60px rgba(0,0,0,.5);
}
body.woocommerce-checkout .ea-woo-checkout::after { content:""; display:table; clear:both; }
body.woocommerce-checkout .ea-woo-checkout .woocommerce-notices-wrapper:empty { display:none; }

/* ── Step indicator ─────────────────────────────────────────────────────── */
body.woocommerce-checkout .kivicare-page-header { display:none !important; }

/* ── Section headings (Your Order / Billing Details / Payment Methods…) ── */
body.woocommerce-checkout .ea-woo-checkout h2,
body.woocommerce-checkout .ea-woo-checkout h3,
body.woocommerce-checkout .ea-woo-checkout h4 {
	color:var(--mc-gold) !important;
	font-size:20px !important;
	font-weight:800 !important;
	margin:0 0 18px !important;
}

/* ── Two-column grid: Billing Details (left) + a right sidebar stacking
   Additional Information above Your Order above the coupon box.
   order_comments must stay inside <form> to submit — so instead of moving
   anything in the DOM, the form/#customer_details/.col-2 wrappers are made
   display:contents, which "unwraps" them for layout purposes only: their
   children become direct grid items of .woocommerce and can be placed with
   grid-column/order, while remaining exactly where they are in the DOM. ── */
@media (min-width:900px){
	body.woocommerce-checkout .ea-woo-checkout > .woocommerce {
		display:grid;
		grid-template-columns:minmax(0,1fr) 440px;
		gap:24px 40px;
		align-items:start;
	}
	body.woocommerce-checkout .woocommerce-notices-wrapper {
		grid-column:1 / -1;
	}
	body.woocommerce-checkout form.woocommerce-checkout,
	body.woocommerce-checkout #customer_details.col2-set,
	body.woocommerce-checkout .col-2 {
		display:contents;
	}

	/* Explicit grid-row numbers (not auto-placement/order) — auto-placement
	   would let tall Billing Details inflate "row 1" to its own huge height,
	   shoving every sidebar row down by that same amount. Spanning Billing
	   Details across the same 4 rows the sidebar uses keeps them independent:
	   the sidebar rows size to their own short content, and Billing Details'
	   extra height (it's much taller) just extends past them into row 5+,
	   where Payment Methods continues below. */
	body.woocommerce-checkout .col-1 { grid-column:1; grid-row:1 / 5; }
	/* Elementor's own per-widget CSS forces .col-1 to width:48% with an
	   ID-anchored selector (.ea-woo-checkout .woocommerce #customer_details
	   .col2-set .col-1) — !important alone can't beat that specificity, so
	   this repeats the ID/class chain to match it, leaving .col-1 stuck at
	   48% of the grid track instead of filling it. */
	body.woocommerce-checkout #customer_details.col2-set .col-1.col-1.col-1 { width:100% !important; float:none !important; }
	body.woocommerce-checkout .eael-shipping-fields,
	body.woocommerce-checkout .woocommerce-shipping-fields { grid-column:1; grid-row:5; }
	body.woocommerce-checkout .woo-checkout-payment { grid-column:1; grid-row:6; }

	/* Right sidebar: Additional Information on top, then Your Order, then coupon. */
	body.woocommerce-checkout .woocommerce-additional-fields { grid-column:2; grid-row:1; }
	body.woocommerce-checkout #order_review_heading { grid-column:2; grid-row:2; }
	body.woocommerce-checkout .ea-woo-checkout-order-review { grid-column:2; grid-row:3; }
	body.woocommerce-checkout .woo-checkout-coupon { grid-column:2; grid-row:4; }
}

/* ── Order review card ──────────────────────────────────────────────────── */
body.woocommerce-checkout .ea-checkout-review-order-table {
	background:#fff !important;
	border:1px solid #ecdfb4;
	border-radius:16px;
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0,0,0,.12);
}
body.woocommerce-checkout ul.ea-order-review-table { list-style:none !important; margin:0 !important; padding:0 !important; }
body.woocommerce-checkout ul.ea-order-review-table li.table-header { display:none; } /* Product/Quantity/Price labels — the row itself is self-explanatory */
body.woocommerce-checkout ul.ea-order-review-table li.table-row {
	display:flex !important;
	align-items:center;
	gap:14px;
	padding:16px 18px;
	border-top:1px solid #f1ece0;
}
body.woocommerce-checkout ul.ea-order-review-table li.table-row:first-child { border-top:none; }
body.woocommerce-checkout .table-col-1.product-thum-name { display:flex; align-items:center; gap:12px; flex:1 1 auto; min-width:0; }
body.woocommerce-checkout .product-thumbnail img { width:52px; height:52px; object-fit:cover; border-radius:8px; border:1px solid #ecdfb4; display:block; }
body.woocommerce-checkout .product-name { font-weight:600 !important; font-size:14px !important; color:#1a1a1a !important; }
body.woocommerce-checkout .table-col-2.product-quantity { flex:0 0 auto; }
body.woocommerce-checkout .table-col-2.product-quantity input {
	width:48px !important; text-align:center; border:1.5px solid #e7e7e7 !important; border-radius:8px !important; padding:6px 4px !important;
}
body.woocommerce-checkout .table-col-3.product-total {
	flex:0 0 auto;
	min-width:72px;
	text-align:right;
	white-space:nowrap;
	font-weight:700 !important;
	color:#1a1a1a !important;
}

/* ── Order review footer: subtotal / total / continue shopping ─────────── */
/* The widget's own CSS makes this a flex row (back-to-shop | footer-content
   side by side), squeezing the price column too narrow and clipping the
   total. Force it back to a simple vertical stack. */
body.woocommerce-checkout .ea-order-review-table-footer { display:block !important; padding:16px 18px; background:#fcfaf3; }
body.woocommerce-checkout .ea-order-review-table-footer .back-to-shop,
body.woocommerce-checkout .footer-content { display:block !important; width:100% !important; }
body.woocommerce-checkout .ea-order-review-table-footer .back-to-shop { margin:0 0 14px; }
body.woocommerce-checkout .ea-order-review-table-footer .back-to-shopping { color:var(--mc-gold-dark) !important; font-weight:600 !important; font-size:13px !important; text-decoration:none; }
body.woocommerce-checkout .ea-order-review-table-footer .back-to-shopping:hover { text-decoration:underline; }
body.woocommerce-checkout .footer-content .cart-subtotal,
body.woocommerce-checkout .footer-content .order-total {
	display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; color:#333 !important;
}
body.woocommerce-checkout .footer-content .order-total { margin-top:6px; padding-top:14px; border-top:1px solid #ecdfb4; font-size:19px; }
body.woocommerce-checkout .footer-content .order-total .eael-checkout-cart-total,
body.woocommerce-checkout .footer-content .order-total strong { color:var(--mc-gold-dark) !important; font-weight:800 !important; }

/* ── Coupon box ─────────────────────────────────────────────────────────── */
/* The widget's own CSS gives .woo-checkout-coupon (the outer wrapper around
   the toggle + reveal form) a light-blue background, which peeked out around
   the cream toggle box below. */
body.woocommerce-checkout .woo-checkout-coupon { background:#fffdf5 !important; border-radius:12px !important; }
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
	display:flex; align-items:center; gap:12px;
	background:#fffdf5 !important;
	border:1px solid #ecdfb4;
	border-radius:12px;
	padding:14px 18px;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { background:none !important; border:none !important; padding:0 !important; margin:0 !important; color:#5c4d1e !important; }
body.woocommerce-checkout .ea-coupon-icon { color:var(--mc-gold-dark) !important; }
body.woocommerce-checkout .showcoupon { color:var(--mc-gold-dark) !important; font-weight:700 !important; }
body.woocommerce-checkout .checkout_coupon {
	background:#fffdf5 !important;
	border:1px solid #ecdfb4;
	border-radius:12px;
	padding:16px 18px;
	margin-top:10px;
}
body.woocommerce-checkout .checkout_coupon .input-text { border:1.5px solid #e7e7e7 !important; border-radius:8px !important; padding:10px 12px !important; }
body.woocommerce-checkout .checkout_coupon button {
	background:linear-gradient(135deg,var(--mc-gold),var(--mc-gold-dark)) !important;
	color:#1a1a1a !important; border:none !important; border-radius:8px !important; font-weight:700 !important; padding:10px 18px !important;
}

/* ── Billing / shipping / additional fields ─────────────────────────────── */
body.woocommerce-checkout .woocommerce-additional-fields { margin-bottom:24px; }
body.woocommerce-checkout .form-row label {
	color:#e8dfc4 !important;
	font-size:13px !important;
	font-weight:600 !important;
	margin-bottom:4px;
}
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout #order_comments {
	border:1.5px solid #e7e7e7 !important;
	border-radius:10px !important;
	padding:12px 14px !important;
	background:#fff !important;
	color:#1a1a1a !important;
	transition:border-color .15s, box-shadow .15s;
}
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout #order_comments:focus {
	border-color:var(--mc-gold) !important;
	box-shadow:0 0 0 3px rgba(201,162,39,.18);
	outline:none;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single {
	border:1.5px solid #e7e7e7 !important;
	border-radius:10px !important;
	height:auto !important;
	padding:10px 14px !important;
}

/* ── Payment methods ────────────────────────────────────────────────────── */
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
	background:transparent !important;
	border:none !important;
	border-radius:0 !important;
}
body.woocommerce-checkout ul.payment_methods {
	list-style:none !important;
	border:none !important;
	margin:0 0 24px !important;
	padding:0 !important;
}
body.woocommerce-checkout ul.payment_methods li.wc_payment_method {
	border:1.5px solid #e7e7e7 !important;
	border-radius:14px !important;
	background:#fff !important;
	margin:0 0 14px !important;
	padding:16px 20px;
	transition:border-color .15s, box-shadow .15s, background .15s;
}
body.woocommerce-checkout ul.payment_methods li.wc_payment_method:hover { border-color:var(--mc-gold); }
body.woocommerce-checkout ul.payment_methods li.wc_payment_method:has(input[type="radio"]:checked) {
	border-color:var(--mc-gold);
	background:#fffdf5;
	box-shadow:0 6px 20px rgba(201,162,39,.16);
}
body.woocommerce-checkout ul.payment_methods li label {
	font-weight:700 !important;
	font-size:15px !important;
	color:#1a1a1a !important;
	display:inline-flex;
	align-items:center;
	gap:8px;
	cursor:pointer;
}
body.woocommerce-checkout ul.payment_methods li input[type="radio"] { accent-color:var(--mc-gold); transform:scale(1.15); margin-right:4px; }
body.woocommerce-checkout ul.payment_methods li img { width:auto; vertical-align:middle; }
/* Elementor's own per-widget custom CSS forces this box to a black background
   with a 6-class-deep !important selector (.eael-woo-checkout .elementor-11
   .elementor-element.elementor-element-8ce2349 .woo-checkout-payment
   .payment_box) — beating it needs matching specificity, not just !important,
   hence the repeated class. */
body.woocommerce-checkout .payment_box.payment_box.payment_box.payment_box.payment_box.payment_box.payment_box {
	background:#faf8f1 !important;
	border-radius:12px !important;
	margin:14px 0 2px !important;
	padding:18px !important;
	color:#3a3222 !important;
}
body.woocommerce-checkout .payment_box p { color:#3a3222 !important; }
body.woocommerce-checkout .payment_box::before { display:none !important; }

/* ── Submit / place order ───────────────────────────────────────────────── */
body.woocommerce-checkout .woocommerce-privacy-policy-text {
	font-size:13px; color:#c9bd97 !important; text-align:center; margin:6px 0 18px;
}
body.woocommerce-checkout .woocommerce-privacy-policy-text a { color:var(--mc-gold) !important; }
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button#place_order {
	display:block;
	width:100%;
	background:linear-gradient(135deg,var(--mc-gold),var(--mc-gold-dark)) !important;
	color:#1a1a1a !important;
	border:none !important;
	border-radius:12px !important;
	font-weight:800 !important;
	font-size:16px !important;
	letter-spacing:.04em;
	text-transform:uppercase;
	padding:16px 40px !important;
	box-shadow:0 8px 22px rgba(201,162,39,.32);
	transition:transform .12s, filter .12s;
	cursor:pointer;
}
body.woocommerce-checkout #place_order:hover { transform:translateY(-1px); filter:brightness(1.04); }
body.woocommerce-checkout #place_order:active { transform:translateY(0); }

/* ── Order-received ("Thank you") page ──────────────────────────────────── */
/* Plain default WooCommerce markup (not the Essential Addons widget), so it
   never picked up the theme's on-brand colors — headings render in the
   theme's default navy, and table values in near-black, both illegible
   against the dark panel/each other. */
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-order-details__title.woocommerce-order-details__title {
	color:var(--mc-gold) !important;
}
body.woocommerce-order-received .woocommerce-order-overview {
	list-style:none !important;
	display:flex;
	flex-wrap:wrap;
	gap:8px 28px;
	margin:0 0 28px !important;
	padding:0 !important;
	color:#e8dfc4 !important;
	font-size:13px;
}
body.woocommerce-order-received .woocommerce-order-overview li { margin:0 !important; }
body.woocommerce-order-received .woocommerce-order-overview strong { color:var(--mc-gold) !important; }
body.woocommerce-order-received table.shop_table.order_details {
	width:100%;
	border:1px solid #ecdfb4;
	border-radius:16px;
	border-collapse:separate;
	border-spacing:0;
	overflow:hidden;
	background:#fff !important;
	box-shadow:0 10px 30px rgba(0,0,0,.25);
	margin:0 0 30px;
}
body.woocommerce-order-received table.shop_table.order_details thead th {
	background:linear-gradient(135deg,var(--mc-gold),var(--mc-gold-dark)) !important;
	color:#fff !important;
	text-transform:uppercase;
	letter-spacing:.05em;
	font-size:12px;
	font-weight:700;
	text-align:left;
	padding:15px 20px;
	border:none;
}
body.woocommerce-order-received table.shop_table.order_details tbody td,
body.woocommerce-order-received table.shop_table.order_details tbody th {
	padding:16px 20px;
	border-top:1px solid #f1ece0;
	color:#333 !important;
}
body.woocommerce-order-received table.shop_table.order_details tfoot th,
body.woocommerce-order-received table.shop_table.order_details tfoot td {
	padding:14px 20px;
	border-top:1px solid #f1ece0;
	background:#fcfaf3 !important;
	text-align:right;
	color:#333 !important;
}
body.woocommerce-order-received table.shop_table.order_details tfoot tr:last-child th,
body.woocommerce-order-received table.shop_table.order_details tfoot tr:last-child td { font-size:18px; }
body.woocommerce-order-received table.shop_table.order_details tfoot tr:last-child td { color:var(--mc-gold-dark) !important; font-weight:800; }
body.woocommerce-order-received table.shop_table.order_details a { color:var(--mc-gold-dark) !important; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
	body.woocommerce-checkout .ea-woo-checkout { padding:24px; margin:20px auto; border-radius:16px; }
}
@media (max-width:560px){
	body.woocommerce-checkout ul.ea-order-review-table li.table-row,
	body.woocommerce-checkout .ea-order-review-table-footer { padding:12px 14px; }
}