/* ───────────────────────────────────────────────────────────────
   accounts.css — Login, register, and profile forms
   Loaded only on /inloggen/, /aanmelden/, /mijn-account/,
   and /wachtwoord-vergeten/.
   ─────────────────────────────────────────────────────────────── */

/* The page template nests constrained wp:post-content inside a constrained
   <main>, doubling the side padding. Reset the inner layer so the form
   aligns with the page title above it. */
.blik-account-page .wp-block-post-content,
.blik-account-page .wp-block-post-content.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

/* Forms fill the same content column as the page title and text above them
   (theme.json contentSize), so the page reads as one clean column. */
.blik-auth-form,
#loginform {
	width: 100%;
	margin: 0 0 var(--blik-spacing-2xl);
}

/* ── Form rows ── */
.blik-form-row,
#loginform p:not(.forgetmenot):not(.submit) {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: var(--blik-spacing-lg);
}

.blik-form-row label,
#loginform label {
	font-family: var(--wp--preset--font-family--encode-sans-expanded);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--blik-color-ink);
}

.blik-form-hint {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--blik-color-muted);
}

/* ── Inputs ── */
.blik-form-row input,
#loginform input[type="text"],
#loginform input[type="password"] {
	border: 1px solid var(--blik-color-line);
	border-radius: 0;
	box-shadow: none;
	padding: 10px 12px;
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: var(--wp--preset--font-size--small);
	color: var(--blik-color-ink);
	background: var(--blik-color-paper);
	width: 100%;
	box-sizing: border-box;
	transition: border-color var(--blik-transition-fast);
	-webkit-appearance: none;
}

.blik-form-row input:focus,
#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
	border-color: var(--blik-color-red);
	box-shadow: none;
	outline: none;
}

/* ── Buttons ── */
.blik-btn,
#loginform input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--blik-color-red);
	color: #fff;
	font-family: var(--wp--preset--font-family--encode-sans-expanded);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 24px;
	border: none;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--blik-transition-fast);
	-webkit-appearance: none;
}

.blik-btn:hover,
#loginform input[type="submit"]:hover {
	background-color: var(--blik-color-purple);
	color: #fff;
	text-decoration: none;
}

.blik-btn--ghost {
	background-color: transparent;
	color: var(--blik-color-muted);
	border: 1px solid var(--blik-color-line);
}

.blik-btn--ghost:hover {
	background-color: transparent;
	color: var(--blik-color-ink);
	border-color: var(--blik-color-ink);
}

.blik-form-actions {
	display: flex;
	align-items: center;
	gap: var(--blik-spacing-lg);
	flex-wrap: wrap;
}

/* ── Remember me row ── */
#loginform .forgetmenot {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-direction: row;
	margin-bottom: var(--blik-spacing-lg);
}

#loginform .forgetmenot label {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
}

/* ── Submit row ── */
#loginform .submit {
	margin: 0;
}

/* ── Notices ──
   A notice is a short uppercase heading plus normal-case body text. The whole
   thing used to be uppercase Encode Sans, which is unreadable at sentence
   length — and the moment that matters most (right after signing up, when the
   reader has to be told to go and check their mail) is exactly the moment the
   text is longest. */
.blik-notice {
	padding: 14px 18px;
	margin-bottom: var(--blik-spacing-2xl);
	border-left: 3px solid var(--blik-color-red);
}

.blik-notice__title {
	display: block;
	font-family: var(--wp--preset--font-family--encode-sans-expanded);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
}

.blik-notice__text {
	margin: 8px 0 0;
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	color: var(--blik-color-ink);
}

/* The junk-mail hint is secondary to the main message — quieter, and separated
   by a hairline so it reads as an aside rather than part of the instruction. */
.blik-notice__junk {
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--blik-color-line);
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	color: var(--blik-color-muted);
}

.blik-notice__junk strong {
	font-weight: 700;
	color: var(--blik-color-ink);
}

.blik-notice--success {
	background-color: var(--blik-color-panel);
	color: var(--blik-color-ink);
}

.blik-notice--error {
	background-color: #fef2f2;
}

.blik-notice--error .blik-notice__title {
	color: var(--blik-color-red);
}

/* ── Account header ── */
.blik-account-header {
	margin-bottom: var(--blik-spacing-2xl);
	padding-bottom: var(--blik-spacing-lg);
	border-bottom: 1px solid var(--blik-color-line);
}

.blik-account-name {
	font-family: var(--wp--preset--font-family--encode-sans-expanded);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	margin: 0 0 4px;
}

.blik-account-email {
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: var(--wp--preset--font-size--small);
	color: var(--blik-color-muted);
	margin: 0;
}

/* ── Footer links ── */
.blik-form-footer {
	margin-top: var(--blik-spacing-lg);
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: var(--wp--preset--font-size--small);
	color: var(--blik-color-muted);
}

.blik-form-footer a {
	color: var(--blik-color-purple);
	text-decoration: none;
	transition: color var(--blik-transition-fast);
}

.blik-form-footer a:hover {
	color: var(--blik-color-red);
}

/* ─── Resend confirmation e-mail ───
   Collapsed by default under the login form: only relevant to the small
   number of people whose confirmation mail went missing, so it should not
   compete with the login button. */
.blik-resend {
	margin-top: var(--blik-spacing-lg, 24px);
	border-top: 1px solid var(--wp--preset--color--accent-4, #ccc);
	padding-top: 12px;
}

.blik-resend summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--encode-sans-expanded);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.blik-resend summary:hover {
	color: var(--blik-color-red);
}

.blik-auth-form--inline {
	margin-top: 12px;
}