/**
 * REEx — Paid Memberships Pro theme overrides
 *
 * Re-skins the member-facing PMPro UI (levels, checkout, account, billing,
 * invoices, login, gated content) to the Rare Earth Exchanges design system.
 *
 * Target:  Paid Memberships Pro 3.8.5, `minimal` frontend variation.
 * Source:  Claude Design — "PMPro Foundations & Kit"
 *          project 5dd58def-5687-4a40-8f4f-f55b98deffdf
 * Loaded by REEx-Divi-Child-Theme/functions.php whenever PMPro is active.
 *
 * CONVENTIONS
 * - Everything is scoped to `.pmpro` (or a pmpro body class) so it outranks
 *   Divi's element rules on specificity. `!important` is deliberately absent —
 *   if a rule loses, raise its scope rather than reaching for it.
 * - Focus is drawn with box-shadow plus a transparent outline fallback,
 *   because Divi sets `outline:none` on inputs and buttons.
 * - Red and yellow appear ONLY in the status palette. Teal is the sole
 *   action color; the legacy REEx red/amber are logo-and-podcast-art only.
 */

/* ==========================================================================
   1. Foundations
   ========================================================================== */

:root {
	/* Teal — primary */
	--reex-teal-50:   #e6f7f7;
	--reex-teal-100:  #c4ecee;
	--reex-teal-300:  #2cd4d9;
	--reex-teal-500:  #0a8289;
	--reex-teal-700:  #0a6a70;
	--reex-teal-900:  #0a3d42;

	/* Neutral */
	--reex-gray-900:  #181c1d;
	--reex-gray-700:  #3d4244;
	--reex-gray-500:  #525a5c;
	--reex-gray-300:  #b9c0c1;
	--reex-gray-200:  #dde1e1;
	--reex-gray-100:  #eef0f0;
	--reex-gray-50:   #f5f6f6;
	--reex-white:     #ffffff;

	/* Status — the only red and yellow in the product */
	--reex-error-text:      #b42318;
	--reex-error-subtle-fg: #912018;
	--reex-error-subtle-bg: #fef3f2;
	--reex-error-solid-bg:  #d92d20;

	--reex-warning-text:      #854d0e;
	--reex-warning-subtle-bg: #fefce8;
	--reex-warning-solid-bg:  #facc15;
	--reex-warning-solid-fg:  #422006;

	--reex-success-text:      #067647;
	--reex-success-subtle-fg: #055d38;
	--reex-success-subtle-bg: #ecfdf3;

	--reex-info-text:      #175cd3;
	--reex-info-subtle-fg: #104099;
	--reex-info-subtle-bg: #eff6ff;

	/* Radii */
	--reex-radius-xs:   4px;   /* chips, checkboxes */
	--reex-radius-sm:   6px;   /* inputs, alerts */
	--reex-radius-md:  10px;   /* cards, tables, sections */
	--reex-radius-lg:  16px;   /* feature panel */
	--reex-radius-pill: 999px; /* buttons, badges */

	/* Elevation */
	--reex-shadow-1: 0 1px 2px rgba(24, 28, 29, .06), 0 1px 1px rgba(24, 28, 29, .04);
	--reex-shadow-2: 0 4px 12px rgba(24, 28, 29, .08), 0 2px 4px rgba(24, 28, 29, .04);
	--reex-shadow-3: 0 12px 32px rgba(24, 28, 29, .12), 0 4px 8px rgba(24, 28, 29, .06);
	--reex-shadow-feature: 0 8px 24px rgba(10, 130, 137, .22);

	/* Type */
	--reex-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Motion — 120ms color, 200ms elevation, no scale */
	--reex-ease: cubic-bezier(.22, .61, .36, 1);
	--reex-dur-fast: 120ms;
	--reex-dur-base: 200ms;
}

/**
 * PMPro's five global variables.
 *
 * PMPro's own semantics: `base` is the surface color and `contrast` is the
 * text color drawn on it — the Claude Design doc labels these the other way
 * round, but the intended values are the same pair, so this follows PMPro.
 * `base` (#ffffff) and `contrast` (#181c1d) already match the design system,
 * so only the two variations actually change.
 */
:root {
	--pmpro--color--base:              var(--reex-white);
	--pmpro--color--contrast:          var(--reex-gray-900);
	--pmpro--color--accent:            var(--reex-teal-500);
	--pmpro--color--accent--variation: var(--reex-teal-700);
	--pmpro--color--border--variation: var(--reex-gray-200);
}

