/**
 * mslogin checkout skin
 * Dark-themes the FunnelKit (WooFunnels Aero) checkout at /checkouts/1-year/
 * to match the Madden School recommended design.
 *
 * Targets the real rendered markup:
 *   #wfacp-e-form  ............ outer form wrapper
 *   #wfacp_checkout_form ...... the <form>
 *   .wfacp-section ............ each block (Customer Info / Summary / Payment)
 *   .wfacp-form-control ....... text/email/password inputs
 *   .wc_payment_methods ....... payment radios (PayPal + Stripe)
 *   #place_order .............. submit button
 *
 * The Elementor wrapper (.elementor-element-178e9bc1) paints a white card with
 * Poppins dark text; these rules override that to the dark theme. Specificity is
 * high on purpose to beat Elementor's per-element inline-style block.
 *
 * NOTE: This file is only enqueued on the checkout (see mslogin.php), so the
 * aggressive overrides here cannot leak onto other pages.
 */

:root {
	--msco-bg: #0a0a0a;
	--msco-surface: #161616;
	--msco-surface-2: #111111;
	--msco-border: #2a2a2a;
	--msco-border-2: #222222;
	--msco-text: #e8e8e8;
	--msco-muted: #8a8a8a;
	--msco-faint: #666666;
	--msco-blue: #3d7bff;
	--msco-blue-hi: #2f6ae8;
	--msco-gold: #f5b51e;
	--msco-good: #5dcaa5;
}

/* ============================================================
   1. Kill the white Elementor card -> dark surface
   ============================================================ */
.elementor-element-762aa413 > .elementor-element-populated,
.elementor-element-2143072d,
.elementor-element-2143072d > .elementor-container {
	background-color: transparent !important;
}
.elementor-element-762aa413 > .elementor-element-populated {
	background-color: var(--msco-bg) !important;
	box-shadow: 0 0 0 1px var(--msco-border) !important;
	border-radius: 16px !important;
}

/* The heading above the form ("Madden School Unlimited - 1 Year") */
.elementor-element-6a6d201c .elementor-heading-title {
	color: var(--msco-text) !important;
}

/* The dark hero section behind the card */
.elementor-element-d220973 {
	background-color: var(--msco-surface-2) !important;
}

/* ============================================================
   2. Form shell + section text colors
   ============================================================ */
#wfacp-e-form,
#wfacp-e-form .wfacp_main_form,
#wfacp-e-form .wfacp-form {
	color: var(--msco-text) !important;
	background: transparent !important;
}

/* All the Poppins #2D2D2D / #333 text Elementor forces -> light */
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form p:not(.woocommerce-shipping-contents):not(.wfacp_dummy_preview_heading):not(.checkout-inline-error-message),
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form,
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form label,
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form span,
.elementor-element-178e9bc1 #wfacp-e-form .woocommerce-checkout-review-order h3 {
	color: var(--msco-text) !important;
}

/* Section titles ("Customer Information", "Summary", "Payment Information") */
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form.woocommerce .wfacp_section_title,
#wfacp-e-form .wfacp_section_heading.wfacp_section_title {
	font-family: "Oswald", sans-serif !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	font-size: 15px !important;
	color: #fff !important;
}

/* Field labels */
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form.woocommerce .wfacp-form-control-label,
#wfacp-e-form .wfacp-form-control-label {
	color: var(--msco-muted) !important;
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
}

