/**
 * Business Explained — Checkout v2: Express row + Contact + fields + Sign in sheet
 * be-co2-form-v1.css — mobile only (≤1024px), scoped to body.be-co2
 * Figma: 6585:1052 (express), 6585:1075 (contact), field states 6585:1286 / 1490 / 1705 / 1914
 */

/* Autofill hook for the floating labels (JS listens for this animation) */
@keyframes be-co2-autofill {
	from { opacity: 1; }
	to   { opacity: 1; }
}

@media (max-width: 1024px) {

	body.be-co2 .be-co2-h {
		margin: 0;
		padding: 0;
		font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-size: 20px;
		font-weight: 500;
		line-height: 24px;
		color: #1f1f1f;
		text-align: left !important;
		text-transform: none;
		letter-spacing: normal;
	}

	body.be-co2 form.checkout {
		margin-top: 0 !important;
	}

	/* "Already have an account? Click here to login" → "Sign in" in the Contact row */
	body.be-co2 .woocommerce-form-login-toggle {
		display: none !important;
	}

	/* ============================================================
	   Express checkout row
	   ============================================================ */
	body.be-co2 #wc-stripe-express-checkout-element {
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		gap: 16px 6px;
		margin: 0 !important;
	}

	body.be-co2 #wc-stripe-express-checkout-element::before {
		content: 'Express checkout';
		flex: 0 0 100%;
		width: 100%;
		margin: 0;
		text-align: center;
		font-size: 14px;
		font-weight: 400;
		line-height: 1;
		color: #707070;
	}

	body.be-co2 #wc-stripe-express-checkout-element > div {
		flex: 1 1 0;
		min-width: 0 !important;
	}

	body.be-co2 #wc-stripe-express-checkout-button-separator {
		gap: 14px !important;
		margin: 24px 0 31px !important;
		font-size: 14px !important;
		line-height: 18.9px;
		color: #707070 !important;
	}

	body.be-co2 #wc-stripe-express-checkout-button-separator::before,
	body.be-co2 #wc-stripe-express-checkout-button-separator::after {
		background: #dedede !important;
	}

	/* ============================================================
	   Contact section
	   ============================================================ */
	body.be-co2 #customer_details,
	body.be-co2 .woocommerce-checkout > .customer-details .woocommerce-billing-fields {
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}

	body.be-co2 #customer_details {
		margin-bottom: 31px !important;
	}

	body.be-co2 #customer_details .woocommerce-account-fields,
	body.be-co2 #customer_details .woocommerce-shipping-fields,
	body.be-co2 #customer_details .woocommerce-additional-fields {
		margin: 0 !important;
		padding: 0 !important;
	}

	body.be-co2 #customer_details .woocommerce-billing-fields {
		margin-bottom: 0 !important;
	}

	body.be-co2 #customer_details::before,
	body.be-co2 #customer_details .woocommerce-billing-fields > h3 {
		content: none !important;
		display: none !important;
	}

	body.be-co2 .be-co2-section-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 0 14px;
	}

	body.be-co2 a.be-co2-signin {
		font-size: 14px;
		font-weight: 400;
		line-height: 1;
		color: #0066ff !important;
		text-decoration: underline !important;
		text-underline-offset: 2px;
	}

	/* Field order: email, newsletter, first name, last name */
	body.be-co2 .woocommerce-billing-fields__field-wrapper {
		display: flex !important;
		flex-direction: column;
		gap: 10px;
	}

	body.be-co2 #billing_email_field { order: 1; }
	body.be-co2 #kl_newsletter_checkbox_field { order: 2; margin-bottom: 4px !important; }
	body.be-co2 #billing_first_name_field { order: 3; }
	body.be-co2 #billing_last_name_field { order: 4; }

	body.be-co2 .woocommerce-billing-fields__field-wrapper > .form-row {
		position: relative;
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left;
	}

	body.be-co2 .woocommerce-billing-fields .woocommerce-input-wrapper {
		display: block;
		position: relative;
	}

	/* ============================================================
	   Text fields — default / focus / filled / error
	   ============================================================ */
	body.be-co2 .woocommerce-billing-fields .form-row input.input-text {
		display: block;
		width: 100%;
		height: 47px !important;
		min-height: 0;
		margin: 0;
		padding: 14px 11px !important;
		border: 1px solid #dedede !important;
		border-radius: 12px !important;
		background: #fff !important;
		box-shadow: none !important;
		outline: none;
		font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-size: 15px !important;
		font-weight: 400;
		line-height: 18.9px;
		color: #1f1f1f !important;
		transition: border-color 0.15s ease, box-shadow 0.15s ease, padding 0.15s ease;
	}

	body.be-co2 .woocommerce-billing-fields .form-row input.input-text::placeholder {
		font-size: 15px !important;
		color: #8d8d8d;
		opacity: 1;
	}

	body.be-co2 .woocommerce-billing-fields .form-row input.input-text:-webkit-autofill {
		animation-name: be-co2-autofill;
		animation-duration: 0.01s;
	}

	body.be-co2 .woocommerce-billing-fields .form-row input.input-text:focus {
		border-color: #0066ff !important;
		box-shadow: 0 0 0 0.5px #0066ff !important;
	}

	/* Floating label (shown once the field has a value) */
	body.be-co2 .woocommerce-billing-fields .form-row > label {
		display: none !important;
	}

	body.be-co2 .woocommerce-billing-fields .form-row.be-co2-filled:not(#kl_newsletter_checkbox_field) > label {
		position: absolute;
		top: 8px;
		left: 12px;
		z-index: 1;
		display: block !important;
		margin: 0;
		padding: 0;
		font-size: 12px;
		font-weight: 400;
		line-height: 12px;
		color: #8d8d8d;
		pointer-events: none;
	}

	body.be-co2 .woocommerce-billing-fields .form-row > label .required,
	body.be-co2 .woocommerce-billing-fields .form-row > label .optional {
		display: none !important;
	}

	body.be-co2 .woocommerce-billing-fields .form-row.be-co2-filled input.input-text {
		padding: 20px 11px 6px !important;
	}

	/* Error (WooCommerce adds .woocommerce-invalid after validation) */
	body.be-co2 .woocommerce-billing-fields .form-row.woocommerce-invalid input.input-text {
		border-color: #d91c1c !important;
		box-shadow: 0 0 0 0.5px #d91c1c !important;
	}

	body.be-co2 .woocommerce-billing-fields .form-row.woocommerce-invalid::after {
		display: block;
		margin-top: 2px;
		font-size: 14px;
		line-height: 18.9px;
		color: #d91c1c;
		text-align: left;
	}

	body.be-co2 #billing_email_field.woocommerce-invalid::after { content: 'Enter an email'; }
	body.be-co2 #billing_email_field.woocommerce-invalid-email::after { content: 'Enter a valid email'; }
	body.be-co2 #billing_first_name_field.woocommerce-invalid::after { content: 'Enter a first name'; }
	body.be-co2 #billing_last_name_field.woocommerce-invalid::after { content: 'Enter a last name'; }

	/* WooCommerce's own inline message (after a failed submit) wins over ours */
	body.be-co2 .woocommerce-billing-fields .form-row:has(.checkout-inline-error-message)::after {
		content: none !important;
	}

	body.be-co2 .woocommerce-billing-fields .checkout-inline-error-message {
		margin: 2px 0 0;
		font-size: 14px;
		line-height: 18.9px;
		color: #d91c1c;
		text-align: left;
	}

	/* ============================================================
	   Newsletter checkbox
	   ============================================================ */
	body.be-co2 #kl_newsletter_checkbox_field label.checkbox {
		display: flex !important;
		align-items: center;
		gap: 9px;
		margin: 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 24px;
		color: #1f1f1f;
		text-align: left;
		cursor: pointer;
	}

	body.be-co2 #kl_newsletter_checkbox_field .optional {
		display: none !important;
	}

	body.be-co2.woocommerce-checkout input#kl_newsletter_checkbox {
		-webkit-appearance: none;
		appearance: none;
		flex: 0 0 18px;
		width: 18px !important;
		height: 18px !important;
		margin: 0 !important;
		border: 1.5px solid #c4c4c4;
		border-radius: 6px;
		background: #fff;
		cursor: pointer;
	}

	body.be-co2.woocommerce-checkout input#kl_newsletter_checkbox:checked {
		border: 0;
		background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='18' height='18' rx='6' fill='%230066FF'/%3E%3Cpath d='M4.5 9.23332L7.36348 12.5L13.5 5.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	}

	body.be-co2.woocommerce-checkout input#kl_newsletter_checkbox:focus-visible {
		outline: 2px solid #0066ff;
		outline-offset: 2px;
	}

	/* ============================================================
	   Sign in — WooCommerce login form as a bottom sheet
	   ============================================================ */
	html.be-co2-login-open,
	html.be-co2-login-open body {
		overflow: hidden !important;
	}

	html.be-co2-login-open .be-co2-backdrop {
		position: fixed;
		inset: 0;
		z-index: 100000 !important;
		background: rgba(0, 0, 0, 0.45);
	}

	html.be-co2-login-open body.be-co2 form.be-co2-login-sheet:not(#be-co2-x) {
		position: fixed !important;
		top: auto !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		z-index: 100001 !important;
		width: 100% !important;
		max-width: none !important;
		transform: none !important;
		display: block !important;
		max-height: 88vh;
		overflow-y: auto;
		margin: 0 !important;
		padding: 18px 16px calc(24px + env(safe-area-inset-bottom)) !important;
		border: 0 !important;
		border-radius: 16px 16px 0 0 !important;
		background: #fff !important;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
		text-align: left;
		font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	}

	body.be-co2 .be-co2-sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16px;
	}

	body.be-co2 form.be-co2-login-sheet:not(#be-co2-x) button.be-co2-sheet-close {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 32px !important;
		height: 32px !important;
		min-height: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: #f2f2f2 !important;
		box-shadow: none !important;
		color: #1f1f1f !important;
		font-size: 20px !important;
		font-weight: 400 !important;
		line-height: 1 !important;
	}

	/* Hidden whenever the sheet is closed (it lives in <body> once opened) */
	html:not(.be-co2-login-open) form.be-co2-login-sheet:not(#be-co2-x) {
		display: none !important;
	}

	body.be-co2 form.be-co2-login-sheet:not(#be-co2-x) .form-row {
		float: none;
		width: 100%;
		margin: 0 0 10px !important;
		padding: 0;
	}

	body.be-co2 form.be-co2-login-sheet:not(#be-co2-x) .form-row label:not(.woocommerce-form-login__rememberme) {
		display: none !important;
	}

	body.be-co2 form.be-co2-login-sheet:not(#be-co2-x) input.input-text {
		width: 100%;
		height: 47px !important;
		padding: 14px 11px !important;
		border: 1px solid #dedede !important;
		border-radius: 12px !important;
		background: #fff !important;
		box-shadow: none !important;
		font-size: 15px !important;
		color: #1f1f1f !important;
	}

	body.be-co2 form.be-co2-login-sheet:not(#be-co2-x) input.input-text:focus {
		border-color: #0066ff !important;
		box-shadow: 0 0 0 0.5px #0066ff !important;
	}

	body.be-co2 form.be-co2-login-sheet:not(#be-co2-x) .form-row-btn {
		margin-top: 16px !important;
	}

	body.be-co2 form.be-co2-login-sheet:not(#be-co2-x) button.woocommerce-form-login__submit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 55px !important;
		border: 0;
		border-radius: 12px !important;
		background: #145cf8 !important;
		background-image: none !important;
		box-shadow: none;
		color: #fff;
		font-size: 17px !important;
		font-weight: 600;
		text-transform: none;
	}

	body.be-co2 form.be-co2-login-sheet:not(#be-co2-x) .login-form-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 14px 0 0;
		font-size: 14px;
	}

	body.be-co2 form.be-co2-login-sheet:not(#be-co2-x) .login-form-footer a {
		color: #0066ff !important;
	}

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