/*
 * Chiggle Academy — checkout page styles (PMPro, v0.11.0+).
 *
 * Replaces the pre-v0.11.0 WooCommerce checkout stylesheet. Conditional
 * enqueue lives in inc/enqueue.php (now keyed off PMPro page IDs instead
 * of is_checkout()).
 *
 * Target surfaces:
 *   - /membership-account/?level=1|2  (PMPro checkout for new signups)
 *   - /membership-account/             (PMPro account dashboard)
 *   - /membership-levels/              (level chooser)
 *   - /membership-account/cancel/      (cancel-flow confirmation)
 *
 * Selectors target:
 *   #pmpro_form              — the entire checkout form
 *   .pmpro_form_field        — individual field rows
 *   .pmpro_form_input        — actual <input>/<select>
 *   .pmpro_card              — themed card wrappers
 *   .pmpro_section           — generic section container
 *   .pmpro_btn-submit-*      — primary buttons
 *   #pmpro_message           — error / info banner
 *
 * Reference: build plan §2.3 (Checkout Page) + PMPro 3.5 pages/checkout.php.
 */

/* =====================================================================
 * Page wrapper — tight max-width, compact padding (v0.11.2).
 *
 * Goal: PMPro checkout fits in a single viewport (~720-800px tall) for
 * desktop laptops without scrolling. Operator feedback during the
 * manual sandbox test: "professionally done checkout screens are
 * entirely visible". Tightened paddings, hid the redundant page title,
 * compacted the membership-info paragraphs, and the form runs in a
 * 2-column grid on desktop — see further down.
 *
 * Specificity battle (v0.9.83, retained): global.css's full-bleed reset
 * uses :is() with IDs (1,1,1). We chain #page to win at (1,2,1+).
 * ===================================================================== */
body.pmpro-account #page .entry-content,
body.pmpro-account #page .ast-container,
body.pmpro-levels  #page .entry-content,
body.pmpro-levels  #page .ast-container,
body.pmpro-checkout #page .entry-content,
body.pmpro-checkout #page .ast-container,
body.pmpro-billing #page .entry-content,
body.pmpro-billing #page .ast-container,
body.pmpro-cancel  #page .entry-content,
body.pmpro-cancel  #page .ast-container,
body.pmpro-confirmation #page .entry-content,
body.pmpro-confirmation #page .ast-container,
body.pmpro-login #page .entry-content,
body.pmpro-login #page .ast-container {
	max-width: 760px !important;
	margin: 0 auto !important;
	padding: 24px 24px 40px !important;
}

/* The /login/ surface is intentionally narrower than checkout — single
 * column with email + password only. Tighter feels more "auth-page"
 * conventional. (v0.11.4) */
body.pmpro-login #page .entry-content,
body.pmpro-login #page .ast-container {
	max-width: 480px !important;
}

/* v0.11.2: hide the WP entry-header entirely on PMPro pages.
 * PMPro's checkout template already prints "Membership Information"
 * → "You have selected the {level} membership level" — the redundant
 * top-level "Membership Checkout" page title just eats vertical space. */
body.pmpro-account .entry-header,
body.pmpro-levels  .entry-header,
body.pmpro-checkout .entry-header,
body.pmpro-billing .entry-header,
body.pmpro-cancel  .entry-header,
body.pmpro-confirmation .entry-header,
body.pmpro-login .entry-header {
	display: none !important;
}

body.pmpro-account .entry-content,
body.pmpro-levels  .entry-content,
body.pmpro-checkout .entry-content,
body.pmpro-billing .entry-content,
body.pmpro-cancel  .entry-content,
body.pmpro-confirmation .entry-content,
body.pmpro-login .entry-content {
	padding-top: 0 !important;
}

/* =====================================================================
 * PMPro message banner (errors, warnings, success)
 * ===================================================================== */