/* ============================================================
   3. Inputs -> dark fields
   ============================================================ */
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form.woocommerce input[type="text"],
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form.woocommerce input[type="email"],
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form.woocommerce input[type="tel"],
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form.woocommerce input[type="password"],
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form.woocommerce input[type="number"],
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form.woocommerce select,
.elementor-element-178e9bc1 #wfacp-e-form .woocommerce-input-wrapper .wfacp-form-control,
#wfacp-e-form .wfacp-form-control {
	background-color: var(--msco-surface) !important;
	border: 1px solid var(--msco-border) !important;
	border-radius: 8px !important;
	color: var(--msco-text) !important;
	-webkit-text-fill-color: var(--msco-text) !important;
}
#wfacp-e-form .wfacp-form-control::placeholder {
	color: var(--msco-muted) !important;
	-webkit-text-fill-color: var(--msco-muted) !important;
}
#wfacp-e-form .wfacp-form-control:focus {
	border-color: var(--msco-blue) !important;
	box-shadow: 0 0 0 1px var(--msco-blue) !important;
	outline: none !important;
}
/* Autofill */
#wfacp-e-form .wfacp-form-control:-webkit-autofill,
#wfacp-e-form .wfacp-form-control:-webkit-autofill:hover,
#wfacp-e-form .wfacp-form-control:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--msco-text) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--msco-surface) inset !important;
	caret-color: var(--msco-text) !important;
}

/* ============================================================
   4. Order summary table -> dark
   ============================================================ */
#wfacp-e-form .wfacp_order_summary_container,
#wfacp-e-form .shop_table,
#wfacp-e-form .woocommerce-checkout-review-order-table {
	background: transparent !important;
	color: var(--msco-text) !important;
}
#wfacp-e-form .wfacp-order-summary-label,
#wfacp-e-form .shop_table thead th,
#wfacp-e-form .shop_table .product-name,
#wfacp-e-form .shop_table .wfacp_order_summary_item_name,
#wfacp-e-form .shop_table .product-total,
#wfacp-e-form .shop_table .cart-subtotal th,
#wfacp-e-form .shop_table .cart-subtotal td,
#wfacp-e-form .shop_table .order-total th,
#wfacp-e-form .shop_table .order-total td,
#wfacp-e-form .woocommerce-Price-amount.amount,
#wfacp-e-form .woocommerce-Price-amount.amount bdi,
#wfacp-e-form .subscription-details,
#wfacp-e-form .subscription-price span {
	color: var(--msco-text) !important;
}
/* Beat the very specific Elementor color:#000000 rules on the summary */
.elementor-element-178e9bc1 #wfacp-e-form table.shop_table tbody .wfacp_order_summary_item_name,
.elementor-element-178e9bc1 #wfacp-e-form table.shop_table tbody td.product-total,
.elementor-element-178e9bc1 #wfacp-e-form table.shop_table tbody tr span.amount,
.elementor-element-178e9bc1 #wfacp-e-form table.shop_table tbody tr span.amount bdi,
.elementor-element-178e9bc1 #wfacp-e-form table.shop_table tbody tr td span:not(.wfacp-pro-count),
.elementor-element-178e9bc1 #wfacp-e-form table.shop_table tfoot tr.order-total th,
.elementor-element-178e9bc1 #wfacp-e-form table.shop_table tfoot tr.order-total td,
.elementor-element-178e9bc1 #wfacp-e-form table.shop_table tfoot tr.order-total td span.woocommerce-Price-amount.amount,
.elementor-element-178e9bc1 #wfacp-e-form table.shop_table tfoot tr.order-total td span.woocommerce-Price-amount.amount bdi,
.elementor-element-178e9bc1 #wfacp-e-form table.shop_table tfoot tr:not(.order-total):not(.cart-discount) td,
.elementor-element-178e9bc1 #wfacp-e-form table.shop_table tfoot tr:not(.order-total):not(.cart-discount) th,
.elementor-element-178e9bc1 #wfacp-e-form table.shop_table tfoot tr:not(.order-total):not(.cart-discount) td span,
.elementor-element-178e9bc1 #wfacp-e-form table.shop_table tfoot tr:not(.order-total):not(.cart-discount) th span {
	color: var(--msco-text) !important;
}
#wfacp-e-form .shop_table,
#wfacp-e-form .shop_table tr,
#wfacp-e-form .shop_table th,
#wfacp-e-form .shop_table td {
	border-color: var(--msco-border-2) !important;
}
/* Order total emphasized */
#wfacp-e-form .order-total td strong,
#wfacp-e-form .order-total td .woocommerce-Price-amount {
	color: #fff !important;
	font-weight: 700 !important;
}

