/**
 * mslogin native Unlimited checkout
 * Plan toggle + dark skin for the NATIVE WooCommerce checkout rendered by
 * [woocommerce_checkout] inside [mslogin_unlimited_checkout].
 *
 * Native Woo classes differ from FunnelKit's, so this styles:
 *   form.checkout, #customer_details, #order_review, #payment,
 *   .wc_payment_methods, #place_order, .woocommerce-input-wrapper inputs.
 */
.mslogin-plan {
	--msp-bg: #0a0a0a;
	--msp-surface: #161616;
	--msp-surface-2: #111111;
	--msp-border: #2a2a2a;
	--msp-border-2: #222;
	--msp-text: #e8e8e8;
	--msp-muted: #8a8a8a;
	--msp-faint: #666;
	--msp-blue: #3d7bff;
	--msp-blue-hi: #2f6ae8;
	--msp-gold: #f5b51e;
	--msp-good: #5dcaa5;
	max-width: 540px;
	margin: 0 auto;
	color: var(--msp-text);
}

/* ---- Toggle ---- */
.mslogin-plan__toggle {
	display: flex;
	background: var(--msp-surface);
	border: 1px solid var(--msp-border);
	border-radius: 12px;
	padding: 5px;
	margin-bottom: 20px;
}
.mslogin-plan__opt {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 12px 8px;
	border: none;
	background: transparent;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s;
	font-family: inherit;
}
.mslogin-plan__opt:hover { background: rgba(255,255,255,0.03); }
.mslogin-plan__opt.is-active { background: var(--msp-blue); }
.mslogin-plan__term { font-size: 13px; color: var(--msp-muted); }
.mslogin-plan__price {
	font-family: "Oswald", sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #ccc;
}
.mslogin-plan__opt.is-active .mslogin-plan__term,
.mslogin-plan__opt.is-active .mslogin-plan__price { color: #fff; }
.mslogin-plan__was {
	color: var(--msp-faint);
	text-decoration: line-through;
	font-size: 13px;
	font-weight: 400;
	margin-right: 6px;
}
.mslogin-plan__opt.is-active .mslogin-plan__was { color: rgba(255,255,255,0.6); }
.mslogin-plan__badge {
	position: absolute;
	top: -9px;
	right: 8px;
	background: var(--msp-gold);
	color: #1a1a1a;
	font-family: "Oswald", sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 6px;
	white-space: nowrap;
}

/* Swapping state: subtle top loading bar over the checkout */
.mslogin-plan__checkout { position: relative; }
.mslogin-plan.is-swapping .mslogin-plan__checkout::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--msp-blue), transparent);
	background-size: 200% 100%;
	animation: msp-load 0.9s linear infinite;
	z-index: 5;
}
@keyframes msp-load {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ============================================================
   NATIVE WOOCOMMERCE CHECKOUT -> dark theme
   ============================================================ */
.mslogin-plan .woocommerce-checkout,
.mslogin-plan form.checkout,
.mslogin-plan #customer_details,
.mslogin-plan #order_review,
.mslogin-plan #order_review_heading {
	color: var(--msp-text) !important;
	background: transparent !important;
}

/* Section headings */
.mslogin-plan h3,
.mslogin-plan #order_review_heading,
.mslogin-plan .woocommerce-billing-fields h3,
.mslogin-plan .woocommerce-account-fields h3,
.mslogin-plan .woocommerce-additional-fields h3 {
	font-family: "Oswald", sans-serif !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	font-size: 15px !important;
	color: #fff !important;
}

/* Labels */
.mslogin-plan .checkout label,
.mslogin-plan .woocommerce-form__label {
	color: var(--msp-muted) !important;
	font-size: 12px !important;
}

/* Inputs */
.mslogin-plan .checkout input[type="text"],
.mslogin-plan .checkout input[type="email"],
.mslogin-plan .checkout input[type="tel"],
.mslogin-plan .checkout input[type="password"],
.mslogin-plan .checkout input[type="number"],
.mslogin-plan .checkout select,
.mslogin-plan .checkout textarea,
.mslogin-plan .checkout .input-text,
.mslogin-plan .select2-container .select2-selection--single {
	background-color: var(--msp-surface) !important;
	border: 1px solid var(--msp-border) !important;
	border-radius: 8px !important;
	color: var(--msp-text) !important;
	-webkit-text-fill-color: var(--msp-text) !important;
}
.mslogin-plan .checkout input::placeholder { color: var(--msp-muted) !important; }
.mslogin-plan .checkout input:focus,
.mslogin-plan .checkout select:focus,
.mslogin-plan .checkout textarea:focus {
	border-color: var(--msp-blue) !important;
	box-shadow: 0 0 0 1px var(--msp-blue) !important;
	outline: none !important;
}
.mslogin-plan .checkout input:-webkit-autofill {
	-webkit-text-fill-color: var(--msp-text) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--msp-surface) inset !important;
}