.pmpro {
	font-family: var(--reex-font);
	color: var(--reex-gray-900);
	font-size: 16px;
	line-height: 1.625;
	-webkit-font-smoothing: antialiased;
}

.pmpro a {
	color: var(--reex-teal-700);
	text-decoration: none;
	transition: color var(--reex-dur-fast) var(--reex-ease);
}

.pmpro a:hover { color: var(--reex-teal-900); }

.pmpro a:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px var(--reex-teal-100), 0 0 0 4px var(--reex-teal-700);
	border-radius: var(--reex-radius-xs);
}

/* Type scale */
.pmpro h1 {
	font: 700 40px/44px var(--reex-font);
	letter-spacing: -0.015em;
	color: var(--reex-gray-900);
}

.pmpro h2 {
	font: 700 24px/30px var(--reex-font);
	color: var(--reex-gray-900);
}

.pmpro h3,
.pmpro .pmpro_card_title {
	font: 600 20px/25px var(--reex-font);
	color: var(--reex-gray-900);
}

.pmpro p { color: var(--reex-gray-700); }

.pmpro .pmpro_font-large {
	font: 400 18px/30px var(--reex-font);
	color: var(--reex-gray-700);
}

@keyframes reex-pmpro-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   2. Buttons
   Pill · 999px · 600 weight · never wraps.
   Default 16px / 13–26 / 44px · Compact 15px / 11–22 / 40px · Small 14px / 9–18 / 36px
   ========================================================================== */

.pmpro .pmpro_btn,
.pmpro a.pmpro_btn,
.pmpro input[type="submit"].pmpro_btn,
.pmpro button.pmpro_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 13px 26px;
	border: 1px solid var(--reex-teal-500);
	border-radius: var(--reex-radius-pill);
	background-color: var(--reex-teal-500);
	color: var(--reex-white);
	font: 600 16px/1 var(--reex-font);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	transition:
		background-color var(--reex-dur-fast) var(--reex-ease),
		border-color var(--reex-dur-fast) var(--reex-ease),
		color var(--reex-dur-fast) var(--reex-ease),
		box-shadow var(--reex-dur-base) var(--reex-ease);
}

.pmpro .pmpro_btn:hover,
.pmpro a.pmpro_btn:hover,
.pmpro button.pmpro_btn:hover {
	background-color: var(--reex-teal-700);
	border-color: var(--reex-teal-700);
	color: var(--reex-white);
}

.pmpro .pmpro_btn:focus-visible,
.pmpro a.pmpro_btn:focus-visible,
.pmpro button.pmpro_btn:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px var(--reex-teal-100), 0 0 0 4px var(--reex-teal-700);
}

.pmpro .pmpro_btn:active,
.pmpro a.pmpro_btn:active,
.pmpro button.pmpro_btn:active {
	background-color: var(--reex-teal-900);
	border-color: var(--reex-teal-900);
}

.pmpro .pmpro_btn:disabled,
.pmpro .pmpro_btn[aria-disabled="true"],
.pmpro .pmpro_btn.disabled {
	background-color: var(--reex-gray-100);
	border-color: var(--reex-gray-200);
	color: var(--reex-gray-500);
	cursor: not-allowed;
	box-shadow: none;
}

/* Loading */
.pmpro .pmpro_btn[aria-busy="true"] {
	color: var(--reex-white);
	cursor: progress;
}

.pmpro .pmpro_btn[aria-busy="true"]::before {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: var(--reex-white);
	border-radius: 50%;
	animation: reex-pmpro-spin 700ms linear infinite;
}

/* Secondary / plain — quiet outline, recedes behind primary */
.pmpro .pmpro_btn-plain,
.pmpro a.pmpro_btn-plain,
.pmpro button.pmpro_btn-plain {
	background-color: transparent;
	border-color: var(--reex-teal-700);
	color: var(--reex-teal-700);
}

.pmpro .pmpro_btn-plain:hover,
.pmpro a.pmpro_btn-plain:hover,
.pmpro button.pmpro_btn-plain:hover {
	background-color: var(--reex-teal-700);
	border-color: var(--reex-teal-700);
	color: var(--reex-white);
}

