.elementor-6748 .elementor-element.elementor-element-5d536f4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6748 .elementor-element.elementor-element-5a57366{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS *//* ==========================================================================
   Pile Law - PMPro checkout skin

   Tokens taken from the Figma build. Selectors written against the real
   rendered markup of PMPro 3.8.1 + Payment Plans 0.6.

   Everything is scoped to body.pl-checkout-page, so the rest of the site is
   untouched.

   Paste into: checkout page > Elementor > Page Settings > Advanced > Custom CSS
   ========================================================================== */

body.pl-checkout-page {

	/* Surfaces */
	--pl-bg:      #0c1628;   /* page */
	--pl-topbar:  #080f1e;
	--pl-card:    #132040;   /* cards + summary */
	--pl-input:   #1a2d50;   /* field fill */
	--pl-inset:   rgba(12, 22, 40, .4);   /* inner panels, inactive tiles */
	--pl-inset-2: rgba(12, 22, 40, .5);   /* summary level box */

	/* Gold */
	--pl-gold:    #c9a96e;
	--pl-gold-hi: #e0c48a;
	--pl-gold-08: rgba(201, 169, 110, .08);
	--pl-gold-10: rgba(201, 169, 110, .10);
	--pl-gold-12: rgba(201, 169, 110, .12);
	--pl-gold-15: rgba(201, 169, 110, .15);
	--pl-gold-18: rgba(201, 169, 110, .18);
	--pl-gold-19: rgba(201, 169, 110, .19);
	--pl-gold-25: rgba(201, 169, 110, .25);
	--pl-gold-40: rgba(201, 169, 110, .40);
	--pl-gold-50: rgba(201, 169, 110, .50);

	/* Type */
	--pl-cream:   #f0ebe0;
	--pl-label:   #c8d4e4;
	--pl-muted:   #8da0bc;
	--pl-faint:   #4a5f7a;
	--pl-emerald: #34d399;

	/* Both are already enqueued by Elementor on this site. */
	--pl-serif: "Playfair Display", Georgia, serif;
	--pl-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--pl-radius: 2px;   /* the design is near-square */

	background: var(--pl-bg);
	color: var(--pl-cream);
	font-family: var(--pl-sans);
}


/* --------------------------------------------------------------------------
   Hide the PMPro chrome we replace
   -------------------------------------------------------------------------- */

/* The "Membership Information" card. Our level tiles + order summary carry
   this information instead, so it would otherwise be a duplicate - and a
   contradictory one when a plan is selected. */
body.pl-checkout-page #pmpro_pricing_fields { display: none !important; }

/* PMPro's privacy paragraph. The summary rail carries this copy. */
body.pl-checkout-page #pmpro_form > p { display: none; }


/* --------------------------------------------------------------------------
   Page chrome
   -------------------------------------------------------------------------- */

.pl-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 40px;
	background: var(--pl-topbar);
	border-bottom: 1px solid var(--pl-gold-12);
	font-size: 12px;
	color: var(--pl-faint);
}

.pl-topbar__ssl { display: flex; align-items: center; gap: 6px; }

.pl-topbar__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #10b981;
}

.pl-footnote {
	margin: 16px 0 0;
	text-align: center;
	font-size: .72rem;
	color: var(--pl-faint);
}


/* --------------------------------------------------------------------------
   Layout

   One Elementor container with the class  pl-checkout , holding three
   shortcode widgets tagged  pl-w-levels / pl-w-form / pl-w-summary .
   !important is required because Elementor sets display:flex on .e-con.
   -------------------------------------------------------------------------- */

/* Elementor "Boxed" containers insert an .e-con-inner between the container
   and the widgets, which would leave the grid with a single child and nothing
   to lay out. Put the grid on whichever element actually holds the widgets. */

body.pl-checkout-page .pl-checkout:has(> .e-con-inner) {
	display: block !important;
	padding: 0;
	max-width: none;
}