/* Order review table */
.mslogin-plan .shop_table,
.mslogin-plan .woocommerce-checkout-review-order-table {
	background: var(--msp-surface-2) !important;
	border: 1px solid var(--msp-border) !important;
	border-radius: 10px !important;
	color: var(--msp-text) !important;
}
.mslogin-plan .shop_table th,
.mslogin-plan .shop_table td,
.mslogin-plan .shop_table .product-name,
.mslogin-plan .shop_table .product-total,
.mslogin-plan .order-total th,
.mslogin-plan .order-total td,
.mslogin-plan .cart-subtotal th,
.mslogin-plan .cart-subtotal td,
.mslogin-plan .woocommerce-Price-amount,
.mslogin-plan .woocommerce-Price-amount bdi {
	color: var(--msp-text) !important;
	border-color: var(--msp-border-2) !important;
}
.mslogin-plan .order-total td strong,
.mslogin-plan .order-total .woocommerce-Price-amount {
	color: #fff !important;
}

/* Payment box */
.mslogin-plan #payment,
.mslogin-plan #payment .payment_box,
.mslogin-plan #payment ul.payment_methods {
	background: transparent !important;
	border: none !important;
}
.mslogin-plan #payment ul.wc_payment_methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}
.mslogin-plan #payment li.wc_payment_method {
	background: var(--msp-surface) !important;
	border: 1px solid var(--msp-border) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	margin: 0 !important;
	list-style: none !important;
}
.mslogin-plan #payment li.wc_payment_method > label {
	color: var(--msp-text) !important;
	font-weight: 500 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.mslogin-plan #payment li.wc_payment_method img { max-height: 22px !important; width: auto !important; }
.mslogin-plan #payment .payment_box {
	background: var(--msp-surface-2) !important;
	color: var(--msp-text) !important;
	border-radius: 8px !important;
	margin-top: 8px !important;
}
.mslogin-plan #payment .payment_box::before { display: none !important; }

/* Payment method highlight is handled by the :has(:checked) tile rule
   (v0.26) below. No permanent per-position highlight, so only the
   actually-selected tile shows blue. */

/* Place order button */
.mslogin-plan #place_order,
.mslogin-plan button#place_order {
	background: var(--msp-blue) !important;
	color: #fff !important;
	font-family: "Oswald", sans-serif !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	border-radius: 8px !important;
	border: none !important;
	width: 100% !important;
	padding: 15px !important;
	font-size: 16px !important;
}
.mslogin-plan #place_order:hover { background: var(--msp-blue-hi) !important; }
.mslogin-plan #place_order.mslogin-disabled,
.mslogin-plan #place_order:disabled {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
}

/* Notices */
.mslogin-plan .woocommerce-info,
.mslogin-plan .woocommerce-message,
.mslogin-plan .woocommerce-error {
	background: var(--msp-surface) !important;
	color: var(--msp-text) !important;
	border-top-color: var(--msp-blue) !important;
}

/* Privacy / terms text */
.mslogin-plan .woocommerce-privacy-policy-text,
.mslogin-plan .woocommerce-privacy-policy-text p,
.mslogin-plan .woocommerce-terms-and-conditions-wrapper {
	color: var(--msp-faint) !important;
}

@media (max-width: 480px) {
	.mslogin-plan__price { font-size: 16px; }
}

/* ============================================================
   FIXES (v0.13): white fields, notes textarea, Turnstile box
   ============================================================ */

/* Catch ALL inputs/textareas/selects regardless of Woo wrapper, including
   the email billing field and the order-notes textarea that slipped through. */
.mslogin-plan input.input-text,
.mslogin-plan textarea.input-text,
.mslogin-plan #billing_email,
.mslogin-plan #order_comments,
.mslogin-plan .woocommerce-billing-fields input,
.mslogin-plan .woocommerce-billing-fields textarea,
.mslogin-plan .woocommerce-billing-fields select,
.mslogin-plan .woocommerce-account-fields input,
.mslogin-plan .woocommerce-additional-fields input,
.mslogin-plan .woocommerce-additional-fields textarea,
.mslogin-plan .woocommerce-shipping-fields input,
.mslogin-plan .woocommerce-shipping-fields textarea {
	background-color: var(--msp-surface) !important;
	border: 1px solid var(--msp-border) !important;
	border-radius: 8px !important;
	color: var(--msp-text) !important;
	-webkit-text-fill-color: var(--msp-text) !important;
}
.mslogin-plan #billing_email::placeholder,
.mslogin-plan #order_comments::placeholder,
.mslogin-plan input.input-text::placeholder,
.mslogin-plan textarea.input-text::placeholder {
	color: var(--msp-muted) !important;
	-webkit-text-fill-color: var(--msp-muted) !important;
}
.mslogin-plan #billing_email:-webkit-autofill {
	-webkit-text-fill-color: var(--msp-text) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--msp-surface) inset !important;
}

/* Cloudflare Turnstile widget: dark-frame it instead of white.
   (It's a managed/auto challenge; we keep it visible but on-theme.) */
.mslogin-plan .cf-turnstile,
.mslogin-plan [id^="cf-turnstile"],
.mslogin-plan iframe[src*="challenges.cloudflare.com"] {
	background: transparent !important;
	color-scheme: dark;
}
/* The white "Success!" box is a wrapper Cloudflare/Woo renders around it. */
.mslogin-plan .cf-turnstile,
.mslogin-plan .cf-turnstile-wrapper {
	background-color: var(--msp-surface-2) !important;
	border-radius: 8px !important;
}

/* Order-notes field: keep it dark; if you prefer it gone entirely, the
   cleaner fix is WooCommerce > Settings, or set it hidden here: */