.pmpro .pmpro_btn-plain:active,
.pmpro a.pmpro_btn-plain:active {
	background-color: var(--reex-teal-900);
	border-color: var(--reex-teal-900);
}

.pmpro .pmpro_btn-plain:disabled,
.pmpro .pmpro_btn-plain[aria-disabled="true"] {
	background-color: transparent;
	border-color: var(--reex-gray-300);
	color: var(--reex-gray-500);
}

/**
 * Destructive / cancel — a quiet outline, not a red button.
 * Solid red is reserved for the final confirm step inside the cancel screen
 * (`.pmpro_btn-cancel.pmpro_btn-confirm`), never in account or checkout.
 */
.pmpro .pmpro_btn-cancel,
.pmpro a.pmpro_btn-cancel {
	background-color: transparent;
	border-color: var(--reex-gray-300);
	color: var(--reex-gray-700);
}

.pmpro .pmpro_btn-cancel:hover,
.pmpro a.pmpro_btn-cancel:hover {
	background-color: var(--reex-error-subtle-bg);
	border-color: var(--reex-error-text);
	color: var(--reex-error-subtle-fg);
}

.pmpro .pmpro_btn-cancel.pmpro_btn-confirm {
	background-color: var(--reex-error-solid-bg);
	border-color: var(--reex-error-solid-bg);
	color: var(--reex-white);
}

.pmpro .pmpro_btn-cancel.pmpro_btn-confirm:hover {
	background-color: var(--reex-error-subtle-fg);
	border-color: var(--reex-error-subtle-fg);
}

/* Sizes — doubled class so these outrank the element-qualified base rule */
.pmpro .pmpro_btn.pmpro_btn-compact {
	min-height: 40px;
	padding: 11px 22px;
	font-size: 15px;
}

.pmpro .pmpro_btn.pmpro_btn-small {
	min-height: 36px;
	padding: 9px 18px;
	font-size: 14px;
}

.pmpro .pmpro_btn.pmpro_btn-submit-checkout { min-width: 240px; }

/* ==========================================================================
   3. Cards
   ========================================================================== */

.pmpro .pmpro_card {
	background-color: var(--reex-white);
	border: 1px solid var(--reex-gray-200);
	border-radius: var(--reex-radius-md);
	box-shadow: var(--reex-shadow-1);
	padding: 32px;
	transition: box-shadow var(--reex-dur-base) var(--reex-ease),
	            border-color var(--reex-dur-fast) var(--reex-ease);
}

.pmpro .pmpro_card_title {
	margin: 0 0 12px;
	font: 600 20px/25px var(--reex-font);
	color: var(--reex-gray-900);
}

.pmpro .pmpro_card_content {
	font-size: 16px;
	line-height: 1.625;
	color: var(--reex-gray-700);
}

.pmpro .pmpro_card_actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* Clickable / selectable level card */
.pmpro .pmpro_card.pmpro_clickable { cursor: pointer; }

.pmpro .pmpro_card.pmpro_clickable:hover {
	border-color: var(--reex-teal-500);
	box-shadow: var(--reex-shadow-2);
}

.pmpro .pmpro_card.pmpro_clickable:focus-within {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px var(--reex-teal-100), 0 0 0 4px var(--reex-teal-700);
}

.pmpro .pmpro_card.pmpro_clickable[aria-checked="true"],
.pmpro .pmpro_card.pmpro_clickable.pmpro_selected {
	background-color: var(--reex-teal-50);
	border-color: var(--reex-teal-500);
	box-shadow: inset 0 0 0 1px var(--reex-teal-500);
}

/* Featured level — the ribbon itself needs a template override */
.pmpro .pmpro_card.pmpro_card-featured {
	border-color: var(--reex-teal-500);
	box-shadow: var(--reex-shadow-feature);
}

/* Empty state */
.pmpro .pmpro_card-empty {
	border-style: dashed;
	box-shadow: none;
	text-align: center;
	color: var(--reex-gray-500);
}

/* ==========================================================================
   4. Sections & actions nav
   ========================================================================== */

.pmpro .pmpro_section {
	background-color: var(--reex-white);
	border: 1px solid var(--reex-gray-200);
	border-radius: var(--reex-radius-md);
	box-shadow: var(--reex-shadow-1);
	margin-bottom: 48px;
	overflow: hidden;
}

.pmpro .pmpro_section > .pmpro_section_header,
.pmpro .pmpro_section .pmpro_section_title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px;
	border-bottom: 1px solid var(--reex-gray-200);
	margin: 0;
}

