/* ============================================================
   ARC Membership Checkout

   Three cards — Account Information, Subscription, Billing Information —
   with a numbered rail on the left and an order summary on the right.
   All the cards in a row are the same height.

   .arc-mc-enhanced is added by JavaScript once the form is found, and
   .arc-mc-grid only once every column was located where expected.
   Everything is scoped to one or the other, so without JavaScript the
   checkout renders as PMPro's stock form, in full, and still submits.
   ============================================================ */

.pmpro_form_field-password-toggle
{
    display: none!important;
}

.arc-mc-enhanced {
	--arc-accent: #B9151C;
	--arc-accent-hover: #8E1016;
	--arc-text: #0C1014;
	--arc-text-muted: #6B7280;
	--arc-placeholder: #E5E7E9;
	--arc-border: #E5E7E9;
	--arc-border-strong: #C4C4C4;
	--arc-bg: #F2F4F7;
	--arc-tint: #FDF3F3;
	--arc-radius: 8px;

	max-width: 1234px;
	margin-left: auto;
	margin-right: auto;
	font-family: 'avenir-next-lt-pro', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--arc-text);
}

.arc-mc-enhanced *,
.arc-mc-enhanced *::before,
.arc-mc-enhanced *::after {
	box-sizing: border-box;
}

/* ---------------- Grid ----------------
   Column placement itself is set inline by the script, per element, so
   these values only have to describe the tracks. */

.arc-mc-grid {
	display: grid;
	grid-template-columns: 170px repeat(4, minmax(0, 311px));
	justify-content: start;
	align-items: stretch;
	gap: 20px;

	/* 170 rail + 4 x 311 columns + 4 x 22 gaps. Without this the form inherits
	   the 1234px max-width above, the tracks have nowhere to go, and all four
	   columns silently shrink to 244px — which is what a fixed track width in a
	   too-narrow container always does. */
	max-width: 1502px;
}

/* ---------------- Fields ----------------
   PMPro and some themes lay fields out in a grid or with floats.
   Everything below forces one field per row inside each column.
   !important is deliberate: it overrides both PMPro core and the theme. */

.arc-mc-enhanced .pmpro_form_fields,
.arc-mc-enhanced .pmpro_form_fields-checkout,
.arc-mc-enhanced .pmpro_card_content {
	display: block !important;
	grid-template-columns: none !important;
	float: none !important;
}

.arc-mc-enhanced .pmpro_form_field,
.arc-mc-enhanced .pmpro_form_field-text,
.arc-mc-enhanced .pmpro_form_field-select,
.arc-mc-enhanced .pmpro_form_field-textarea,
.arc-mc-enhanced .pmpro_form_field-password,
.arc-mc-enhanced .pmpro_form_field-checkbox,
.arc-mc-enhanced .pmpro_form_field-checkbox_grouped {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
	margin: 0 0 20px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.arc-mc-enhanced .pmpro_form_label,
.arc-mc-enhanced .pmpro_form_field > label {
	display: block;
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 10px;
	color: var(--arc-text);
}

.arc-mc-enhanced input[type="text"],
.arc-mc-enhanced input[type="email"],
.arc-mc-enhanced input[type="password"],
.arc-mc-enhanced input[type="tel"],
.arc-mc-enhanced input[type="number"],
.arc-mc-enhanced select,
.arc-mc-enhanced textarea.pmpro_form_input {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	padding: 8px 10px;
	border: 1px solid var(--arc-border);
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	background: #fff;
	color: var(--arc-text);
}

.arc-mc-enhanced input::placeholder,
.arc-mc-enhanced textarea::placeholder {
	color: var(--arc-placeholder);
}

.arc-mc-enhanced select.pmpro_form_input-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 15 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239AA3AA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 6px center;
	padding-right: 32px;
	color: var(--arc-text);
    display: block;
	width: 100% !important;
	max-width: 100% !important;
	padding: 8px 10px;
	border: 1px solid var(--arc-border);
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	color: var(--arc-text);
}

.arc-mc-enhanced textarea {
	min-height: 96px;
	resize: vertical;
}

