/**
 * BulCommerce — enriched checkout order-review.
 *
 * Styles the thumbnail + quantity stepper + remove button that OrderReview.php
 * injects into the "Your order" table, plus light, theme-neutral polish for the
 * review card.
 *
 * SPECIFICITY OVER !important
 * The controls live inside WooCommerce's #order_review container, so their rules
 * are scoped under `.woocommerce-checkout #order_review`. That ID gives them a
 * specificity of (1,2,0) — enough to beat aggressive page-builder theme rules
 * (Divi 5 styles every input/button/td) on their own, so the old per-theme
 * `body[class*="et_"]` / `.et-db` reinforcement blocks (which only existed to
 * out-specify the previously ID-less selectors) are no longer needed and were
 * removed. !important is kept ONLY where a theme is likely to !important a bare
 * <button>/<input>/<td>: the interactive stepper/remove controls and the
 * reserved thumbnail gutter. Everything else relies on specificity alone.
 *
 * The cream/rounded look in a given store still comes from that store's theme;
 * this file only guarantees the structure renders correctly everywhere.
 */

/* ===========================================================================
   Two-column checkout layout — our FALLBACK, for themes that don't do it.
   Standard WooCommerce leaves #customer_details and #order_review as plain
   block siblings inside form.checkout and relies on the theme to float them
   side by side. Page-builder themes (Divi 5) don't → everything stacks. So we
   can impose the two-column layout ourselves:
     • left  : #customer_details (billing + shipping STACKED, full width)
     • right : #order_review (+ heading), sticky
   Floats are used (not grid) because form.checkout also holds full-width
   children — coupon/login toggles, notices — that must stay above untouched.

   IMPORTANT — this block is a near-duplicate of the one in src/css/frontend.css
   (dist/styles/frontend-cleanroom.css). The two stylesheets are enqueued under
   different conditions, so both need their own copy; keep them in sync,
   including the gate below.

   Everything here is gated behind `body.flowcheckout--grid-fallback`, added by
   Assets::add_body_class() and removed again by the layout probe at the end of
   src/js/frontend.js on every theme that already produces a working two-column
   checkout on its own. Without that gate these `float` + `width` + `!important`
   declarations win every cascade fight they enter — including against themes
   that were already doing it right, whose layout they then replaced with this
   narrower split ("дясната колона е тясна"). Naming those themes one by one in
   a :not() list is a treadmill; the probe decides by measurement instead.
   =========================================================================== */
@media (min-width: 769px) {
	body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout {
		display: block;
	}
	/* clearfix so the floated columns don't collapse the form */
	body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout::after {
		content: "";
		display: block;
		clear: both;
	}

	/* LEFT column — billing + "ship to different address" + couriers (Доставка),
	   stacked. The shipping lives in #customer_details > .col-2, so we keep
	   customer_details as the left float and just un-float its inner columns so
	   col-1 (billing) and col-2 (shipping) sit one under the other. */
	body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout > #customer_details.col2-set {
		float: left !important;
		width: 48% !important;
		max-width: 48% !important;
		clear: left;
		margin: 0 !important;
	}
	body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout #customer_details > .col-1,
	body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout #customer_details > .col-2 {
		float: none !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 0 8px !important;
		padding: 0 !important;
	}

	/* RIGHT column — the order summary only */
	body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout > #order_review_heading {
		float: right !important;
		width: 48% !important;
		max-width: 48% !important;
		clear: right;
		margin: 0 0 14px !important;
	}
	body.flowcheckout--grid-fallback .woocommerce-checkout form.checkout > #order_review {
		float: right !important;
		width: 48% !important;
		max-width: 48% !important;
		clear: right;
		position: sticky;
		top: 24px;
	}
}

/* soft card around the order summary so the right column reads as a unit */
.woocommerce-checkout #order_review {
	background: #fff;
	border: 1px solid #e9edf2;
	border-radius: 12px;
	padding: 6px 20px 18px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

/* ---- order-review item row : remove (left) · name (top) · quantity (below) ---- */
.woocommerce-checkout #order_review td.product-name {
	position: relative;
	/* No gutter any more — neither the thumbnail nor the remove button is
	   absolutely positioned, so the full cell width goes to the product title. */
	padding-top: 8px !important;
	vertical-align: top;
}

/* quantity stepper wrapper (custom class — specificity is enough, no !important) */

/* stepper buttons are bare <button>s — themes hit these hardest, keep !important */