.pmpro .pmpro_section .pmpro_section_content { padding: 24px; }

.pmpro .pmpro_actions_nav {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmpro .pmpro_actions_nav a {
	display: inline-block;
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
	font: 500 15px/1.4 var(--reex-font);
	color: var(--reex-gray-700);
	transition: color var(--reex-dur-fast) var(--reex-ease),
	            border-color var(--reex-dur-fast) var(--reex-ease);
}

.pmpro .pmpro_actions_nav a:hover {
	color: var(--reex-teal-700);
	border-bottom-color: var(--reex-teal-100);
}

.pmpro .pmpro_actions_nav .current a,
.pmpro .pmpro_actions_nav a[aria-current] {
	font-weight: 600;
	color: var(--reex-teal-700);
	border-bottom-color: var(--reex-teal-700);
}

/* ==========================================================================
   5. Form fields
   Input: 44px min height · 11/14 padding · 6px radius · 1px #b9c0c1
   16px Poppins 400 — 16px specifically prevents iOS zoom on focus.
   Scoped hard because Divi sets border:none / background:#eee / radius:0
   on inputs inside several module scopes.
   ========================================================================== */

.pmpro .pmpro_form_fields { display: block; }

.pmpro .pmpro_form_field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

.pmpro .pmpro_form_field label {
	font: 600 14px/20px var(--reex-font);
	color: var(--reex-gray-900);
}

.pmpro .pmpro_form_field-required label::after {
	content: " *";
	color: var(--reex-error-text);
}

.pmpro .pmpro_form_field .pmpro_form_hint,
.pmpro .pmpro_form_field .lite,
.pmpro .pmpro_form_field small {
	font: 400 14px/21px var(--reex-font);
	color: var(--reex-gray-500);
}

.pmpro .pmpro_form input[type="text"],
.pmpro .pmpro_form input[type="email"],
.pmpro .pmpro_form input[type="password"],
.pmpro .pmpro_form input[type="tel"],
.pmpro .pmpro_form input[type="number"],
.pmpro .pmpro_form input[type="url"],
.pmpro .pmpro_form select,
.pmpro .pmpro_form textarea {
	width: 100%;
	min-height: 44px;
	padding: 11px 14px;
	border: 1px solid var(--reex-gray-300);
	border-radius: var(--reex-radius-sm);
	background-color: var(--reex-white);
	background-image: none;
	color: var(--reex-gray-900);
	font: 400 16px/1.4 var(--reex-font);
	box-sizing: border-box;
	appearance: none;
	transition: border-color var(--reex-dur-fast) var(--reex-ease),
	            box-shadow var(--reex-dur-fast) var(--reex-ease);
}

.pmpro .pmpro_form input::placeholder,
.pmpro .pmpro_form textarea::placeholder {
	color: var(--reex-gray-500);
}

.pmpro .pmpro_form input[type]:hover,
.pmpro .pmpro_form select:hover,
.pmpro .pmpro_form textarea:hover {
	border-color: var(--reex-gray-500);
}

.pmpro .pmpro_form input[type]:focus,
.pmpro .pmpro_form input[type]:focus-visible,
.pmpro .pmpro_form select:focus,
.pmpro .pmpro_form textarea:focus {
	outline: 2px solid transparent;
	border-color: var(--reex-teal-500);
	box-shadow: 0 0 0 3px var(--reex-teal-100);
}

.pmpro .pmpro_form input[aria-invalid="true"],
.pmpro .pmpro_form select[aria-invalid="true"],
.pmpro .pmpro_form textarea[aria-invalid="true"],
.pmpro .pmpro_form_field-error input[type],
.pmpro .pmpro_form_field-error select {
	border-color: var(--reex-error-text);
}

.pmpro .pmpro_form input[aria-invalid="true"]:focus,
.pmpro .pmpro_form_field-error input[type]:focus {
	box-shadow: 0 0 0 3px var(--reex-error-subtle-bg);
}

.pmpro .pmpro_form_field .pmpro_error,
.pmpro .pmpro_form_field-error .pmpro_form_hint {
	font: 400 14px/21px var(--reex-font);
	color: var(--reex-error-text);
}

.pmpro .pmpro_form input:disabled,
.pmpro .pmpro_form select:disabled,
.pmpro .pmpro_form textarea:disabled {
	background-color: var(--reex-gray-100);
	border-color: var(--reex-gray-200);
	color: var(--reex-gray-500);
	cursor: not-allowed;
}

.pmpro .pmpro_form textarea {
	min-height: 96px;
	resize: vertical;
	line-height: 1.6;
}

/* Select — chevron must be a background-image; PMPro's select has no wrapper */
.pmpro .pmpro_form select {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23525a5c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 20px 20px;
}

/* Checkbox & radio — 20px box, 4px radius */
.pmpro .pmpro_form_field-checkbox,
.pmpro .pmpro_form_field-radio {
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
}

.pmpro .pmpro_form input[type="checkbox"],
.pmpro .pmpro_form input[type="radio"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	padding: 0;
	box-sizing: border-box;
	border: 1px solid var(--reex-gray-300);
	border-radius: var(--reex-radius-xs);
	background-color: var(--reex-white);
	appearance: none;
	cursor: pointer;
	transition: background-color var(--reex-dur-fast) var(--reex-ease),
	            border-color var(--reex-dur-fast) var(--reex-ease);
}

.pmpro .pmpro_form input[type="radio"] { border-radius: 50%; }

.pmpro .pmpro_form input[type="checkbox"]:checked,
.pmpro .pmpro_form input[type="radio"]:checked {
	background-color: var(--reex-teal-500);
	border-color: var(--reex-teal-500);
	background-repeat: no-repeat;
	background-position: center;
}

.pmpro .pmpro_form input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-size: 14px 14px;
}