.arc-mc-enhanced input:focus,
.arc-mc-enhanced select:focus,
.arc-mc-enhanced textarea:focus {
	outline: none;
	border-color: var(--arc-accent);
	box-shadow: 0 0 0 3px rgba(185, 21, 28, .08);
}

/* The username is derived from the email by ARC_MC_Signup::supply_username().
   Hidden rather than removed: PMPro still needs the value posted, and a
   member who lands here with JavaScript disabled must still submit one. */
.arc-mc-enhanced .pmpro_form_field-username {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	margin: 0 !important;
}

/* Account Information field order is set by orderAccountFields() in
   checkout.js, which moves the nodes. CSS order was tried first and does not
   work here: PMPro does not put every one of these fields in the same flex
   parent, and an order property on a child of a non-flex box is ignored. */

/* PMPro's two-up row would put Expiration Date and CVC side by side in a 311px
   column. One per row, as the design has them. */
.arc-mc-grid .pmpro_cols-2 {
	display: block !important;
	grid-template-columns: none !important;
}

/* The expiry month and year are two selects. Side by side they read as the
   single MM / YY control the design shows; stacked they read as two questions. */
.arc-mc-enhanced .pmpro_form_fields-inline {
	display: flex;
	gap: 8px;
}

.arc-mc-enhanced .pmpro_form_fields-inline > * {
	flex: 1 1 0;
	min-width: 0;
}


.pmpro_form_fields-description
{
    display: none!important;
}

/* ---------------- Section cards ---------------- */

.arc-mc-enhanced .arc-mc-section,
.arc-mc-enhanced .pmpro_form_fieldset {
	display: block;
	width: 100%;
	margin: 0 0 22px;
	padding: 0;
	border: 0;

	/* Browsers give <fieldset> a UA default of min-width: min-content, and it
	   is not overridden by width or max-width — only by setting min-width
	   explicitly. As a grid item that means the fieldset refuses to shrink to
	   its track: the Research Profile column measured 353px inside a 307px
	   column and overlapped the one beside it. Every other column looked fine
	   only because its longest word happened to fit. */
	min-width: 0;
}

/* The same, for anything nested that could push a column wide. A long
   uninterrupted string in a label — an email address, a URL — has no break
   opportunity, so without this it sets the column's min-content width. */
.arc-mc-grid .arc-mc-section label,
.arc-mc-grid .pmpro_form_fieldset label,
.arc-mc-grid .arc-mc-section .pmpro_form_field,
.arc-mc-grid .pmpro_form_fieldset .pmpro_form_field {
	min-width: 0;
	overflow-wrap: anywhere;
}

.arc-mc-grid .arc-mc-section {
	margin: 0;
	height: 100%;
}

.arc-mc-enhanced .pmpro_card {
	border: 2px solid #E5E7E9;
	border-radius: 0;
	background: #fff;
	padding: 40px 20px;
	height: 100%;
    margin: 0!important;
}

.arc-mc-enhanced .pmpro_card .pmpro_card_content
{
    padding: 0!important;
}

.arc-mc-enhanced .pmpro_card_title {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    font-size: 16px;
    line-height: 12px;
    font-weight: 400;
    color: var(--arc-text);
}

.arc-mc-enhanced .pmpro_form_hint,
.arc-mc-enhanced .lite {
	display: block;
	margin-top: 16px;
	font-size: 12px;
	line-height: 17px;
	color: #0C1116;
    font-weight: 500;
}

/* ---------------- Card brands ---------------- */

.arc-mc-brands {
	display: flex;
	align-items: center;
	gap: 5px;
	float: right;
	margin-top: -26px;
}

.arc-mc-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 18px;
	border: 1px solid var(--arc-border);
	border-radius: 3px;
	background: #fff;
	font-size: 7px;
	font-weight: 800;
	letter-spacing: .02em;
}

