/**
 * MemberPress — light palette (Blue Planet)
 *
 * Styles all MemberPress shortcode output to match the FOA Site theme:
 * account, login, checkout/signup, pricing, and shared elements.
 * Tokens mirror theme.json; --foa-base is the text colour ON orange
 * (it was the page background in the old dark theme, hence the name).
 */

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
	--foa-base: #14243A;      /* text on orange */
	--foa-contrast: #14243A;  /* body text */
	--foa-accent-1: #F78E1E;  /* orange: actions */
	--foa-accent-2: #1565B8;  /* blue: links, focus, check marks */
	--foa-accent-3: #5B6B80;  /* muted text */
	--foa-accent-4: #EEF4FA;  /* tinted surface */
	--foa-input-bg: #FFFFFF;
	--foa-border: #D6DEE8;
	--foa-surface: #FFFFFF;
	--foa-error: #B42318;
	--foa-success: #1A7431;
}

/* ==========================================================================
   General container
   ========================================================================== */
.mepr-account-container,
.mepr-account-container body {
	background-color: transparent;
	color: var(--foa-contrast);
}

.mepr-account-container body,
.mepr-account-container button,
.mepr-account-container input,
.mepr-account-container select,
.mepr-account-container optgroup,
.mepr-account-container textarea {
	color: var(--foa-contrast);
}

.mepr-account-container p {
	color: var(--foa-contrast);
}

/* ==========================================================================
   Account navigation tabs
   ========================================================================== */
.mp_wrapper #mepr-account-nav {
	background: var(--foa-accent-4);
	border-bottom: 1px solid var(--foa-border);
	display: block;
}

.mp_wrapper #mepr-account-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.mp_wrapper #mepr-account-nav .mepr-nav-item {
	display: block;
}

.mp_wrapper #mepr-account-nav .mepr-nav-item a {
	display: inline-block;
	padding: 0.75rem 1.25rem;
	color: var(--foa-accent-3);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}

.mp_wrapper #mepr-account-nav .mepr-nav-item a::before {
	display: none; /* hide ReadyLaunch icomoon icons in shortcode mode */
}

.mp_wrapper #mepr-account-nav .mepr-nav-item a:hover {
	color: var(--foa-accent-1);
	border-bottom-color: var(--foa-accent-1);
}

.mp_wrapper #mepr-account-nav .mepr-nav-item.mepr-active-nav-tab a,
.mp_wrapper #mepr-account-nav .mepr-nav-item.--active a {
	color: var(--foa-contrast);
	border-bottom-color: var(--foa-accent-1);
	background: transparent;
	font-weight: 600;
}

/* ==========================================================================
   Forms (profile, password)
   ========================================================================== */
.mepr-account-form label,
.mepr-account-form .mp-form-label label {
	color: var(--foa-contrast);
	font-weight: 400;
}

.mepr-account-form .mepr-form-input,
.mepr-account-form input[type="text"],
.mepr-account-form input[type="email"],
.mepr-account-form input[type="url"],
.mepr-account-form input[type="password"],
.mepr-account-form input[type="tel"],
.mepr-account-form input[type="number"],
.mepr-account-form input[type="date"],
.mepr-account-form input[type="search"],
.mepr-account-form textarea,
.mepr-account-form select {
	background-color: var(--foa-input-bg);
	color: var(--foa-contrast);
	border: 1px solid var(--foa-border);
	border-radius: 4px;
	box-shadow: none;
}

.mepr-account-form .mepr-form-input:focus,
.mepr-account-form input:focus,
.mepr-account-form textarea:focus,
.mepr-account-form select:focus {
	border-color: var(--foa-accent-2);
	outline: none;
	color: var(--foa-contrast);
}

.mepr-account-form input[type="submit"],
.mepr-account-form .mepr-submit {
	background-color: var(--foa-accent-1);
	color: var(--foa-base);
	border: none;
	border-radius: 4px;
	padding: 0.8rem 2rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
}

.mepr-account-form input[type="submit"]:hover,
.mepr-account-form .mepr-submit:hover {
	background-color: #e07d10;
}

/* Per-field validation hints. MemberPress un-hides the relevant one via JS on a
   real error — hide them by default so the form isn't covered in permanent red
   "Required" labels even when the fields are filled in correctly. */
.mepr-account-form .cc-error,
.mp_wrapper .cc-error {
	color: var(--foa-error);
	display: none;
}

/* Hide the email field and the "Change Password" link on the account page for
   now: changing the email cascades into too many connected systems, and login
   runs through Undercurrent SSO so the password form doesn't apply. The email
   input stays in the DOM (display:none) so its value is still submitted on save. */
.mepr-account-form .mepr_email,
.mepr-account-change-password {
	display: none;
}

/* ==========================================================================
   Structural hides
   MemberPress's own CSS is disabled in favour of this dark theme, so the default
   rules that HIDE collapsible/utility elements are missing — re-add them here,
   or they all render permanently expanded/visible.
   ========================================================================== */

/* Magnific Popup content: the Change Plan / Cancel / Resume / Update Payment
   dialogs on the Subscriptions tab. Hidden until the action link opens them as a
   modal (MemberPress removes this class when showing the popup). */
.mfp-hide {
	display: none !important;
}

/* "Please fix the errors above" — only meant to show (via JS) on a real error. */
.mepr-form-has-errors {
	display: none;
}

/* Raw Stripe subscription id printed under the membership name (Subscriptions). */
.mepr-account-subscr-id {
	display: none;
}

/* Payments tab: hide the Invoice column — it's the raw Stripe charge id, which
   isn't a link and means nothing to members. (Invoice is the last column.) */
#mepr-account-payments-table th:last-child,
#mepr-account-payments-table td:last-child {
	display: none;
}