.mslogin-plan #order_comments {
	min-height: 70px !important;
}

/* Tighten the lopsided two-column layout: let the order column breathe
   and keep billing from leaving a huge empty left rail on desktop. */
@media (min-width: 769px) {
	.mslogin-plan .col2-set,
	.mslogin-plan .woocommerce-checkout .col2-set {
		display: flex !important;
		gap: 28px !important;
	}
	.mslogin-plan .col2-set .col-1 { flex: 1 1 46% !important; }
	.mslogin-plan .col2-set .col-2 { flex: 1 1 54% !important; }
}

/* ============================================================
   v0.14 SINGLE-COLUMN MOCKUP LAYOUT
   Collapse Woo's two-column checkout into one narrow centered
   card, trim clutter, match the mockup's shape.
   ============================================================ */

.mslogin-plan {
	max-width: 600px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Force one column: billing + order stack vertically, full width */
.mslogin-plan .col2-set,
.mslogin-plan .woocommerce-checkout .col2-set {
	display: block !important;
}
.mslogin-plan .col2-set .col-1,
.mslogin-plan .col2-set .col-2 {
	width: 100% !important;
	float: none !important;
	max-width: 100% !important;
	padding: 0 !important;
}
.mslogin-plan #customer_details,
.mslogin-plan #order_review,
.mslogin-plan #order_review_heading {
	width: 100% !important;
	float: none !important;
	clear: both !important;
}

/* Order: account/billing first, then summary, then payment.
   Woo already renders #customer_details before #order_review, so
   the natural flow is correct; just ensure full-width stacking. */

/* --- Trim clutter to match the lean mockup --- */
/* Order notes / additional information */
.mslogin-plan .woocommerce-additional-fields,
.mslogin-plan #order_comments,
.mslogin-plan .woocommerce-additional-fields__field-wrapper,
.mslogin-plan #order_comments_field {
	display: none !important;
}
/* "Ship to a different address", company clutter if present.
   (Phone is intentionally kept: PayPal needs_payer_phone is true.) */
.mslogin-plan #ship-to-different-address,
.mslogin-plan .woocommerce-shipping-fields,
.mslogin-plan #billing_company_field {
	display: none !important;
}

/* --- Headings tightened, mockup-style --- */
.mslogin-plan .woocommerce-billing-fields h3,
.mslogin-plan #order_review_heading {
	font-size: 13px !important;
	margin: 0 0 12px !important;
}
/* Rename feel: tighten the billing section spacing */
.mslogin-plan #customer_details { margin-bottom: 20px !important; }

/* --- Collapse order summary toward one line --- */
.mslogin-plan .woocommerce-checkout-review-order-table thead { display: none !important; }
.mslogin-plan .woocommerce-checkout-review-order-table .product-name,
.mslogin-plan .woocommerce-checkout-review-order-table .cart_item td {
	padding: 10px 14px !important;
	font-size: 14px !important;
}
/* Hide the duplicated "Recurring totals" block; the line item + total
   already state the recurring price. Keeps it lean like the mockup. */
.mslogin-plan .woocommerce-checkout-review-order-table tfoot tr.recurring-total,
.mslogin-plan .woocommerce-checkout-review-order-table .order-total + tr,
.mslogin-plan .wcs-recurring-totals,
.mslogin-plan tr.recurring-totals,
.mslogin-plan .recurring-totals {
	display: none !important;
}
/* keep subtotal + total + the first recurring line readable */
.mslogin-plan .woocommerce-checkout-review-order-table tfoot th,
.mslogin-plan .woocommerce-checkout-review-order-table tfoot td {
	padding: 8px 14px !important;
}

/* --- Card field (Stripe UPE) framed dark --- */
.mslogin-plan .wc-stripe-upe-element,
.mslogin-plan #wc-stripe-upe-form,
.mslogin-plan .wc-stripe-elements-field,
.mslogin-plan .StripeElement {
	background: var(--msp-surface) !important;
	border: 1px solid var(--msp-border) !important;
	border-radius: 8px !important;
	padding: 12px !important;
}

/* --- Pay button full width, mockup blue --- */
.mslogin-plan #place_order {
	margin-top: 14px !important;
}

/* Tidy the payment box top padding now that it's single column */
.mslogin-plan #payment { padding-top: 4px !important; }

/* ============================================================
   v0.15 PRECISE FIXES (from live checkout markup)
   ============================================================ */

/* --- The white Cloudflare Turnstile box ---
   It renders as #cf-turnstile-woo-checkout with data-theme="light".
   Force it onto the dark theme and frame it. Hide its <br> spacers. */
.mslogin-plan #cf-turnstile-woo-checkout,
.mslogin-plan .cf-turnstile {
	background-color: var(--msp-surface) !important;
	border: 1px solid var(--msp-border) !important;
	border-radius: 8px !important;
	padding: 10px !important;
	margin: 14px 0 !important;
	color-scheme: dark;
	display: inline-block !important;
	min-height: 0 !important;
}
.mslogin-plan .cf-turnstile-br,
.mslogin-plan br.cf-turnstile-br-woo-checkout {
	display: none !important;
}