.arc-mc-brand--visa { color: #1A1F71; }
.arc-mc-brand--amex { color: #1F72CD; font-size: 6px; }

.arc-mc-brand--mc { gap: 0; }

.arc-mc-brand--mc i {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #EB001B;
}

.arc-mc-brand--mc i + i {
	background: #F79E1B;
	margin-left: -3px;
}

/* ---------------- Billing consolidation ---------------- */

/* The business name fieldset is moved into the payment card by JS; strip the
   card chrome it inherits so it reads as one more field, not a nested panel. */
.arc-mc-inline-fieldset,
.arc-mc-inline-fieldset .pmpro_card {
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
	height: auto !important;
}

.arc-mc-inline-fieldset .pmpro_card_title {
	display: none;
}

/* Billing address fields hidden from the member. Kept in sync with
   ARC_MC_Compat::relax_required_billing_fields() — if you unhide one here,
   remove it from that list too, or checkout will fail validation on a field
   nobody can see. */
.arc-mc-enhanced .pmpro_form_field-bfirstname,
.arc-mc-enhanced .pmpro_form_field-blastname,
.arc-mc-enhanced .pmpro_form_field-baddress1,
.arc-mc-enhanced .pmpro_form_field-baddress2,
.arc-mc-enhanced .pmpro_form_field-bcity,
.arc-mc-enhanced .pmpro_form_field-bstate,
.arc-mc-enhanced .pmpro_form_field-bcountry,
.arc-mc-enhanced .pmpro_form_field-bphone {
	display: none !important;
}

/* Only collapse the billing address card once JS has confirmed the ZIP field
   was successfully moved out of it. Hiding it with the ZIP still inside would
   leave a required field the member cannot fill — and PMPro answers a missing
   required billing field by creating the WordPress user first and failing
   afterwards, which strands a real account with no membership. */
.arc-mc-billing-merged #pmpro_billing_address_fields {
	display: none !important;
}

/* The summary column carries the level and the price. PMPro's pricing card is
   normally removed server-side by ARC_MC_Signup::hide_pricing_fields(); this
   keeps it out of the grid in the discount-code case where it still renders. */
.arc-mc-grid #pmpro_pricing_fields {
	display: none !important;
}

/* ---------------- Step rail ---------------- */

.arc-mc-rail-list {
	list-style: none;
	margin: 0;
	padding: 0;
    padding-top: 24px;
}

.arc-mc-rail-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 40px;
}

.arc-mc-rail-step:last-child {
	padding-bottom: 0;
}

/* The connector, drawn from each dot down to the next. */
/*.arc-mc-rail-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 40px;
	bottom: 12px;
	width: 1px;
	background: var(--arc-border-strong);
}*/
.arc-mc-rail-step::before {
    content: "";
    position: absolute;
    right: -20px;
    top: 30px;
    bottom: 12px;
    width: 100%;
    height: 1px;
    background: var(--arc-border-strong);
}
.arc-mc-rail-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
    position: relative;
	width: 60px;
    height: 60px;
	border: 1px solid var(--arc-border-strong);
	border-radius: 50%;
	background: #fff;
	font-size: 24px;
	font-weight: 700;
	color: var(--arc-text-muted);    
    font-family: 'itc-avant-garde-gothic-pro', sans-serif !important;
}

.arc-mc-rail-step.is-current .arc-mc-rail-dot {
	background: var(--arc-accent);
	border-color: var(--arc-accent);
	color: #fff;
}

/* A step already passed: a red ring and a red line, the number still red. */
.arc-mc-rail-step.is-done .arc-mc-rail-dot {
	border-color: var(--arc-accent);
	color: var(--arc-accent);
}

.arc-mc-rail-step.is-done::before {
	background: var(--arc-accent);
}