/* ==========================================================================
   Account form — two-column layout
   Pairs the actual field rows onto shared lines (First/Last, Address 1/2, …) so
   the profile form isn't one long single column. The injected dashboard cards,
   dividers and messages stay full width. Collapses to one column on mobile.
   ========================================================================== */
@media (min-width: 640px) {
	.mepr-account-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 24px;
		align-items: start;
	}

	/* Everything spans full width by default (dashboard cards, dividers, etc.) */
	.mepr-account-form > * {
		grid-column: 1 / -1;
	}

	/* …only the real field rows pair up two-per-line. */
	.mepr-account-form > .mp-form-row {
		grid-column: span 1;
	}

	/* Keep the submit button at its natural size instead of stretching to fill
	   the grid cell. */
	.mepr-account-form input[type="submit"],
	.mepr-account-form .mepr-submit {
		justify-self: start;
	}
}

/* ==========================================================================
   Tables (subscriptions, payments)
   ========================================================================== */
.mepr-account-container table {
	background-color: transparent;
	color: var(--foa-contrast);
	border-collapse: collapse;
}

.mepr-account-container table th {
	color: var(--foa-accent-3);
	border-bottom: 1px solid var(--foa-border);
	font-weight: 600;
	padding: 0.75rem;
}

.mepr-account-container table td {
	color: var(--foa-contrast);
	border-bottom: 1px solid var(--foa-border);
	padding: 0.75rem;
}

.mepr-account-container table tr:hover td {
	background-color: rgba(20, 36, 58, 0.03);
}

.mp_wrapper table.mepr-account-table tr.mepr-alt-row {
	background: transparent !important;
}

/* Pro account table specifics */
.mepr-pro-account-table thead th {
	color: var(--foa-accent-3);
	border-bottom-color: var(--foa-border);
}

.mepr-pro-account-table__subscr,
.mepr-pro-account-table__rebill,
.mepr-pro-account-table .sub {
	color: var(--foa-contrast);
}

/* Badges keep their own colours but adjust for the light palette */
button.mepr-pro-account-table__badge,
div.mepr-pro-account-table__badge {
	border: 0;
}

/* Actions dropdown */
.mepr-account-container .dropdown {
	background-color: var(--foa-input-bg);
	border-color: var(--foa-border);
	color: var(--foa-contrast);
}

.mepr-account-container .dropdown a {
	color: var(--foa-contrast);
}

.mepr-account-container .dropdown a:hover {
	background-color: rgba(20, 36, 58, 0.06);
	color: var(--foa-accent-1);
}

/* Subscription detail text — override MemberPress base #464646 for the light palette */
.mp_wrapper .mepr-account-terms,
.mp_wrapper .mepr-account-rebill,
.mp_wrapper .mepr-account-auto-rebill,
.mp_wrapper .mepr-account-product,
.mp_wrapper .mepr-account-active,
.mp_wrapper .mepr-account-created-at,
.mp_wrapper .mepr-account-cc-exp {
	color: var(--foa-contrast) !important;
}

.mp_wrapper .mepr-account-subscr-id {
	color: var(--foa-accent-3) !important;
}

/* Row action buttons */
.mepr-account-container #mepr-account-content button.mepr-account-row-action {
	color: var(--foa-accent-2) !important;
}

#mepr-account-content .mepr-pro-account-table__col-actions button {
	background: transparent;
	color: var(--foa-contrast);
}

/* ==========================================================================
   Links
   ========================================================================== */
.mepr-account-container a {
	color: var(--foa-accent-2);
	text-decoration: none;
}

.mepr-account-container a:visited {
	color: var(--foa-accent-2);
}

.mepr-account-container a:hover,
.mepr-account-container a:focus,
.mepr-account-container a:active {
	color: var(--foa-accent-1);
}

/* Change password link */
.mepr-account-change-password a {
	color: var(--foa-accent-2);
}

.mepr-account-change-password a:hover {
	color: var(--foa-accent-1);
}

/* ==========================================================================
   Buttons (generic)
   ========================================================================== */
.mepr-account-container button,
.mepr-account-container .mepr-button,
.mepr-account-container input[type="button"],
.mepr-account-container input[type="reset"],
.mepr-account-container input[type="submit"] {
	background: var(--foa-accent-1);
	color: var(--foa-base);
	border: none;
	border-radius: 4px;
	font-weight: 600;
	transition: background-color 0.2s;
}

.mepr-account-container button:hover,
.mepr-account-container .mepr-button:hover,
.mepr-account-container input[type="button"]:hover,
.mepr-account-container input[type="reset"]:hover,
.mepr-account-container input[type="submit"]:hover {
	background: #e07d10;
	border-color: #e07d10;
}

.mepr-account-container .mepr-button.btn-outline {
	background: transparent;
	color: var(--foa-accent-1);
	border: 2px solid var(--foa-accent-1);
}

.mepr-account-container .mepr-button.btn-outline:hover {
	background: var(--foa-accent-1);
	color: var(--foa-base);
}

.mepr-account-container button.btn-link {
	background: transparent;
	color: var(--foa-accent-2);
	border: none;
}

.mepr-account-container button.btn-link:hover {
	color: var(--foa-accent-1);
	background: transparent;
}

/* ==========================================================================
   Error / success messages
   ========================================================================== */
.mepr_error,
.mp_wrapper .mepr-error {
	background-color: rgba(220, 38, 38, 0.15);
	color: var(--foa-error);
	border: 1px solid rgba(220, 38, 38, 0.3);
	border-radius: 4px;
	padding: 0.75rem 1rem;
}

.mepr_success,
.mepr_updated,
.mp_wrapper .mepr-success {
	background-color: rgba(34, 197, 94, 0.15);
	color: var(--foa-success);
	border: 1px solid rgba(34, 197, 94, 0.3);
	border-radius: 4px;
	padding: 0.75rem 1rem;
}

