/*
 * Register Page
 *
 * Deliberately independent from assets/css/layout/login.css (own
 * class names, .qehs-register-*) per the requested dedicated file
 * structure, even though the Figma uses the same visual language and
 * measured proportions as the already-approved Login page (53.3% /
 * 46.7% split-panel layout, 528px card, 60px benefit-icon boxes —
 * all re-confirmed by measuring this page's own Figma reference, not
 * assumed from Login).
 *
 * Split-panel layout: unlike homepage sections (which all respect the
 * shared 96px .qehs-container margin), this page's left panel
 * deliberately bleeds to the true viewport edge — a common, distinct
 * convention for this kind of page, confirmed by measuring the Figma
 * reference (the tinted panel starts at the literal left edge, not at
 * a 96px inset). This is a page-specific layout choice, not a new
 * sitewide container system — the trust strip below it, and the rest
 * of the site, still use the existing .qehs-container.
 *
 * Panel background is the closest existing token
 * (--qehs-background-alt) to the Figma's measured tint — a close but
 * not pixel-identical match, same as Login.
 */

.qehs-register-hero {
	display: grid;
	grid-template-columns: 53.3% 46.7%;
	min-height: 640px;
}

.qehs-register-hero__left {
	background-color: var(--qehs-background-alt);
	display: flex;
	align-items: center;
}

.qehs-register-hero__left-inner {
	width: 100%;
	max-width: 528px;
	margin-inline: auto;
	padding: var(--qehs-space-2xl) var(--qehs-space-xl);
}

.qehs-register-hero__title {
	margin: 0 0 var(--qehs-space-sm);
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--qehs-text);
}

.qehs-register-hero__subtitle {
	margin: 0 0 var(--qehs-space-xl);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--qehs-text-muted);
}

.qehs-register-benefits {
	margin: 0 0 var(--qehs-space-xl);
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--qehs-space-lg);
}

.qehs-register-benefit {
	display: flex;
	align-items: flex-start;
	gap: var(--qehs-space-md);
}

.qehs-register-benefit__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: var(--qehs-radius-md);
	background-color: var(--qehs-success-tint);
	color: var(--qehs-secondary);
}

.qehs-register-benefit__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.qehs-register-benefit__text strong {
	font-size: 1rem;
	color: var(--qehs-text);
}

.qehs-register-benefit__text span:last-child {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--qehs-text-muted);
}

/* Sized to the real illustration asset's native dimensions
   (assets/images/login/login-illustration.svg, 349x174,
   ~2.006:1 aspect ratio) — width:100%/height:auto below preserves
   that ratio exactly at any size, never stretches or crops. */
/* Sized to the real illustration asset's native dimensions
   (assets/images/register/register-illustration.png, 1200x519,
   ~2.312:1 aspect ratio) — width:100%/height:auto below preserves
   that ratio exactly at any size, never stretches or crops. Max-width
   matches the Figma's measured ~380px display width for this
   illustration at 1440px viewport. */
.qehs-register-hero__illustration {
	max-width: 380px;
}

.qehs-register-hero__illustration img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Right column / login card --- */

.qehs-register-hero__right {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--qehs-space-2xl) var(--qehs-space-xl);
	background-color: var(--qehs-background);
}

.qehs-register-card {
	width: 100%;
	max-width: 528px;
	background-color: var(--qehs-background);
	border: 1px solid var(--qehs-border);
	border-radius: var(--qehs-radius-lg);
	box-shadow: var(--qehs-shadow-md);
	padding: var(--qehs-space-2xl);
	text-align: center;
}

.qehs-register-card__title {
	margin: 0 0 var(--qehs-space-xs);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--qehs-text);
}

.qehs-register-card__subtitle {
	margin: 0 0 var(--qehs-space-xl);
	font-size: 0.95rem;
	color: var(--qehs-text-muted);
}

.qehs-register-form__message {
	margin-bottom: var(--qehs-space-lg);
	padding: var(--qehs-space-sm) var(--qehs-space-md);
	border-radius: var(--qehs-radius-md);
	background-color: var(--qehs-error-tint);
	color: var(--qehs-error);
	font-size: 0.9rem;
	text-align: left;
}

.qehs-register-form {
	text-align: left;
}

.qehs-register-form__field {
	margin-bottom: var(--qehs-space-lg);
}

.qehs-register-form__hint {
	margin: var(--qehs-space-xs) 0 0;
	font-size: 0.8rem;
	color: var(--qehs-text-muted);
}

.qehs-register-form__field label {
	display: block;
	margin-bottom: var(--qehs-space-sm);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--qehs-text);
}

.qehs-register-form__control {
	position: relative;
	display: flex;
	align-items: center;
}

.qehs-register-form__control input {
	width: 100%;
	padding: var(--qehs-space-md) var(--qehs-space-xl) var(--qehs-space-md) var(--qehs-space-md);
	border: 1px solid var(--qehs-border);
	border-radius: var(--qehs-radius-md);
	font-family: inherit;
	font-size: 1rem;
	color: var(--qehs-text);
}

.qehs-register-form__control input::placeholder {
	color: var(--qehs-text-muted);
}

.qehs-register-form__control input:focus-visible {
	outline: 2px solid var(--qehs-secondary);
	outline-offset: 1px;
}

.qehs-register-form__control svg {
	position: absolute;
	right: var(--qehs-space-md);
	color: var(--qehs-text-muted);
	pointer-events: none;
}

.qehs-register-form__toggle-password {
	position: absolute;
	right: var(--qehs-space-md);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	color: var(--qehs-text-muted);
	cursor: pointer;
	padding: 0;
}

.qehs-register-form__toggle-password svg {
	position: static;
}