body.pl-checkout-page .pl-checkout > .e-con-inner,
body.pl-checkout-page .pl-checkout:not(:has(> .e-con-inner)) {
	display: grid !important;
	grid-template-columns: 1fr 360px;
	gap: 40px;
	align-items: start;
	width: 100%;
	max-width: 1152px;
	margin-inline: auto;
	padding: 40px;
}

/* Placement by CSS class. */
body.pl-checkout-page .pl-w-levels  { grid-column: 1; grid-row: 1; }
body.pl-checkout-page .pl-w-form    { grid-column: 1; grid-row: 2; }
body.pl-checkout-page .pl-w-summary { grid-column: 2; grid-row: 1 / span 2; }

/* Nothing should collapse below its content. */
body.pl-checkout-page .pl-w-levels,
body.pl-checkout-page .pl-w-form,
body.pl-checkout-page .pl-w-summary { min-width: 0; }

@media (min-width: 1025px) {
	.pl-summary { position: sticky; top: 40px; }
}

@media (max-width: 1024px) {
	body.pl-checkout-page .pl-checkout > .e-con-inner,
	body.pl-checkout-page .pl-checkout:not(:has(> .e-con-inner)) {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 24px;
	}
	body.pl-checkout-page .pl-w-levels,
	body.pl-checkout-page .pl-w-form,
	body.pl-checkout-page .pl-w-summary {
		grid-column: 1;
		grid-row: auto;
	}
}


/* --------------------------------------------------------------------------
   Cards

   PMPro's real structure:
     <fieldset class="pmpro_form_fieldset">
       <div class="pmpro_card">
         <h2 class="pmpro_card_title">              (some sections)
         <div class="pmpro_card_content">
           <legend><h2 class="pmpro_form_heading">  (other sections)

   The card is .pmpro_card - not the fieldset.
   -------------------------------------------------------------------------- */

body.pl-checkout-page #pmpro_form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.pl-card,
body.pl-checkout-page #pmpro_form .pmpro_card {
	position: relative;
	background: var(--pl-card);
	border: 1px solid var(--pl-gold-18);
	border-radius: var(--pl-radius);
	margin: 0 0 20px;
	padding: 28px;
	overflow: hidden;
}

/* The 2px gold strip along the top edge of every card. */
.pl-card::before,
body.pl-checkout-page #pmpro_form .pmpro_card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--pl-gold-50);
}

body.pl-checkout-page #pmpro_form .pmpro_card_content { padding: 0; }

/* Headings: gold rule + Playfair. */
.pl-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.pl-card__dash {
	flex: 0 0 24px;
	height: 1px;
	background: var(--pl-gold);
}

body.pl-checkout-page .pl-card__title,
body.pl-checkout-page #pmpro_form .pmpro_card_title,
body.pl-checkout-page #pmpro_form .pmpro_form_heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	padding: 0;
	font-family: var(--pl-serif);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pl-cream);
}

/* Ours already has a dash element beside it, so no bottom margin and no
   ::before. Note the body scope: Elementor's kit emits `.elementor-kit-163 h2`
   at specificity (0,1,1), which would otherwise beat a bare `.pl-card__title`. */
body.pl-checkout-page .pl-card__title { margin: 0; }

body.pl-checkout-page #pmpro_form .pmpro_card_title::before,
body.pl-checkout-page #pmpro_form .pmpro_form_heading::before {
	content: "";
	flex: 0 0 24px;
	height: 1px;
	background: var(--pl-gold);
}

body.pl-checkout-page #pmpro_form .pmpro_form_legend {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* "You are logged in as..." notice. */
body.pl-checkout-page #pmpro_account_loggedin {
	padding: 12px;
	background: var(--pl-inset);
	border: 1px solid var(--pl-gold-12);
	border-radius: var(--pl-radius);
	font-size: .8rem;
	color: var(--pl-muted);
}