#pmpro_message {
	border-radius: var(--radius-md);
	border-left: 3px solid var(--coral);
	padding: 14px 16px;
	margin: 0 0 18px;
	font-size: 0.9rem;
	background: var(--error-pale);
	color: var(--error-dark);
}
#pmpro_message.pmpro_success {
	background: var(--green-pale);
	border-left-color: var(--green);
	color: var(--green-dark);
}

/* =====================================================================
 * Social-login block (anonymous-only, between pricing + account form).
 * Rendered by inc/hooks-pmpro.php on pmpro_checkout_after_pricing_fields
 * (was pmpro_checkout_before_form pre-v0.11.1 — moved so visitors see
 * the level summary first). Tightened padding + heading size so the
 * block doesn't dominate the viewport.
 * ===================================================================== */
.ca-pmpro-social {
	margin: 8px 0 4px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}
.ca-pmpro-social-heading {
	display: none; /* v0.11.2: "Sign up faster" label removed for compactness; the divider below tells the story */
}
.ca-pmpro-social-buttons {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 8px;
}
.ca-pmpro-social-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gray-500);
	margin: 0 0 8px;
}
.ca-pmpro-social-divider::before,
.ca-pmpro-social-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(18, 43, 105, 0.12);
}

/* Show only the enabled provider(s) on the PMPro checkout to keep the
 * signup block compact. The "Coming soon" disabled buttons stay
 * available in the sign-in modal where compactness isn't a concern. */
.ca-pmpro-social-buttons .ca-social-btn-disabled {
	display: none;
}

/* =====================================================================
 * Form layout — compact pass 2 (v0.11.5)
 * Operator feedback: "elements look scattered with too much space".
 * Tightened gap 14px → 10px, card padding 16px 20px → 14px 18px, and
 * the form-field margin-bottom (further down) 10px → 6px.
 * ===================================================================== */
#pmpro_form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#pmpro_form .pmpro_section,
#pmpro_form .pmpro_card {
	background: white;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md);
	padding: 12px 16px;
}
#pmpro_form .pmpro_form_fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

/* Section headings ("Account Information", "Membership Information") */
#pmpro_form legend,
#pmpro_form .pmpro_section_inside > h3,
#pmpro_form .pmpro_card_content > h3,
#pmpro_form .pmpro_form_heading,
#pmpro_form .pmpro_card_title,
#pmpro_form #pmpro_pricing_fields h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--navy);
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	letter-spacing: -0.005em;
}

/* PMPro's `pmpro_font-large` class adds large font sizing — override it
 * on the section headings since we want tight visual hierarchy here. */
#pmpro_form .pmpro_card_title.pmpro_font-large {
	font-size: 0.95rem;
}

/* Compact Membership Information paragraphs (v0.11.2 + v0.11.6).
 * Description hidden, level-name + price kept (both add new info).
 * v0.11.6: line-height 1.4 → 1.3, font-size 0.92 → 0.88rem so the two
 * remaining paragraphs occupy ~30px each instead of ~50-65px each. */
#pmpro_pricing_fields p {
	margin: 0 0 2px;
	font-size: 0.88rem;
	line-height: 1.3;
}
#pmpro_pricing_fields .pmpro_level_description,
#pmpro_pricing_fields .pmpro_level_description_text,
#pmpro_pricing_fields .pmpro_level_expiration {
	display: none;
}
#pmpro_pricing_fields p:last-child {
	margin-bottom: 0;
}
#pmpro_level_cost {
	margin-top: 2px;
}
#pmpro_level_cost p {
	font-size: 0.92rem;
}
#pmpro_level_cost p strong {
	font-size: 0.95rem;
}

/* PMPro pairs password+confirm inside a `.pmpro_cols-2` wrapper, and our
 * First/Last name row reuses it (inc/hooks-pmpro.php §3a). Lay it out as
 * a 2-column grid on desktop; it stacks to one column on mobile.
 *
 * v0.11.61 fix: PMPro's frontend CSS sets `.pmpro_cols-2 > * {
 * width: calc(50% …) }` for ITS flex layout. Applied on our grid tracks
 * that halves each field again — every input rendered at ~quarter width.
 * Override the child width back to 100% of its track. */