/* --- Empty "Additional information" block creates a gap --- */
.mslogin-plan .woocommerce-additional-fields {
	display: none !important;
}
.mslogin-plan .woocommerce-additional-fields:has(.woocommerce-additional-fields__field-wrapper:empty) {
	display: none !important;
}
/* The empty additional-fields wrapper + its h3 (no fields inside) */
.mslogin-plan .woocommerce-additional-fields > h3 {
	display: none !important;
}

/* --- Tighten vertical rhythm: kill the big stacked gaps --- */
.mslogin-plan #customer_details {
	margin-bottom: 18px !important;
}
.mslogin-plan .woocommerce-billing-fields {
	margin-bottom: 0 !important;
}
.mslogin-plan #order_review_heading {
	margin: 18px 0 10px !important;
}
/* The create-account block spacing */
.mslogin-plan .woocommerce-account-fields {
	margin-top: 14px !important;
}
.mslogin-plan .create-account {
	margin: 0 !important;
}

/* --- Uniform width: make the email field, summary table, payment,
   and button all the same width inside the 440 card.
   The email lives in .col-1, summary in #order_review; both are
   full-width now (single column), but enforce box-sizing + no stray
   max-widths so edges line up. --- */
.mslogin-plan #customer_details,
.mslogin-plan #order_review,
.mslogin-plan .woocommerce-checkout-review-order,
.mslogin-plan .shop_table,
.mslogin-plan #payment,
.mslogin-plan .place-order {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.mslogin-plan #billing_email,
.mslogin-plan .woocommerce-billing-fields__field-wrapper .form-row {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Order summary table: tighten padding, remove rounded-corner overflow gap */
.mslogin-plan .woocommerce-checkout-review-order-table {
	margin: 0 0 14px !important;
	width: 100% !important;
}

/* Place-order row spacing */
.mslogin-plan .form-row.place-order {
	margin-top: 16px !important;
	padding-top: 0 !important;
}

/* --- Duplicate login prompt: you have the custom mslogin-checkout-bar,
   so hide WooCommerce's native "Returning customer? Click here to login"
   toggle to avoid two login bars stacked. --- */
.mslogin-plan .woocommerce-form-login-toggle {
	display: none !important;
}

/* ============================================================
   v0.16 — ONE CARD, TIGHT & COMPACT (authoritative layout)
   Wraps the whole checkout in a single bordered card and
   compresses spacing. This block intentionally overrides the
   earlier scattered layout rules.
   ============================================================ */

/* The whole checkout becomes one bordered card */
.mslogin-plan__checkout {
	border: 1px solid var(--msp-border) !important;
	border-radius: 14px !important;
	background: var(--msp-surface-2) !important;
	padding: 20px !important;
	margin-top: 16px !important;
}
.mslogin-plan__checkout .woocommerce { background: transparent !important; }

/* Kill ALL the big inter-section gaps -> tight rhythm */
.mslogin-plan #customer_details,
.mslogin-plan .woocommerce-billing-fields,
.mslogin-plan .woocommerce-account-fields,
.mslogin-plan #order_review,
.mslogin-plan #payment {
	margin: 0 !important;
	padding: 0 !important;
}

/* Section headings: compact, consistent top spacing */
.mslogin-plan .woocommerce-billing-fields h3,
.mslogin-plan #order_review_heading {
	font-size: 12px !important;
	letter-spacing: 0.05em !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
}
/* First heading (Billing) has no top margin; later ones get a divider gap */
.mslogin-plan #order_review_heading {
	margin-top: 18px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--msp-border) !important;
}

/* Fields: compact */
.mslogin-plan .form-row {
	margin: 0 0 10px !important;
	padding: 0 !important;
}
.mslogin-plan .checkout input.input-text,
.mslogin-plan #billing_email,
.mslogin-plan #account_username,
.mslogin-plan #account_password {
	padding: 11px 12px !important;
	font-size: 15px !important;
}
.mslogin-plan .checkout label,
.mslogin-plan .woocommerce-form__label {
	margin: 0 0 4px !important;
	display: block !important;
}

/* Account fields sit right under billing, tight */
.mslogin-plan .woocommerce-account-fields { margin-top: 10px !important; }
.mslogin-plan .create-account { margin: 0 !important; padding: 0 !important; }

/* Order summary table: compact rows, sits flush in the card */
.mslogin-plan .woocommerce-checkout-review-order-table {
	margin: 0 0 12px !important;
	border: 1px solid var(--msp-border) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
}
.mslogin-plan .shop_table th,
.mslogin-plan .shop_table td {
	padding: 9px 12px !important;
}

/* Turnstile box: framed, sits inline in the card (you're switching it to
   dark at the plugin level, so this just keeps it tidy) */
.mslogin-plan #cf-turnstile-woo-checkout,
.mslogin-plan .cf-turnstile {
	margin: 0 0 12px !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	min-height: 0 !important;
}

/* Payment list: remove the odd left tick / inconsistent insets */
.mslogin-plan #payment ul.wc_payment_methods {
	gap: 8px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}
.mslogin-plan #payment li.wc_payment_method {
	padding: 12px 14px !important;
	margin: 0 !important;
	border-left-width: 1px !important; /* kill the thick left accent tick */
}
.mslogin-plan #payment li.wc_payment_method > label {
	margin: 0 !important;
	padding: 0 !important;
}
/* Stripe UPE element inside payment box, compact */
.mslogin-plan .payment_box {
	margin-top: 8px !important;
	padding: 12px !important;
}