/* --------------------------------------------------------------------------
   Level tiles
   -------------------------------------------------------------------------- */

.pl-levels {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

@media (max-width: 639px) {
	.pl-levels { grid-template-columns: repeat(2, 1fr); }
}

.pl-level {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px;
	text-align: center;
	text-decoration: none;
	background: var(--pl-inset);
	border: 1px solid var(--pl-gold-12);
	border-radius: var(--pl-radius);
	transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.pl-level .pl-icon         { color: var(--pl-faint); }
.pl-level .pl-level__name  { color: var(--pl-muted); }
.pl-level .pl-level__price { color: var(--pl-faint); }

.pl-level:hover { border-color: var(--pl-gold-40); }

.pl-level.is-active {
	background: var(--pl-gold-08);
	border-color: var(--pl-gold);
	box-shadow: 0 0 0 1px var(--pl-gold-25);
}

.pl-level.is-active .pl-icon         { color: var(--pl-gold); }
.pl-level.is-active .pl-level__name  { color: var(--pl-cream); }
.pl-level.is-active .pl-level__price { color: var(--pl-gold); }

.pl-level__name {
	font-family: var(--pl-serif);
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.375;
}

.pl-level__price { font-size: .7rem; }

.pl-level__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--pl-gold);
	color: var(--pl-bg);
}


/* --------------------------------------------------------------------------
   Payment plan options

   Rendered by us via the Add On's pmpropp_plan_html_template filter. Each is a
   LINK to its own canonical URL. The radio is present but hidden - it carries
   the value that gets POSTed, and the server has already checked the right one.
   -------------------------------------------------------------------------- */

.pl-plan { margin: 0 0 12px; }

.pl-plan__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.pl-plan__link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	text-decoration: none;
	background: var(--pl-inset);
	border: 1px solid var(--pl-gold-15);
	border-radius: var(--pl-radius);
	transition: background-color .15s, border-color .15s;
}

.pl-plan__link:hover { border-color: var(--pl-gold-40); }

.pl-plan.is-active .pl-plan__link {
	background: var(--pl-gold-08);
	border-color: var(--pl-gold);
}

/* The radio dot, drawn rather than native. */
.pl-plan__dot {
	position: relative;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border: 2px solid var(--pl-gold-40);
	border-radius: 50%;
}

.pl-plan.is-active .pl-plan__dot { border-color: var(--pl-gold); }

.pl-plan.is-active .pl-plan__dot::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background: var(--pl-gold);
}

.pl-plan__name {
	font-size: .875rem;
	font-weight: 500;
	color: var(--pl-cream);
}

.pl-plan__price {
	font-size: .8rem;
	color: var(--pl-muted);
}

.pl-plan__badge {
	margin-left: auto;
	padding: 2px 8px;
	background: var(--pl-gold);
	border-radius: var(--pl-radius);
	color: var(--pl-bg);
	font-size: .65rem;
	font-weight: 600;
	white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */

body.pl-checkout-page #pmpro_form .pmpro_form_label {
	display: block;
	margin: 0 0 6px;
	font-size: .73rem;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pl-label);
}

body.pl-checkout-page #pmpro_form .pmpro_asterisk { color: var(--pl-gold); margin-left: 4px; }
body.pl-checkout-page #pmpro_form .pmpro_asterisk abbr { text-decoration: none; border: 0; }

body.pl-checkout-page #pmpro_form .pmpro_form_input {
	width: 100%;
	padding: 10px 14px;
	background: var(--pl-input);
	border: 1px solid var(--pl-gold-15);
	border-radius: var(--pl-radius);
	color: var(--pl-cream);
	font-family: var(--pl-sans);
	font-size: .8125rem;
	line-height: 1.5;
	transition: border-color .2s;
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 13px 13px;
}

body.pl-checkout-page #pmpro_form .pmpro_form_input::placeholder { color: var(--pl-faint); }