.arc-mc-rail-dot,
.arc-mc-rail-step::before {
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.arc-mc-rail-label {
	font-size: 20px;
	line-height: 22px;
	font-weight: 500;
	color: #0C1014;
	max-width: 154px;
}

/* ---------------- Summary ---------------- */

.arc-mc-summary {
	padding: 40px 20px;
	border: 1px solid rgba(176, 19, 20, .30);
	border-radius: 0;
	background: rgba(176, 19, 20, .20);
    height: 100%;
}

.arc-mc-summary-eyebrow {
	margin: 0 0 18px!important;
	font-size: 16px;
	font-weight: 700;
	line-height: 12px;
	color: #C21A1C;
    font-family: 'itc-avant-garde-gothic-pro', sans-serif !important;
}

.arc-mc-summary-level {
	margin: 0 0 28px!important;
	font-size: 16px;
	font-weight: 700;
	line-height: 12px;
	color: #0C1014;
    font-family: 'itc-avant-garde-gothic-pro', sans-serif !important;
}

.arc-mc-summary-price {
	margin: 0 0 20px!important;
	line-height: 18px;
    font-family: 'itc-avant-garde-gothic-pro', sans-serif !important;
}

.arc-mc-summary-amount {
	font-size: 24px;
	font-weight: 700;
	color: #0C1014;
}

.arc-mc-summary-period {
	font-size: 16px;
	color: #0C1014;
}

.arc-mc-summary-benefits {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
    gap: 18px;
    display: flex;
    flex-direction: column;
}

.arc-mc-summary-benefits li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	line-height: 18px;
	color: #0C1116;
    font-family: 'Inter';
}

.arc-mc-summary-benefits svg {
	flex: 0 0 auto;
	margin-top: 1px;
}

.arc-mc-summary-total {
	padding-top: 30px;
	border-top: 2px solid rgba(194, 26, 28, .30);
}

.arc-mc-summary-total-label {
	margin: 0 0 20px!important;
	font-size: 16px;
    line-height: 12px;
	font-weight: 700;
	color: #0C1014;
    font-family: 'itc-avant-garde-gothic-pro', sans-serif !important;
}

.arc-mc-summary-total-value {
	margin: 0 0 20px!important;
	font-size: 34px;
	font-weight: 700;
	line-height: 41px;
	color: var(--arc-text);
    font-family: 'Inter';
}

.arc-mc-summary-currency {
	font-size: 14px;
	font-weight: 400;
	font-family: 'Inter';
    text-transform: uppercase;
    color: var(--arc-text);
}

.arc-mc-summary-note {
	margin: 0;
	font-size: 14px;
    line-height: 12px;
	color: var(--arc-text);	
    font-family: 'Inter';
}

/* ---------------- Checkout messages ----------------
   PMPro's error box is a direct child of the form, so the grid places it full
   width. Given the form starts a long way down this page, the message also
   needs to be loud enough to find once scrolled to. */

/* PMPro renders the SAME message twice: #pmpro_message at the top of the form
   with role="alert", and #pmpro_message_bottom again just above the submit
   button. On a short single-column form only one is on screen at a time; on
   this grid both are, so every error was read twice. The top one is kept — it
   carries role="alert", so it is the one screen readers announce, and it is
   the one checkout.js scrolls to. */
.arc-mc-grid #pmpro_message_bottom {
	display: none !important;
}

.arc-mc-grid #pmpro_message,
.arc-mc-grid #pmpro_message_bottom {
	grid-column: 1 / -1 !important;
	margin: 40px 0 0px;
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 14.5px;
	line-height: 1.55;
}

.arc-mc-grid #pmpro_message.pmpro_error,
.arc-mc-grid #pmpro_message_bottom.pmpro_error {
	border: 1px solid rgba(185, 21, 28, .35);
	border-left: 4px solid var(--arc-accent);
	background: #FDF3F3;
	color: #8A2424;
	outline: none;
}

/* ---------------- Terms of service ---------------- */

.arc-mc-enhanced #pmpro_tos_fields {
	margin: 60px auto 0;
	padding: 0;
	border: 0;
	background: none;
	max-width: 645px;
	text-align: center;
}

.arc-mc-enhanced #pmpro_tos_fields .pmpro_card,
.arc-mc-enhanced #pmpro_tos_fields .pmpro_card_content {
	border: 0;
	padding: 0;
	background: none;
	height: auto;
}

.arc-mc-enhanced #pmpro_tos_fields .pmpro_card_title {
	display: none;
}

.arc-mc-enhanced #pmpro_tos_fields label {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.55;
	text-align: center;
	color: var(--arc-text);
}

