/*!
 * PetMap Directory — the login form (`[petmap_login]`).
 *
 * Loaded only on a page that actually renders the shortcode (see
 * Front\Shortcodes::render_login() / Front\Assets::enqueue_auth_style()).
 * Every value here reads a --pmd-* token emitted by Front\DesignSystem, the
 * same discipline account.css and suggest-form.css follow, including their
 * duplicated .pmd-visually-hidden-shaped rules: this page can render with
 * neither of those stylesheets loaded, so nothing here is shared with them.
 *
 * @package PetMapDirectory
 */

.pmd-auth {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-4);
	max-width: 26rem;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	text-align: left;
}

/*
 * Same reasoning as suggest-form.css's own .pmd-suggest box-sizing rule:
 * this component does not carry the `.pmd-reset` opt-in's own box-sizing
 * reset from Front\StyleLoader::emit_base() on every element, only on this
 * root, so its own inputs (100% width + their own padding/border) do not
 * overflow their container under the browser's default content-box sizing.
 */
.pmd-auth,
.pmd-auth *,
.pmd-auth *::before,
.pmd-auth *::after {
	box-sizing: border-box;
}

.pmd-auth .pmd-auth-title {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
}

.pmd-auth-text {
	margin: 0;
	color: var(--pmd-color-text-muted);
}

.pmd-auth-notice {
	margin: 0;
	padding: var(--pmd-space-3);
	border-radius: var(--pmd-radius-md, 6px);
	color: var(--pmd-color-danger);
	background: rgba(239, 68, 68, 0.1);
	background: color-mix(in srgb, var(--pmd-color-danger) 10%, transparent);
}

.pmd-auth-form {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-3);
}

.pmd-auth-field {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-1);
	margin: 0;
}

.pmd-auth-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
}

.pmd-auth-remember-label {
	display: flex;
	align-items: center;
	gap: var(--pmd-space-2);
	font-weight: 400;
}

.pmd-auth-input {
	padding: var(--pmd-space-2) var(--pmd-space-3);
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-radius-md, 6px);
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	background: var(--pmd-color-surface);
}

.pmd-auth-input:focus-visible {
	outline: none;
	border-color: var(--pmd-color-primary);
}

.pmd-auth-remember {
	margin: 0;
}

.pmd-auth-submit {
	margin: 0;
}

/* Themes colour a:link / a:visited (more specific than one class): the
   button colours below must outrank them, or "Continue" turns purple. */
.pmd-auth-btn,
.pmd-auth a.pmd-auth-btn:link,
.pmd-auth a.pmd-auth-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--pmd-space-2) var(--pmd-space-4);
	border: 1px solid transparent;
	border-radius: var(--pmd-radius-md, 6px);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	color: var(--pmd-color-on-primary);
	font-family: var(--pmd-font-sans, inherit);
	background: var(--pmd-color-primary);
}

.pmd-auth-btn:hover,
.pmd-auth-btn:focus-visible {
	background: var(--pmd-color-primary-hover);
}

.pmd-auth-btn-secondary,
.pmd-auth a.pmd-auth-btn-secondary:link,
.pmd-auth a.pmd-auth-btn-secondary:visited {
	color: var(--pmd-color-primary);
	background: transparent;
	border-color: var(--pmd-color-primary);
}

.pmd-auth-btn-secondary:hover,
.pmd-auth-btn-secondary:focus-visible {
	background: var(--pmd-color-primary-soft);
}

.pmd-auth-actions {
	display: flex;
	gap: var(--pmd-space-3);
	flex-wrap: wrap;
}

.pmd-auth-links {
	display: flex;
	gap: var(--pmd-space-3);
	flex-wrap: wrap;
	margin: 0;
	font-size: 0.875rem;
}

.pmd-auth-links a,
.pmd-auth-resend,
a.pmd-auth-resend:link,
a.pmd-auth-resend:visited {
	color: var(--pmd-color-primary);
}

.pmd-auth-notice.is-success {
	color: var(--pmd-color-success, #10b981);
	background: rgba(16, 185, 129, 0.1);
	background: color-mix(in srgb, var(--pmd-color-success, #10b981) 10%, transparent);
}

/* Custom registration fields: help text, required marker, field error. */
.pmd-auth-help {
	font-size: 0.8125rem;
	color: var(--pmd-color-text-muted);
}

.pmd-auth-required {
	color: var(--pmd-color-danger);
}

.pmd-auth-field-error {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--pmd-color-danger);
}

.pmd-auth-preview {
	color: var(--pmd-color-text-muted);
	background: var(--pmd-color-primary-soft);
}