body.pl-checkout-page #pmpro_form .pmpro_form_input:focus {
	outline: none;
	border-color: var(--pl-gold);
}

/* Checkboxes must not inherit the full-width input rule. */
body.pl-checkout-page #pmpro_form .pmpro_form_input-checkbox {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	accent-color: var(--pl-gold);
}

body.pl-checkout-page #pmpro_form select.pmpro_form_input {
	appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238da0bc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 14px center;
}

body.pl-checkout-page #pmpro_form select.pmpro_form_input option { background: var(--pl-input); }

body.pl-checkout-page #pmpro_form .pmpro_form_field { margin-bottom: 16px; }

/* Two-up rows. Address lines span the full width, as in the mock. */
@media (min-width: 768px) {
	body.pl-checkout-page #pmpro_form .pmpro_cols-2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
	body.pl-checkout-page #pmpro_form .pmpro_form_field-baddress1,
	body.pl-checkout-page #pmpro_form .pmpro_form_field-baddress2 {
		grid-column: 1 / -1;
	}
}


/* ---- Leading icons, keyed to PMPro's real field names ---- */

body.pl-checkout-page #pmpro_form input[name="username"],
body.pl-checkout-page #pmpro_form input[name="first_name"],
body.pl-checkout-page #pmpro_form input[name="last_name"],
body.pl-checkout-page #pmpro_form input[name="bfirstname"],
body.pl-checkout-page #pmpro_form input[name="blastname"] {
	padding-left: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%234a5f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

body.pl-checkout-page #pmpro_form input[name="password"],
body.pl-checkout-page #pmpro_form input[name="password2"] {
	padding-left: 36px;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%234a5f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

body.pl-checkout-page #pmpro_form input[name="bemail"],
body.pl-checkout-page #pmpro_form input[name="bconfirmemail"] {
	padding-left: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%234a5f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

body.pl-checkout-page #pmpro_form input[name="baddress1"],
body.pl-checkout-page #pmpro_form input[name="baddress2"] {
	padding-left: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%234a5f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

body.pl-checkout-page #pmpro_form input[name="bphone"] {
	padding-left: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%234a5f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}


/* ---- Password reveal ------------------------------------------------------
   PMPro renders a real button after the input:

     <div class="pmpro_form_field pmpro_form_field-password">
       <label>…</label>
       <input type="password" …>
       <div class="pmpro_form_field-password-toggle">
         <button class="pmpro_btn pmpro_btn-plain pmpro_btn-password-toggle">
           <span class="pmpro_icon pmpro_icon-eye"><svg …></span>
           <span class="pmpro_form_field-password-toggle-state">Show Password</span>
         </button>
       </div>
     </div>

   We strip the button chrome, hide the text label, and float the eye icon
   inside the right edge of the field. The SVG is stroked with
   var(--pmpro--color--accent) as a presentation attribute - a CSS `stroke`
   property overrides it. --------------------------------------------------- */

body.pl-checkout-page #pmpro_form .pmpro_form_field-password {
	position: relative;
}

body.pl-checkout-page #pmpro_form .pmpro_form_field-password-toggle {
	position: absolute;
	right: 12px;
	bottom: 9px;
	margin: 0;
	line-height: 0;
}

body.pl-checkout-page #pmpro_form .pmpro_btn-password-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--pl-muted);
	cursor: pointer;
	transition: color .2s;
}

body.pl-checkout-page #pmpro_form .pmpro_btn-password-toggle:hover,
body.pl-checkout-page #pmpro_form .pmpro_btn-password-toggle:focus-visible {
	background: none;
	color: var(--pl-gold);
}

body.pl-checkout-page #pmpro_form .pmpro_icon-eye svg {
	display: block;
	width: 16px;
	height: 16px;
	stroke: currentColor;   /* beats the inline presentation attribute */
}