@media (min-width: 720px) {
	#pmpro_form .pmpro_cols-2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 16px;
		row-gap: 0;
	}
	#pmpro_form .pmpro_cols-2 > * {
		width: 100%;
		min-width: 0;
	}
}

/* v0.11.61: Email before Password, and the (now single) Email field
 * spans full width. `.pmpro_form_fields` is a flex column, so `order`
 * reflows the rows with no change to PMPro's markup.
 * 1 = First/Last name · 2 = Email · 3 = Password/Confirm Password. */
#pmpro_form .pmpro_form_fields {
	display: flex;
	flex-direction: column;
}
#pmpro_form .pmpro_form_fields > .ca-checkout-name-row {
	order: 1;
}
#pmpro_form .pmpro_form_fields > .pmpro_form_field-bemail {
	order: 2;
}
#pmpro_form .pmpro_form_fields > .pmpro_cols-2:not(.ca-checkout-name-row) {
	order: 3;
}

/* v0.11.4: hide the PMPro "Show Password" toggle entirely on checkout.
 * It rendered overlapping the field label and looks unpolished. Most
 * professional checkout flows don't surface this toggle on signup. */
#pmpro_form .pmpro_form_field-password-toggle {
	display: none !important;
}

/* v0.11.61: hide the Username field. The learner never picks a username —
 * `pmpro_checkout_preheader` (inc/hooks-pmpro.php §3d) derives one from
 * their name + email, the same way social sign-in does. The field is kept
 * in the DOM (PMPro hard-codes it) but hidden; it carries no `required`
 * HTML attribute, so hiding it does not block form submission. */
#pmpro_form .pmpro_form_field-username {
	display: none !important;
}

/* =====================================================================
 * Form fields — compacted (v0.11.2)
 * ===================================================================== */
#pmpro_form .pmpro_form_field {
	margin-bottom: 8px;
}
#pmpro_form .pmpro_cols-2 .pmpro_form_field:last-child {
	margin-bottom: 8px;
}
#pmpro_form .pmpro_cols-2 {
	margin-bottom: 0;
}
#pmpro_form .pmpro_form_label {
	display: block;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--charcoal);
	margin-bottom: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#pmpro_form .pmpro_required {
	color: var(--coral);
	text-decoration: none;
}

#pmpro_form .pmpro_form_input,
#pmpro_form input[type="text"],
#pmpro_form input[type="email"],
#pmpro_form input[type="password"],
#pmpro_form input[type="tel"],
#pmpro_form select {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--gray-300, #cfd3da);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--charcoal);
	background: white;
	transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
	min-height: 42px;
	box-sizing: border-box;
}
#pmpro_form .pmpro_form_input:hover,
#pmpro_form input:hover {
	border-color: var(--gray-400, #a0a4ab);
}
#pmpro_form .pmpro_form_input:focus,
#pmpro_form input:focus,
#pmpro_form select:focus {
	outline: 0;
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(18, 43, 105, 0.12);
}
/* =====================================================================
 * Hide PMPro address fields we don't collect.
 * Made non-required via pmpro_required_billing_fields filter in
 * inc/hooks-pmpro.php; hidden visually here.
 * ===================================================================== */
#pmpro_form .pmpro_form_field-baddress1,
#pmpro_form .pmpro_form_field-baddress2,
#pmpro_form .pmpro_form_field-bcity,
#pmpro_form .pmpro_form_field-bstate,
#pmpro_form .pmpro_form_field-bzipcode,
#pmpro_form .pmpro_form_field-bphone {
	display: none !important;
}