/* Place order: tight under payment, full width */
.mslogin-plan .form-row.place-order {
	margin: 14px 0 0 !important;
	padding: 0 !important;
}
.mslogin-plan #place_order {
	margin: 0 !important;
	padding: 14px !important;
}

/* Remove any leftover empty wrappers that add height */
.mslogin-plan .woocommerce-additional-fields,
.mslogin-plan .woocommerce-shipping-fields,
.mslogin-plan .woocommerce-form-login-toggle,
.mslogin-plan .col2-set > .col-2:empty {
	display: none !important;
}

/* Tighten the toggle-to-card gap */
.mslogin-plan__toggle { margin-bottom: 0 !important; }

/* ============================================================
   v0.17 — toggle, summary trim, payment radio cleanup
   ============================================================ */

/* Inactive toggle side: flat dark (no navy fill) */
.mslogin-plan__opt {
	background: transparent !important;
}
.mslogin-plan__opt:hover {
	background: rgba(255,255,255,0.03) !important;
}
.mslogin-plan__opt.is-active {
	background: var(--msp-blue) !important;
}

/* Order summary: show ONLY the line item + one Total.
   Hide the Subtotal row and the entire recurring-totals block. */
.mslogin-plan .woocommerce-checkout-review-order-table tr.cart-subtotal,
.mslogin-plan .woocommerce-checkout-review-order-table tr.recurring-totals,
.mslogin-plan .woocommerce-checkout-review-order-table tr.recurring-total,
.mslogin-plan .woocommerce-checkout-review-order-table tr.cart-subtotal.recurring-total,
.mslogin-plan .woocommerce-checkout-review-order-table tr.order-total.recurring-total {
	display: none !important;
}
/* Keep the single real Total visible and clear */
.mslogin-plan .woocommerce-checkout-review-order-table tfoot tr.order-total:not(.recurring-total) {
	display: table-row !important;
}
.mslogin-plan .woocommerce-checkout-review-order-table tfoot tr.order-total:not(.recurring-total) th,
.mslogin-plan .woocommerce-checkout-review-order-table tfoot tr.order-total:not(.recurring-total) td {
	border-top: 1px solid var(--msp-border) !important;
	padding: 11px 12px !important;
	font-size: 16px !important;
}

/* Payment radio + label: fix the clipped radio and the odd left tick.
   Show the native radio, aligned, and remove any inherited left accent. */
.mslogin-plan #payment li.wc_payment_method {
	border-left-width: 1px !important;
	display: block !important;
}
.mslogin-plan #payment li.wc_payment_method > input[type="radio"] {
	-webkit-appearance: radio !important;
	appearance: radio !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0 8px 0 0 !important;
	vertical-align: middle !important;
	opacity: 1 !important;
	position: static !important;
	accent-color: var(--msp-blue) !important;
	flex: 0 0 auto !important;
}
.mslogin-plan #payment li.wc_payment_method > label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: 500 !important;
	color: var(--msp-text) !important;
}
/* Label color follows selection (handled by the :has(:checked) rules);
   no permanent per-position muting, so the selected method always reads
   bright even if it's the second one (PayPal). */
.mslogin-plan #payment li.wc_payment_method:has(input[type="radio"]:checked) > label {
	color: #fff !important;
}
.mslogin-plan #payment li.wc_payment_method:not(:has(input[type="radio"]:checked)) > label {
	color: var(--msp-muted) !important;
}

/* ============================================================
   v0.18 — wider on desktop + reveal card field on selection
   ============================================================ */

/* Wider on desktop */
@media (min-width: 769px) {
	.mslogin-plan {
		max-width: 600px !important;
	}
}

/* CRITICAL: make sure the payment box (Stripe card field) is VISIBLE when
   its method is selected. WooCommerce toggles .payment_box via JS; this is a
   safety net so the card entry area always shows for the checked method.
   We do NOT force-show all boxes (that would show every gateway's fields);
   only the one whose radio is :checked. */
.mslogin-plan #payment li.wc_payment_method input[type="radio"]:checked ~ .payment_box {
	display: block !important;
}
/* Ensure the Stripe UPE mount point has height so the iframe can render */
.mslogin-plan .wc-stripe-upe-element,
.mslogin-plan #wc-stripe-upe-form .wc-stripe-upe-element {
	min-height: 40px !important;
	display: block !important;
}

/* ============================================================
   v0.20 — (superseded) custom radio removed; see v0.26 tiles.
   The radio is hidden globally; tiles show selection state.
   ============================================================ */
/* Make sure the whole row is clickable-feeling and aligned */
.mslogin-plan #payment li.wc_payment_method {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
}
.mslogin-plan #payment li.wc_payment_method > label {
	flex: 1 1 auto !important;
}
/* The payment box (card fields) spans full width below the label row */
.mslogin-plan #payment li.wc_payment_method > .payment_box {
	flex: 1 1 100% !important;
	width: 100% !important;
}

/* ============================================================
   v0.22 — force-fix the payment radio artifact + left bar
   The native radio and a left accent bar are bleeding through
   from theme/Woo styles. Target broadly and override hard.
   ============================================================ */

/* Any radio inside the payment methods, however nested: HIDE it.
   (Superseded by the v0.26 tile design; the radio must not be visible.) */