/* The "Show Password" / "Hide Password" text: kept for screen readers only. */
body.pl-checkout-page #pmpro_form .pmpro_form_field-password-toggle-state {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* "Already have an account? Log in here" strip. */
body.pl-checkout-page #pmpro_form .pmpro_card_actions {
	padding: 12px;
	margin-top: 20px;
	background: var(--pl-inset);
	border: 1px solid var(--pl-gold-12);
	border-radius: var(--pl-radius);
	font-size: .8rem;
	color: var(--pl-muted);
}


/* --------------------------------------------------------------------------
   Automatic renewals
   -------------------------------------------------------------------------- */

body.pl-checkout-page #pmpro_autorenewal_checkbox .pmpro_form_field-checkbox { margin: 0; }

body.pl-checkout-page #pmpro_autorenewal_checkbox .pmpro_form_label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pl-cream);
	cursor: pointer;
}


/* --------------------------------------------------------------------------
   Submit
   -------------------------------------------------------------------------- */

body.pl-checkout-page #pmpro_submit_span { display: block; }

body.pl-checkout-page #pmpro_btn-submit,
body.pl-checkout-page .pmpro_btn-submit-checkout {
	display: block;
	width: 100%;
	padding: 16px 24px;
	background-color: var(--pl-gold);
	border: 0;
	border-radius: var(--pl-radius);
	color: var(--pl-bg);
	font-family: var(--pl-sans);
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .025em;
	cursor: pointer;
	transition: background-color .2s;

	/* Shield-check left of the centred label. It's an <input>, so no
	   pseudo-element is possible. Nudge the offset if you change the text. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230c1628' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: calc(50% - 92px) center;
	text-indent: 24px;
}

body.pl-checkout-page #pmpro_btn-submit:hover { background-color: var(--pl-gold-hi); }

body.pl-checkout-page #pmpro_processing_message {
	margin-top: 12px;
	text-align: center;
	font-size: .8rem;
	color: var(--pl-muted);
}


/* --------------------------------------------------------------------------
   Order summary
   -------------------------------------------------------------------------- */

.pl-summary__card {
	background: var(--pl-card);
	border: 1px solid rgba(201, 169, 110, .2);
	border-radius: var(--pl-radius);
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}

.pl-summary__rule {
	height: 2px;
	background: linear-gradient(90deg, var(--pl-gold), var(--pl-gold-10));
}

.pl-summary__body { padding: 28px; }

.pl-eyebrow {
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.pl-eyebrow--gold {
	font-size: .65rem;
	font-weight: 700;
	color: var(--pl-gold);
}

.pl-eyebrow--faint {
	margin: 0 0 12px;
	font-size: .62rem;
	font-weight: 600;
	color: var(--pl-faint);
}

.pl-summary__level {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	margin: 0 0 20px;
	background: var(--pl-inset-2);
	border: 1px solid var(--pl-gold-19);
	border-radius: var(--pl-radius);
}

.pl-summary__level-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	height: 36px;
	border-radius: var(--pl-radius);
	background: var(--pl-gold-08);
	border: 1px solid var(--pl-gold-25);
	color: var(--pl-gold);
}

.pl-summary__level-text { display: block; }

.pl-summary__level-name {
	display: block;
	font-family: var(--pl-serif);
	font-size: .95rem;
	font-weight: 500;
	color: var(--pl-cream);
}

.pl-summary__level-sub {
	display: block;
	font-size: .75rem;
	color: var(--pl-muted);
}

.pl-summary__rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.pl-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: .8rem;
}

.pl-summary__row dt { margin: 0; color: var(--pl-muted); }
.pl-summary__row dd { margin: 0; color: var(--pl-cream); text-align: right; }

.pl-summary__accent { color: var(--pl-emerald) !important; }

.pl-divider {
	height: 1px;
	margin: 20px 0;
	background: var(--pl-gold-10);
}

.pl-summary__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
}