/* =====================================================================
 * Pricing summary card — compact (v0.11.2 + v0.11.6 dedup)
 * v0.11.6: removed the duplicate `#pmpro_pricing_fields` block that
 * was overriding the generic `.pmpro_card` 12px 16px padding with its
 * own 14px 18px — the heading/paragraph rules above already cover
 * the inner text styling. The element gets the standard card border +
 * 12px 16px padding from the generic rule.
 * ===================================================================== */
#pmpro_level_cost {
	font-family: var(--font-body);
	color: var(--charcoal);
	line-height: 1.4;
	margin: 0;
}
#pmpro_level_cost p {
	margin: 0;
}

/* =====================================================================
 * Payment box (Paystack card-entry fields)
 * Paystack-PMPro renders its own embedded card form inside
 * .pmpro_checkout_gateway-paystack section. Keep our spacing/visual
 * but let Paystack's iframe size to its natural dimensions.
 * ===================================================================== */
.pmpro_checkout_gateway-paystack {
	background: transparent;
	margin-top: 4px;
	padding: 0;
}

/* =====================================================================
 * Age gate — compact (v0.11.2)
 * ===================================================================== */
.ca-age-gate {
	margin: 8px 0 12px;
	padding: 10px 14px;
	background: var(--gold-pale);
	border: 1px solid rgba(255, 155, 3, 0.3);
	border-radius: var(--radius-sm);
}
.ca-age-gate-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-family: var(--font-body); /* explicit — don't rely on inheritance */
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--charcoal);
	margin: 0;
}
.ca-age-gate-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 1px 0 0 0;
	accent-color: var(--gold);
	cursor: pointer;
	flex-shrink: 0;
}
/* v0.11.30: second clickwrap label (Terms/Privacy) — space it from the
   age label, and make the inline policy links distinguishable without
   colour (WCAG 1.4.1; navy on gold-pale = high contrast). */
.ca-age-gate-label + .ca-age-gate-label {
	margin-top: 10px;
}
.ca-age-gate-label a {
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ca-age-gate-label a:hover,
.ca-age-gate-label a:focus-visible {
	color: var(--gold-dark);
}

/* =====================================================================
 * Submit button — gold pill, full-width on form.
 * ===================================================================== */
#pmpro_form .pmpro_btn-submit-checkout,
#pmpro_form input[type="submit"].pmpro_btn,
#pmpro_form .pmpro_btn-submit-checkout {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.95rem;
	background: var(--gold);
	color: var(--navy);
	border: 0;
	border-radius: var(--radius-md);
	padding: 12px 28px;
	width: 100%;
	min-height: 48px;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
	letter-spacing: 0.01em;
	text-decoration: none !important;
}
#pmpro_form .pmpro_btn-submit-checkout:hover,
#pmpro_form input[type="submit"].pmpro_btn:hover {
	background: var(--gold-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
#pmpro_form .pmpro_btn-submit-checkout:disabled,
#pmpro_form input[type="submit"].pmpro_btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Discount-code apply button — keep small/secondary */
#pmpro_form #other_discount_code_button,
#pmpro_form .pmpro_btn-submit-discount-code {
	background: var(--navy);
	color: var(--white);
	font-weight: 600;
	font-size: 0.85rem;
	padding: 10px 18px;
	border-radius: var(--radius-sm);
	border: 0;
	min-height: 44px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
#pmpro_form #other_discount_code_button:hover {
	background: var(--navy-light, #1A3A8A);
}

/* =====================================================================
 * Promo code field — collapsed behind a toggle (v0.11.63)
 * The public offer is auto-applied (inc/hooks-promo.php), so the
 * discount is already "the price" and a visitor never has to hunt for
 * a code. A visible empty coupon box does the opposite — it invites
 * code-hunting and measurably depresses conversion (Baymard). So
 * PMPro's native "Click here to enter your discount code" toggle is
 * left in place, collapsed by default; channel/partner codes are
 * still typed here on demand. The rules below only take effect once
 * the toggle reveals the field: input + Verify button on one row.
 * Apply is inline AJAX — no navigation.
 * ===================================================================== */
#pmpro_form #other_discount_code_fields .pmpro_form_fields-inline {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
#pmpro_form #pmpro_other_discount_code {
	flex: 1 1 auto;
	min-width: 0;
}
#pmpro_form #other_discount_code_button {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* =====================================================================
 * /login/ surface — brand header (v0.11.5 + v0.11.7)
 * `the_content` filter in hooks-pmpro.php prepends:
 *   logo (gold) → eyebrow (gold, uppercase, letter-spaced) → heading
 *   (Poppins 800, navy) → 48×2px gold divider → subline (gray-500)
 * Composition lifted verbatim from the brand cover-page pattern
 * (chiggle_brand_guidelines_v4.html section 1). Centered above form.
 * ===================================================================== */