/* ============================================================
   5. Collapsible mobile order summary bar -> dark
   ============================================================ */
#wfacp-e-form .wfacp_mb_cart_accordian,
#wfacp-e-form .wfacp_mb_mini_cart_sec_accordion_content,
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_mb_mini_cart_wrap .wfacp_mb_cart_accordian,
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_mb_mini_cart_sec_accordion_content {
	background-color: var(--msco-surface) !important;
	border-radius: 10px !important;
	color: var(--msco-text) !important;
}
#wfacp-e-form .wfacp_show_icon_wrap a span,
#wfacp-e-form .wfacp_show_price_wrap span,
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_show_icon_wrap a span,
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_show_price_wrap span {
	color: var(--msco-text) !important;
}
#wfacp-e-form .wfacp_show_icon_wrap svg { fill: var(--msco-muted) !important; }
#wfacp-e-form .wfacp_show_icon_wrap img { filter: invert(1) opacity(0.6); }

/* ============================================================
   6. Payment methods -> card-primary, PayPal-secondary
   ============================================================ */
#wfacp-e-form .wc_payment_methods.payment_methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}
#wfacp-e-form li.wc_payment_method {
	background: var(--msco-surface) !important;
	border: 1px solid var(--msco-border) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	margin: 0 !important;
	list-style: none !important;
}
#wfacp-e-form li.wc_payment_method label {
	color: var(--msco-text) !important;
	font-weight: 500 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}
#wfacp-e-form li.wc_payment_method label img {
	max-height: 22px !important;
	width: auto !important;
}
/* Card (Stripe) first and visually primary */
#wfacp-e-form li.payment_method_stripe {
	order: 1 !important;
	border-color: var(--msco-blue) !important;
	box-shadow: 0 0 0 1px var(--msco-blue) !important;
}
/* "OR" divider between card and PayPal, injected via ::before on PayPal row */
#wfacp-e-form li.payment_method_ppcp-gateway {
	order: 2 !important;
	position: relative !important;
	margin-top: 16px !important;
	background: transparent !important;
	border-style: dashed !important;
	border-color: #3a3a3a !important;
}
#wfacp-e-form li.payment_method_ppcp-gateway::before {
	content: "OR";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--msco-bg);
	color: var(--msco-faint);
	font-size: 10px;
	letter-spacing: 0.08em;
	padding: 0 8px;
}
#wfacp-e-form li.payment_method_ppcp-gateway label {
	color: var(--msco-muted) !important;
	font-weight: 400 !important;
}

/* Stripe card entry box inside the radio */
#wfacp-e-form .payment_box.payment_method_stripe,
#wfacp-e-form .wc-stripe-upe-element,
#wfacp-e-form #wc-stripe-upe-form {
	background: transparent !important;
	color: var(--msco-text) !important;
}
#wfacp-e-form .payment_box {
	background: transparent !important;
}
#wfacp-e-form .payment_box::before { display: none !important; }

/* ============================================================
   7. Place Order button -> Oswald blue
   ============================================================ */
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form.woocommerce #payment button#place_order,
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form.woocommerce button#place_order,
#wfacp-e-form #place_order {
	background: var(--msco-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;
}
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form.woocommerce #payment button#place_order:hover,
.elementor-element-178e9bc1 #wfacp-e-form .wfacp_main_form.woocommerce button#place_order:hover,
#wfacp-e-form #place_order:hover {
	background: var(--msco-blue-hi) !important;
}
/* PayPal's own "Proceed to PayPal" button stays neutral/secondary */
#wfacp-e-form .ppc-button-wrapper { margin-top: 10px !important; }