.arc-mc-enhanced #pmpro_tos_fields input[type="checkbox"] {
	width: auto !important;
	margin-top: 3px;
	flex: 0 0 auto;
	accent-color: #B9151C;
}

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

.arc-mc-enhanced .pmpro_form_submit,
.arc-mc-enhanced .pmpro_submit,
.arc-mc-enhanced #pmpro_submit_span {
	display: block;
	width: 100%;
	margin-top: 0px;
	text-align: center;
}

.arc-mc-enhanced #pmpro_btn-submit {
	position: relative;
	min-width: 260px;
	padding: 6px 60px;
	border: 0;
	border-radius: 5px;
	background: var(--arc-accent);
	color: #fff;
	font-family: 'itc-avant-garde-gothic-pro', sans-serif !important;
	font-size: 18px;
	font-weight: 700;
    line-height: 34px;
	cursor: pointer;
}

/* The arrow is a background image rather than markup, because PMPro's submit
   is an <input> on some gateways and an <input> cannot contain a child. */
.arc-mc-enhanced #pmpro_btn-submit.arc-mc-submit-btn {
	/*padding-right: 52px;*/
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='12' viewBox='0 0 15 12' fill='none'%3E%3Cpath d='M0.5 5.75L14.33 5.75' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.08 0.5L14.33 5.75L9.08 11' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 26px center;
}

.arc-mc-enhanced #pmpro_btn-submit:hover,
.arc-mc-enhanced #pmpro_btn-submit:focus-visible {
	background-color: var(--arc-accent-hover);
}

.arc-mc-enhanced .pmpro_actions_nav {
	text-align: center;
	font-size: 13px;
}


.pmpro_form_field.pmpro_form_field-checkbox .arc-consent-label
{
    color: #0C1014;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    font-family: 'avenir-next-lt-pro', -apple-system, BlinkMacSystemFont, sans-serif;
}


/* ---------------- Responsive ----------------

   wide      rail | account | subscription | billing | summary, in one row
   medium    the rail across the top (the line now joins one circle to the
             next), then two columns: account and subscription, billing and
             summary
   small     one column, in order: account, subscription, billing, summary

   Placement on the wide grid is set inline by the script; below 1280px the
   inline values are overridden here (hence !important) and the order is set
   with `order`, since the pieces are not in that order in the page. */

@media (max-width: 1440px) {
	.arc-mc-grid {
		grid-template-columns: 170px repeat(4, minmax(0, 1fr));
		justify-content: stretch;
	}
}

@media (max-width: 1280px) {
	.arc-mc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.arc-mc-grid > * {
		grid-column: auto !important;
		grid-row: auto !important;
		order: 10;
	}

	.arc-mc-grid > #pmpro_message { order: -2; }
	.arc-mc-grid > .arc-mc-rail { order: -1; grid-column: 1 / -1 !important; }
	.arc-mc-grid > .arc-mc-section--account { order: 1; }
	.arc-mc-grid > .arc-mc-section--plan { order: 2; }
	.arc-mc-grid > .arc-mc-section--billing { order: 3; }
	.arc-mc-grid > .arc-mc-summary { order: 4; }
	.arc-mc-grid > .arc-mc-login-link { grid-column: 1 / -1 !important; }

	/* The rail lies in a row. */
	.arc-mc-rail-list {
		display: flex;
		padding-top: 0;
	}

	.arc-mc-rail-step {
		flex: 1 1 0;
		min-width: 0;
		padding-bottom: 0;
	}

	.arc-mc-rail-step:last-child {
		flex: 0 0 auto;
	}

	.arc-mc-rail-dot {
		width: 46px;
		height: 46px;
		font-size: 18px;
	}

	/* From the right edge of this circle to the left edge of the next. */
	.arc-mc-rail-step::before {
		left: 60px;
		right: 14px;
		top: 23px;
		bottom: auto;
		width: auto;
	}

	.arc-mc-rail-step:last-child::before {
		display: none;
	}

	.arc-mc-rail-label {
		max-width: none;
		font-size: 16px;
		line-height: 20px;
	}
}

