/**
 * Registration page styles.
 *
 * Deliberately small and self-contained: this page does not load the theme,
 * so everything it needs is here. Kept under 4KB.
 */

:root {
	--rsdp-bg: #f2f4f3;
	--rsdp-surface: #ffffff;
	--rsdp-ink: #141a19;
	--rsdp-muted: #5f6e6b;
	--rsdp-line: #d6dedc;
	--rsdp-accent: #001960;
	--rsdp-accent-ink: #ffffff;
	--rsdp-error: #9c2c14;
	--rsdp-ok: #2a6349;
}

@media (prefers-color-scheme: dark) {
	:root {
		--rsdp-bg: #0e1413;
		--rsdp-surface: #171f1e;
		--rsdp-ink: #e6ebea;
		--rsdp-muted: #94a5a1;
		--rsdp-line: #2c3736;
		--rsdp-accent: #058fd8;
		--rsdp-accent-ink: #00131f;
		--rsdp-error: #e0765a;
		--rsdp-ok: #6dbf97;
	}
}

* { box-sizing: border-box; }

/*
 * The hidden attribute has to win.
 *
 * The browser's own sheet says [hidden] { display: none }, but ANY author rule
 * that sets display beats it, however low its specificity -- author styles
 * outrank user-agent styles before specificity is even considered. So the
 * moment .rsdp-card gained `display: flex` below, every element in this plugin
 * marked `hidden` started rendering: all three registration steps stacked on
 * one screen, and the "thanks, we have it" confirmation sitting under the
 * dealer application form before anyone had filled it in.
 *
 * Both bugs were reported as the page being broken, and neither looked like a
 * CSS problem from the outside. Keep this rule above everything that sets
 * display, and do not remove the !important.
 */
[hidden] { display: none !important; }

/* The masthead logo, sized so it never pushes the fold down on a phone. */
.rsdp-logo {
	display: block;
	height: 30px;
	width: auto;
}

.rsdp-body {
	margin: 0;
	background: var(--rsdp-bg);
	color: var(--rsdp-ink);
	font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.rsdp-shell { max-width: 30rem; margin: 0 auto; padding: 1rem 1rem 3rem; }

.rsdp-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: .5rem 0 1rem;
}

.rsdp-brand { font-weight: 700; letter-spacing: -.01em; }

.rsdp-serial,
.rsdp-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .8rem;
	color: var(--rsdp-muted);
}

.rsdp-card {
	background: var(--rsdp-surface);
	border: 1px solid var(--rsdp-line);
	border-radius: 10px;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.rsdp-card h1 {
	font-size: 1.4rem;
	line-height: 1.2;
	margin: 0;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.rsdp-eyebrow {
	margin: 0;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rsdp-muted);
}

.rsdp-eyebrow.rsdp-ok { color: var(--rsdp-ok); }

.rsdp-lede { margin: 0; color: var(--rsdp-muted); }
.rsdp-note { margin: .25rem 0 0; font-size: .875rem; color: var(--rsdp-muted); }
.rsdp-hint { margin: -.15rem 0 .35rem; font-size: .8rem; color: var(--rsdp-muted); }

.rsdp-readout {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	background: var(--rsdp-bg);
	border: 1px solid var(--rsdp-line);
	border-radius: 6px;
	padding: .6rem .75rem;
	font-size: .85rem;
	color: var(--rsdp-muted);
	margin: .25rem 0 .5rem;
}

.rsdp-readout strong { color: var(--rsdp-ink); font-size: .9rem; }

.rsdp-label {
	font-size: .8rem;
	font-weight: 600;
	margin-top: .5rem;
}

.rsdp-input {
	width: 100%;
	font: inherit;
	color: var(--rsdp-ink);
	background: var(--rsdp-surface);
	border: 1.5px solid var(--rsdp-line);
	border-radius: 8px;
	padding: .7rem .75rem;
	/* 16px minimum stops iOS Safari from zooming on focus */
	font-size: 16px;
}

.rsdp-input:focus-visible {
	outline: none;
	border-color: var(--rsdp-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rsdp-accent) 25%, transparent);
}