.ca-login-brand {
	text-align: center;
	margin: 0 0 22px;
}
.ca-login-brand-logo {
	display: inline-flex;
	width: 80px;
	height: 80px;
	background: rgba(255, 155, 3, 0.12);
	border: 1px solid rgba(255, 155, 3, 0.2);
	border-radius: 22px;
	align-items: center;
	justify-content: center;
	margin: 0 0 18px;
	text-decoration: none;
}
.ca-login-brand-logo img {
	display: block;
	height: 56px;
	width: 56px;
}
.ca-login-brand-eyebrow {
	font-family: var(--font-body);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 8px;
}
.ca-login-brand-heading {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.75rem;
	color: var(--navy);
	margin: 0;
	letter-spacing: -0.025em;
	line-height: 1.1;
}
.ca-login-brand-divider {
	display: block;
	width: 48px;
	height: 2px;
	background: var(--gold);
	margin: 14px auto 12px;
}
.ca-login-brand-sub {
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--gray-500);
	margin: 0;
	line-height: 1.45;
}

/* =====================================================================
 * /login/ surface — PMPro's `[pmpro_login]` shortcode renders WP's
 * native loginform inside a `.pmpro_login_wrap` card. v0.11.4: brand-
 * consistent field + button styling, narrow 480px column.
 * ===================================================================== */
body.pmpro-login .pmpro_login_wrap {
	background: white;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md);
	padding: 28px 28px 20px;
}
body.pmpro-login #loginform p.login-username,
body.pmpro-login #loginform p.login-password {
	margin: 0 0 14px;
	padding: 0;
}
body.pmpro-login #loginform p.login-remember {
	margin: 6px 0 18px;
	font-size: 0.85rem;
	color: var(--gray-500);
}
body.pmpro-login #loginform p.login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
body.pmpro-login #loginform label {
	display: block;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--charcoal);
	margin-bottom: 4px;
}
body.pmpro-login #loginform input.input,
body.pmpro-login #loginform input[type="text"],
body.pmpro-login #loginform input[type="password"],
body.pmpro-login #loginform input[type="email"] {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--gray-300, #cfd3da);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--charcoal);
	background: white;
	transition: border-color 0.15s, box-shadow 0.15s;
	min-height: 42px;
	box-sizing: border-box;
}
body.pmpro-login #loginform input:hover {
	border-color: var(--gray-400, #a0a4ab);
}
body.pmpro-login #loginform input:focus {
	outline: 0;
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(18, 43, 105, 0.12);
}
/* Show Password toggle on login — hide for parity with checkout */
body.pmpro-login .pmpro_form_field-password-toggle {
	display: none !important;
}
/* Primary submit button — navy pill (brand "flyer-cta-btn" pattern:
 * dark CTA on light card). v0.11.7: !important on every property
 * because Astra/PMPro/WP-core all ship higher-specificity rules for
 * `.button-primary` / `#wp-submit` that were overriding our brand.
 * Without !important the operator was seeing Astra's default navy-blue
 * (not our brand navy) and questioned whether the button was branded. */
