/**
 * Business Explained — Checkout v2: Order summary (top bar + panel) + discount fields
 * be-co2-summary-v1.css — mobile only (≤1024px), scoped to body.be-co2
 * Figma: 6585:1025 (bar), 6585:2282 (expanded panel), 6585:2188 (discount active)
 */

/* v2 blocks never show on desktop */
#be-co2-sticky {
	display: none;
}

@media (max-width: 1024px) {

	/* ============================================================
	   Woo's own review table stays in place but is hidden on mobile
	   (v2 renders its own summary from the same cart data)
	   ============================================================ */
	body.be-co2 #order_review .wd-table-wrapper,
	body.be-co2 #order_review > .woocommerce-checkout-review-order-table,
	body.be-co2 #order_review_heading {
		display: none !important;
	}

	/* Coupon UI from WooCommerce is driven by our fields — keep it hidden */
	body.be-co2 .woocommerce-form-coupon-toggle,
	body.be-co2 form.checkout_coupon {
		display: none !important;
	}

	/* WooCommerce coupon success notices ("Coupon code applied/removed") —
	   the summary itself shows the result */
	body.be-co2 .woocommerce > .woocommerce-message:has(+ form.checkout_coupon),
	body.be-co2 .woocommerce > .woocommerce-message:has(+ form.woocommerce-checkout),
	body.be-co2 .woocommerce > .woocommerce-error:has(+ form.checkout_coupon) {
		display: none !important;
	}

	body.be-co2 .wd-content-layout {
		padding-top: 20px !important;
	}

	/* style.css appends "USD" after every checkout price — v2 shows the
	   currency as its own pill/label instead */
	body.be-co2 #be-co2-sticky .woocommerce-Price-amount.amount::after,
	body.be-co2 .be-co2-sum .woocommerce-Price-amount.amount::after {
		content: none !important;
	}

	/* ============================================================
	   Sticky wrapper
	   ============================================================ */
	body.be-co2 #be-co2-sticky {
		display: block;
		position: sticky;
		top: 0;
		z-index: 100;
		background: #f6f6f6;
		font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		color: #1f1f1f;
	}

	/* ============================================================
	   Bar — "Order summary ⌄            $326.00 / [USD] $196.00"
	   ============================================================ */
	body.be-co2 .be-co2-bar {
		display: flex;
		width: 100%;
		height: 63px;
		min-height: 0;
		margin: 0;
		padding: 6px 14px;
		align-items: center;
		justify-content: space-between;
		background: #f6f6f6;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		color: #1f1f1f;
		font: inherit;
		text-align: left;
		text-transform: none;
		letter-spacing: normal;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	body.be-co2 .be-co2-bar:focus-visible {
		outline: 2px solid #145cf8;
		outline-offset: -2px;
	}

	body.be-co2 .be-co2-bar__label {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
		font-weight: 400;
		line-height: 1;
		letter-spacing: 0.28px;
		color: #1f1f1f;
	}

	body.be-co2 .be-co2-chevron {
		display: inline-block;
		width: 5px;
		height: 5px;
		border-right: 1.2px solid #1f1f1f;
		border-bottom: 1.2px solid #1f1f1f;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s ease;
	}

	body.be-co2 .be-co2-sticky.is-expanded .be-co2-chevron {
		transform: translateY(1px) rotate(-135deg);
	}

	body.be-co2 .be-co2-bar__amount {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 4px;
		white-space: nowrap;
	}

	body.be-co2 .be-co2-bar__compare,
	body.be-co2 .be-co2-bar__compare * {
		font-size: 12px;
		font-weight: 400;
		line-height: 1;
		color: #8d8d8d;
	}

	body.be-co2 .be-co2-bar__compare {
		text-decoration: line-through;
	}

	body.be-co2 .be-co2-bar__total {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	body.be-co2 .be-co2-pill {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 19px;
		padding: 0 4px;
		border-radius: 67px;
		background: #e5e5e5;
		color: #636363;
		font-size: 10px;
		font-weight: 400;
		line-height: 1;
	}

	body.be-co2 .be-co2-bar__total-value,
	body.be-co2 .be-co2-bar__total-value * {
		font-size: 18px;
		font-weight: 600;
		line-height: 1;
		color: #1f1f1f;
	}

	/* Flash when the total changes (upsell added, coupon applied) */
	body.be-co2 .be-co2-sticky.is-updated .be-co2-bar {
		animation: be-co2-flash 0.7s ease;
	}

	@keyframes be-co2-flash {
		0%   { background: #fff5d6; }
		60%  { background: #fff5d6; }
		100% { background: #f6f6f6; }
	}

	/* ============================================================
	   Expanded panel
	   ============================================================ */
	body.be-co2 .be-co2-sticky__body {
		display: none;
	}

	body.be-co2 .be-co2-sticky.is-expanded .be-co2-sticky__body {
		display: block;
		max-height: calc(100vh - 140px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		border-bottom: 1px solid #e5e5e5;
	}

	body.be-co2 .be-co2-sum {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 16px 14px;
		background: #f6f6f6;
		font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	}

	/* Items */
	body.be-co2 .be-co2-sum__items {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	body.be-co2 .be-co2-item {
		display: flex;
		align-items: center;
		gap: 14px;
		margin: 0;
		padding: 0;
	}

	body.be-co2 .be-co2-item__media {
		position: relative;
		flex: 0 0 60px;
		width: 60px;
		height: 53px;
	}

	body.be-co2 .be-co2-item__media img {
		display: block;
		width: 60px !important;
		max-width: 60px !important;
		height: 53px !important;
		margin: 0;
		object-fit: cover;
		border: 1px solid rgba(0, 0, 0, 0.05);
		border-radius: 16px;
		background: #d9d9d9;
	}

	body.be-co2 .be-co2-item__qty {
		position: absolute;
		top: -5px;
		left: 47px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		border-radius: 10px;
		background: #000;
		color: #fff;
		font-size: 11px;
		font-weight: 600;
		line-height: 1;
	}

	body.be-co2 .be-co2-item__info {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		flex-direction: column;
	}

	body.be-co2 .be-co2-item__name {
		font-size: 14px;
		font-weight: 400;
		line-height: 18.9px;
		color: #1f1f1f;
	}

	body.be-co2 .be-co2-item__sub {
		overflow: hidden;
		font-size: 11px;
		line-height: 18.9px;
		color: #707070;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	body.be-co2 .be-co2-item__price {
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		align-items: flex-end;
		gap: 7px;
		text-align: right;
		white-space: nowrap;
	}

	body.be-co2 .be-co2-item__price del,
	body.be-co2 .be-co2-item__price del * {
		font-size: 12px;
		font-weight: 400;
		line-height: 1;
		color: #8d8d8d;
	}

	body.be-co2 .be-co2-item__price del {
		text-decoration: line-through;
	}

	body.be-co2 .be-co2-item__final,
	body.be-co2 .be-co2-item__final * {
		font-size: 14px;
		font-weight: 400;
		line-height: 1;
		color: #1f1f1f;
	}

	/* Total */
	body.be-co2 .be-co2-sum__total {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	body.be-co2 .be-co2-sum__total-left {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	body.be-co2 .be-co2-sum__total-label {
		font-size: 18px;
		font-weight: 400;
		line-height: 18.9px;
		color: #1f1f1f;
	}

	body.be-co2 .be-co2-sum__savings,
	body.be-co2 .be-co2-sum__savings * {
		font-size: 11px;
		font-weight: 400;
		line-height: 18.9px;
		letter-spacing: 0.33px;
		text-transform: uppercase;
		color: #707070;
	}

	body.be-co2 .be-co2-sum__total-right {
		display: flex;
		align-items: center;
		gap: 6px;
		white-space: nowrap;
	}

	body.be-co2 .be-co2-sum__cur {
		font-size: 12px;
		line-height: 1;
		color: #707070;
	}

	body.be-co2 .be-co2-sum__total-value,
	body.be-co2 .be-co2-sum__total-value * {
		font-size: 18px;
		font-weight: 600;
		line-height: 1;
		color: #1f1f1f;
	}

	/* ============================================================
	   Discount field (used in the top panel and, later, at the bottom)
	   ============================================================ */
	body.be-co2 .be-co2-discount {
		margin: 0;
	}

	body.be-co2 .be-co2-discount__field {
		position: relative;
		display: flex;
		align-items: center;
		height: 47px;
		padding: 5px 5px 5px 11px;
		background: #fff;
		border: 1px solid #dedede;
		border-radius: 12px;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
	}

	body.be-co2 .be-co2-discount__field:focus-within {
		border-color: #145cf8;
		box-shadow: 0 0 0 0.5px #145cf8;
	}

	body.be-co2 .be-co2-discount__label {
		position: absolute;
		top: 8px;
		left: 11px;
		display: none;
		margin: 0;
		font-size: 12px;
		font-weight: 400;
		line-height: 12px;
		color: #8d8d8d;
		pointer-events: none;
	}

	body.be-co2 .be-co2-discount.has-value .be-co2-discount__label {
		display: block;
	}

	body.be-co2 input.be-co2-discount__input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 8px 0 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		outline: none !important;
		font-family: inherit;
		font-size: 15px !important;
		font-weight: 400;
		line-height: 18.9px;
		color: #1f1f1f !important;
	}

	body.be-co2 input.be-co2-discount__input::placeholder {
		color: #8d8d8d;
		opacity: 1;
	}

	body.be-co2 .be-co2-discount.has-value input.be-co2-discount__input {
		padding-top: 14px !important;
	}

	body.be-co2 .be-co2-discount.has-value input.be-co2-discount__input::placeholder {
		color: transparent;
	}

	body.be-co2 button.be-co2-discount__apply {
		flex: 0 0 auto;
		height: 35px;
		min-height: 0;
		margin: 0;
		padding: 0 10px 3px;
		background: #fafafa;
		border: 1px solid #dedede;
		border-radius: 8px;
		box-shadow: none;
		color: #808080;
		font-family: inherit;
		font-size: 14px;
		font-weight: 400;
		line-height: 1;
		text-transform: none;
		letter-spacing: normal;
		cursor: pointer;
		transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	}

	body.be-co2 .be-co2-discount.has-value button.be-co2-discount__apply {
		background: #145cf8;
		border-color: #145cf8;
		color: #fff;
	}

	body.be-co2 .be-co2-discount.is-loading button.be-co2-discount__apply {
		opacity: 0.6;
		pointer-events: none;
	}

	body.be-co2 .be-co2-discount.has-error .be-co2-discount__field {
		border-color: #d91c1c;
		box-shadow: 0 0 0 0.5px #d91c1c;
	}

	body.be-co2 .be-co2-discount__error {
		margin: 4px 0 0;
		padding: 0;
		font-size: 14px;
		line-height: 18.9px;
		color: #d91c1c;
	}

	body.be-co2 .be-co2-discount__error[hidden] {
		display: none;
	}

	/* Applied codes */
	body.be-co2 .be-co2-discount__tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 10px 0 0;
		padding: 0;
		list-style: none;
	}

	body.be-co2 .be-co2-discount__tag {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		padding: 5px 6px 5px 10px;
		border-radius: 8px;
		background: #e5e5e5;
		font-size: 13px;
		line-height: 1.2;
		color: #1f1f1f;
		text-transform: uppercase;
	}

	body.be-co2 .be-co2-discount__remove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
		font-size: 16px;
		line-height: 1;
		color: #636363;
		text-decoration: none;
	}

	@media print {
		body.be-co2 #be-co2-sticky {
			position: static;
		}
	}

} /* end @media (max-width: 1024px) */