/* Account welcome / user messages */
.mepr-account-welcome-message {
	background-color: rgba(34, 197, 94, 0.1);
	border-color: rgba(34, 197, 94, 0.3);
	color: var(--foa-success);
}

.mepr-account-user-message {
	background-color: rgba(247, 142, 30, 0.1);
	border-color: rgba(247, 142, 30, 0.3);
	color: var(--foa-accent-1);
}

/* ==========================================================================
   Popups (cancel subscription, etc.)
   ========================================================================== */
.mepr-white-popup {
	background: var(--foa-input-bg);
	color: var(--foa-contrast);
}

.mepr-white-popup .mepr-btn {
	background: var(--foa-accent-1);
	color: var(--foa-base);
	border: none;
}

.mepr-white-popup .mepr-btn:hover,
.mepr-white-popup .mepr-btn:active,
.mepr-white-popup .mepr-btn:focus-visible {
	background: #e07d10;
}

/* Modal overlay */
.mepr_modal__box {
	background-color: var(--foa-input-bg);
	color: var(--foa-contrast);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4),
		0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

.mepr_modal button.mepr_modal__close {
	color: var(--foa-accent-3);
}

.mepr_modal button.mepr_modal__close:hover {
	color: var(--foa-contrast);
}

.mepr_modal .mepr_modal_form .mp-form-label label {
	color: var(--foa-contrast);
}

.mepr_modal .mepr_modal_form input[type="text"],
.mepr_modal .mepr_modal_form input[type="email"],
.mepr_modal .mepr_modal_form input[type="tel"],
.mepr_modal .mepr_modal_form select {
	background-color: var(--foa-input-bg);
	color: var(--foa-contrast);
	border-color: var(--foa-border);
}

.mepr_modal .mepr_modal_form input[type="text"]:focus-visible,
.mepr_modal .mepr_modal_form input[type="email"]:focus-visible,
.mepr_modal .mepr_modal_form input[type="tel"]:focus-visible,
.mepr_modal .mepr_modal_form select:focus-visible {
	border-color: var(--foa-accent-2);
}

.mepr_modal .mepr_modal_form input[type="submit"] {
	background: var(--foa-accent-1);
	color: var(--foa-base);
}

.mepr_modal .mepr_modal_form input[type="submit"]:hover,
.mepr_modal .mepr_modal_form input[type="submit"]:focus-visible {
	background: #e07d10;
}

/* ==========================================================================
   Profile wrapper (ReadyLaunch pro account view, if active)
   ========================================================================== */
.mepr-profile-wrapper > div {
	border-color: var(--foa-border);
	background-color: var(--foa-accent-4);
}

.mepr-profile-wrapper__footer {
	border-top-color: var(--foa-border);
}

#mepr-profile-details dt {
	color: var(--foa-accent-3);
}

#mepr-profile-details dd {
	color: var(--foa-contrast);
}

/* ==========================================================================
   Tooltip
   ========================================================================== */
.mepr-tooltip-content {
	background: var(--foa-input-bg);
	border-color: var(--foa-border);
	color: var(--foa-contrast);
}

.mepr-tooltip-content > * {
	color: var(--foa-contrast);
}

/* ==========================================================================
   Responsive: mobile stacking for account nav tabs
   ========================================================================== */
@media screen and (max-width: 600px) {
	.mp_wrapper #mepr-account-nav ul {
		flex-direction: column;
	}

	.mp_wrapper #mepr-account-nav .mepr-nav-item a {
		padding: 0.6rem 1rem;
		border-bottom: none;
		border-left: 3px solid transparent;
	}

	.mp_wrapper #mepr-account-nav .mepr-nav-item.mepr-active-nav-tab a,
	.mp_wrapper #mepr-account-nav .mepr-nav-item.--active a {
		border-bottom: none;
		border-left-color: var(--foa-accent-1);
	}

	.mp_wrapper #mepr-account-nav .mepr-nav-item a:hover {
		border-bottom: none;
		border-left-color: var(--foa-accent-1);
	}

	/* Table mobile: dark borders */
	.mepr-account-container table tr {
		border-bottom-color: var(--foa-border);
	}

	.mepr-account-container table td {
		border-bottom-color: var(--foa-border);
	}

	.mepr-account-container table td:before {
		color: var(--foa-accent-3);
		font-weight: 600;
	}
}

/* ==========================================================================
   Spacer fix
   ========================================================================== */
.mepr_spacer {
	border: none;
}

/* ==========================================================================
   Select dropdown arrow fix for the light palette
   ========================================================================== */