.pmpro .pmpro_form input[type="radio"]:checked {
	background-image: radial-gradient(circle, var(--reex-white) 0 4px, transparent 4px);
}

.pmpro .pmpro_form input[type="checkbox"]:focus-visible,
.pmpro .pmpro_form input[type="radio"]:focus-visible {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px var(--reex-teal-100), 0 0 0 4px var(--reex-teal-700);
}

.pmpro .pmpro_form_field-checkbox label,
.pmpro .pmpro_form_field-radio label {
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	cursor: pointer;
}

/* Password toggle */
.pmpro .pmpro_form_field-password { position: relative; }

.pmpro .pmpro_btn-password-toggle {
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	min-height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--reex-radius-xs);
	background: transparent;
	color: var(--reex-gray-500);
	cursor: pointer;
}

.pmpro .pmpro_btn-password-toggle:hover {
	background: var(--reex-gray-100);
	color: var(--reex-gray-900);
	border-color: transparent;
}

.pmpro .pmpro_btn-password-toggle[aria-pressed="true"] { color: var(--reex-teal-700); }

.pmpro .pmpro_form_field-password input[type="password"],
.pmpro .pmpro_form_field-password input[type="text"] { padding-right: 48px; }

/* Two-column rows — collapse below 768px */
.pmpro .pmpro_cols-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.pmpro .pmpro_cols-2 > .pmpro_form_field { margin-bottom: 0; }

/* Fieldset — billing address block */
.pmpro .pmpro_form fieldset {
	margin: 0 0 32px;
	padding: 0;
	border: 0;
}

.pmpro .pmpro_form fieldset legend {
	margin-bottom: 16px;
	padding: 0;
	font: 700 24px/30px var(--reex-font);
	color: var(--reex-gray-900);
}

/**
 * Stripe Elements card block.
 * Only font family, size, and color cross the iframe boundary — the border,
 * radius, focus ring, and error border live on this wrapper.
 */
.pmpro .pmpro_form .StripeElement {
	min-height: 44px;
	padding: 13px 14px;
	border: 1px solid var(--reex-gray-300);
	border-radius: var(--reex-radius-sm);
	background-color: var(--reex-white);
	transition: border-color var(--reex-dur-fast) var(--reex-ease),
	            box-shadow var(--reex-dur-fast) var(--reex-ease);
}

.pmpro .pmpro_form .StripeElement--focus {
	border-color: var(--reex-teal-500);
	box-shadow: 0 0 0 3px var(--reex-teal-100);
}

.pmpro .pmpro_form .StripeElement--invalid { border-color: var(--reex-error-text); }

/* ==========================================================================
   6. Messages & alerts
   PMPro emits a single paragraph inside the message div, so the icon is a
   ::before background-image on the container with left padding.
   ========================================================================== */

