/**
 * Atlantis Promotions - front-end styles.
 *
 * Deliberately minimal: the markup lives in the builder, so this file only
 * handles the states the builder cannot express - hiding a value that has
 * nothing to show, and keeping the cart/checkout hint readable inside the
 * WooCommerce totals table.
 */

/* A tag wrapper always renders so cart fragments can find it; hide it when
   there is nothing inside, together with any label it carries. */
.atlpromo-frag.is-empty {
	display: none !important;
}

/*
 * Hiding the tag is not enough on its own. The builder element holding it keeps
 * its own padding, margin and share of the parent's gap, so a column of emptied
 * tags still pushes the layout apart - measured on the target mini cart with the
 * promotion switched off, the emptied total row left exactly the 10px of
 * padding-bottom set on it in the builder, and every further tag given spacing
 * would add its own. Only `display: none` takes a box's spacing with it; an
 * empty box, or one hidden with `visibility`, keeps every pixel of it.
 *
 * `:only-child` is the safety catch: an element that also carries a label or any
 * other content is left alone, and hiding is limited to elements whose entire
 * content is an emptied tag. The second selector covers one level of builder
 * wrapper around the text element, which is how a row inside its own block is
 * built.
 */
[class*="brxe-"]:has( > .atlpromo-frag.is-empty:only-child ),
[class*="brxe-"]:has( > [class*="brxe-"]:only-child > .atlpromo-frag.is-empty:only-child ) {
	display: none !important;
}

/*
 * The escape hatch for everything the two rules above cannot see: a whole promo
 * section, a divider, a container holding several tags at once. Put this class
 * on the element in the builder and it disappears while every tag inside it is
 * empty. An element holding no tag at all is never hidden by it, so a stray
 * class cannot blank out part of the page.
 */
.atlpromo-hide-if-empty:has( .atlpromo-frag ):not( :has( .atlpromo-frag:not( .is-empty ) ) ) {
	display: none !important;
}

/* A label-and-value row the plugin renders whole, so that switching the
   promotion off takes the label with it instead of leaving it in the
   builder above a blank value. */
.atlpromo-frag--discount_row,
.atlpromo-frag--total_row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5em;
	width: 100%;
}

.atlpromo-frag--discount_row .atlpromo-row__value,
.atlpromo-frag--total_row .atlpromo-row__value {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/*
 * `space-between` only spreads the label and the value as far as the element
 * holding the row is wide. Dropped into a flex container in the builder that
 * element becomes a flex item and shrinks to its own content, so the two halves
 * end up bunched together on the left instead of sitting on the cart's two
 * edges - measured on the target mini cart, the total row's element was 199px
 * inside a 400px parent, while the discount row's, a plain block, filled all
 * 400. Making the holder grow puts every row on the same right edge as the
 * subtotal above it.
 */
[class*="brxe-"]:has( > :is( .atlpromo-frag--discount_row, .atlpromo-frag--total_row ) ),
[class*="brxe-"]:has( > [class*="brxe-"]:only-child > :is( .atlpromo-frag--discount_row, .atlpromo-frag--total_row ) ) {
	flex: 1 1 auto;
}

.atlpromo-frag--progress {
	display: block;
}

/* Per-line badge marking which units actually got the discount. */
.atlpromo-item-badge {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-top: 0.35em;
	padding: 0.15em 0.5em;
	border-radius: 3px;
	background: rgba( 210, 55, 55, 0.1 );
	color: #d23737;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.35;
	white-space: normal;
}

.atlpromo-item-badge__amount {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* The badge follows a product link, so give it its own line. */
.woocommerce-mini-cart-item .atlpromo-item-badge,
.cart_item .atlpromo-item-badge,
.woocommerce-checkout-review-order-table .atlpromo-item-badge {
	display: flex;
	width: -moz-fit-content;
	width: fit-content;
}

/* Progress hint row inside the classic cart / checkout totals table. */
.atlpromo-progress-row td {
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	font-size: 0.9em;
	line-height: 1.4;
	opacity: 0.85;
}