/*
 * solverra-thankyou.css
 * Styles the NEW post-purchase surfaces added by solverra-thankyou.php:
 *   - the post-purchase giveaway auto-entry prompt (.solverra-ty-giveaway)
 *   - the register-your-product CTA on the thank-you page (.solverra-thankyou__register)
 *   - the register-your-product form + warranty record (.solverra-reg, page)
 *
 * It is a COMPANION to shop.css (which @imports homepage.css for the :root design
 * tokens + .btn/.container/.eyebrow/.meta/.visually-hidden/.section--tint helpers).
 * Enqueued AFTER solverra-shop so the tokens already exist. ASCII-only; consumes
 * tokens only -- no hardcoded random hex. WCAG 2.2 AA (focus rings, 48px targets,
 * status conveyed by text not color alone).
 */

/* ---------------------------------------------------------------------------
 * Shared: narrow container for the register page.
 * ------------------------------------------------------------------------- */
.container--narrow {
	max-width: 720px;
}

/* ---------------------------------------------------------------------------
 * Post-purchase giveaway prompt (on the thank-you page).
 * ------------------------------------------------------------------------- */
.solverra-ty-giveaway {
	margin: var(--s-7) 0;
	padding: var(--s-6);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--bg-tint);
}

.solverra-ty-giveaway > .eyebrow {
	color: var(--sol-lime-deep);
}

.solverra-ty-giveaway h2 {
	margin: var(--s-2) 0 var(--s-3);
	font-family: var(--ff-display);
	color: var(--fg);
}

.solverra-ty-giveaway p {
	color: var(--fg-2);
	line-height: var(--lh-base);
}

.solverra-ty-giveaway__form {
	margin-top: var(--s-4);
}

.solverra-ty-giveaway__check {
	display: block;
	margin: var(--s-3) 0;
}

.solverra-ty-giveaway__check label {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	color: var(--fg);
	line-height: var(--lh-base);
	cursor: pointer;
}

.solverra-ty-giveaway__check input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	flex: 0 0 auto;
	accent-color: var(--sol-lime-deep);
}

.solverra-ty-giveaway__actions {
	margin-top: var(--s-4);
}

.solverra-ty-giveaway__notice {
	margin: var(--s-3) 0;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-sm);
	border-left: 4px solid var(--fg-mute);
	background: var(--bg-elev);
	color: var(--fg);
}

.solverra-ty-giveaway__notice--ok {
	border-left-color: var(--sol-success);
}

.solverra-ty-giveaway__notice--warn {
	border-left-color: var(--sol-warning);
}

.solverra-ty-giveaway__notice--err {
	border-left-color: var(--sol-danger);
}

/* ---------------------------------------------------------------------------
 * Account-creation nudge (guest orders, on the thank-you page).
 * ------------------------------------------------------------------------- */
.solverra-thankyou__account {
	margin: var(--s-7) 0;
	padding: var(--s-6);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--bg-tint);
}

.solverra-thankyou__account > .eyebrow {
	color: var(--sol-forest-mid);
}

.solverra-thankyou__account h2 {
	margin: var(--s-2) 0 var(--s-3);
	font-family: var(--ff-display);
	color: var(--fg);
}

.solverra-thankyou__account p {
	color: var(--fg-2);
	line-height: var(--lh-base);
}

.solverra-thankyou__account-form {
	margin-top: var(--s-4);
}

.solverra-thankyou__account-notice {
	margin: var(--s-3) 0;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-sm);
	border-left: 4px solid var(--fg-mute);
	background: var(--bg-elev);
	color: var(--fg);
}

.solverra-thankyou__account-notice--ok {
	border-left-color: var(--sol-success);
}

.solverra-thankyou__account-notice--err {
	border-left-color: var(--sol-danger);
}

/* ---------------------------------------------------------------------------
 * Social-share giveaway surface (the kept giveaway, embedded on thank-you).
 * The inner markup is owned by solverra-engagement.php's [solverra_giveaway];
 * here we only style the wrapping section so it sits with the other blocks.
 * ------------------------------------------------------------------------- */
.solverra-thankyou__giveaway {
	margin: var(--s-7) 0;
	padding: var(--s-6);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}

.solverra-thankyou__giveaway > .eyebrow {
	color: var(--sol-lime-deep);
}

.solverra-thankyou__giveaway h2 {
	margin: var(--s-2) 0 var(--s-3);
	font-family: var(--ff-display);
	color: var(--fg);
}

/* ---------------------------------------------------------------------------
 * Register-your-product CTA on the thank-you page.
 * ------------------------------------------------------------------------- */
.solverra-thankyou__register {
	margin: var(--s-7) 0;
	padding: var(--s-6);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}

.solverra-thankyou__register > .eyebrow {
	color: var(--sol-forest-mid);
}

.solverra-thankyou__register h2 {
	margin: var(--s-2) 0 var(--s-3);
	font-family: var(--ff-display);
}

.solverra-thankyou__register p {
	color: var(--fg-2);
	line-height: var(--lh-base);
}

/* ---------------------------------------------------------------------------
 * Register page header.
 * ------------------------------------------------------------------------- */
.solverra-register-page {
	padding: var(--s-8) 0;
}

.solverra-register-page__head {
	margin-bottom: var(--s-6);
}

