/**
 * Checkout two-column layout + Account Details panel.
 *
 * Layout and panel chrome only. Nothing here restyles the payment section, the order review
 * table or the Place Order button — those keep whatever the theme already gives them; the only
 * effect on the right column is that it now sits in a grid track.
 *
 * !important throughout, matching the hardening already applied to mp-auth-modal.css: the theme
 * ships opinionated WooCommerce styles and this file has to win.
 */

.mp-co {
	--mp-co-primary: #114d27 !important;
	--mp-co-primary-h: #0c3a1d !important;
	--mp-co-text: #1a1a2e !important;
	--mp-co-muted: #6b7280 !important;
	--mp-co-border: #d8dde3 !important;

	display: grid !important;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
	gap: 32px !important;
	align-items: start !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.mp-co-col {
	min-width: 0 !important;
	box-sizing: border-box !important;
}

/* The summary stays with the visitor as they scroll the left column. */
@media (min-width: 981px) {
	.mp-co-col--side {
		position: sticky !important;
		top: 24px !important;
	}
}

/* ── Account Details panel ──────────────────────────────────────────────────────────────── */

.mp-co-panel {
	border: 1px solid var(--mp-co-border) !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

.mp-co-panel--open {
	box-shadow: 0 2px 10px rgba(0, 0, 0, .05) !important;
}

.mp-co-panel-head {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 18px 22px !important;
	border-bottom: 1px solid var(--mp-co-border) !important;
	background: #fafbfc !important;
}

.mp-co-step {
	flex: 0 0 26px !important;
	width: 26px !important;
	height: 26px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	background: var(--mp-co-primary) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
}

.mp-co-panel-title {
	margin: 0 !important;
	font-size: 17px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	color: var(--mp-co-text) !important;
}

.mp-co-panel-lead {
	margin: 3px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: var(--mp-co-muted) !important;
}

.mp-co-panel-body {
	padding: 22px !important;
}

/* Collapsed, signed-in state — deliberately quiet so it does not compete with payment. */
.mp-co-panel--done {
	background: #f6faf7 !important;
	border-color: rgba(17, 77, 39, .25) !important;
	margin-bottom: 20px !important;
}

.mp-co-done {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 14px 18px !important;
}

.mp-co-done-tick {
	flex: 0 0 24px !important;
	width: 24px !important;
	height: 24px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	background: var(--mp-co-primary) !important;
	color: #fff !important;
}

.mp-co-done-tick svg {
	width: 14px !important;
	height: 14px !important;
	display: block !important;
}

.mp-co-done-text {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
	font-size: 14px !important;
	line-height: 1.35 !important;
	color: var(--mp-co-text) !important;
}

.mp-co-done-sub {
	font-size: 13px !important;
	color: var(--mp-co-muted) !important;
	overflow-wrap: anywhere !important;
}

/* ── Form ───────────────────────────────────────────────────────────────────────────────── */

.mp-co-form {
	margin: 0 !important;
}

.mp-co-2col {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 14px !important;
}

.mp-co-fg {
	margin: 0 0 14px !important;
}

.mp-co-fg label {
	display: block !important;
	margin-bottom: 5px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--mp-co-text) !important;
}

.mp-co-fg input[type="text"],
.mp-co-fg input[type="email"],
.mp-co-fg input[type="password"] {
	width: 100% !important;
	min-height: 44px !important;
	padding: 10px 13px !important;
	border: 1px solid var(--mp-co-border) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--mp-co-text) !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	box-sizing: border-box !important;
}

.mp-co-fg input:focus {
	outline: 2px solid var(--mp-co-primary) !important;
	outline-offset: 1px !important;
	border-color: var(--mp-co-primary) !important;
}

.mp-co-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 0 0 16px !important;
}

.mp-co-check,
.mp-co-check-inline {
	margin: 0 0 16px !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: var(--mp-co-muted) !important;
}

.mp-co-check-inline {
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
}

.mp-co-check label {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	cursor: pointer !important;
}

.mp-co-check input[type="checkbox"],
.mp-co-check-inline input[type="checkbox"] {
	flex: 0 0 auto !important;
	width: 17px !important;
	height: 17px !important;
	margin: 1px 0 0 !important;
}

.mp-co-terms-note {
	margin: 0 0 16px !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: var(--mp-co-muted) !important;
}

.mp-co-link,
.mp-co-switch a {
	color: var(--mp-co-primary) !important;
	font-size: 13px !important;
	text-decoration: underline !important;
}

.mp-co-switch {
	margin: 14px 0 0 !important;
	font-size: 13px !important;
	text-align: center !important;
}

.mp-co-captcha {
	margin: 0 0 16px !important;
	max-width: 100% !important;
	overflow-x: auto !important;
}

