/**
 * Auth pages (/login, /register).
 *
 * BEM namespace: dr-auth__*. Design-system tokens only.
 */

.dr-auth-page {
	background: var(--dr-color-bg-subtle);
	display: grid;
	padding-block: clamp(var(--dr-space-6), 8vw, var(--dr-space-10));
	place-items: center;
}

.dr-auth {
	width: 100%;
}

.dr-auth__card {
	background: var(--dr-color-surface);
	border: var(--dr-border-width-1) solid var(--dr-color-border);
	border-radius: var(--dr-radius-4);
	box-shadow: var(--dr-shadow-1);
	margin-inline: auto;
	max-width: 26rem;
	padding: clamp(var(--dr-space-3), 4vw, var(--dr-space-5));
}

.dr-auth__card > * {
	margin-block: 0;
}

.dr-auth__eyebrow {
	color: var(--dr-color-premium-strong);
	font-size: var(--dr-font-size-100);
	font-weight: var(--dr-font-weight-bold);
	letter-spacing: var(--dr-letter-spacing-wide);
	text-transform: uppercase;
}

.dr-auth__title {
	font-size: var(--dr-font-size-600);
	letter-spacing: var(--dr-letter-spacing-tight);
	line-height: var(--dr-line-height-heading);
	margin-block: var(--dr-space-1) var(--dr-space-1);
}

.dr-auth__subtitle {
	color: var(--dr-color-text-muted);
	font-size: var(--dr-font-size-200);
	margin-block-end: var(--dr-space-3);
}

.dr-auth__social {
	display: grid;
	gap: var(--dr-space-1);
}

.dr-auth__social:empty {
	display: none;
}

/* Hide the divider when Google is not configured (no social output). */
.dr-auth__social:empty + .dr-auth__divider {
	display: none;
}

.dr-auth__divider {
	align-items: center;
	color: var(--dr-color-text-subtle);
	display: flex;
	font-size: var(--dr-font-size-100);
	gap: var(--dr-space-2);
	letter-spacing: var(--dr-letter-spacing-wide);
	margin-block: var(--dr-space-3);
	text-transform: uppercase;
}

.dr-auth__divider::before,
.dr-auth__divider::after {
	background: var(--dr-color-border);
	content: "";
	flex: 1;
	height: 1px;
}

/* WordPress core login form ---------------------------------------------- */

.dr-auth #dr-login-form p {
	margin-block: 0 var(--dr-space-2);
}

.dr-auth #dr-login-form label {
	color: var(--dr-color-text);
	display: block;
	font-size: var(--dr-font-size-200);
	font-weight: var(--dr-font-weight-semibold);
	margin-block-end: calc(var(--dr-space-1) / 2);
}

.dr-auth #dr-login-form .input {
	background: var(--dr-color-bg);
	border: var(--dr-border-width-1) solid var(--dr-color-border-strong);
	border-radius: var(--dr-radius-2);
	color: var(--dr-color-text);
	font-size: var(--dr-font-size-300);
	min-height: var(--dr-control-height-md);
	padding: var(--dr-space-1) var(--dr-space-2);
	width: 100%;
}

.dr-auth #dr-login-form .input:focus-visible {
	border-color: var(--dr-color-accent);
}

.dr-auth .login-remember label {
	align-items: center;
	display: flex;
	font-weight: var(--dr-font-weight-regular);
	gap: var(--dr-space-1);
}

.dr-auth .login-remember input {
	accent-color: var(--dr-color-accent);
	height: var(--dr-space-2);
	width: var(--dr-space-2);
}

.dr-auth #dr-login-form .button-primary {
	width: 100%;
}

/* Secondary actions ------------------------------------------------------- */

.dr-auth__meta,
.dr-auth__switch {
	font-size: var(--dr-font-size-200);
	margin-block-start: var(--dr-space-2);
}

.dr-auth__switch {
	border-top: var(--dr-border-width-1) solid var(--dr-color-border);
	color: var(--dr-color-text-muted);
	margin-block-start: var(--dr-space-3);
	padding-block-start: var(--dr-space-3);
}

.dr-auth__register-copy {
	color: var(--dr-color-text-muted);
	font-size: var(--dr-font-size-200);
	margin-block-end: var(--dr-space-2);
}

.dr-auth__native {
	margin-block: 0;
}

/* theme.json's unlayered global link color beats the layered .dr-btn text
 * color, so the white text must be re-asserted here. */
.dr-auth__native-button,
.dr-auth__native-button:hover,
.dr-auth__native-button:focus-visible,
.dr-auth__native-button:active {
	color: var(--dr-color-text-inverse);
}

/* Flex centering keeps the label centered on both axes (aligned with the
 * Google button above it), rather than relying on text-align alone. */
.dr-auth__native-button {
	align-items: center;
	display: flex;
	justify-content: center;
	text-decoration: none;
	width: 100%;
}

/* Google "Sign up with Google" button. The colored "G" mark and white surface
 * are kept per Google's branding (the hex values below are an intentional
 * exception to the tokens-only rule, like the footer payment marks), but the
 * format — height, radius and type — is matched to the theme button so the two
 * read as a pair. Rendered as a link that starts Nextend's Google OAuth flow. */
.dr-auth__social .gsi-material-button {
	border-color: var(--dr-color-border-strong);
	border-radius: var(--dr-btn-radius);
	font-family: inherit;
	font-size: var(--dr-btn-font-size);
	font-weight: var(--dr-btn-font-weight);
	height: var(--dr-btn-height);
	letter-spacing: var(--dr-btn-letter-spacing);
	max-width: none;
	min-height: var(--dr-btn-height);
	padding-inline: var(--dr-btn-padding-x);
	width: 100%;
}

.dr-auth__social .gsi-material-button .gsi-material-button-contents {
	font-family: inherit;
	font-size: var(--dr-btn-font-size);
	font-weight: var(--dr-btn-font-weight);
	letter-spacing: var(--dr-btn-letter-spacing);
}

.gsi-material-button {
	appearance: none;
	background-color: #fff;
	background-image: none;
	border: 1px solid #747775;
	border-radius: 4px;
	box-sizing: border-box;
	color: #1f1f1f;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	height: 40px;
	letter-spacing: 0.25px;
	outline: none;
	overflow: hidden;
	padding: 0 12px;
	position: relative;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
	user-select: none;
	vertical-align: middle;
	white-space: nowrap;
}

.gsi-material-button .gsi-material-button-icon {
	height: 20px;
	margin-right: 12px;
	min-width: 20px;
	width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	height: 100%;
	justify-content: center;
	position: relative;
	width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
	font-family: inherit;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
	bottom: 0;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 0.218s;
}

.gsi-material-button:active .gsi-material-button-state,
.gsi-material-button:focus .gsi-material-button-state {
	background-color: #303030;
	opacity: 12%;
}

.gsi-material-button:hover {
	box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.gsi-material-button:hover .gsi-material-button-state {
	background-color: #303030;
	opacity: 8%;
}

.gsi-material-button:focus-visible {
	outline: 3px solid var(--dr-color-focus);
	outline-offset: 2px;
}