.rsdp-input.rsdp-invalid { border-color: var(--rsdp-error); }
.rsdp-short { max-width: 11rem; }

.rsdp-btn {
	display: block;
	width: 100%;
	margin-top: 1rem;
	padding: .9rem 1rem;
	font: inherit;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: var(--rsdp-accent-ink);
	background: var(--rsdp-accent);
	border: 1.5px solid var(--rsdp-accent);
	border-radius: 8px;
	cursor: pointer;
	/* Comfortable thumb target for someone standing outside */
	min-height: 3rem;
}

.rsdp-btn[disabled] { opacity: .6; cursor: default; }

.rsdp-btn-ghost,
.rsdp-btn-quiet {
	background: transparent;
	color: var(--rsdp-accent);
}

.rsdp-btn-quiet { font-weight: 500; }

.rsdp-link {
	display: block;
	width: 100%;
	margin-top: .6rem;
	padding: .5rem;
	font: inherit;
	font-size: .875rem;
	color: var(--rsdp-muted);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: .2em;
}

.rsdp-dealer {
	display: flex;
	align-items: center;
	gap: .75rem;
	background: var(--rsdp-bg);
	border: 1px solid var(--rsdp-line);
	border-radius: 8px;
	padding: .75rem;
	margin: .5rem 0;
}

.rsdp-dealer-logo { border-radius: 6px; object-fit: contain; background: #fff; }
.rsdp-dealer-label { display: block; font-size: .75rem; color: var(--rsdp-muted); }

.rsdp-rule { border: 0; border-top: 1px solid var(--rsdp-line); margin: 1.25rem 0 1rem; }
.rsdp-review-copy { margin: 0; font-size: .95rem; }

.rsdp-error {
	margin: 1rem 0 0;
	padding: .75rem;
	border-radius: 8px;
	background: color-mix(in srgb, var(--rsdp-error) 12%, transparent);
	border: 1px solid var(--rsdp-error);
	color: var(--rsdp-error);
	font-size: .9rem;
}

.rsdp-foot {
	margin-top: 1.5rem;
	text-align: center;
	font-size: .75rem;
	color: var(--rsdp-muted);
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
}

/* Administrator preview banner on the application page. Deliberately loud:
   it must never be mistaken for something an applicant is meant to read. */
.rsdp-preview {
	border-left: 4px solid #b45309;
	background: #fffbeb;
}
.rsdp-preview .rsdp-eyebrow {
	color: #b45309;
}
@media (prefers-color-scheme: dark) {
	.rsdp-preview {
		background: #2a2113;
		border-left-color: #f59e0b;
	}
	.rsdp-preview .rsdp-eyebrow {
		color: #f59e0b;
	}
}

/* ==========================================================================
   Dealer application landing page.

   Brand colours are the live site's own: #058fd8 sky, #001960 navy,
   #FE7C02 amber. Everything is stated in explicit colour rather than
   inherited, because this template renders standalone -- outside the theme
   -- and has no cascade to borrow from.
   ========================================================================== */

.rsdp-apply { --rs-sky: #058fd8; --rs-navy: #001960; --rs-amber: #fe7c02; }

/* ------------------------------------------------------------------- hero */

.rsdp-hero { padding: 2.4rem 0 1.6rem; }

.rsdp-hero-h {
	font-size: clamp(1.9rem, 6vw, 2.9rem);
	line-height: 1.08;
	letter-spacing: -.022em;
	color: var(--rs-navy);
	margin: .4rem 0 0;
}

.rsdp-hero-em { color: var(--rs-sky); }

.rsdp-hero .rsdp-lede {
	margin-top: .9rem;
	max-width: 40rem;
	font-size: 1.02rem;
	line-height: 1.6;
}

.rsdp-hero-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem;
	margin-top: 1.5rem;
}

.rsdp-jump {
	display: inline-block;
	background: var(--rs-amber);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	padding: .8rem 1.4rem;
	border-radius: 6px;
	text-decoration: none;
}

.rsdp-jump:hover,
.rsdp-jump:focus { background: #e56e00; color: #fff; }

.rsdp-hero-note { font-size: .85rem; opacity: .72; }

/* --------------------------------------------------------------- sections */

.rsdp-sell { margin: 2.1rem 0 0; }

.rsdp-sell-h {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rs-sky);
	margin: 0 0 .9rem;
	padding-bottom: .45rem;
	border-bottom: 1px solid rgba(128, 128, 128, .26);
}

.rsdp-form-h { margin-top: 2.4rem; }

/* --------------------------------------------------------------- benefits */

.rsdp-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: .85rem;
}