body.pmpro-login #wp-submit,
body.pmpro-login input#wp-submit.button,
body.pmpro-login input#wp-submit.button-primary {
	width: 100% !important;
	background: var(--navy) !important;
	background-color: var(--navy) !important;
	color: white !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 14px 28px !important;
	min-height: 48px !important;
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: 0.85rem !important;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
	letter-spacing: 0.01em !important;
	margin-top: 8px !important;
	text-transform: none !important;
}
body.pmpro-login #wp-submit:hover,
body.pmpro-login input#wp-submit.button:hover,
body.pmpro-login input#wp-submit.button-primary:hover {
	background: #1a3a8b !important; /* navy lifted 6% for hover */
	background-color: #1a3a8b !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(18, 43, 105, 0.15);
}
/* Footer card actions — "Join Now | Lost Password?" */
body.pmpro-login .pmpro_card_actions {
	border-top: 1px solid var(--gray-200);
	padding: 14px 28px;
	font-size: 0.85rem;
	color: var(--gray-500);
}
body.pmpro-login .pmpro_card_actions a {
	color: var(--navy);
	font-weight: 600;
	text-decoration: none;
}
body.pmpro-login .pmpro_card_actions a:hover {
	color: var(--gold);
}
/* Nextend "Continue with Google" — full-width pill matching brand */
body.pmpro-login #nsl-custom-login-form-1 {
	margin-top: 14px;
}
body.pmpro-login .nsl-button {
	min-height: 44px;
	border-radius: var(--radius-md) !important;
	border: 1px solid var(--gray-300, #cfd3da) !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
}

/* =====================================================================
 * Account dashboard surfaces (logged-in /membership-account/)
 * ===================================================================== */
body.pmpro-account .pmpro_member_profile_edit-actions a,
body.pmpro-account .pmpro_actionlinks a {
	color: var(--navy);
	font-weight: 600;
	text-decoration: none;
}
body.pmpro-account .pmpro_member_profile_edit-actions a:hover,
body.pmpro-account .pmpro_actionlinks a:hover {
	color: var(--gold);
}

/* v0.11.10: Hide PMPro's profile-edit links on /membership-account/.
 * The TutorLMS Dashboard → Settings tab is the single source of truth
 * for profile + password changes (operator flagged the email-change
 * conflict where PMPro's editor lets users change email separately
 * from Tutor's settings, creating two divergent profile surfaces).
 *
 * Two hide targets needed:
 *   1. The "Edit Profile" + "Change Password" buttons inside the
 *      "My Account" card. PMPro wraps these in `.pmpro_card_actions`.
 *   2. WP auto-generates a page-children submenu (`.children.sub-menu`)
 *      listing /your-profile/ because the reparent in v0.11.10 made
 *      your-profile a child of membership-account. We hide that
 *      submenu's your-profile item.
 *
 * Log Out + Cancel + Update Billing stay (no conflict). */
body.pmpro-account .pmpro_card_actions a[href*="your-profile"] {
	display: none !important;
}
body.pmpro-account .pmpro_card_actions .pmpro_card_action:has(a[href*="your-profile"]) {
	display: none !important;
}
/* Hide the orphan "Your Profile" item from any auto-generated
 * page-children submenu (Astra theme, generic wp_list_pages). */
.page-item-584 {
	display: none !important;
}

/* =====================================================================
 * Responsive
 * ===================================================================== */
@media (max-width: 640px) {
	body.pmpro-account .entry-content,
	body.pmpro-levels  .entry-content,
	body.pmpro-checkout .entry-content,
	body.pmpro-billing .entry-content,
	body.pmpro-cancel  .entry-content,
	body.pmpro-account .ast-container,
	body.pmpro-levels  .ast-container,
	body.pmpro-checkout .ast-container,
	body.pmpro-billing .ast-container,
	body.pmpro-cancel  .ast-container {
		padding: 20px 16px 32px !important;
	}
	#pmpro_form .pmpro_section,
	#pmpro_form .pmpro_card {
		padding: 12px 14px;
	}
}