.mepr-account-container .mepr-form select {
	background-color: var(--foa-input-bg);
	color: var(--foa-contrast);
	border-color: var(--foa-border);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23AAAAAA' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ==========================================================================
   Loading gif
   ========================================================================== */
.mepr-loading-gif {
	filter: invert(1);
}

/* ==========================================================================
   LOGIN FORM
   ========================================================================== */
.mp_wrapper.mp_login_form {
	color: var(--foa-contrast);
}

.mp_wrapper.mp_login_form label {
	color: var(--foa-contrast);
}

.mp_wrapper.mp_login_form input[type="text"],
.mp_wrapper.mp_login_form input[type="password"],
.mp_wrapper.mp_login_form input[type="email"] {
	background-color: var(--foa-input-bg);
	color: var(--foa-contrast);
	border: 1px solid var(--foa-border);
	border-radius: 4px;
	padding: 0.6rem 0.75rem;
	box-shadow: none;
}

.mp_wrapper.mp_login_form input[type="text"]:focus,
.mp_wrapper.mp_login_form input[type="password"]:focus,
.mp_wrapper.mp_login_form input[type="email"]:focus {
	border-color: var(--foa-accent-2);
	outline: none;
	color: var(--foa-contrast);
}

.mp_wrapper.mp_login_form input[type="submit"] {
	background-color: var(--foa-accent-1);
	color: var(--foa-base);
	border: none;
	border-radius: 4px;
	padding: 0.8rem 2rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
}

.mp_wrapper.mp_login_form input[type="submit"]:hover,
.mp_wrapper.mp_login_form input[type="submit"]:active,
.mp_wrapper.mp_login_form input[type="submit"]:focus-visible {
	background-color: #e07d10;
	border-color: #e07d10;
}

.mp_wrapper.mp_login_form input[type="submit"]:focus-visible {
	outline: 2px dashed var(--foa-accent-2);
	outline-offset: 2px;
}

/* Remember me checkbox label */
.mp_wrapper.mp_login_form input[type="checkbox"] {
	accent-color: var(--foa-accent-1);
}

/* Forgot password & login action links */
.mp_wrapper.mp_login_form a,
.mepr-login-actions a {
	color: var(--foa-accent-2);
	text-decoration: none;
}

.mp_wrapper.mp_login_form a:hover,
.mepr-login-actions a:hover {
	color: var(--foa-accent-1);
}

/* Already logged in message */
.mepr-already-logged-in {
	color: var(--foa-contrast);
}

/* Password toggle button */
.mp_wrapper .button.mp-hide-pw {
	background: transparent;
	color: var(--foa-accent-3);
	border: none;
	box-shadow: none;
}

.mp_wrapper .button.mp-hide-pw:hover {
	color: var(--foa-contrast);
	background: transparent;
}

.mp_wrapper .button.mp-hide-pw:focus-visible .dashicons {
	color: var(--foa-accent-2);
}

/* ==========================================================================
   FORGOT PASSWORD / RESET PASSWORD FORMS
   ========================================================================== */
.mp_wrapper h3 {
	color: var(--foa-contrast);
}

.mp_wrapper #mepr_forgot_password_form label,
.mp_wrapper #mepr_reset_password_form label {
	color: var(--foa-contrast);
}

.mp_wrapper #mepr_forgot_password_form input[type="text"],
.mp_wrapper #mepr_reset_password_form input[type="password"] {
	background-color: var(--foa-input-bg);
	color: var(--foa-contrast);
	border: 1px solid var(--foa-border);
	border-radius: 4px;
	padding: 0.6rem 0.75rem;
	box-shadow: none;
}

.mp_wrapper #mepr_forgot_password_form input[type="text"]:focus,
.mp_wrapper #mepr_reset_password_form input[type="password"]:focus {
	border-color: var(--foa-accent-2);
	outline: none;
}

.mp_wrapper #mepr_forgot_password_form input[type="submit"],
.mp_wrapper #mepr_reset_password_form input[type="submit"] {
	background-color: var(--foa-accent-1);
	color: var(--foa-base);
	border: none;
	border-radius: 4px;
	padding: 0.8rem 2rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
}

.mp_wrapper #mepr_forgot_password_form input[type="submit"]:hover,
.mp_wrapper #mepr_reset_password_form input[type="submit"]:hover {
	background-color: #e07d10;
}

/* ==========================================================================
   CHECKOUT / SIGNUP FORM
   ========================================================================== */
.mp_wrapper .mepr-signup-form {
	color: var(--foa-contrast);
}

.mp_wrapper .mepr-signup-form label {
	color: var(--foa-contrast);
}

.mp_wrapper .mepr-signup-form .mp-form-label label {
	color: var(--foa-contrast);
}

.mp_wrapper .mepr-signup-form .mepr-form-input,
.mp_wrapper .mepr-signup-form input[type="text"],
.mp_wrapper .mepr-signup-form input[type="email"],
.mp_wrapper .mepr-signup-form input[type="password"],
.mp_wrapper .mepr-signup-form input[type="tel"],
.mp_wrapper .mepr-signup-form input[type="number"],
.mp_wrapper .mepr-signup-form input[type="url"],
.mp_wrapper .mepr-signup-form input[type="date"],
.mp_wrapper .mepr-signup-form textarea,
.mp_wrapper .mepr-signup-form select {
	background-color: var(--foa-input-bg);
	color: var(--foa-contrast);
	border: 1px solid var(--foa-border);
	border-radius: 4px;
	box-shadow: none;
}

.mp_wrapper .mepr-signup-form .mepr-form-input:focus,
.mp_wrapper .mepr-signup-form input:focus,
.mp_wrapper .mepr-signup-form textarea:focus,
.mp_wrapper .mepr-signup-form select:focus {
	border-color: var(--foa-accent-2);
	outline: none;
	color: var(--foa-contrast);
}

/* Select arrow for the light palette */
.mp_wrapper .mepr-signup-form select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23AAAAAA' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 12px;
}

/* Signup submit button */
.mp_wrapper .mepr-signup-form .mepr-submit,
.mp_wrapper .mepr-signup-form input[type="submit"] {
	background-color: var(--foa-accent-1);
	color: var(--foa-base);
	border: none;
	border-radius: 4px;
	padding: 0.8rem 2rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
}

.mp_wrapper .mepr-signup-form .mepr-submit:hover,
.mp_wrapper .mepr-signup-form input[type="submit"]:hover {
	background-color: #e07d10;
}

/* Validation errors in signup */
.mp_wrapper .mepr-form-has-errors,
.mp_wrapper .cc-error,
.mp_wrapper .mepr-validation-error {
	color: var(--foa-error);
}

.mp_wrapper .cc-success {
	color: var(--foa-success);
}

/* Price / terms display */
.mp_wrapper .mepr_price,
.mp_wrapper .mepr_price_cell_label,
.mp_wrapper .mepr_price_cell {
	color: var(--foa-contrast);
}