@media (max-width: 720px) {
	.arc-mc-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.arc-mc-rail-dot {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}

	.arc-mc-rail-step::before {
		left: 52px;
		top: 20px;
	}

	.arc-mc-rail-label {
		font-size: 12px;
		line-height: 15px;
	}

	.arc-mc-enhanced .pmpro_card {
		padding: 18px;
	}

	.arc-mc-summary {
		padding: 18px;
	}

	.arc-mc-summary-total-value {
		font-size: 30px;
	}
}

@media (max-width: 340px) {
	.arc-mc-enhanced .arc-mc-plan {
		grid-template-columns: 22px minmax(0, 1fr);
	}

	.arc-mc-enhanced .arc-mc-plan-price {
		grid-column: 2;
		text-align: left;
	}

	.arc-mc-enhanced .pmpro_form_fields-inline {
		flex-direction: column;
	}
}
/* ---------------- The log-in alternative ----------------
   New class, new rules: the node is PMPro's .pmpro_card_actions, moved out of
   the Account fieldset and below the submit button by checkout.js. Nothing that
   already styles .pmpro_card_actions inside a card is touched. */

.arc-mc-grid .arc-mc-login-link {
	grid-column: 1 / -1;
	margin: 0 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
    color: #0C1014;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    font-family: 'avenir-next-lt-pro', -apple-system, BlinkMacSystemFont, sans-serif;
}

.arc-mc-grid .arc-mc-login-link a {
	color: var(--arc-accent, #B9151C);
	font-weight: 600;
	text-decoration: underline;
}
/* ---------------- Field-level validation messages ----------------
   New classes only. Nothing above is altered; these appear beside a
   field the browser has already flagged, and the server check is what
   actually decides. */

.arc-mc-field-error {
	margin: 6px 0 0;
	font-family: 'avenir-next-lt-pro', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
	color: #B9151C;
}

.arc-mc-field-error[hidden] { display: none; }

.arc-mc-enhanced input.arc-mc-invalid,
.arc-mc-enhanced input.arc-mc-invalid:focus {
	border-color: #B9151C;
	box-shadow: 0 0 0 1px rgba(185, 21, 28, .18);
}
/* ---------------- Plan switcher ---------------- */

.arc-mc-plans {
	margin: 0 0 24px;
	padding: 0 0 24px;
	border-bottom: 2px solid rgba(194, 26, 28, .30);
}

.arc-mc-plans-label {
	display: block;
	margin: 0 0 10px !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 16px;
	color: #0C1014;
	font-family: 'itc-avant-garde-gothic-pro', sans-serif !important;
}

.arc-mc-plans-field {
	position: relative;
}

.arc-mc-plans-field::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid #C21A1C;
	border-bottom: 2px solid #C21A1C;
	transform: rotate(45deg);
	pointer-events: none;
}

.arc-mc-plans .arc-mc-plans-select {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 40px 0 14px;
	border: 1px solid rgba(194, 26, 28, .55);
	border-radius: 0;
	background: #fff;
	color: #0C1014;
	font: 600 14px/20px 'Inter', sans-serif;
	text-overflow: ellipsis;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.arc-mc-plans .arc-mc-plans-select:hover,
.arc-mc-plans .arc-mc-plans-select:focus {
	border-color: #C21A1C;
	outline: none;
	box-shadow: 0 0 0 2px rgba(194, 26, 28, .25);
}

.arc-mc-plans .arc-mc-plans-select:disabled {
	opacity: .6;
	cursor: progress;
}

.arc-mc-plans-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	font: 14px/20px 'Inter', sans-serif;
}

.arc-mc-plans-list a {
	color: #C21A1C;
}

/* ---------------- Signed-in member panel (top of the summary) ---------------- */

.arc-mc-signedin {
	margin: 0 0 22px;
	padding: 14px 16px;
	border: 1px solid rgba(194, 26, 28, .30);
	border-radius: 6px;
	background: rgba(255, 255, 255, .65);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	line-height: 20px;
	color: var(--arc-text);
}

.arc-mc-signedin p {
	margin: 0 0 6px !important;
}

.arc-mc-signedin p:last-child {
	margin-bottom: 0 !important;
}