.mslogin-plan #payment input[type="radio"],
.mslogin-plan .wc_payment_methods input[type="radio"],
.mslogin-plan li.wc_payment_method input.input-radio {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	pointer-events: none !important;
}
.mslogin-plan #payment input[type="radio"]::before,
.mslogin-plan #payment input[type="radio"]::after,
.mslogin-plan .wc_payment_methods input[type="radio"]::before,
.mslogin-plan .wc_payment_methods input[type="radio"]::after {
	content: none !important;
	display: none !important;
}

/* Kill the thick blue/left accent bar bleeding onto the payment rows.
   It's likely a left border or ::before on the <li> from the theme. */
.mslogin-plan #payment li.wc_payment_method {
	border-left: 1px solid var(--msp-border) !important;
	position: relative !important;
}
.mslogin-plan #payment li.wc_payment_method::before,
.mslogin-plan #payment li.wc_payment_method::after {
	content: none !important;
	display: none !important;
	background: none !important;
	border: none !important;
	width: 0 !important;
}

/* ============================================================
   v0.23 — the "line" is the Stripe card ICON in the label,
   not the radio. Hide the clipped Stripe icon (label text is
   enough). Keep PayPal's logo intact.
   ============================================================ */
.mslogin-plan #payment label[for="payment_method_stripe"] img,
.mslogin-plan #payment .stripe-cards-icon,
.mslogin-plan #payment img.stripe-icon {
	display: none !important;
}

/* ============================================================
   v0.24 — the blue shape is the custom radio getting CLIPPED
   at the left edge. Give the row left padding and stop clipping.
   ============================================================ */
.mslogin-plan #payment li.wc_payment_method {
	padding-left: 16px !important;
	overflow: visible !important;
}
.mslogin-plan #payment ul.wc_payment_methods {
	overflow: visible !important;
}
.mslogin-plan #payment {
	overflow: visible !important;
}
/* Make sure the radio sits inline with a tiny left margin, fully visible */
.mslogin-plan #payment input[type="radio"],
.mslogin-plan .wc_payment_methods input[type="radio"] {
	margin-left: 0 !important;
	left: 0 !important;
}

/* ============================================================
   v0.25 — THE blue bar: Kadence puts a 5px border-left + bg on
   the <label> of the checked payment method. Kill it.
   (Confirmed via inspector: woocommerce...ver=1.5.0 rules on
    li.wc_payment_method > label and :checked+label.)
   ============================================================ */
.mslogin-plan #payment ul.wc_payment_methods li.wc_payment_method > label,
.mslogin-plan #payment ul.wc_payment_methods li.wc_payment_method input[type="radio"]:first-child:checked + label,
.mslogin-plan #payment ul.wc_payment_methods li.wc_payment_method input[type="radio"]:checked + label {
	border-left: 0 !important;
	background: transparent !important;
	padding-left: 0 !important;
}

/* ============================================================
   v0.26 — OPTION 1: selectable payment tiles
   Hide the radio entirely; the whole row is a tile that
   highlights (blue border + fill + checkmark) when selected.
   ============================================================ */

/* Hide the native radio completely (we use tile state instead) */
.mslogin-plan #payment li.wc_payment_method > input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none !important;
}

/* The row becomes a clickable tile */
.mslogin-plan #payment li.wc_payment_method {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 14px 16px !important;
	border: 1px solid var(--msp-border) !important;
	border-radius: 10px !important;
	background: var(--msp-surface) !important;
	cursor: pointer !important;
	transition: border-color 0.15s, background 0.15s !important;
	position: relative !important;
	flex-wrap: wrap !important;
}
.mslogin-plan #payment li.wc_payment_method:hover {
	border-color: var(--msp-muted) !important;
}

/* Selected tile: blue border + subtle blue fill */
.mslogin-plan #payment li.wc_payment_method:has(input[type="radio"]:checked) {
	border-color: var(--msp-blue) !important;
	box-shadow: 0 0 0 1px var(--msp-blue) !important;
	background: rgba(61, 123, 255, 0.08) !important;
}

/* Label sits inline, takes available space */
.mslogin-plan #payment li.wc_payment_method > label {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	font-weight: 500 !important;
	color: var(--msp-text) !important;
	cursor: pointer !important;
	flex: 1 1 auto !important;
}
/* Selected label text brighter, unselected muted */
.mslogin-plan #payment li.wc_payment_method:has(input[type="radio"]:checked) > label {
	color: #fff !important;
}
.mslogin-plan #payment li.wc_payment_method:not(:has(input[type="radio"]:checked)) > label {
	color: var(--msp-muted) !important;
}

/* Checkmark on the selected tile (drawn via ::after on the li) */
.mslogin-plan #payment li.wc_payment_method::after {
	content: "" !important;
	display: none !important;
}
.mslogin-plan #payment li.wc_payment_method:has(input[type="radio"]:checked)::after {
	content: none !important;
	display: none !important;
}
/* For the selected tile, the card box appears full width below */
.mslogin-plan #payment li.wc_payment_method > .payment_box {
	flex: 1 1 100% !important;
	width: 100% !important;
	margin-top: 10px !important;
}

/* ============================================================
   v0.28 — NUCLEAR radio hide. Multiple independent methods so
   no single override can bring it back. Targets the radio by
   every selector path, including by ID.
   ============================================================ */