.rsdp-benefit {
	border: 1px solid rgba(128, 128, 128, .26);
	border-left: 4px solid var(--rs-sky);
	border-radius: 6px;
	padding: 1rem 1.1rem 1.05rem;
}

.rsdp-benefit-amber { border-left-color: var(--rs-amber); }
.rsdp-benefit-navy  { border-left-color: var(--rs-navy); }

.rsdp-benefit h3 {
	font-size: 1rem;
	color: var(--rs-navy);
	margin: 0 0 .35rem;
}

.rsdp-benefit p { font-size: .92rem; line-height: 1.55; margin: 0; opacity: .84; }

/* ------------------------------------------------------------------ steps */

.rsdp-steps-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1rem;
}

.rsdp-steps-list li { display: flex; gap: .7rem; align-items: flex-start; }

.rsdp-stepnum {
	flex: 0 0 1.65rem;
	height: 1.65rem;
	border-radius: 50%;
	background: var(--rs-navy);
	color: #fff;
	font-size: .88rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rsdp-steps-list h3 { font-size: .96rem; color: var(--rs-navy); margin: 0 0 .2rem; }
.rsdp-steps-list p  { font-size: .9rem; line-height: 1.5; margin: 0; opacity: .84; }

/* --------------------------------------------------------------- warranty */

.rsdp-covers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: .85rem;
}

.rsdp-cover {
	background: rgba(5, 143, 216, .07);
	border-radius: 6px;
	padding: 1.05rem 1.15rem;
}

.rsdp-cover-who {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--rs-sky);
}

.rsdp-cover-what {
	display: block;
	font-size: 1.12rem;
	color: var(--rs-navy);
	margin: .25rem 0 .35rem;
}

.rsdp-cover p { font-size: .9rem; line-height: 1.5; margin: 0; opacity: .84; }

/* ---------------------------------------------------------------- honesty */

.rsdp-honest {
	margin-top: 1.7rem;
	border-left: 4px solid var(--rs-amber);
	background: rgba(254, 124, 2, .07);
	border-radius: 0 6px 6px 0;
	padding: 1rem 1.15rem;
}

.rsdp-honest p { margin: 0; font-size: .92rem; line-height: 1.6; }

@media (prefers-color-scheme: dark) {
	.rsdp-apply { --rs-sky: #4bb4ea; --rs-navy: #cdd8f5; }
	.rsdp-cover  { background: rgba(75, 180, 234, .1); }
	.rsdp-honest { background: rgba(254, 124, 2, .12); }
}

/* ---------------------------------------------------------------- box number */

.rsdp-optional {
	margin-left: .4rem;
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rsdp-muted);
	opacity: .85;
}

/* Confirmation, not validation: this field can never be wrong enough to stop
   a warranty, so there is a green state and no red one. */
.rsdp-hint-ok {
	color: var(--rsdp-ok);
	font-weight: 600;
}

/* ---------------------------------------------------------- desktop widths */

/* The shell is mobile-first at 30rem. The card grids above already use
   auto-fit/minmax, so releasing the width cap is enough to let What You Get,
   How It Works and Who Covers What flow into side-by-side columns on larger
   screens. Scoped to .rsdp-apply so the dealer portal and the warranty
   registration screens keep their narrow single-column reading width.
   Breakpoint matches the 780px already used in rs-portal.css.
   .rsdp-form keeps its own 30rem cap, so inputs stay short. */