.arc-mc-signedin strong {
	font-weight: 700;
	word-break: break-word;
}

.arc-mc-signedin-note {
	color: var(--arc-text-muted);
}

.arc-mc-signedin-out a {
	color: #C21A1C;
	font-weight: 600;
	text-decoration: underline;
}

/* ---------------- Step 2: the plan cards ---------------- */

.arc-mc-plan-heading {
	margin: 0 0 14px !important;
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	color: var(--arc-text);
}

.arc-mc-plans-cards {
	margin: 0;
}

.arc-mc-enhanced a.arc-mc-plan {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	padding: 16px 14px;
	border: 1px solid var(--arc-border-strong);
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	color: var(--arc-text);
	transition: border-color .15s ease, background .15s ease;
}

.arc-mc-enhanced a.arc-mc-plan:hover {
	border-color: var(--arc-accent);
}

.arc-mc-enhanced a.arc-mc-plan:focus-visible {
	outline: 2px solid var(--arc-text);
	outline-offset: 2px;
}

.arc-mc-enhanced a.arc-mc-plan.is-current {
	border-color: var(--arc-accent);
	background: var(--arc-tint);
	box-shadow: 0 0 0 1px var(--arc-accent);
	cursor: default;
}

.arc-mc-plan-radio {
	width: 20px;
	height: 20px;
	border: 2px solid #B8BEC6;
	border-radius: 50%;
	background: #fff;
}

.arc-mc-plan.is-current .arc-mc-plan-radio {
	border-color: var(--arc-accent);
	background: radial-gradient(circle, var(--arc-accent) 0 45%, #fff 50%);
}

.arc-mc-plan-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

.arc-mc-plan-name {
	font-family: 'itc-avant-garde-gothic-pro', sans-serif !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	color: var(--arc-text);
}

.arc-mc-plan-sub {
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: var(--arc-text-muted);
}

.arc-mc-plan-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-family: 'Inter', sans-serif;
	text-align: right;
}

.arc-mc-plan-price b {
	font-size: 22px;
	font-weight: 700;
	line-height: 24px;
	color: var(--arc-text);
}

.arc-mc-plan-price small {
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: var(--arc-text-muted);
}

.arc-mc-plan-benefits {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.arc-mc-plan-benefits li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #0C1116;
}

.arc-mc-plan-benefits svg {
	flex: 0 0 auto;
}

/* ---------------- Step 3: the billing card ----------------
   The billing sentence, the consent checkbox and the submit button are moved
   in by checkout.js (billingExtras), so the card runs from "what you pay" to
   "pay". The card is a column and the button is pushed to its foot, which keeps
   it level with the bottom of the other cards. */

.arc-mc-enhanced .arc-mc-section--billing .pmpro_card {
	display: flex;
	flex-direction: column;
}

.arc-mc-enhanced .arc-mc-billing-body.pmpro_card_content {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
}

.arc-mc-billing-line {
	margin: 0 0 20px !important;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: var(--arc-text);
}

/* Not yet moved (no script): it reads as a plain line above the button. */
.arc-mc-enhanced > .arc-mc-billing-line {
	grid-column: 1 / -1;
}

.arc-mc-enhanced .arc-mc-billing-body #pmpro_tos_fields {
	max-width: none;
	margin: 24px 0 22px;
	text-align: left;
}

.arc-mc-enhanced .arc-mc-billing-body #pmpro_tos_fields label {
	justify-content: flex-start;
	text-align: left;
}

.arc-mc-billing-body .arc-consent-label {
	font-size: 13px !important;
	line-height: 20px !important;
}

.arc-mc-enhanced .arc-mc-billing-body .pmpro_form_submit {
	margin-top: auto;
}

.arc-mc-enhanced .arc-mc-billing-body #pmpro_btn-submit {
	width: 100%;
	min-width: 0;
	padding: 6px 48px 6px 16px;
}

/* Plan switch in flight (no page reload). */
.arc-mc-plan-loading .arc-mc-summary {
	opacity: 0.6;
	transition: opacity 0.15s ease;
}