.mslogin-plan #payment input[type="radio"],
.mslogin-plan #payment input.input-radio,
.mslogin-plan #payment #payment_method_stripe,
.mslogin-plan #payment #payment_method_ppcp-gateway,
.mslogin-plan #payment li.wc_payment_method > input,
.mslogin-plan #payment ul.wc_payment_methods li input[name="payment_method"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	max-width: 0 !important;
	max-height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	position: absolute !important;
	left: -9999px !important;
	background: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	pointer-events: none !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	overflow: hidden !important;
}
.mslogin-plan #payment input[type="radio"]::before,
.mslogin-plan #payment input[type="radio"]::after {
	display: none !important;
	content: none !important;
}

/* ============================================================
   v0.29 — the dot is NOT the radio. It sits at the START (left)
   of the row, so it's a ::before or ::marker on the ul/li/label,
   never targeted before (every prior fix hit the <input>).
   NOTE: do NOT kill li::after — that's our v0.26 checkmark.
   ============================================================ */
.mslogin-plan #payment ul.wc_payment_methods::before,
.mslogin-plan #payment ul.wc_payment_methods li::before,
.mslogin-plan #payment li.wc_payment_method::before,
.mslogin-plan #payment li.wc_payment_method > label::before,
.mslogin-plan #payment label[for^="payment_method"]::before {
	content: none !important;
	display: none !important;
	background: none !important;
	border: none !important;
	width: 0 !important;
	height: 0 !important;
}
.mslogin-plan #payment ul.wc_payment_methods li::marker,
.mslogin-plan #payment li.wc_payment_method::marker {
	content: "" !important;
	color: transparent !important;
	font-size: 0 !important;
}

/* ============================================================
   v0.31 — collapse nested boxes around the card form.
   The selected tile -> payment_box -> Stripe wrapper had 3
   layers of border/padding. Flatten them so the card fields
   sit cleanly with one container, more compact.
   ============================================================ */

/* Tile itself: a touch less padding */
.mslogin-plan #payment li.wc_payment_method {
	padding: 14px 16px !important;
}
/* The payment box (holds card fields): no extra border/bg/padding,
   it should read as part of the tile, not a box-in-a-box. */
.mslogin-plan #payment .payment_box,
.mslogin-plan #payment li.wc_payment_method > .payment_box {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 12px 0 0 !important;
	box-shadow: none !important;
}
/* Stripe's own UPE wrapper: strip the inner panel so there's not a
   second dark rounded box inside the tile. */
.mslogin-plan #payment .wc-stripe-upe-element,
.mslogin-plan #payment #wc-stripe-upe-form,
.mslogin-plan #payment .wc-stripe-elements-field,
.mslogin-plan #payment .StripeElement {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}
/* Remove the Stripe "save card" / terms text extra spacing tightness */
.mslogin-plan #payment .payment_box p {
	margin: 8px 0 0 !important;
}

/* ============================================================
   v0.32 — OPTION C: order summary = one inline Total line.
   Hide the redundant product line-item (the plan toggle above
   already says what they're buying). No box, just "Total $X/yr".
   ============================================================ */

/* Hide the product line-item row entirely (name + "x 1" + price) */
.mslogin-plan .woocommerce-checkout-review-order-table thead,
.mslogin-plan .woocommerce-checkout-review-order-table tbody,
.mslogin-plan .woocommerce-checkout-review-order-table tr.cart_item,
.mslogin-plan .woocommerce-checkout-review-order-table tr.cart-subtotal {
	display: none !important;
}

/* Strip the table chrome so the Total reads as a plain inline line */
.mslogin-plan .woocommerce-checkout-review-order-table,
.mslogin-plan .woocommerce-checkout-review-order-table tfoot {
	border: none !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	display: block !important;
}
.mslogin-plan .woocommerce-checkout-review-order-table tfoot tr.order-total:not(.recurring-total) {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	width: 100% !important;
	border: none !important;
	padding: 4px 2px !important;
}
.mslogin-plan .woocommerce-checkout-review-order-table tfoot tr.order-total:not(.recurring-total) th,
.mslogin-plan .woocommerce-checkout-review-order-table tfoot tr.order-total:not(.recurring-total) td {
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
}
.mslogin-plan .woocommerce-checkout-review-order-table tfoot tr.order-total:not(.recurring-total) th {
	font-size: 17px !important;
	font-weight: 500 !important;
}
.mslogin-plan .woocommerce-checkout-review-order-table tfoot tr.order-total:not(.recurring-total) td {
	font-size: 20px !important;
	font-weight: 500 !important;
	text-align: right !important;
}

/* ============================================================
   v0.33 — (reverted) Turnstile move removed; it stays in its
   original DOM position. Your Order heading hidden in v0.34.
   ============================================================ */

/* ============================================================
   v0.34 — remove the "Your Order" heading entirely.
   The plan toggle + Total line are self-explanatory.
   ============================================================ */
.mslogin-plan #order_review_heading {
	display: none !important;
}
/* Give the Total line a little separation from billing above now
   that the heading is gone. */
.mslogin-plan .woocommerce-checkout-review-order-table tfoot tr.order-total:not(.recurring-total) {
	margin-top: 8px !important;
}