.pl-summary__total-label {
	font-size: .875rem;
	font-weight: 600;
	color: var(--pl-label);
}

.pl-summary__total-value {
	font-family: var(--pl-serif);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--pl-gold);
	line-height: 1;
}

.pl-summary__benefits {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pl-summary__benefits li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: .75rem;
	color: var(--pl-muted);
}

.pl-summary__benefits .pl-icon { flex: 0 0 11px; color: var(--pl-gold); }

.pl-summary__ssl {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: .7rem;
	color: var(--pl-faint);
}

.pl-summary__ssl .pl-icon { flex: 0 0 13px; color: var(--pl-gold); }

.pl-summary__fine {
	margin: 16px 0 0;
	text-align: center;
	font-size: .68rem;
	line-height: 1.6;
	color: var(--pl-faint);
}

.pl-summary__fine a { text-decoration: underline; text-underline-offset: 2px; }

body.pl-checkout-page a { color: var(--pl-gold); transition: color .2s; }
body.pl-checkout-page a:hover { color: var(--pl-gold-hi); }


/* --------------------------------------------------------------------------
   Messages + select2 (both are enqueued on this page)
   -------------------------------------------------------------------------- */

body.pl-checkout-page .pmpro_message {
	padding: 12px 16px;
	margin: 0 0 20px;
	border-radius: var(--pl-radius);
	background: rgba(239, 68, 68, .1);
	border: 1px solid rgba(239, 68, 68, .35);
	color: #fca5a5;
	font-size: .8rem;
}

body.pl-checkout-page .select2-container--default .select2-selection--single {
	height: auto;
	padding: 10px 14px;
	background: var(--pl-input);
	border: 1px solid var(--pl-gold-15);
	border-radius: var(--pl-radius);
}

body.pl-checkout-page .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--pl-cream);
	font-size: .8125rem;
	line-height: 1.5;
}

.select2-dropdown {
	background: var(--pl-input);
	border-color: var(--pl-gold-15);
	color: var(--pl-cream);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--pl-gold);
	color: var(--pl-bg);
}


/* --------------------------------------------------------------------------
   Radio reset + native-radio fallback

   .pmpro_form_input is a full-width text-field rule. Radios must not inherit
   it, or they render as a stretched bar that never appears to fill.

   If the pmpropp_plan_html_template filter is applying, the radios are hidden
   and .pl-plan__dot is what you see. If it is NOT applying, these rules make
   the Add On's own native radios look correct instead.
   -------------------------------------------------------------------------- */

body.pl-checkout-page #pmpro_form .pmpro_form_input-radio {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	padding: 0;
	margin: 0 12px 0 0;
	background: none;
	border: 0;
	appearance: auto;
	accent-color: var(--pl-gold);
	vertical-align: middle;
}

/* Fallback: style the Add On's own radio rows as option cards. */
body.pl-checkout-page #pmpropp_payment_plans .pmpro_form_field-radio-item {
	display: flex;
	align-items: center;
	padding: 16px;
	margin: 0 0 12px;
	background: var(--pl-inset);
	border: 1px solid var(--pl-gold-15);
	border-radius: var(--pl-radius);
}

body.pl-checkout-page #pmpropp_payment_plans .pmpro_form_field-radio-item:has( input:checked ) {
	background: var(--pl-gold-08);
	border-color: var(--pl-gold);
}

body.pl-checkout-page #pmpropp_payment_plans .pmpro_form_label {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	margin: 0;
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pl-cream);
	cursor: pointer;
}

body.pl-checkout-page #pmpropp_payment_plans .pmpro_form_label strong {
	font-weight: 400;
	color: var(--pl-muted);
}

/* Our own link-cards win over the fallback when the filter is applying. */
body.pl-checkout-page #pmpropp_payment_plans .pl-plan {
	display: block;
	padding: 0;
	background: none;
	border: 0;
}/* End custom CSS */