.mp_wrapper .mepr_price {
	border-bottom: 1px solid var(--foa-border);
	padding-bottom: 0.75rem;
	margin-bottom: 1rem;
}

/* Payment method section */
.mp_wrapper .mepr_payment_method {
	background-color: var(--foa-accent-4) !important;
	border: 1px solid var(--foa-border) !important;
	border-radius: 4px;
}

.mp_wrapper .mepr-payment-methods-radios label {
	color: var(--foa-contrast) !important;
}

.mp_wrapper .mepr-payment-method .mepr-payment-method-label-text {
	color: var(--foa-contrast);
}

.mp_wrapper .mepr-payment-method .mepr-payment-method-desc-text {
	background-color: var(--foa-input-bg);
	color: var(--foa-contrast);
	border: 1px solid var(--foa-border);
	border-radius: 4px;
}

/* Radio buttons for payment methods */
.mp_wrapper .mepr-payment-methods-radios input[type="radio"] {
	accent-color: var(--foa-accent-1);
}

/* Coupon link and field */
.mp_wrapper .have-coupon-link {
	color: var(--foa-accent-2);
	text-decoration: none;
}

.mp_wrapper .have-coupon-link:hover {
	color: var(--foa-accent-1);
}

/* Checkbox fields (TOS, privacy) */
.mp_wrapper .mepr-signup-form input[type="checkbox"] {
	accent-color: var(--foa-accent-1);
}

.mp_wrapper .mepr-signup-form .mepr-checkbox-field,
.mp_wrapper .mepr-signup-form .mepr-checkbox-field a {
	color: var(--foa-contrast);
}

.mp_wrapper .mepr-signup-form .mepr-checkbox-field a {
	color: var(--foa-accent-2);
}

.mp_wrapper .mepr-signup-form .mepr-checkbox-field a:hover {
	color: var(--foa-accent-1);
}

/* Tax invoice */
.mp_wrapper .mepr-tax-invoice {
	color: var(--foa-contrast);
}

/* Switch payment method popup */
.mepr-switch-pm-popup {
	background: var(--foa-input-bg);
	color: var(--foa-contrast);
}

.mepr-switch-pm-popup .mepr-btn {
	background: var(--foa-accent-1);
	color: var(--foa-base);
}

.mepr-switch-pm-popup .mepr-btn:hover {
	background: #e07d10;
}

.mepr-switch-pm-popup .mepr-btn-secondary {
	background: transparent;
	border-color: var(--foa-accent-1);
	color: var(--foa-accent-1);
}

.mepr-switch-pm-popup .mepr-btn-secondary:hover {
	background: transparent;
}

/* Stripe Elements iframe container */
.mp_wrapper .mepr-signup-form .StripeElement,
.mp_wrapper .mepr-signup-form #card-element {
	background-color: var(--foa-input-bg);
	border: 1px solid var(--foa-border);
	border-radius: 4px;
	padding: 0.6rem 0.75rem;
}

/* ==========================================================================
   PRICING / GROUPS (Price Boxes)
   ========================================================================== */
.mepr-price-menu {
	color: var(--foa-contrast);
}

.mepr-price-menu .mepr-price-box {
	background-color: var(--foa-accent-4);
	border-color: var(--foa-border);
	color: var(--foa-contrast);
}

.mepr-price-menu .mepr-price-box-head {
	color: var(--foa-contrast);
}

.mepr-price-menu .mepr-price-box-head h3,
.mepr-price-menu .mepr-price-box-head h4 {
	color: var(--foa-contrast);
}

.mepr-price-menu .mepr-price-box-price {
	color: var(--foa-accent-1);
}

.mepr-price-menu .mepr-price-box-benefits {
	border-top-color: var(--foa-border);
	color: var(--foa-contrast);
}

.mepr-price-menu .mepr-price-box-benefits .mepr-price-box-benefits-list .mepr-price-box-benefits-item {
	border-bottom-color: var(--foa-border);
	color: var(--foa-contrast);
}

/* Highlighted / featured price box */
.mepr-price-menu .mepr-price-box.mepr-most-popular,
.mepr-price-menu .mepr-price-box.mepr-price-box-highlight {
	border-color: var(--foa-accent-1);
}

/* Price box CTA button */
.mepr-price-menu .mepr-price-box a.mepr-price-box-button,
.mepr-price-menu .mepr-price-box input[type="submit"] {
	background-color: var(--foa-accent-1);
	color: var(--foa-base);
	border: none;
	border-radius: 4px;
	font-weight: 600;
	transition: background-color 0.2s;
}

.mepr-price-menu .mepr-price-box a.mepr-price-box-button:hover,
.mepr-price-menu .mepr-price-box input[type="submit"]:hover {
	background-color: #e07d10;
	color: var(--foa-base);
}

/* Override classic_dark theme borders for our palette */
.mepr-price-menu.classic.classic_dark {
	color: var(--foa-contrast) !important;
}

.mepr-price-menu.classic.classic_dark .mepr-price-box {
	border-color: var(--foa-border);
}

.mepr-price-menu.classic.classic_dark .mepr-price-box-benefits {
	border-top-color: var(--foa-border);
}

.mepr-price-menu.classic.classic_dark .mepr-price-box-benefits .mepr-price-box-benefits-list .mepr-price-box-benefits-item {
	border-bottom-color: var(--foa-border);
}

/* ==========================================================================
   UNAUTHORIZED / ACCESS DENIED
   ========================================================================== */
.mepr-unauthorized-excerpt,
.mepr-unauthorized-message {
	color: var(--foa-contrast);
}

.mepr-unauthorized-message a {
	color: var(--foa-accent-2);
}

.mepr-unauthorized-message a:hover {
	color: var(--foa-accent-1);
}

/* ==========================================================================
   SHARED: mp_wrapper generic dark overrides
   ========================================================================== */