/* ============================================================
   v0.38 — yearly price treatment: big $5/mo + billed subtext
   ============================================================ */
.mslogin-plan__price--yearly {
	display: inline-flex !important;
	align-items: baseline !important;
	justify-content: center !important;
	gap: 1px !important;
}
.mslogin-plan__per {
	font-size: 0.5em !important;
	font-weight: 500 !important;
	opacity: 0.85 !important;
	margin-left: 1px !important;
}
.mslogin-plan__billed {
	display: block !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	margin-top: 2px !important;
	opacity: 0.8 !important;
	letter-spacing: 0.01em !important;
}

/* ============================================================
   v0.39 — fix billed subtext visibility + equal toggle heights
   ============================================================ */
/* Both toggle buttons stretch to the same height so the yearly
   button's extra "billed" line never gets clipped by a shorter
   neighbor. */
.mslogin-plan__toggle {
	align-items: stretch !important;
}
.mslogin-plan__opt {
	justify-content: center !important;
	min-height: 64px !important;
	overflow: visible !important;
}
/* Billed subtext: readable in BOTH states (was too dark when the
   yearly button is inactive / monthly selected). */
.mslogin-plan__billed {
	opacity: 1 !important;
	color: var(--msp-muted, #b8b8b8) !important;
}
.mslogin-plan__opt.is-active .mslogin-plan__billed {
	color: rgba(255,255,255,0.85) !important;
}
/* The /mo suffix readable in both states too */
.mslogin-plan__per {
	color: inherit !important;
	opacity: 0.85 !important;
}

/* ============================================================
   v0.43 — enlarge toggle small text for desktop readability
   ============================================================ */
/* Plan term labels (Monthly / Yearly) */
.mslogin-plan__term {
	font-size: 16px !important;
	font-weight: 600 !important;
}
/* The "/month" suffix after $5 (make it clearly readable) */
.mslogin-plan__per {
	font-size: 0.55em !important;
	font-weight: 600 !important;
	opacity: 0.92 !important;
}
/* The "billed $59.99/year" subtext (was 11px) */
.mslogin-plan__billed {
	font-size: 13px !important;
	font-weight: 500 !important;
	opacity: 1 !important;
}
.mslogin-plan__opt:not(.is-active) .mslogin-plan__billed {
	color: var(--msp-muted, #c4c4c4) !important;
}
.mslogin-plan__opt.is-active .mslogin-plan__billed {
	color: rgba(255,255,255,0.9) !important;
}
/* The "was" strikethrough price if shown */
.mslogin-plan__was {
	font-size: 0.62em !important;
}

/* ============================================================
   v0.45 — AUTHORITATIVE payment tile rules (consolidation).
   Across many versions, 8 different `li.wc_payment_method`
   blocks accumulated and contradicted each other (display
   block vs flex, radio shown vs hidden, permanent highlights).
   This final block defines the tile behavior unambiguously and,
   being last, wins. Do not add more scattered tile rules above.
   ============================================================ */

/* Base tile: neutral border, NOT highlighted */
.mslogin-plan #payment ul.wc_payment_methods li.wc_payment_method {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	padding: 14px 16px !important;
	margin: 0 !important;
	border: 1px solid var(--msp-border) !important;
	border-radius: 10px !important;
	background: var(--msp-surface) !important;
	box-shadow: none !important;
	cursor: pointer !important;
	position: relative !important;
	overflow: visible !important;
	list-style: none !important;
	transition: border-color 0.15s, background 0.15s !important;
}
.mslogin-plan #payment ul.wc_payment_methods li.wc_payment_method:hover {
	border-color: var(--msp-muted) !important;
}

/* SELECTED tile only: blue border + subtle fill. Nothing else is blue. */
.mslogin-plan #payment ul.wc_payment_methods li.wc_payment_method:has(input[type="radio"]:checked) {
	border-color: var(--msp-blue) !important;
	box-shadow: 0 0 0 1px var(--msp-blue) !important;
	background: rgba(61, 123, 255, 0.08) !important;
}

/* Radio: hidden (selection shown by the tile state) */
.mslogin-plan #payment ul.wc_payment_methods li.wc_payment_method > input[type="radio"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	pointer-events: none !important;
	clip: rect(0 0 0 0) !important;
}

/* Label: bright when its tile is selected, muted otherwise */
.mslogin-plan #payment ul.wc_payment_methods li.wc_payment_method > label {
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	font-weight: 500 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer !important;
}
.mslogin-plan #payment ul.wc_payment_methods li.wc_payment_method:has(input[type="radio"]:checked) > label {
	color: #fff !important;
}
.mslogin-plan #payment ul.wc_payment_methods li.wc_payment_method:not(:has(input[type="radio"]:checked)) > label {
	color: var(--msp-muted) !important;
}

/* The payment box (card fields) sits full-width below the label row,
   only inside the selected tile. */
.mslogin-plan #payment ul.wc_payment_methods li.wc_payment_method > .payment_box {
	flex: 1 1 100% !important;
	width: 100% !important;
	margin: 10px 0 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* No stray pseudo-element dots */
.mslogin-plan #payment ul.wc_payment_methods li.wc_payment_method::before,
.mslogin-plan #payment ul.wc_payment_methods li.wc_payment_method::after {
	content: none !important;
	display: none !important;
}