/* keep the line total tidy next to the taller item cell */
.woocommerce-checkout #order_review td.product-total {
	vertical-align: middle;
	text-align: right;
	white-space: nowrap;
}

/* ---- popup shipping trigger : keep name + type stacked, spaced & centered ----
   Scoped under #order_review (ID) so it out-weighs Divi's flex resets without a
   separate per-theme block. Divi collapses bare flex containers, so the flex
   assertions keep !important. */
.woocommerce-checkout #order_review .fc-ship-popup-trigger {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}
.woocommerce-checkout #order_review .fc-ship-popup-trigger__info {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;   /* horizontally centre the name + type */
	text-align: center !important;
	gap: 2px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}
.woocommerce-checkout #order_review .fc-ship-popup-trigger__name,
.woocommerce-checkout #order_review .fc-ship-popup-trigger__type {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.35 !important;
	white-space: normal !important;
}
.woocommerce-checkout #order_review .fc-ship-popup-trigger__right {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 2px !important;
	flex-shrink: 0 !important;
}

/* ---- popup shipping modal items : name + type vertically centered ----
   The modal is rendered as a body-level overlay (outside #order_review), so it
   can't borrow the #order_review ID for weight — it keeps its own !important and
   the Divi reinforcement block below. */
.woocommerce-checkout .fc-ship-popup-item__header {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}
.woocommerce-checkout .fc-ship-popup-item__info {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;   /* horizontally centre the name + type */
	text-align: center !important;
	gap: 2px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}
.woocommerce-checkout .fc-ship-popup-item__name,
.woocommerce-checkout .fc-ship-popup-item__type {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.35 !important;
	white-space: normal !important;
}
.woocommerce-checkout .fc-ship-popup-item__right {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 2px !important;
	flex-shrink: 0 !important;
}

/* Divi reinforcement for the modal items only (the modal can't use #order_review). */
body[class*="et_"] .woocommerce-checkout .fc-ship-popup-item__header,
.et-db .woocommerce-checkout .fc-ship-popup-item__header {
	display: flex !important;
	align-items: center !important;
}
body[class*="et_"] .woocommerce-checkout .fc-ship-popup-item__info,
.et-db .woocommerce-checkout .fc-ship-popup-item__info {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	text-align: center !important;
	gap: 2px !important;
}
body[class*="et_"] .woocommerce-checkout .fc-ship-popup-item__name,
body[class*="et_"] .woocommerce-checkout .fc-ship-popup-item__type,
.et-db .woocommerce-checkout .fc-ship-popup-item__name,
.et-db .woocommerce-checkout .fc-ship-popup-item__type {
	display: block !important;
	line-height: 1.35 !important;
	margin: 0 !important;
}

/* ===========================================================================
   Divi 5 — structural two-column reinforcement.
   The controls no longer need a Divi block (the #order_review-scoped rules above
   out-specify Divi on their own). Only the float-based two-column layout still
   needs reinforcing, because Divi can force element widths.
   =========================================================================== */
@media (min-width: 769px) {
	body[class*="et_"] .woocommerce-checkout form.checkout > #customer_details.col2-set,
	.et-db .woocommerce-checkout form.checkout > #customer_details.col2-set {
		float: left !important;
		width: 57% !important;
		max-width: 57% !important;
	}
	body[class*="et_"] .woocommerce-checkout form.checkout #customer_details > .col-1,
	body[class*="et_"] .woocommerce-checkout form.checkout #customer_details > .col-2,
	.et-db .woocommerce-checkout form.checkout #customer_details > .col-1,
	.et-db .woocommerce-checkout form.checkout #customer_details > .col-2 {
		float: none !important;
		width: 100% !important;
		max-width: none !important;
	}
	body[class*="et_"] .woocommerce-checkout form.checkout > #order_review,
	body[class*="et_"] .woocommerce-checkout form.checkout > #order_review_heading,
	.et-db .woocommerce-checkout form.checkout > #order_review,
	.et-db .woocommerce-checkout form.checkout > #order_review_heading {
		float: right !important;
		width: 39% !important;
		max-width: 39% !important;
		clear: right;
	}
}

/* ===========================================================================
   Small screens — centre the product cell. Same #order_review specificity as the
   base rules, so these win by source order in the media query.
   =========================================================================== */
@media (max-width: 768px) {
	.woocommerce-checkout #order_review td.product-name {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		min-height: 0;
	}

	.woocommerce-checkout #order_review td.product-total {
		white-space: normal; /* allow the line total to wrap in the narrow cell */
	}
}