.solverra-register-page__head h1 {
	font-family: var(--ff-display);
	color: var(--fg);
	margin: var(--s-2) 0 var(--s-3);
}

.solverra-register-page__head .lead {
	color: var(--fg-2);
	line-height: var(--lh-base);
	font-size: var(--fs-lg);
}

/* ---------------------------------------------------------------------------
 * Register form (shared by the shortcode in either host).
 * ------------------------------------------------------------------------- */
.solverra-reg {
	margin: var(--s-5) 0;
}

.solverra-reg__fieldset {
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: var(--s-6);
	margin: 0;
	background: var(--bg-elev);
}

.solverra-reg__legend {
	font-family: var(--ff-display);
	font-size: var(--fs-xl);
	color: var(--fg);
	padding: 0 var(--s-2);
}

.solverra-reg__intro {
	color: var(--fg-2);
	line-height: var(--lh-base);
	margin-bottom: var(--s-5);
}

.solverra-reg__field {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin: var(--s-4) 0;
}

.solverra-reg__field label {
	font-weight: 600;
	color: var(--fg);
}

.solverra-reg__field input[type="text"],
.solverra-reg__field input[type="email"] {
	width: 100%;
	min-height: 48px;
	padding: var(--s-3) var(--s-4);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--fg);
	font-family: var(--ff-body);
	font-size: var(--fs-md);
}

.solverra-reg__hint {
	color: var(--fg-3);
	font-size: var(--fs-sm);
	line-height: var(--lh-base);
}

.solverra-reg__actions {
	margin-top: var(--s-5);
}

/* ---------------------------------------------------------------------------
 * Register result notices + the warranty/COA success record.
 * ------------------------------------------------------------------------- */
.solverra-reg__notice {
	margin: 0 0 var(--s-5);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-sm);
	border-left: 4px solid var(--fg-mute);
	background: var(--bg-tint);
	color: var(--fg);
	line-height: var(--lh-base);
}

.solverra-reg__notice--ok {
	border-left-color: var(--sol-success);
}

.solverra-reg__notice--warn {
	border-left-color: var(--sol-warning);
}

.solverra-reg__notice--err {
	border-left-color: var(--sol-danger);
}

.solverra-reg__success {
	margin: 0 0 var(--s-6);
	padding: var(--s-6);
	border: 1px solid var(--border);
	border-left: 4px solid var(--sol-success);
	border-radius: var(--r-lg);
	background: var(--sol-lime-mist);
}

.solverra-reg__success h3 {
	font-family: var(--ff-display);
	color: var(--fg);
	margin: 0 0 var(--s-4);
}

.solverra-reg__record {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--s-2) var(--s-5);
	margin: 0;
}

.solverra-reg__record dt {
	font-weight: 600;
	color: var(--fg-2);
}

.solverra-reg__record dd {
	margin: 0;
	color: var(--fg);
}

/* ---------------------------------------------------------------------------
 * Register page "why we ask" + compliance.
 * ------------------------------------------------------------------------- */
.solverra-register-page__why {
	margin: var(--s-7) 0 var(--s-5);
}

.solverra-register-page__why h2 {
	font-family: var(--ff-display);
	color: var(--fg);
	margin-bottom: var(--s-3);
}

.solverra-register-page__why-list {
	margin: 0;
	padding-left: var(--s-5);
	color: var(--fg-2);
	line-height: var(--lh-loose);
}

.solverra-register-page__compliance {
	margin-top: var(--s-6);
	padding-top: var(--s-4);
	border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------------------
 * Product-registration transparency disclosure (what we collect / why / opt-out).
 * Honest, readable, collapsible to keep the form compact -- open by default.
 * ------------------------------------------------------------------------- */
.solverra-reg__transparency {
	margin-top: var(--s-5);
	padding: var(--s-4) var(--s-5);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--bg-tint);
}

.solverra-reg__transparency > summary {
	cursor: pointer;
	font-family: var(--ff-display);
	font-weight: 600;
	color: var(--fg);
}

.solverra-reg__transparency-body {
	margin-top: var(--s-3);
	color: var(--fg-2);
	line-height: var(--lh-loose);
}

.solverra-reg__transparency-body h3 {
	margin: var(--s-4) 0 var(--s-2);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fg-3);
}

.solverra-reg__transparency-body ul {
	margin: 0;
	padding-left: var(--s-5);
}

.solverra-reg__transparency-body li {
	margin-bottom: var(--s-1);
}

.solverra-reg__transparency-body a {
	color: var(--sol-lime-deep);
}

/* ---------------------------------------------------------------------------
 * Focus visibility (WCAG 2.2 AA) -- explicit rings on the new controls in case
 * the host stylesheet does not already cover them.
 * ------------------------------------------------------------------------- */
.solverra-ty-giveaway :focus-visible,
.solverra-reg :focus-visible,
.solverra-register-page :focus-visible {
	outline: 3px solid var(--sol-lime-deep);
	outline-offset: 2px;
	border-radius: var(--r-xs);
}

@media (max-width: 640px) {
	.solverra-reg__record {
		grid-template-columns: 1fr;
		gap: var(--s-1) 0;
	}

	.solverra-reg__record dd {
		margin-bottom: var(--s-3);
	}
}