.pmpro .pmpro_message {
	position: relative;
	padding: 16px 20px 16px 52px;
	border: 1px solid transparent;
	border-left-width: 3px;
	border-radius: var(--reex-radius-sm);
	margin-bottom: 24px;
	font-size: 15px;
	line-height: 1.6;
}

.pmpro .pmpro_message::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 17px;
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-size: 22px 22px;
}

.pmpro .pmpro_message.pmpro_success {
	background-color: var(--reex-success-subtle-bg);
	border-color: var(--reex-success-text);
	color: var(--reex-success-subtle-fg);
}

.pmpro .pmpro_message.pmpro_success::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067647' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.8 10A10 10 0 1 1 17 3.34'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
}

.pmpro .pmpro_message.pmpro_error,
.pmpro .pmpro_message.pmpro_alert {
	background-color: var(--reex-error-subtle-bg);
	border-color: var(--reex-error-text);
	color: var(--reex-error-subtle-fg);
}

.pmpro .pmpro_message.pmpro_error::before,
.pmpro .pmpro_message.pmpro_alert::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

.pmpro .pmpro_message.pmpro_warning {
	background-color: var(--reex-warning-subtle-bg);
	border-color: var(--reex-warning-text);
	color: var(--reex-warning-text);
}

.pmpro .pmpro_message.pmpro_warning::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23854d0e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.pmpro .pmpro_message.pmpro_info,
.pmpro .pmpro_message:not(.pmpro_success):not(.pmpro_error):not(.pmpro_alert):not(.pmpro_warning) {
	background-color: var(--reex-info-subtle-bg);
	border-color: var(--reex-info-text);
	color: var(--reex-info-subtle-fg);
}

.pmpro .pmpro_message.pmpro_info::before,
.pmpro .pmpro_message:not(.pmpro_success):not(.pmpro_error):not(.pmpro_alert):not(.pmpro_warning)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23175cd3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

/* ==========================================================================
   7. Gated content
   G1 — inline strip. The lock coin is teal, not amber: amber reads as
   "something is wrong with your account", which is the same signal as an
   expired card. Gated content is a normal state, not a fault.
   ========================================================================== */

.pmpro_content_message {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 20px 24px 20px 68px;
	border: 1px solid var(--reex-gray-200);
	border-radius: var(--reex-radius-md);
	background-color: var(--reex-white);
	box-shadow: var(--reex-shadow-1);
	margin: 24px 0;
	font-family: var(--reex-font);
	font-size: 15px;
	line-height: 1.6;
	color: var(--reex-gray-700);
}

.pmpro_content_message::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--reex-teal-50);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6a70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}

.pmpro_content_message a {
	font-weight: 600;
	color: var(--reex-teal-700);
}

.pmpro_content_message a:hover { color: var(--reex-teal-900); }

/* Full-page gate — the one dark "look at this" block per screen */
.pmpro_content_message-full {
	flex-direction: column;
	align-items: flex-start;
	padding: 48px;
	border: 0;
	border-radius: var(--reex-radius-lg);
	background-color: var(--reex-gray-900);
	color: var(--reex-gray-200);
}

.pmpro_content_message-full::before {
	position: static;
	transform: none;
	margin-bottom: 8px;
	background-color: rgba(44, 212, 217, .12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232cd4d9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.pmpro_content_message-full a { color: var(--reex-teal-300); }

/* ==========================================================================
   8. Tables
   Dark header · #f5f6f6 zebra · #e6f7f7 row hover · tabular numerals right
   ========================================================================== */

.pmpro .pmpro_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--reex-gray-200);
	border-radius: var(--reex-radius-md);
	overflow: hidden;
	font-size: 15px;
}

.pmpro .pmpro_table thead th {
	padding: 12px 16px;
	background-color: var(--reex-gray-900);
	color: var(--reex-white);
	font: 600 13px/1.4 var(--reex-font);
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
	border: 0;
}

.pmpro .pmpro_table tbody td {
	padding: 12px 16px;
	border-top: 1px solid var(--reex-gray-200);
	color: var(--reex-gray-700);
	vertical-align: middle;
}

.pmpro .pmpro_table tbody tr:nth-child(even) { background-color: var(--reex-gray-50); }

.pmpro .pmpro_table tbody tr:hover { background-color: var(--reex-teal-50); }