.mp_wrapper {
	color: var(--foa-contrast);
}

.mp_wrapper label {
	color: var(--foa-contrast);
}

.mp_wrapper a {
	color: var(--foa-accent-2);
}

.mp_wrapper a:hover {
	color: var(--foa-accent-1);
}

.mp_wrapper .mp-form-label label {
	color: var(--foa-contrast);
}

/* Generic mp_wrapper form inputs */
.mp_wrapper .mepr-form-input,
.mp_wrapper .mepr-form input[type="text"],
.mp_wrapper .mepr-form input[type="email"],
.mp_wrapper .mepr-form input[type="password"],
.mp_wrapper .mepr-form input[type="tel"],
.mp_wrapper .mepr-form input[type="url"],
.mp_wrapper .mepr-form input[type="number"],
.mp_wrapper .mepr-form input[type="date"],
.mp_wrapper .mepr-form textarea,
.mp_wrapper .mepr-form select {
	background-color: var(--foa-input-bg);
	color: var(--foa-contrast);
	border: 1px solid var(--foa-border);
	border-radius: 4px;
	box-shadow: none;
}

.mp_wrapper .mepr-form input:focus,
.mp_wrapper .mepr-form textarea:focus,
.mp_wrapper .mepr-form select:focus {
	border-color: var(--foa-accent-2);
	outline: none;
	color: var(--foa-contrast);
}

/* Generic mp_wrapper submit buttons */
.mp_wrapper input[type="submit"],
.mp_wrapper .mepr-submit {
	background-color: var(--foa-accent-1);
	color: var(--foa-base);
	border: none;
	border-radius: 4px;
	font-weight: 600;
	transition: background-color 0.2s;
}

.mp_wrapper input[type="submit"]:hover,
.mp_wrapper .mepr-submit:hover {
	background-color: #e07d10;
}

/* Spacer fix (all forms) */
.mp-spacer {
	border: none;
}

/* ==========================================================================
   Signup / registration form (/register/{plan}/)
   Center + constrain the form, pair MemberPress's own field rows into two
   columns, and keep the price/terms text, our custom fields (VIN / consent
   checkboxes), email, payment section and submit at full width. Collapses to a
   single column on mobile.
   ========================================================================== */
.mepr-signup-form {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 640px) {
	.mepr-signup-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 24px;
		row-gap: 0.25rem;
		align-items: start;
	}

	/* Full width by default: price/terms text, our custom fields, payment, submit. */
	.mepr-signup-form > * {
		grid-column: 1 / -1;
	}

	/* MemberPress's own field rows pair two-per-line (first/last, address,
	   password/confirm). */
	.mepr-signup-form > .mp-form-row {
		grid-column: span 1;
	}

	/* …but these read better full width. */
	.mepr-signup-form > .mepr_email,
	.mepr-signup-form > .mepr_bold {
		grid-column: 1 / -1;
	}
}

/* Sign Up button — match the rest of the FOA buttons instead of the bare default. */
.mepr-signup-form .mepr-submit {
	background-color: var(--foa-accent-1);
	color: var(--foa-base);
	border: none;
	border-radius: 4px;
	padding: 0.8rem 2rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
}

.mepr-signup-form .mepr-submit:hover {
	background-color: #e07d10;
}

/* ==========================================================================
   Change Plan modal (foa-account.js)
   MemberPress's Magnific Popup JS doesn't load on this site, so we present its
   .mepr-white-popup content as a self-contained centred dark modal instead.
   ========================================================================== */
#foa-modal-backdrop {
	display: none;
}

#foa-modal-backdrop.is-open {
	display: block;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 100000;
}

.mepr-white-popup.foa-modal-show {
	display: block !important;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100001;
	width: 420px;
	max-width: 90vw;
	background: var(--foa-input-bg);
	color: var(--foa-contrast);
	border: 1px solid var(--foa-border);
	border-radius: 8px;
	padding: 2rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.mepr-white-popup.foa-modal-show .mepr-upgrade-txn-text {
	font-weight: 600;
	margin-bottom: 1rem;
}

.mepr-white-popup.foa-modal-show select {
	width: 100%;
	background: var(--foa-surface);
	color: var(--foa-contrast);
	border: 1px solid var(--foa-border);
	border-radius: 4px;
	padding: 0.6rem 0.8rem;
	margin-bottom: 1rem;
}

.mepr-white-popup.foa-modal-show .mepr-cancel-txn-buttons {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
}

.mepr-white-popup.foa-modal-show .mepr-btn {
	border: none;
	border-radius: 4px;
	padding: 0.6rem 1.4rem;
	font-weight: 600;
	cursor: pointer;
}

.mepr-white-popup.foa-modal-show .mepr-upgrade-buy-now {
	background: var(--foa-accent-1);
	color: var(--foa-base);
}

.mepr-white-popup.foa-modal-show .mepr-upgrade-cancel {
	background: transparent;
	color: var(--foa-contrast);
	border: 1px solid var(--foa-border);
}

/* ---------------------------------------------------------------------------
   Deferred downgrade — confirmation screen (product page) + account notice
   --------------------------------------------------------------------------- */
.foa-downgrade-confirm-wrap {
	max-width: 640px;
	margin: 2rem auto;
	padding: 1.75rem 2rem;
	background: var(--foa-input-bg);
	border: 1px solid var(--foa-border);
	border-radius: 8px;
	color: var(--foa-contrast);
}

.foa-downgrade-confirm-wrap h2 {
	margin-top: 0;
	color: var(--foa-contrast);
}

.foa-downgrade-summary {
	list-style: none;
	margin: 1.25rem 0;
	padding: 0;
}

.foa-downgrade-summary li {
	padding: 0.4rem 0 0.4rem 1.6rem;
	position: relative;
}

.foa-downgrade-summary li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--foa-accent-1);
}

