/**
 * Business Explained — Checkout v2: Payment, Discount, Total, Pay now, Trust signals
 * be-co2-payment-v1.css — mobile only (≤1024px), scoped to body.be-co2
 * Figma: 6585:1092 (payment), 6585:1145 (discount), 6585:1152 (final), 6585:2627 (bottom expanded)
 *
 * Order inside #order_review (flex column):
 *   1 Payment heading   2 Stripe box (ul.wc_payment_methods, inside #payment)
 *   3 Discount + Total (#be-co2-final-wrap, OUTSIDE #payment)
 *   4 Pay now + terms (.place-order, inside #payment)
 * #payment gets display:contents so its children join that column.
 * Nothing is moved in the DOM.
 */

/* v2 blocks never show on desktop */
.be-co2-pay-head,
#be-co2-final-wrap,
#be-co2-trust {
	display: none;
}

@media (max-width: 1024px) {

	/* ============================================================
	   Container + ordering
	   ============================================================ */
	/* :not(#be-co2-x) only raises specificity above style.css's
	   :is(… #order_review) rule */
	body.be-co2 form.checkout > .checkout-order-review:not(#be-co2-x),
	body.be-co2 .checkout-order-review {
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
	}

	body.be-co2 #order_review {
		position: relative;
		display: flex !important;
		flex-direction: column;
		padding: 0 !important;
		background: none !important;
	}

	body.be-co2 #order_review > #payment {
		display: contents !important;
	}

	body.be-co2 .be-co2-pay-head {
		display: flex;
		order: 1;
		flex-direction: column;
		gap: 8px;
		margin: 0 0 19px;
		text-align: left;
	}

	body.be-co2 #payment ul.wc_payment_methods { order: 2; }
	body.be-co2 #be-co2-final-wrap { display: block; order: 3; }
	body.be-co2 #payment .form-row.place-order { order: 4; }

	body.be-co2 .be-co2-pay-head__sub {
		margin: 0;
		font-size: 14px;
		line-height: 18.9px;
		color: rgba(0, 0, 0, 0.56);
	}

	/* ============================================================
	   Stripe box — only the frame around Stripe's form is styled
	   ============================================================ */
	body.be-co2 #payment ul.wc_payment_methods.payment_methods.methods {
		margin: 0 !important;
		padding: 18px 16px !important;
		border: 1px solid #dedede !important;
		border-radius: 11px !important;
		background: #f6f6f6 !important;
		box-shadow: none !important;
		list-style: none;
	}

	body.be-co2 #payment ul.wc_payment_methods > li {
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
	}

	/* "SECURE PAYMENT / Powered by stripe" row is not in the design */
	body.be-co2 #payment ul.wc_payment_methods > li > label {
		display: none !important;
	}

	body.be-co2 #payment .payment_box {
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
	}

	body.be-co2 #payment .payment_box::before,
	body.be-co2 #payment .payment_box::after {
		content: none !important;
		display: none !important;
	}

	/* ============================================================
	   Discount + Total (collapsed) / Order summary (expanded)
	   ============================================================ */
	body.be-co2 .be-co2-final {
		margin: 31px 0 20px;
		font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		text-align: left;
	}

	body.be-co2 .be-co2-final__expanded {
		display: none;
	}

	body.be-co2 #be-co2-final-wrap.is-expanded .be-co2-final__collapsed {
		display: none;
	}

	body.be-co2 #be-co2-final-wrap.is-expanded .be-co2-final__expanded {
		display: block;
	}

	body.be-co2 .be-co2-final__discount {
		margin-bottom: 31px;
	}

	body.be-co2 #be-co2-final .be-co2-h--sm {
		display: block !important;
		margin: 0 0 14px;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.2;
		color: #1f1f1f;
	}

	/* Shared reset for the two toggle buttons */
	body.be-co2 button.be-co2-total,
	body.be-co2 button.be-co2-final__head {
		display: flex;
		width: 100%;
		min-height: 0;
		height: auto;
		margin: 0;
		padding: 0;
		align-items: center;
		justify-content: space-between;
		border: 0;
		border-radius: 0;
		background: none;
		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-total__left {
		display: flex;
		align-items: center;
		gap: 16px;
		min-width: 0;
	}

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

	body.be-co2 .be-co2-total__info {
		display: flex;
		flex-direction: column;
	}

	body.be-co2 .be-co2-total__label {
		font-size: 17px;
		font-weight: 400;
		line-height: 1.25;
		color: #1f1f1f;
	}

	body.be-co2 .be-co2-total__count {
		font-size: 14px;
		line-height: 18.9px;
		color: #707070;
		white-space: nowrap;
	}

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

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

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

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

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

	body.be-co2 .be-co2-pill--light {
		background: #f2f2f2 !important;
		color: #707070 !important;
	}

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

	body.be-co2 .be-co2-final .woocommerce-Price-amount.amount::after {
		content: none !important;
	}

	/* Expanded bottom summary: same panel as the top one, without the grey box */
	body.be-co2 .be-co2-final__head {
		margin-bottom: 20px !important;
	}

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

	body.be-co2 .be-co2-final .be-co2-sum {
		padding: 0;
		background: none;
	}

	/* ============================================================
	   Pay now + terms
	   ============================================================ */
	body.be-co2 #payment .form-row.place-order {
		display: flex !important;
		flex-direction: column;
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
	}

	body.be-co2 #payment button#place_order {
		order: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 55px !important;
		margin: 0 0 14px !important;
		padding: 0 20px !important;
		border: 0 !important;
		border-radius: 12px !important;
		background: #145cf8 !important;
		background-image: none !important;
		box-shadow: none !important;
		color: #fff !important;
		font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-size: 17px !important;
		font-weight: 600 !important;
		line-height: 1;
		text-transform: none !important;
		letter-spacing: normal;
	}

	body.be-co2 #payment button#place_order::before,
	body.be-co2 #payment button#place_order::after {
		content: none !important;
		display: none !important;
	}

	body.be-co2 #payment .woocommerce-terms-and-conditions-wrapper {
		order: 2;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}

	body.be-co2 #payment .woocommerce-privacy-policy-text p {
		margin: 0;
		font-size: 12px !important;
		line-height: 1.5;
		color: #8d8d8d;
		text-align: center;
	}

	/* ============================================================
	   Trust signals (after the checkout form)
	   ============================================================ */
	body.be-co2 #be-co2-trust {
		display: flex;
		flex-direction: column;
		gap: 18px;
		margin: 25px 0 40px;
		font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		text-align: left;
	}

	body.be-co2 .be-co2-guarantee {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 14px 20px;
		border: 1px solid #b1f2b4;
		border-radius: 12px;
		background: #eafbea;
	}

	body.be-co2 .be-co2-guarantee svg {
		flex: 0 0 auto;
	}

	body.be-co2 .be-co2-guarantee__title {
		margin: 0 0 2px;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.15;
		letter-spacing: -0.14px;
		color: #008b54;
	}

	body.be-co2 .be-co2-guarantee__sub {
		margin: 0;
		font-size: 11px;
		line-height: 1.4;
		letter-spacing: 0.11px;
		color: #5c7b7c;
	}

	body.be-co2 .be-co2-points {
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin: 0;
		padding: 0 7px;
		list-style: none;
	}

	body.be-co2 .be-co2-point {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin: 0;
	}

	body.be-co2 .be-co2-point__icon {
		display: flex;
		flex: 0 0 15px;
		justify-content: center;
		width: 15px;
	}

	body.be-co2 .be-co2-point__title {
		display: block;
		margin: 0 0 5px;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.15;
		letter-spacing: -0.13px;
		color: #313131;
	}

	body.be-co2 .be-co2-point__sub {
		display: block;
		font-size: 11px;
		line-height: 1.3;
		letter-spacing: -0.11px;
		color: #818499;
	}

	body.be-co2 .be-co2-reviews {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	body.be-co2 .be-co2-review {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 20px 25px;
		border: 1.143px solid #dedede;
		border-radius: 17px;
		color: #343f4a;
	}

	body.be-co2 .be-co2-review__title {
		margin: 0 0 5px;
		font-family: "Inter Tight", Inter, sans-serif;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.6;
		color: #343f4a;
	}

	body.be-co2 .be-co2-review__text {
		margin: 0;
		font-size: 13px;
		line-height: 1.6;
		color: #343f4a;
	}

	body.be-co2 .be-co2-review__author {
		margin: 0;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.33;
		color: #343f4a;
	}

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

/* ============================================================
   v1.1 fix — side inset for blocks outside form.checkout
   + single × on applied discount codes
   ============================================================ */
@media (max-width: 1024px) {

	body.be-co2 #be-cta-offer,
	body.be-co2 #be-co2-trust {
		max-width: 92%;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.be-co2 .be-co2-discount__remove::before,
	body.be-co2 .be-co2-discount__remove::after {
		content: none !important;
		display: none !important;
	}

}