/* Amount / numeric columns — tabular figures, right aligned */
.pmpro .pmpro_table thead th:last-child,
.pmpro .pmpro_table tbody td:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	font-weight: 500;
}

/* ==========================================================================
   9. Levels & price display
   ========================================================================== */

.pmpro .pmpro_level_group { margin-bottom: 48px; }

.pmpro .pmpro_levels_table,
.pmpro .pmpro_level-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.pmpro .pmpro_level-price {
	font: 700 40px/40px var(--reex-font);
	letter-spacing: -0.015em;
	color: var(--reex-gray-900);
	font-variant-numeric: tabular-nums;
}

.pmpro .pmpro_level-price .pmpro_level-price-term,
.pmpro .pmpro_level-price small {
	font: 400 16px/1.4 var(--reex-font);
	letter-spacing: 0;
	color: var(--reex-gray-500);
}

.pmpro .pmpro_level-terms,
.pmpro .pmpro_level-trial {
	font: 400 14px/21px var(--reex-font);
	color: var(--reex-gray-500);
}

/* Badges — 999px, 12px SemiBold, 6/12 padding */
.pmpro .pmpro_badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--reex-radius-pill);
	background-color: var(--reex-teal-100);
	color: var(--reex-teal-900);
	font: 600 12px/1 var(--reex-font);
	letter-spacing: .02em;
}

.pmpro .pmpro_badge-current {
	background-color: var(--reex-success-subtle-bg);
	color: var(--reex-success-subtle-fg);
}

.pmpro .pmpro_badge-expiring {
	background-color: var(--reex-warning-subtle-bg);
	color: var(--reex-warning-text);
}

/* Eyebrow */
.pmpro .pmpro_eyebrow {
	font: 400 12px/1 var(--reex-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--reex-teal-700);
}

/* Icons — Lucide, 1.8px stroke, 22px, currentColor */
.pmpro .pmpro_icon {
	width: 22px;
	height: 22px;
	stroke-width: 1.8;
	color: currentColor;
	vertical-align: middle;
}

/* ==========================================================================
   10. Login
   ========================================================================== */

.pmpro .pmpro_login_wrap {
	max-width: 460px;
	margin: 0 auto;
}

body.pmpro-login .pmpro .pmpro_card { padding: 32px; }

.pmpro .pmpro_login_wrap .pmpro_btn { width: 100%; }

.pmpro .pmpro_actions_nav-login {
	justify-content: center;
	margin-top: 24px;
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */

@media (max-width: 767px) {
	.pmpro .pmpro_cols-2 { grid-template-columns: minmax(0, 1fr); }

	.pmpro .pmpro_card,
	.pmpro .pmpro_section .pmpro_section_content,
	.pmpro .pmpro_section > .pmpro_section_header { padding: 24px; }

	.pmpro h1 { font-size: 32px; line-height: 36px; }

	.pmpro .pmpro_btn.pmpro_btn-submit-checkout,
	.pmpro .pmpro_card_actions .pmpro_btn {
		width: 100%;
		min-height: 48px;
	}

	.pmpro .pmpro_card_actions { flex-direction: column; }

	.pmpro_content_message {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px 20px 20px 24px;
	}

	.pmpro_content_message::before {
		position: static;
		transform: none;
		margin-bottom: 12px;
	}

	/**
	 * Stacked table — label/value rows, no horizontal scroll.
	 * PMPro's minimal variation emits data-title on invoice cells; tables
	 * without it need a template override to add one.
	 */
	.pmpro .pmpro_table,
	.pmpro .pmpro_table tbody,
	.pmpro .pmpro_table tr,
	.pmpro .pmpro_table td { display: block; width: 100%; }

	.pmpro .pmpro_table thead { display: none; }

	.pmpro .pmpro_table tbody tr {
		border-top: 1px solid var(--reex-gray-200);
		padding: 8px 0;
	}

	.pmpro .pmpro_table tbody tr:first-child { border-top: 0; }

	.pmpro .pmpro_table tbody td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		border-top: 0;
		padding: 6px 16px;
		text-align: right;
	}

	.pmpro .pmpro_table tbody td[data-title]::before {
		content: attr(data-title);
		font: 600 13px/1.4 var(--reex-font);
		color: var(--reex-gray-500);
		text-align: left;
	}
}

/* ==========================================================================
   12. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.pmpro *,
	.pmpro *::before,
	.pmpro *::after {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
	}
}