.foa-downgrade-form {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1.5rem;
}

.foa-downgrade-form .foa-downgrade-confirm {
	background: var(--foa-accent-1);
	color: var(--foa-base);
	border: none;
	border-radius: 4px;
	padding: 0.6rem 1.4rem;
	font-weight: 600;
	cursor: pointer;
}

.foa-downgrade-form .mepr-btn-cancel {
	background: transparent;
	color: var(--foa-contrast);
	border: 1px solid var(--foa-border);
	border-radius: 4px;
	padding: 0.6rem 1.4rem;
	text-decoration: none;
}

.foa-pending-downgrade {
	margin: 1rem 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--foa-accent-1);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.04);
}

.foa-pending-downgrade p {
	margin: 0 0 0.75rem;
}

.foa-pending-downgrade .foa-cancel-downgrade {
	background: transparent;
	color: var(--foa-contrast);
	border: 1px solid var(--foa-border);
	border-radius: 4px;
	padding: 0.45rem 1.1rem;
	cursor: pointer;
	font-size: 0.9em;
}

/* ==========================================================================
   Phase 2: light-palette corrections on top of the plugin's inline styles
   (AccountPage::render_subscriptions_fix prints dark-theme table rules with
   !important; body.foa-site outranks them).
   ========================================================================== */

/* Subscriptions / payments tables */
body.foa-site .mp_wrapper table.mepr-account-table {
	border: 0;
	border-top: 1px solid var(--foa-border);
	/* The plugin only prints its table rules on the Subscriptions tab, so
	   Payments fell back to the browser default and its tinted header cells
	   were split by gaps that read as vertical rules. */
	border-collapse: collapse;
	width: 100%;
}

body.foa-site .mp_wrapper table.mepr-account-table th {
	color: var(--foa-accent-3);
	background: var(--foa-accent-4);
	border-bottom: 1px solid var(--foa-border);
}

body.foa-site .mp_wrapper table.mepr-account-table td {
	color: var(--foa-contrast);
	border-bottom: 1px solid var(--foa-border);
}

/* MemberPress's own stylesheet boxes every cell; keep only the horizontal rules. */
body.foa-site .mp_wrapper table.mepr-account-table th,
body.foa-site .mp_wrapper table.mepr-account-table td {
	border-top: 0;
	border-left: 0;
	border-right: 0;
}

body.foa-site .mp_wrapper table.mepr-account-table tr.mepr-alt-row,
body.foa-site .mp_wrapper table.mepr-account-table tr:hover td {
	background: rgba(20, 36, 58, 0.03);
}

body.foa-site .mp_wrapper table.mepr-account-table a {
	color: var(--foa-accent-2);
}

body.foa-site .mepr-account-terms,
body.foa-site .mepr-account-rebill {
	color: var(--foa-contrast) !important;
}

body.foa-site .mepr-account-subscr-id {
	color: var(--foa-accent-3) !important;
}

body.foa-site .mepr-active {
	color: var(--foa-success) !important;
	font-weight: 600;
}

body.foa-site .mepr-inactive {
	color: var(--foa-error) !important;
}

/* Row actions (Change Plan, Cancel, Update credit card) as quiet buttons */
body.foa-site .mp_wrapper table.mepr-account-table td a.mepr-account-row-action,
body.foa-site .mepr-account-table td:nth-child(6) a {
	display: inline-block;
	color: var(--foa-contrast);
	background: var(--foa-surface);
	border: 1px solid var(--foa-border);
	border-radius: 4px;
	padding: 4px 12px;
	margin: 2px 8px 2px 0;
	font-size: 0.9em;
	text-decoration: none;
	white-space: nowrap;
}

body.foa-site .mp_wrapper table.mepr-account-table td a.mepr-account-row-action:hover,
body.foa-site .mepr-account-table td:nth-child(6) a:hover {
	border-color: var(--foa-accent-1);
	color: var(--foa-contrast);
}

/* Buttons the plugin renders inside the member area (e.g. Upload documentation) */
body.foa-site .foa-main button.mepr-btn:not(.mepr-upgrade-cancel):not(.mepr-confirm-no):not(.mepr-btn-secondary):not(.mepr-btn-cancel) {
	background: var(--foa-accent-1);
	color: var(--foa-base);
	border: 0;
	border-radius: 4px;
	padding: 0.6rem 1.4rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

body.foa-site .foa-main button.mepr-btn:not(.mepr-upgrade-cancel):not(.mepr-confirm-no):not(.mepr-btn-secondary):not(.mepr-btn-cancel):hover {
	background: #e07d10;
}

/* File inputs */
body.foa-site .foa-main input[type="file"] {
	font: inherit;
	font-size: 0.95em;
	color: var(--foa-accent-3);
}

body.foa-site .foa-main input[type="file"]::file-selector-button {
	font: inherit;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--foa-contrast);
	background: var(--foa-surface);
	border: 1px solid var(--foa-border);
	border-radius: 4px;
	padding: 0.45rem 1rem;
	margin-right: 0.75rem;
	cursor: pointer;
}

body.foa-site .foa-main input[type="file"]::file-selector-button:hover {
	border-color: var(--foa-accent-1);
}

/* Submit buttons inherit the site font and size instead of the browser default */
body.foa-site .foa-main input[type="submit"],
body.foa-site .mepr-signup-form .mepr-submit,
body.foa-site .mepr-account-form input[type="submit"] {
	font-family: inherit;
	font-size: 1rem;
}

/* Pulse documentation block (rendered outside the MemberPress wrappers) */
body.foa-site .foa-pulse-section {
	background: var(--foa-accent-4);
	border: 1px solid var(--foa-border);
	border-left: 4px solid var(--foa-accent-1);
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	margin: 0 0 1.5rem;
}