/* ============================================================
   8. Hide the visible Cloudflare Turnstile widget box
   (it still loads + validates invisibly via the managed challenge;
    we only collapse the empty visual frame to remove dead space.
    If your Turnstile is set to a visible/interactive challenge,
    REMOVE this block so users can complete it.)
   ============================================================ */
#wfacp-e-form #cf-turnstile-woo-checkout:empty {
	display: none !important;
}
#wfacp-e-form .cf-turnstile-br { display: none !important; }

/* ============================================================
   9. Money-back guarantee box below -> dark
   ============================================================ */
.elementor-element-e577105 > .elementor-widget-container {
	border-color: var(--msco-border) !important;
	background: var(--msco-surface-2) !important;
	border-radius: 12px !important;
}
.elementor-element-e577105 .elementor-image-box-title {
	color: var(--msco-text) !important;
}
.elementor-element-e577105 .elementor-image-box-description {
	color: var(--msco-muted) !important;
}

/* ============================================================
   10. Misc: notices, privacy text
   ============================================================ */
#wfacp-e-form .woocommerce-privacy-policy-text,
#wfacp-e-form .woocommerce-privacy-policy-text p {
	color: var(--msco-faint) !important;
}
#wfacp-e-form .woocommerce-info,
#wfacp-e-form .woocommerce-message {
	background: var(--msco-surface) !important;
	color: var(--msco-text) !important;
	border-top-color: var(--msco-blue) !important;
}

/* ============================================================
   11. EMBED MODE  (checkout shown inside the /unlimited/ iframe)
   The plugin adds class `mslogin-embedded` to <body> when the
   checkout is loaded with ?msembed=1. Strip all site chrome so
   only the checkout shows, and force the dark background so there
   is no white flash / white panel inside the frame.
   ============================================================ */
body.mslogin-embedded #wpadminbar,
body.mslogin-embedded #masthead,
body.mslogin-embedded #main-header,
body.mslogin-embedded #mobile-header,
body.mslogin-embedded header.site-header,
body.mslogin-embedded #colophon,
body.mslogin-embedded footer.site-footer,
/* the big page heading "Madden School Unlimited - 1 Month" */
body.mslogin-embedded .elementor-element-bb1849d,
body.mslogin-embedded .elementor-element-6a6d201c {
	display: none !important;
}

/* Kill the admin-bar top offset WP forces on <html> */
body.mslogin-embedded { margin-top: 0 !important; }
body.mslogin-embedded.admin-bar { margin-top: 0 !important; }

/* Force dark everywhere in embed mode so no white panel shows */
body.mslogin-embedded,
body.mslogin-embedded #wrapper,
body.mslogin-embedded #inner-wrap,
body.mslogin-embedded .elementor-element-d220973,
body.mslogin-embedded .elementor-element-2143072d,
body.mslogin-embedded .elementor-element-762aa413 > .elementor-element-populated {
	background-color: var(--msco-bg) !important;
}

/* Tighten the top padding the hero section adds now that the
   heading is hidden, so the checkout starts near the top of the frame */
body.mslogin-embedded .elementor-element-d220973 {
	padding-top: 16px !important;
	padding-bottom: 24px !important;
}
body.mslogin-embedded .elementor-element-762aa413 > .elementor-element-populated {
	margin-top: 0 !important;
}

/* The white panel you saw is FunnelKit's form wrapper background.
   Force it dark in embed mode (covers the area below the email field). */
body.mslogin-embedded #wfacp-e-form,
body.mslogin-embedded #wfacp-e-form .wfacp_main_form,
body.mslogin-embedded #wfacp-e-form .wfacp-form,
body.mslogin-embedded .elementor-element-178e9bc1,
body.mslogin-embedded .elementor-element-178e9bc1 > .elementor-widget-container {
	background-color: var(--msco-bg) !important;
}

/* Hide the money-back box inside the frame too (it lives on the
   sales page itself, no need to repeat it in the embed) */
body.mslogin-embedded .elementor-element-48978ec {
	display: none !important;
}