/**
 * PasswordReset front-end styles.
 * File: modules/password-reset/assets/css/password-reset-frontend.css
 *
 * ── Why this does not use the plugin's design tokens ────────────────────────
 *
 * These forms render on the public site, inside whatever theme is running.
 * tokens.css is an admin stylesheet and is not loaded here, so the values below
 * are declared locally on .occ-pw-wrap instead. Same reasoning, and the same
 * values, as registration-guard-forms.css.
 *
 * Declaring them as custom properties rather than inline values is what makes
 * the form themeable: a child theme can restate any of them and the whole form
 * follows, without overriding rule by rule.
 *
 * ── One thing this file must not do ─────────────────────────────────────────
 *
 * Nothing here may hide a control that the flow depends on. This is the page
 * somebody reaches when they cannot get into their account, often on a phone, on
 * a connection that may have dropped a stylesheet. Everything degrades to a
 * readable stack of labelled fields and buttons.
 */

.occ-pw-wrap {
	--occ-pw-accent: #a41e32;
	--occ-pw-accent-hover: #7d1626;
	--occ-pw-accent-tint: #faeef0;
	--occ-pw-on-accent: #fff;

	--occ-pw-success: #1f7a3d;
	--occ-pw-success-tint: #eaf6ed;
	--occ-pw-warning: #a76a00;
	--occ-pw-warning-tint: #fdf4e3;
	--occ-pw-danger: #d13438;
	--occ-pw-danger-tint: #fdeceb;
	--occ-pw-info-tint: #eef4fb;
	--occ-pw-info: #2b5c8a;

	--occ-pw-border: #d8dde3;
	--occ-pw-border-strong: #b6bec7;
	--occ-pw-muted: #6b7280;
	--occ-pw-surface: #f7f8f9;

	--occ-pw-radius: 10px;
	--occ-pw-gap: 18px;

	box-sizing: border-box;
	max-width: 480px;
	margin: 0 auto;

	/* The theme's font, deliberately. A reset form that announces itself with
	   different type reads as a third-party widget bolted on. */
	font-family: inherit;
}

.occ-pw-wrap *,
.occ-pw-wrap *::before,
.occ-pw-wrap *::after {
	box-sizing: inherit;
}

/* --- Header ------------------------------------------------------------- */

.occ-pw-header {
	text-align: center;
	margin-bottom: var(--occ-pw-gap);
}

.occ-pw-header .dashicons {
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: var(--occ-pw-accent);
	margin-bottom: 8px;
}

.occ-pw-header h2 {
	margin: 0 0 6px;
	font-size: 1.35em;
	line-height: 1.3;
}

.occ-pw-header p {
	margin: 0;
	color: var(--occ-pw-muted);
	font-size: 0.9em;
	line-height: 1.5;
}

/* --- Body and fields ---------------------------------------------------- */

.occ-pw-body {
	background: var(--occ-pw-surface);
	border: 1px solid var(--occ-pw-border);
	border-radius: var(--occ-pw-radius);
	padding: var(--occ-pw-gap);
}

.occ-pw-field {
	margin-bottom: var(--occ-pw-gap);
}

.occ-pw-field:last-child {
	margin-bottom: 0;
}

.occ-pw-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.9em;
}

.occ-pw-field input[type="text"],
.occ-pw-field input[type="password"] {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--occ-pw-border-strong);
	border-radius: calc(var(--occ-pw-radius) - 4px);
	background: #fff;
	font-family: inherit;
	font-size: 1em;
	line-height: 1.4;
}

.occ-pw-field input:focus {
	outline: none;
	border-color: var(--occ-pw-accent);
	box-shadow: 0 0 0 3px var(--occ-pw-accent-tint);
}

/* --- Show/hide password -------------------------------------------------- */

.occ-pw-password-wrap {
	position: relative;
}

.occ-pw-password-wrap input {
	padding-right: 44px;
}

.occ-pw-toggle-password {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
	color: var(--occ-pw-muted);
	line-height: 0;
}

.occ-pw-toggle-password:hover {
	color: var(--occ-pw-accent);
}

/* --- The verification code ---------------------------------------------- */