body.foa-site .foa-pulse-section h3,
body.foa-site .foa-pulse-section h4 {
	margin-top: 0;
}

body.foa-site .foa-pulse-section p {
	margin: 0.5rem 0;
}

/* MemberPress reuses .mepr-form-input as the wrapper around its own custom
   fields, so the input styling drew a box around the VIN field and around
   each consent row on checkout. Only real form controls get that treatment. */
body.foa-site div.mepr-form-input {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

body.foa-site div.mepr-form-input + div.mepr-form-input {
	margin-top: 0.5rem;
}

body.foa-site div.mepr-form-input label {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5rem;
}

/* The way out of a dialog is never the primary action. */
body.foa-site .foa-main button.mepr-btn.mepr-upgrade-cancel,
body.foa-site .foa-main button.mepr-btn.mepr-confirm-no,
body.foa-site .foa-main button.mepr-btn.mepr-btn-secondary,
body.foa-site .foa-main button.mepr-btn.mepr-btn-cancel {
	background: var(--foa-surface);
	color: var(--foa-contrast);
	border: 1px solid var(--foa-border);
	border-radius: 4px;
	padding: 0.6rem 1.4rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

body.foa-site .foa-main button.mepr-btn.mepr-upgrade-cancel:hover,
body.foa-site .foa-main button.mepr-btn.mepr-confirm-no:hover,
body.foa-site .foa-main button.mepr-btn.mepr-btn-secondary:hover,
body.foa-site .foa-main button.mepr-btn.mepr-btn-cancel:hover {
	border-color: var(--foa-accent-1);
}

/* ==========================================================================
   Account cards on a light page
   The plugin's inline styles put white cards on what used to be a dark page.
   On a white page that leaves white on white, so the cards take the tint and
   the page keeps the contrast (Gitte, 2026-09-04).
   ========================================================================== */
body.foa-site .foa-car-card,
body.foa-site .foa-alert,
body.foa-site .foa-notice {
	background: var(--foa-accent-4);
	border-color: var(--foa-border);
	box-shadow: none;
}

body.foa-site .foa-car-card:hover {
	border-color: #BFCDDD;
}

/* Dividers inside a tinted card need to be visible against it. */
body.foa-site .foa-esim-section,
body.foa-site .foa-car-header {
	border-color: #C9D6E4;
}

/* The add-a-car box is an empty slot to fill, so it stays white inside the
   tinted set, with its dashed edge doing the talking. */
body.foa-site .foa-add-car-card {
	background: var(--foa-surface);
	border-color: #BFCDDD;
}

body.foa-site .foa-add-car-form input[type="text"] {
	background: var(--foa-surface);
	border-color: var(--foa-border);
	color: var(--foa-contrast);
}

/* Links inside the cards: the plugin hard-codes a blue for the old theme. */
body.foa-site .foa-car-card a:not(.foa-btn),
body.foa-site .foa-alert a:not(.foa-btn),
body.foa-site .foa-notice a {
	color: var(--foa-accent-2);
}

/* Secondary buttons sat white on white too. */
body.foa-site .foa-btn-outline {
	background: var(--foa-surface);
	border-color: var(--foa-border);
	color: var(--foa-contrast);
}

body.foa-site .foa-btn-outline:hover:not(:disabled) {
	background: var(--foa-surface);
	border-color: var(--foa-accent-1);
}

/* Member number: a quiet label, not a shouting box. The plugin styles it
   inline, so this has to outrank that. */
body.foa-site .foa-member-badge {
	padding: 4px 12px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--foa-accent-4) !important;
	color: var(--foa-accent-3) !important;
	font-size: 0.9em !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
}

/* ==========================================================================
   Account page width
   The site reads at 880px, which is right for prose but squeezes MemberPress's
   subscription table until dates and action buttons wrap (Gitte, 2026-09-04).
   The account page gets the wide measure instead.
   ========================================================================== */
body.foa-page-account .foa-main {
	--wp--style--global--content-size: var(--wp--style--global--wide-size);
}

/* Keep the columns that read as single values on one line. */
body.foa-site .mp_wrapper table.mepr-account-table td .mepr-account-created-at,
body.foa-site .mp_wrapper table.mepr-account-table td .mepr-account-product {
	white-space: nowrap;
}

/* Row actions sit on one line while there is room for them. */
body.foa-site .mp_wrapper table.mepr-account-table td .mepr-account-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body.foa-site .mp_wrapper table.mepr-account-table td a.mepr-account-row-action,
body.foa-site .mepr-account-table td:nth-child(6) a {
	margin: 0;
}

/* Status pills: give the neutral one a fill that shows on a tinted card. */
body.foa-site .foa-badge-neutral {
	background: #DCE5EF;
	color: var(--foa-accent-3);
}

/* Card edges need to read against the page; the border token alone is too
   faint once the card itself is tinted. */
body.foa-site .foa-car-card,
body.foa-site .foa-alert,
body.foa-site .foa-notice,
body.foa-site .foa-add-car-card {
	border-color: #C3D0E0;
}

/* The plugin caps its own account blocks at 800px, which leaves the cards
   stranded to the left now the page reads wide. Let them fill it, and lay the
   eSIM data out as a row of label/value pairs instead of a tall stack
   (Gitte, 2026-09-04). */
body.foa-page-account .foa-account {
	max-width: none;
}

body.foa-site .foa-esim-section {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.4rem 3rem;
}

body.foa-site .foa-esim-section > .foa-car-detail-label {
	flex: 0 0 100%;
	margin-bottom: 0 !important;
}

body.foa-site .foa-esim-section > * {
	margin-top: 0 !important;
}

body.foa-site .foa-esim-section .foa-car-details {
	display: block;
	margin-top: 0;
}