/* Password field shows both a decorative lock icon and the
   (clickable) visibility-toggle eye side by side — extra right
   padding on the input makes room for both, and the lock icon sits
   just to the left of the toggle button. Confirm Password has no
   lock icon (matching the Figma), so it doesn't need the extra
   padding or this positioning. */
#qehs-register-password {
	padding-right: 64px;
}

.qehs-register-form__control .qehs-register-form__lock-icon {
	position: absolute;
	right: 44px;
	pointer-events: none;
	color: var(--qehs-text-muted);
}

.qehs-register-form__toggle-password:focus-visible {
	outline: 2px solid var(--qehs-secondary);
	outline-offset: 1px;
	border-radius: var(--qehs-radius-sm);
}

.qehs-register-form__forgot {
	text-align: right;
	margin-bottom: var(--qehs-space-lg);
}

.qehs-register-form__forgot a {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--qehs-secondary);
}

.qehs-register-form__forgot a:hover,
.qehs-register-form__forgot a:focus-visible {
	text-decoration: underline;
}

/* Reuses .qehs-btn visual language (color/weight/radius) via its own
   scoped rule rather than the shared class itself, keeping this page
   self-contained per file-scope instructions — matches the existing
   pattern used for other page-specific CTAs on this project (e.g. the
   Resource Bundle card's "View Bundle" button). */
.qehs-register-form__submit {
	width: 100%;
	padding: var(--qehs-space-md);
	margin-bottom: var(--qehs-space-lg);
	border: none;
	border-radius: var(--qehs-radius-md);
	background-color: var(--qehs-secondary);
	color: #ffffff;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.qehs-register-form__submit:hover {
	filter: brightness(1.08);
}

.qehs-register-form__submit:focus-visible {
	outline: 2px solid var(--qehs-primary);
	outline-offset: 2px;
}

.qehs-register-form__divider {
	position: relative;
	text-align: center;
	margin-bottom: var(--qehs-space-lg);
}

.qehs-register-form__divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	border-top: 1px solid var(--qehs-border);
}

.qehs-register-form__divider span {
	position: relative;
	padding-inline: var(--qehs-space-sm);
	background-color: var(--qehs-background);
	font-size: 0.85rem;
	color: var(--qehs-text-muted);
}

.qehs-register-form__social {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--qehs-space-sm);
	padding: var(--qehs-space-md);
	margin-bottom: var(--qehs-space-md);
	border: 1px solid var(--qehs-border);
	border-radius: var(--qehs-radius-md);
	background-color: var(--qehs-background);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--qehs-text);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.qehs-register-form__social:hover,
.qehs-register-form__social:focus-visible {
	border-color: var(--qehs-text-muted);
	background-color: var(--qehs-background-alt);
}

.qehs-register-form__social:focus-visible {
	outline: 2px solid var(--qehs-secondary);
	outline-offset: 1px;
}

.qehs-register-form__login-link {
	margin: var(--qehs-space-sm) 0 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--qehs-text-muted);
}

.qehs-register-form__login-link a {
	font-weight: 700;
	color: var(--qehs-secondary);
}

.qehs-register-form__login-link a:hover,
.qehs-register-form__login-link a:focus-visible {
	text-decoration: underline;
}

.qehs-register-security-note {
	display: flex;
	align-items: center;
	gap: var(--qehs-space-xs);
	margin-top: var(--qehs-space-lg);
	font-size: 0.85rem;
	color: var(--qehs-text-muted);
}

/* --- Trust strip --- */

.qehs-register-trust {
	padding-block: var(--qehs-space-xl);
	background-color: var(--qehs-background);
	border-top: 1px solid var(--qehs-border);
}

.qehs-register-trust__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--qehs-space-lg);
}

.qehs-register-trust__item {
	display: flex;
	align-items: center;
	gap: var(--qehs-space-md);
}

.qehs-register-trust__icon {
	flex-shrink: 0;
	color: var(--qehs-secondary);
}

.qehs-register-trust__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.qehs-register-trust__text strong {
	font-size: 1rem;
	color: var(--qehs-text);
}

.qehs-register-trust__text span:last-child {
	font-size: 0.85rem;
	color: var(--qehs-text-muted);
}

/* --- Tablet: stack the two columns, matching the site's existing
   1024px breakpoint. --- */
@media (max-width: 1024px) {
	.qehs-register-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.qehs-register-hero__left-inner {
		margin-inline: auto;
		max-width: 560px;
	}

	.qehs-register-hero__illustration {
		margin-inline: auto;
	}

	.qehs-register-trust__list {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- Mobile --- */
@media (max-width: 768px) {
	.qehs-register-hero__left-inner,
	.qehs-register-hero__right {
		padding: var(--qehs-space-xl) var(--qehs-space-lg);
	}

	.qehs-register-card {
		padding: var(--qehs-space-xl) var(--qehs-space-lg);
	}

	.qehs-register-trust__list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.qehs-register-hero__title {
		font-size: 1.75rem;
	}

	.qehs-register-card__title {
		font-size: 1.5rem;
	}
}

/* Social sign-in isn't available yet: the buttons are disabled and look it
   (no hover, not-allowed cursor), with a "Coming soon" note below them. */
.qehs-register-form__social:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.qehs-register-form__social-note {
	margin: 4px 0 0;
	font-size: 0.8rem;
	text-align: center;
	color: var(--qehs-text-muted);
}

/* Social sign-in buttons are links when the provider is configured: same look as
   the (disabled) button version, without the default link underline/colour. */
a.qehs-register-form__social {
	text-decoration: none;
	box-sizing: border-box;
}

a.qehs-register-form__social:visited {
	color: var(--qehs-text);
}