@media (min-width: 780px) {
	.rsdp-apply.rsdp-shell {
		max-width: 60rem;
		padding: 1.5rem 2rem 4rem;
	}
}

@media (min-width: 1100px) {
	.rsdp-apply.rsdp-shell {
		max-width: 72rem;
	}
}


/* ------------------------------------------------- five-pillar value grid */
/*
 * The dealer application leads with five reasons to sign up. The generic
 * .rsdp-benefits grid is auto-fit at minmax(255px, 1fr), which at the 72rem
 * desktop width fits four columns and then strands the fifth card alone
 * across a full row.
 *
 * Tablet (780px+): two even columns, fifth card spans the pair. Forcing
 * three columns in that range squeezes each card under 240px and the dense
 * card copy turns into a tall ladder of two-word lines.
 *
 * Desktop (1100px+): sixths, each card spanning two, so the top row is a
 * fixed three. The remaining pair spans three columns each and fills the row
 * edge to edge. The earlier version indented that pair half a column to
 * centre it, which read like a layout bug rather than a deliberate choice.
 *
 * The two blocks overlap on purpose. An exclusive "and (max-width: 1099px)"
 * upper bound leaves a dead zone whenever the viewport reports a fractional
 * width such as 1099.5px, and the cards silently fell back to the generic
 * auto-fit grid. The desktop block simply overrides all four declarations.
 */
@media (min-width: 780px) {
	.rsdp-benefits-5 { grid-template-columns: repeat(2, 1fr); }
	.rsdp-benefits-5 > * { grid-column: auto; }
	.rsdp-benefits-5 > :nth-child(5) { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
	.rsdp-benefits-5 { grid-template-columns: repeat(6, 1fr); }
	.rsdp-benefits-5 > * { grid-column: span 2; }
	.rsdp-benefits-5 > :nth-child(4) { grid-column: 1 / span 3; }
	.rsdp-benefits-5 > :nth-child(5) { grid-column: 4 / span 3; }
}


/* ----------------------------------------------- desktop reading measure */
/*
 * The note on the width release above assumed the application form kept a
 * 30rem cap of its own through a .rsdp-form class. No such class exists in
 * apply.php: the form is #rsdp-apply-form and carries no class at all, so no
 * such rule was ever written. Releasing the shell to 72rem therefore also
 * stretched every text input, the textarea and the submit button to 1046px.
 * A name field a yard wide is the main reason this page looked wrong on a
 * desktop monitor.
 *
 * The value cards genuinely want the whole 72rem. The form and the long
 * prose do not, so they get a reading measure back. Everything below sits
 * inside the desktop breakpoint, so the mobile layout is untouched.
 */
@media (min-width: 780px) {
	.rsdp-form-h,
	#rsdp-apply-form,
	#rsdp-apply-done,
	#rsdp-error {
		max-width: 42rem;
		margin-left: auto;
		margin-right: auto;
	}

	/* Around 70 characters is the comfortable maximum for a line of body
	   copy. At the full shell width these paragraphs ran past 140. */
	.rsdp-preview .rsdp-note { max-width: 74ch; }

	/* The disclaimer reads as the lead-in to the form, so it takes the same
	   measure and alignment instead of banding the full 72rem with its text
	   stopping two thirds of the way across. */
	.rsdp-honest {
		max-width: 42rem;
		margin-left: auto;
		margin-right: auto;
	}

	/* State and ZIP now sit among inputs about 660px wide, so give them a
	   little more presence without pretending they hold a sentence. */
	.rsdp-short { max-width: 13rem; }
}

/* The dealer application page is the declared home page for the Google OAuth
   client, and Google requires the app name on the consent screen to match the
   name shown on that page. So the masthead carries the logo and the app name
   together — the same pairing the user sees on the consent screen itself. */
.rsdp-appname {
	display: block;
	margin-top: .4rem;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--rsdp-ink);
}

/* Below 360px the app name and the sign-in link stop fitting on one row, so
   trim the name a shade rather than let it wrap mid-word. */
@media (max-width: 359px) {
	.rsdp-appname { font-size: .8rem; }
}