/* Rise With Teagan — membership checkout (/register/<plan>/)
   ------------------------------------------------------------------
   Modelled on Carlin's book checkout, Figma 1437-4083: stripped header,
   two columns (form left, sticky order summary right), minimal footer.

   The markup is MemberPress's, so the selectors below are its class hooks.
   Every element is a DIRECT CHILD of form#mepr_signup_form, which is what makes
   the two-column grid possible without forking the template.

   Kit globals live on body.elementor-kit-8, NOT :root.                      */

body {
	--rwt-ink: var( --e-global-color-primary, #BC5F50 );
	--rwt-body: var( --e-global-color-text, #3D322B );
	--rwt-line: var( --e-global-color-ec00e88, #F0D5CF );
	--rwt-card: var( --e-global-color-d3c7489, #FFFFFF );
	--rwt-page: var( --e-global-color-secondary, #FFFBF8 );
	--rwt-muted: var( --e-global-color-c2248c7, #887D78 );
	--rwt-field: var( --e-global-color-b97e9cc, #B6B0AD );
}

/* ------------------------------------------------------ page furniture

   The design strips the page back to a logo bar and a one-line footer: at the
   moment someone is entering card details, nav and a newsletter form are exits.
   Hidden rather than rebuilt as separate Elementor templates — same result,
   nothing extra to maintain.

   Those rules now live in landing-chrome.css, shared with the lead magnet
   landing pages so the two treatments cannot drift apart. */

.rwt-checkout .site-main,
.rwt-checkout .page-content {
	background: var( --rwt-page );
	padding-left: 0;
	padding-right: 0;
}

/* ------------------------------------------------------------- heading */

.rwt-checkout__head {
	max-width: 1160px;
	margin: 0 auto;
	padding: 56px 24px 40px;
	text-align: center;
}

/* Doubled/scoped to clear Elementor's `.elementor-kit-8 h1` at (0,1,1). */
.rwt-checkout .rwt-checkout__title {
	margin: 0 0 10px;
	/* Espresso, not terracotta — the design keeps the headline dark here so the
	   terracotta reads as "action" on the section labels and the button. */
	color: var( --rwt-body );
	font-family: var( --e-global-typography-5193019-font-family, "Fraunces" ), serif;
	font-size: var( --e-global-typography-5193019-font-size, 44px );
	line-height: var( --e-global-typography-5193019-line-height, 1.09em );
	letter-spacing: var( --e-global-typography-5193019-letter-spacing, -0.01em );
	font-weight: 400;
}

.rwt-checkout .rwt-checkout__lead {
	margin: 0;
	color: var( --rwt-body );
	font-family: var( --e-global-typography-primary-font-family, "DM Sans" ), sans-serif;
	font-size: 17px;
	line-height: 1.5;
}

/* ----------------------------------------------------- the two columns

   Three tracks: two halves for the form (so First/Last sit side by side) and a
   fixed summary column. Every child defaults to spanning both form halves. */

.rwt-checkout form#mepr_signup_form {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ) 372px;
	column-gap: 20px;
	align-items: start;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px 90px;
}

/* ⚠️ This selector carries an id, so it is (1,1,1). Every per-element override
   below MUST use the same `form#mepr_signup_form > ` prefix or it loses — a
   plain `.rwt-checkout .mepr-transaction-invoice-wrapper` (0,2,0) is weaker and
   left the summary sitting in column 1. */
.rwt-checkout form#mepr_signup_form > * {
	grid-column: 1 / 3;
	min-width: 0;
}

.rwt-checkout .mp-form-row {
	margin: 0 0 18px;
}

.rwt-checkout form#mepr_signup_form > .mp-form-row.mepr_first_name {
	grid-column: 1;
}

.rwt-checkout form#mepr_signup_form > .mp-form-row.mepr_last_name {
	grid-column: 2;
}

/* Hidden helpers MemberPress emits — they would otherwise occupy a grid row
   each and open gaps in the column. */
.rwt-checkout form#mepr_signup_form > input[type="hidden"],
.rwt-checkout .mepr-hidden,
.rwt-checkout .mepr_spacer {
	display: none;
}

/* ------------------------------------------------------- field styling */

.rwt-checkout .mp-form-label label,
.rwt-checkout .mepr-form-label {
	display: block;
	margin-bottom: 7px;
	color: var( --rwt-body );
	font-family: var( --e-global-typography-accent-font-family, "DM Sans" ), sans-serif;
	font-size: 14px;
	font-weight: 500;
}

.rwt-checkout input[type="text"],
.rwt-checkout input[type="email"],
.rwt-checkout input[type="password"],
.rwt-checkout input[type="tel"],
.rwt-checkout select {
	width: 100%;
	padding: 13px 16px;
	background: var( --rwt-card );
	border: 1px solid var( --rwt-line );
	border-radius: 10px;
	color: var( --rwt-body );
	font-family: var( --e-global-typography-primary-font-family, "DM Sans" ), sans-serif;
	font-size: 16px;
}

.rwt-checkout input:focus,
.rwt-checkout select:focus {
	outline: 2px solid var( --rwt-ink );
	outline-offset: 1px;
	border-color: transparent;
}

/* Required asterisks in MemberPress red make an untouched form look like it is
   already in error. */
.rwt-checkout .mepr-field-required-asterisk,
.rwt-checkout .mp-form-label .mepr-required {
	color: var( --rwt-muted );
}

/* -------------------------------------------- injected section labels

   The design groups the form under Contact / Billing details / Payment.
   MemberPress emits no such headings, so they are generated — cheaper and less
   brittle than forking the template to insert three <h2>s. */

.rwt-checkout .rwt-checkout__section {
	margin: 26px 0 14px;
	color: var( --rwt-ink );
	font-family: var( --e-global-typography-9e9beda-font-family, "Fraunces" ), serif;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 400;
}

.rwt-checkout .rwt-checkout__section--contact {
	margin-top: 0;
}

/* Sequence to match the design (Contact -> details -> Payment) rather than
   MemberPress's DOM order, which puts the name fields first. `order` applies to
   grid items, so this needs no DOM moves. */
.rwt-checkout form#mepr_signup_form > .rwt-checkout__section--contact { order: 1; }
.rwt-checkout form#mepr_signup_form > .mp-form-row.mepr_email          { order: 2; }
.rwt-checkout form#mepr_signup_form > .mp-form-row.mepr_password        { order: 3; }
.rwt-checkout form#mepr_signup_form > .mp-form-row.mepr_password_confirm { order: 4; }
.rwt-checkout form#mepr_signup_form > .rwt-checkout__section--details   { order: 5; }
.rwt-checkout form#mepr_signup_form > .mp-form-row.mepr_first_name      { order: 6; }
.rwt-checkout form#mepr_signup_form > .mp-form-row.mepr_last_name       { order: 7; }
.rwt-checkout form#mepr_signup_form > .rwt-checkout__section--payment   { order: 8; }
.rwt-checkout form#mepr_signup_form > .mepr-payment-methods-wrapper     { order: 9; }
.rwt-checkout form#mepr_signup_form > .mp-form-row.mepr_tos             { order: 10; }
.rwt-checkout form#mepr_signup_form > .mp-form-row                      { order: 11; }
.rwt-checkout form#mepr_signup_form > .mepr-transaction-invoice-wrapper { order: 0; }

/* MemberPress prints the billing terms twice: once at the top of the form and
   again inside the SPC invoice. The summary is the right home for it, so the
   top copy goes. */
.rwt-checkout form#mepr_signup_form > .mp-form-row.mepr_price {
	display: none;
}

/* -------------------------------------------------------- payment area */

.rwt-checkout .mepr-payment-methods-wrapper {
	border: 0;
	padding: 0;
	margin-bottom: 18px;
}

.rwt-checkout .mepr-payment-method-desc,
.rwt-checkout .mepr-payment-methods {
	margin: 0;
}

/* Consent rows.

   MemberPress nests these as row > label.mepr-checkbox-field > (input + text),
   so the LABEL is the flex container — putting display:flex on the row did
   nothing, which is why they stayed cramped and misaligned. */
.rwt-checkout .mp-form-row .mepr-checkbox-field {
	/* BLOCK, not flex. The label's children are the checkbox, bare text nodes and
	   an <a> — under flex each becomes its own flex item, which tore
	   "…set forth in the [Privacy Policy]." apart and stranded the full stop in a
	   column of its own. Block flow keeps the sentence intact; the checkbox is
	   positioned out of that flow instead.

	   !important because MemberPress sets `display: inline` on .mepr-form-input
	   with !important — verified by injection (a more specific plain rule stayed
	   `inline`). Only this declaration needs the flag. */
	display: block !important;
	position: relative;
	margin: 0;
	padding: 14px 16px 14px 46px;
	background: var( --rwt-card );
	border: 1px solid var( --rwt-line );
	border-radius: 10px;
	color: var( --rwt-body );
	font-family: var( --e-global-typography-primary-font-family, "DM Sans" ), sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.rwt-checkout .mp-form-row .mepr-checkbox-field input[type="checkbox"] {
	position: absolute;
	left: 16px;
	top: 15px;
	width: 18px;
	/* !important: a vendor rule sets checkbox height and squashes it otherwise —
	   the same trap as the preference centre. */
	height: 18px !important;
	margin: 0;
	accent-color: var( --rwt-ink );
	cursor: pointer;
}

/* Terms / Privacy links inside the consent text: on brand, and underlined only
   on hover so the row does not read as a wall of links. */
.rwt-checkout .mp-form-row .mepr-checkbox-field a {
	color: var( --rwt-ink );
	text-decoration: none;
}

.rwt-checkout .mp-form-row .mepr-checkbox-field a:hover,
.rwt-checkout .mp-form-row .mepr-checkbox-field a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The required asterisk sits outside the label as a bare "*". */
.rwt-checkout .mp-form-row.mepr_tos {
	color: var( --rwt-muted );
	font-size: 13px;
}

.rwt-checkout form#mepr_signup_form > .mp-form-row.mepr_tos,
.rwt-checkout form#mepr_signup_form > .mp-form-row:has( .mepr-checkbox-field ) {
	margin-bottom: 12px;
}

/* ------------------------------------------------- the summary column */

.rwt-checkout form#mepr_signup_form > .mepr-transaction-invoice-wrapper {
	grid-column: 3;
	/* Span the rows the left column actually generates (11 visible blocks:
	   3 headings, email, 2 password rows, 2 name rows, payment, 2 consent rows).
	   An over-large span is NOT harmless — at 40 the grid created 29 further row
	   tracks and the consent checkboxes were pushed to the bottom of them. */
	grid-row: 1 / span 12;
	align-self: start;
	position: sticky;
	/* Clear the site header, which is `position: sticky` at z-index 1000000 and
	   settles with its bottom edge at ~85px. At top:24px the card slid under it
	   and lost its heading. Measured, not guessed. */
	top: 100px;
	margin-left: 28px;
	padding: 28px;
	background: var( --rwt-card );
	border: 1px solid var( --rwt-line );
	border-radius: 14px;
}

.rwt-checkout .rwt-checkout__summary-title {
	margin: 0 0 14px;
	color: var( --rwt-ink );
	font-family: var( --e-global-typography-9e9beda-font-family, "Fraunces" ), serif;
	font-size: 27px;
	line-height: 1.2;
	font-weight: 400;
}

.rwt-checkout .rwt-checkout__summary-plan {
	margin: 0 0 2px;
	color: var( --rwt-body );
	font-size: 16px;
	font-weight: 500;
}

/* MemberPress's own terms row, relocated into the card. */
.rwt-checkout .rwt-checkout__terms {
	margin: 0 0 18px;
	color: var( --rwt-muted );
	font-size: 14px;
	line-height: 1.45;
}

.rwt-checkout .rwt-checkout__terms .mepr_price_cell_label,
.rwt-checkout .rwt-checkout__terms .mepr_price_cell {
	display: inline;
	font-weight: 400;
}

/* The theme draws a full grid on tables — a border-right on every cell plus a
   top/left border on the table — which made the summary read like a
   spreadsheet. Reset the lot here; the horizontal separators are re-applied
   below because the design does keep those. */
.rwt-checkout .mepr-transaction-invoice-wrapper table,
.rwt-checkout .mepr-transaction-invoice-wrapper table th,
.rwt-checkout .mepr-transaction-invoice-wrapper table td,
.rwt-checkout .mepr-transaction-invoice-wrapper table tr {
	border: 0;
}

.rwt-checkout .mepr-transaction-invoice-wrapper table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 4px;
	font-size: 15px;
}