.occ-pw-field input.occ-pw-code {
	text-align: center;
	font-size: 1.6em;
	letter-spacing: 0.5em;

	/* The trailing letter-space pushes the visual centre left by half a space.
	   Pulling it back keeps the digits centred in the box. */
	text-indent: 0.5em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Buttons ------------------------------------------------------------- */

.occ-pw-btn {
	display: inline-block;
	width: 100%;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: calc(var(--occ-pw-radius) - 4px);
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.occ-pw-btn-primary {
	background: var(--occ-pw-accent);
	color: var(--occ-pw-on-accent);
}

.occ-pw-btn-primary:hover {
	background: var(--occ-pw-accent-hover);
	color: var(--occ-pw-on-accent);
}

.occ-pw-btn-danger {
	background: var(--occ-pw-danger);
	color: #fff;
}

.occ-pw-btn-secondary {
	background: #fff;
	border-color: var(--occ-pw-border-strong);
	color: inherit;
}

.occ-pw-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.occ-pw-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* --- Alerts and messages ------------------------------------------------- */

.occ-pw-alert {
	display: none;
	margin-bottom: var(--occ-pw-gap);
	padding: 11px 13px;
	border-radius: calc(var(--occ-pw-radius) - 4px);
	border: 1px solid transparent;
	font-size: 0.9em;
	line-height: 1.5;
}

.occ-pw-alert.is-visible {
	display: block;
}

.occ-pw-alert.is-error {
	background: var(--occ-pw-danger-tint);
	border-color: var(--occ-pw-danger);
	color: #7a1c1f;
}

.occ-pw-alert.is-success {
	background: var(--occ-pw-success-tint);
	border-color: var(--occ-pw-success);
	color: #14532b;
}

/*
 * Standalone result messages, rendered by OCC_PW_Handler::render_message().
 *
 * State is carried by tint, border and icon together, never by text colour
 * alone: the accent is itself a red, so a danger colour near it would read as
 * the same signal, and red against green is the commonest colour blindness.
 */
.occ-pw-message {
	max-width: 480px;
	margin: 0 auto;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 14px 16px;
	border: 1px solid transparent;
	border-radius: var(--occ-pw-radius);
	font-family: inherit;
	line-height: 1.5;
}

.occ-pw-message .dashicons {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	font-size: 20px;
}

.occ-pw-message--success {
	background: #eaf6ed;
	border-color: #1f7a3d;
	color: #14532b;
}

.occ-pw-message--warning {
	background: #fdf4e3;
	border-color: #a76a00;
	color: #6b4400;
}

.occ-pw-message--error {
	background: #fdeceb;
	border-color: #d13438;
	color: #7a1c1f;
}

.occ-pw-message--info {
	background: #eef4fb;
	border-color: #2b5c8a;
	color: #1d3f5e;
}

/* --- Request details on the confirmation page ---------------------------- */

.occ-pw-details {
	margin: 0 0 var(--occ-pw-gap);
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--occ-pw-border);
	border-radius: calc(var(--occ-pw-radius) - 4px);
	font-size: 0.88em;
}

.occ-pw-details dt {
	color: var(--occ-pw-muted);
	font-weight: 600;
}

.occ-pw-details dd {
	margin: 0 0 8px;
	word-break: break-word;
}

.occ-pw-details dd:last-child {
	margin-bottom: 0;
}

/* --- Password policy ----------------------------------------------------- */

.occ-pw-policy {
	list-style: none;
	margin: 0 0 var(--occ-pw-gap);
	padding: 0;
	font-size: 0.88em;
}

.occ-pw-policy-item {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
	color: var(--occ-pw-muted);
}

.occ-pw-policy-item .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

/* Met requirements gain a tick as well as a colour, so the change is visible
   without relying on hue. */
.occ-pw-policy-item.is-met {
	color: var(--occ-pw-success);
}

/* --- Odds and ends ------------------------------------------------------- */

.occ-pw-note {
	margin: 0 0 var(--occ-pw-gap);
	color: var(--occ-pw-muted);
	font-size: 0.85em;
	line-height: 1.5;
}

.occ-pw-footer {
	margin-top: var(--occ-pw-gap);
	text-align: center;
	font-size: 0.9em;
}

.occ-pw-field-verification {
	display: flex;
	justify-content: center;
}

@media (max-width: 480px) {

	.occ-pw-body {
		padding: 14px;
	}

	.occ-pw-field input.occ-pw-code {
		font-size: 1.3em;
		letter-spacing: 0.35em;
		text-indent: 0.35em;
	}
}