.mp-co-submit {
	display: block !important;
	width: 100% !important;
	min-height: 44px !important;
	padding: 11px 18px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--mp-co-primary) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	box-shadow: 0 1px 2px rgba(17, 77, 39, .18) !important;
	transition: background-color .18s ease, box-shadow .18s ease, transform .08s ease !important;
}

.mp-co-submit:hover {
	background: var(--mp-co-primary-h) !important;
	box-shadow: 0 3px 10px rgba(17, 77, 39, .24) !important;
}

.mp-co-submit:active {
	transform: translateY(1px) !important;
}

.mp-co-submit:focus-visible {
	outline: 2px solid var(--mp-co-primary) !important;
	outline-offset: 2px !important;
}

/* Anti-spam trap: off-screen rather than display:none, never focusable. */
.mp-co-trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Edwiser renders login/registration errors into this wrapper. */
.mp-co-panel-body .wdm-flash-error {
	margin: 0 0 16px !important;
	padding: 11px 13px !important;
	border: 1px solid #f0c2c2 !important;
	border-radius: 10px !important;
	background: #fdf2f2 !important;
	color: #8a1f1f !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

/* ── Provider sign-in ───────────────────────────────────────────────────────────────────────
   Markup comes from Edwiser Bridge Pro via MP_Auth_Modal::social_buttons_html(); its own styles
   live in the account-page template, so the button is shaped here. Same stacking guard the modal
   needed: this is the one part of the panel whose markup comes from outside the child theme, and
   a dead click on it is invisible to debug. */

.mp-co-social {
	position: relative !important;
	z-index: 2 !important;
	margin: 0 0 16px !important;
}

.mp-co-social ul.eb-sso-cont-login-btns {
	list-style: none !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mp-co-social ul.eb-sso-cont-login-btns li {
	list-style: none !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mp-co-social ul.eb-sso-cont-login-btns a,
.mp-co-social ul.eb-sso-cont-login-btns a:visited {
	position: relative !important;
	z-index: 1 !important;
	pointer-events: auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	min-height: 44px !important;
	padding: 10px 16px !important;
	border: 1px solid var(--mp-co-border) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--mp-co-text) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
}

.mp-co-social ul.eb-sso-cont-login-btns a:hover {
	border-color: var(--mp-co-primary) !important;
	background: rgba(17, 77, 39, .05) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .07) !important;
}

.mp-co-social ul.eb-sso-cont-login-btns a:focus-visible {
	outline: 2px solid var(--mp-co-primary) !important;
	outline-offset: 2px !important;
}

.mp-co-social .eb-sso-social-login-icon {
	width: 19px !important;
	height: 19px !important;
	flex: 0 0 19px !important;
	object-fit: contain !important;
}

.mp-co-or {
	position: relative !important;
	margin: 0 0 16px !important;
	text-align: center !important;
}

/* .mp-co-or::before {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	right: 0 !important;
	height: 1px !important;
	background: var(--mp-co-border) !important;
} */

.mp-co-or span {
	position: relative !important;
	display: inline-block !important;
	padding: 0 12px !important;
	background: #fff !important;
	font-size: 12px !important;
	color: var(--mp-co-muted) !important;
}

/* ── Payment hint ───────────────────────────────────────────────────────────────────────────
   Plain muted text, deliberately with no border, no background and no lock icon — nothing that
   could read as a disabled payment form. There is no payment markup in the document while
   gated, and this should not suggest otherwise. */

.mp-co-payment-hint {
	margin: 14px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	text-align: center !important;
	color: var(--mp-co-muted) !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
}

/* ── Responsive ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
	.mp-co {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 24px !important;
	}

	/* Summary first on narrow screens: the visitor sees what they are paying for before the
	   form, matching the order the desktop layout reads in. */
	.mp-co-col--side {
		order: -1 !important;
	}
}

@media (max-width: 480px) {
	.mp-co {
		gap: 18px !important;
	}

	.mp-co-panel-head {
		padding: 15px 16px !important;
	}

	.mp-co-panel-body {
		padding: 16px !important;
	}

	/* Stack the paired name / password fields. */
	.mp-co-2col {
		grid-template-columns: 1fr !important;
	}

	.mp-co-row {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	/* 16px keeps iOS Safari from zooming the page on focus. */
	.mp-co-fg input[type="text"],
	.mp-co-fg input[type="email"],
	.mp-co-fg input[type="password"] {
		font-size: 16px !important;
		min-height: 46px !important;
	}

	.mp-co-submit {
		min-height: 46px !important;
	}

	/* The reCAPTCHA iframe is a fixed 302px; let it scroll rather than widen the panel. */
	.mp-co-captcha {
		overflow-x: auto !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mp-co-submit {
		transition: none !important;
	}

	.mp-co-submit:active {
		transform: none !important;
	}
}