.rwt-checkout .mepr-transaction-invoice-wrapper thead th {
	padding: 0 0 8px;
	border-bottom: 1px solid var( --rwt-line );
	color: var( --rwt-muted );
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: left;
}

.rwt-checkout .mepr-transaction-invoice-wrapper th:last-child,
.rwt-checkout .mepr-transaction-invoice-wrapper td:last-child {
	text-align: right;
}

.rwt-checkout .mepr-transaction-invoice-wrapper tbody td {
	padding: 12px 0;
	border-bottom: 1px solid var( --rwt-line );
	color: var( --rwt-body );
	background: none;
}

/* The total row — the one figure people check twice.
   Targeted by MemberPress's own class rather than :last-child: the invoice has
   the total in its own row group, so :last-child matched the ITEM row and gave
   the line item the big treatment instead of the total. */
/* The total is `<tfoot><tr><th>Total</th><th>$199.00</th></tr>` — TH, not TD,
   which is why a `tfoot td` rule never matched and the total kept the small
   uppercase treatment meant for the column headers. */
.rwt-checkout .mepr-transaction-invoice-wrapper tfoot th {
	border-bottom: 0;
	padding-top: 14px;
	color: var( --rwt-ink );
	font-family: var( --e-global-typography-9e9beda-font-family, "Fraunces" ), serif;
	font-size: 22px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.rwt-checkout .mepr-transaction-invoice-wrapper tfoot th:first-child {
	font-size: 17px;
}

.rwt-checkout .mp-form-submit {
	margin: 22px 0 0;
	text-align: center;
}

.rwt-checkout .mp-form-submit input[type="submit"],
.rwt-checkout .mp-form-submit button[type="submit"] {
	display: block;
	width: 100%;
	padding: 15px 28px;
	background: var( --e-global-color-03edebf, #C46A5A );
	border: 0;
	border-radius: 999px;
	color: var( --rwt-card );
	font-family: var( --e-global-typography-primary-font-family, "DM Sans" ), sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease;
	height: auto;
}

.rwt-checkout .mp-form-submit input[type="submit"]:hover,
.rwt-checkout .mp-form-submit button[type="submit"]:hover {
	background: var( --e-global-color-f220437, #A14A3A );
}

.rwt-checkout__secure {
	margin: 12px 0 0;
	text-align: center;
	color: var( --rwt-muted );
	font-size: 13px;
}

/* ==================================================================
   Responsive. Kit breakpoints: mobile <=800, tablet 801-1200.        */

/* Stack from 1200 DOWN, not 800. At tablet the two-column layout left the form
   just 412px against a 320px summary — the name fields were 196px each and the
   Stripe element had no room. One column reads far better there. */
@media ( max-width: 1200px ) {

	.rwt-checkout form#mepr_signup_form {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		max-width: 720px;
	}

	/* Summary goes LAST once stacked, not first. It carries the submit button, so
	   placing it above the form meant filling everything in and then scrolling
	   back to the top to pay. Seeing the price first is worth less than having
	   the CTA where the form ends. */
	.rwt-checkout form#mepr_signup_form > .mepr-transaction-invoice-wrapper {
		grid-column: 1 / 3;
		grid-row: auto;
		order: 99;
		position: static;
		margin: 30px 0 0;
		padding: 24px;
	}
}

@media ( max-width: 800px ) {

	/* Single column. The summary moves ABOVE the form: on a phone people want to
	   see what they are paying before they start typing, and a sticky card has
	   nowhere to stick. */
	.rwt-checkout form#mepr_signup_form {
		grid-template-columns: minmax( 0, 1fr );
		padding: 0 18px 64px;
	}

		/* Must match the specificity of the desktop placement rules
	   (.rwt-checkout form#mepr_signup_form > .mp-form-row.mepr_last_name is
	   (1,3,1)). A plain `> *` reset is (1,1,1) and LOST, so Last Name kept
	   `grid-column: 2`, which created an implicit second column and left the
	   summary squeezed into a third. */
	.rwt-checkout form#mepr_signup_form > *,
	.rwt-checkout form#mepr_signup_form > .mp-form-row.mepr_first_name,
	.rwt-checkout form#mepr_signup_form > .mp-form-row.mepr_last_name {
		grid-column: 1;
	}

	.rwt-checkout form#mepr_signup_form > .mepr-transaction-invoice-wrapper {
		grid-column: 1;
		grid-row: auto;
		order: 99;
		position: static;
		margin: 26px 0 0;
		padding: 22px 18px;
	}

	.rwt-checkout__head {
		padding: 36px 18px 26px;
	}

	.rwt-checkout .rwt-checkout__title {
		font-size: 30px;
	}
}

/* ------------------------------------------------------------------
   Plan-change trim (rwt-membership-checkout.php 1.1.0).

   An existing member changing plan has nothing to type in "Your details" —
   the fields stay in the DOM, pre-filled, and submit as normal; only their
   pixels go. The body class is added ONLY when both names are on the
   profile, so a member with a blank name still sees the inputs. */

.rwt-plan-change form#mepr_signup_form > .mp-form-row.mepr_first_name,
.rwt-plan-change form#mepr_signup_form > .mp-form-row.mepr_last_name,
.rwt-plan-change form#mepr_signup_form > .rwt-checkout__section--details {
	display: none;
}

/* Processing state on the MemberPress submit (Lane C, processing-overlay.js).
   MemberPress disables .mepr-submit itself while the gateway works and shows
   a small .mepr-loading-gif beside it; the site-wide overlay (landing-chrome
   .rwt-processing) now carries that message, so the gif is redundant here. */
.rwt-checkout form#mepr_signup_form .mepr-submit[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.rwt-checkout.rwt-is-processing form#mepr_signup_form .mepr-loading-gif {
	display: none !important;
}