/*
 * Generated by bin/build-rtl.js — do not edit.
 *
 * Edit the left-to-right stylesheet next to this file and run
 * `npm run build:rtl`. WordPress serves this file instead of that one on
 * a right-to-left locale.
 */
/**
 * AuthDock Public Styles
 *
 * Styles for social login buttons, magic link form, and 2FA challenge
 * on wp-login.php and frontend shortcodes.
 *
 * @since   1.0.0
 * @package AuthDock
 */

/* ==========================================================================
   Social Login Buttons
   ========================================================================== */

.authdock-social-login {
	margin: 16px 0;
	text-align: center;
}

.authdock-social-login .authdock-divider {
	align-items: center;
	display: flex;
	margin: 16px 0;
}

.authdock-social-login .authdock-divider::before,
.authdock-social-login .authdock-divider::after {
	background: #dcdcde;
	content: "";
	flex: 1;
	height: 1px;
}

.authdock-social-login .authdock-divider span {
	color: #646970;
	font-size: 13px;
	padding: 0 12px;
}

.authdock-social-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.authdock-social-buttons.horizontal {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.authdock-social-btn {
	align-items: center;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 500;
	gap: 10px;
	justify-content: center;
	padding: 10px 16px;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.authdock-social-btn:hover {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.authdock-social-btn:focus {
	box-shadow: 0 0 0 2px #3858e9;
	outline: none;
}

/*
 * One size for every provider mark, and no shrinking.
 *
 * The button is a flex row, and a mark left at `flex: auto` gives up width to
 * a long label — so "Sign in with Microsoft" squashed its icon narrower than
 * "Sign in with X" did, in the same column of buttons. `flex: none` holds the
 * box; the marks' own viewBoxes hold what is drawn inside it to the same
 * square. See AuthDock_Icons::$viewboxes.
 */
.authdock-social-btn svg {
	flex: none;
	height: 20px;
	width: 20px;
}

/* Provider-specific colors — overridable via block CSS variables */
.authdock-social-btn.google {
	background: var(--authdock-social-btn-bg, #fff);
	border-color: var(--authdock-social-btn-bg, #dadce0);
	color: var(--authdock-social-btn-text, #3c4043);
}

.authdock-social-btn.google:hover {
	background: var(--authdock-social-btn-bg, #f8f9fa);
	filter: brightness(0.97);
}

.authdock-social-btn.facebook {
	background: var(--authdock-social-btn-bg, #1877f2);
	border-color: var(--authdock-social-btn-bg, #1877f2);
	color: var(--authdock-social-btn-text, #fff);
}

.authdock-social-btn.facebook:hover {
	background: var(--authdock-social-btn-bg, #166fe5);
	filter: brightness(0.95);
}

.authdock-social-btn.github {
	background: var(--authdock-social-btn-bg, #24292e);
	border-color: var(--authdock-social-btn-bg, #24292e);
	color: var(--authdock-social-btn-text, #fff);
}

.authdock-social-btn.github:hover {
	background: var(--authdock-social-btn-bg, #2f363d);
	filter: brightness(1.1);
}

.authdock-social-btn.x-twitter {
	background: var(--authdock-social-btn-bg, #000);
	border-color: var(--authdock-social-btn-bg, #000);
	color: var(--authdock-social-btn-text, #fff);
}

.authdock-social-btn.x-twitter:hover {
	background: var(--authdock-social-btn-bg, #1a1a1a);
	filter: brightness(1.15);
}

/*
 * The six providers added in 1.4. Without these each rendered in the
 * unbranded default, which on a row beside a Google and a GitHub button reads
 * as a button that has not finished loading.
 */

.authdock-social-btn.apple {
	background: var(--authdock-social-btn-bg, #000);
	border-color: var(--authdock-social-btn-bg, #000);
	color: var(--authdock-social-btn-text, #fff);
}

.authdock-social-btn.apple:hover {
	background: var(--authdock-social-btn-bg, #1a1a1a);
	filter: brightness(1.15);
}

.authdock-social-btn.microsoft {
	background: var(--authdock-social-btn-bg, #fff);
	border-color: var(--authdock-social-btn-bg, #8c8c8c);
	color: var(--authdock-social-btn-text, #5e5e5e);
}

.authdock-social-btn.microsoft:hover {
	background: var(--authdock-social-btn-bg, #f3f3f3);
}

.authdock-social-btn.linkedin {
	background: var(--authdock-social-btn-bg, #0a66c2);
	border-color: var(--authdock-social-btn-bg, #0a66c2);
	color: var(--authdock-social-btn-text, #fff);
}

.authdock-social-btn.linkedin:hover {
	background: var(--authdock-social-btn-bg, #004182);
	filter: brightness(1.1);
}

.authdock-social-btn.discord {
	background: var(--authdock-social-btn-bg, #5865f2);
	border-color: var(--authdock-social-btn-bg, #5865f2);
	color: var(--authdock-social-btn-text, #fff);
}

.authdock-social-btn.discord:hover {
	background: var(--authdock-social-btn-bg, #4752c4);
	filter: brightness(1.1);
}

.authdock-social-btn.twitch {
	background: var(--authdock-social-btn-bg, #9146ff);
	border-color: var(--authdock-social-btn-bg, #9146ff);
	color: var(--authdock-social-btn-text, #fff);
}

.authdock-social-btn.twitch:hover {
	background: var(--authdock-social-btn-bg, #772ce8);
	filter: brightness(1.1);
}

.authdock-social-btn.slack {
	background: var(--authdock-social-btn-bg, #4a154b);
	border-color: var(--authdock-social-btn-bg, #4a154b);
	color: var(--authdock-social-btn-text, #fff);
}

.authdock-social-btn.slack:hover {
	background: var(--authdock-social-btn-bg, #611f69);
	filter: brightness(1.1);
}

/* Icon-only style */
.authdock-social-btn.icon-only {
	padding: 10px;
	width: 44px;
}

/* ==========================================================================
   Magic Link Form
   ========================================================================== */

.authdock-magic-login {
	margin: 16px 0;
}

.authdock-magic-login label {
	color: var(--authdock-label-color, #1d2327);
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}

.authdock-magic-login input[type="email"] {
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	box-sizing: border-box;
	color: #2c3338;
	font-size: 14px;
	line-height: 2;
	margin-bottom: 12px;
	min-height: 40px;
	padding: 0 10px;
	width: 100%;
}

.authdock-magic-login input[type="email"]:focus {
	border-color: #3858e9;
	box-shadow: 0 0 0 1px #3858e9;
	outline: none;
}

.authdock-magic-login input[type="email"]::placeholder {
	color: var(--authdock-placeholder-color, #8c8f94);
}

.authdock-magic-login .authdock-magic-submit {
	background: var(--authdock-btn-bg, #3858e9);
	border: 1px solid var(--authdock-btn-bg, #3858e9);
	border-radius: 4px;
	box-sizing: border-box;
	color: var(--authdock-btn-text, #fff);
	cursor: pointer;
	font-size: var(--authdock-btn-font-size, 14px);
	font-weight: 600;
	line-height: 2.15;
	margin-bottom: 8px;
	min-height: 40px;
	padding: 0 16px;
	text-align: center;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	width: 100%;
}

.authdock-magic-login .authdock-magic-submit:hover {
	filter: brightness(0.92);
}

.authdock-magic-login .authdock-magic-submit:focus {
	box-shadow: 0 0 0 2px #3858e9;
	outline: none;
}

.authdock-magic-login .authdock-magic-submit:disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

.authdock-magic-login .authdock-magic-message {
	border-radius: 4px;
	font-size: 13px;
	margin-top: 16px;
	padding: 10px 14px;
}

.authdock-magic-login .authdock-magic-message.success {
	background: #edfaef;
	border: 1px solid #00a32a;
	color: #00a32a;
}

.authdock-magic-login .authdock-magic-message.error {
	background: #fce4e4;
	border: 1px solid #d63638;
	color: #d63638;
}

/*
 * Optional consent line under the sign-in buttons. Quiet by design: it is a
 * notice, not a call to action.
 */
.authdock-social-login .authdock-social-consent {
	color: #646970;
	font-size: 12px;
	line-height: 1.5;
	margin: 10px 0 0;
}

/* ==========================================================================
   2FA Challenge Form
   ========================================================================== */

.authdock-2fa-challenge {
	margin: 20px 0;
	text-align: center;
}

.authdock-2fa-challenge h2 {
	font-size: 18px;
	margin-bottom: 8px;
}

.authdock-2fa-challenge p {
	color: #646970;
	font-size: 13px;
	margin-bottom: 16px;
}

.authdock-2fa-challenge .authdock-2fa-code {
	font-size: 24px;
	letter-spacing: 8px;
	margin-bottom: 16px;
	padding: 12px;
	text-align: center;
	width: 200px;
}

.authdock-2fa-challenge .authdock-2fa-submit {
	margin-bottom: 16px;
	width: 100%;
}

/*
 * Backup code mode.
 *
 * Sized for what this field actually holds. The rule above is a six-digit PIN
 * grid — 24px type with the characters pushed 8px apart so each digit reads
 * separately — and a backup code is eight alphanumeric characters with a
 * sentence for a placeholder, which needed about 300px of that treatment in a
 * 200px box: the passkey screen showed "Or a backup cc" and stopped.
 *
 * The field is set smaller rather than the placeholder alone. A placeholder at
 * its own font-size shares the line box of the field's, sits on that larger
 * font's baseline, and so rides low in the box — centred horizontally and
 * visibly not centred vertically. One size for both is what puts it in the
 * middle, and it leaves room for a translation half again as long.
 */
.authdock-2fa-challenge .authdock-2fa-code[inputmode="text"] {
	font-size: 18px;
	letter-spacing: 2px;
	width: 240px;
}

/*
 * The placeholder is prose; only the value is a code. Tracking a sentence out
 * by 2px a letter is what made it wide, and it buys nothing — the spacing is
 * there so a typed code reads as separate characters.
 *
 * Scoped to this mode on purpose: the other branch's placeholder is "000000",
 * a picture of the value, and should go on looking like one.
 */
.authdock-2fa-challenge .authdock-2fa-code[inputmode="text"]::placeholder {
	letter-spacing: normal;
}

/*
 * The refusal message. This was an inline style attribute on the element,
 * which no theme could override and no Content-Security-Policy would allow.
 */
.authdock-2fa-challenge .authdock-2fa-error {
	color: #d63638;
	font-size: 13px;
	margin-bottom: 12px;
}

/*
 * Both live regions stay in the document — and so in the accessibility tree —
 * and are hidden by being empty rather than by display:none. A region that is
 * display:none when the text is written into it announces nothing.
 */
.authdock-2fa-challenge .authdock-2fa-error:empty,
.authdock-magic-login .authdock-magic-message:empty {
	display: none;
}

.authdock-2fa-challenge .authdock-2fa-alternatives {
	margin-top: 20px;
}

/*
 * "Use a backup code" is a button that looks like a link, rather than a link
 * that behaves like a button. Same appearance, correct semantics: it is
 * announced as a button, responds to Space as well as Enter, and leaves no
 * fragment in the address bar.
 */
.authdock-2fa-challenge .authdock-2fa-alternatives a,
.authdock-2fa-challenge .authdock-2fa-use-backup {
	background: none;
	border: 0;
	color: #646970;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	padding: 2px 4px;
	text-decoration: none;
}

.authdock-2fa-challenge .authdock-2fa-alternatives a:hover,
.authdock-2fa-challenge .authdock-2fa-use-backup:hover {
	color: #3858e9;
}

.authdock-2fa-challenge .authdock-2fa-use-backup:focus {
	color: #3858e9;
	outline: 2px solid #3858e9;
	outline-offset: 1px;
}

/*
 * The backup-code button and the account centre's sections are shown and
 * hidden with the [hidden] attribute rather than an inline style, so that
 * nothing here needs a Content-Security-Policy exception. Declared explicitly
 * because an author rule setting display would otherwise beat the UA sheet.
 */
.authdock-2fa-challenge [hidden],
.authdock-account [hidden] {
	display: none;
}

/*
 * Visually hidden, still announced. wp-login.php defines this, a theme may
 * not, and the shortcode and block render on the frontend.
 */
.authdock-2fa-challenge .screen-reader-text,
.authdock-magic-login .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ==========================================================================
   Trusted Device Checkbox
   ========================================================================== */

.authdock-trust-device {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 12px 0;
}

.authdock-trust-device label {
	color: #646970;
	font-size: 13px;
}

/* ==========================================================================
   Login Form Shortcode ([authdock_login_form])
   ========================================================================== */

.authdock-login-form-wrapper {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	margin: 0 auto;
	max-width: 400px;
	padding: 24px;
}

.authdock-login-form-wrapper .authdock-login-field {
	margin-bottom: 16px;
}

.authdock-login-form-wrapper .authdock-login-field label {
	color: var(--authdock-label-color, #1d2327);
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}

.authdock-login-form-wrapper .authdock-login-field input {
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	box-sizing: border-box;
	color: #2c3338;
	font-size: 14px;
	line-height: 2;
	min-height: 40px;
	padding: 0 10px;
	width: 100%;
}

.authdock-login-form-wrapper .authdock-login-field input:focus {
	border-color: #3858e9;
	box-shadow: 0 0 0 1px #3858e9;
	outline: none;
}

.authdock-login-form-wrapper .authdock-login-remember {
	margin-bottom: 20px;
}

.authdock-login-form-wrapper .authdock-login-remember label {
	align-items: center;
	color: #50575e;
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	gap: 6px;
}

.authdock-login-form-wrapper .authdock-login-remember input[type="checkbox"] {
	border: 1px solid #8c8f94;
	border-radius: 3px;
	height: 16px;
	margin: 0;
	width: 16px;
}

.authdock-login-form-wrapper .authdock-login-submit {
	margin-bottom: 0;
}

.authdock-login-form-wrapper .authdock-login-submit button,
.authdock-login-form-wrapper .authdock-login-submit .button {
	background: var(--authdock-btn-bg, #3858e9);
	border: 1px solid var(--authdock-btn-bg, #3858e9);
	border-radius: 4px;
	box-sizing: border-box;
	color: var(--authdock-btn-text, #fff);
	cursor: pointer;
	font-size: var(--authdock-btn-font-size, 14px);
	font-weight: 600;
	line-height: 2.15;
	min-height: 40px;
	padding: 0 16px;
	text-align: center;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	width: 100%;
}

.authdock-login-form-wrapper .authdock-login-submit button:hover,
.authdock-login-form-wrapper .authdock-login-submit .button:hover {
	filter: brightness(0.92);
}

.authdock-login-form-wrapper .authdock-login-submit button:focus,
.authdock-login-form-wrapper .authdock-login-submit .button:focus {
	box-shadow: 0 0 0 2px #3858e9;
	outline: none;
}

/* Nested social and magic sections inherit the wrapper context */
.authdock-login-form-wrapper .authdock-divider {
	align-items: center;
	display: flex;
	margin: 20px 0;
}

.authdock-login-form-wrapper .authdock-divider::before,
.authdock-login-form-wrapper .authdock-divider::after {
	background: #dcdcde;
	content: "";
	flex: 1;
	height: 1px;
}

.authdock-login-form-wrapper .authdock-divider span {
	color: #646970;
	font-size: 13px;
	padding: 0 12px;
}

/* ==========================================================================
   Login Page Integration
   ========================================================================== */

.login .authdock-social-login {
	margin: 0 0 20px;
}

.login .authdock-magic-login {
	margin: 0 0 20px;
}

/* ==========================================================================
   Bot protection

   The honeypot is hidden by the stylesheet rather than with type="hidden",
   because a bot that skips hidden inputs is the one worth catching. It is
   out of the accessibility tree and out of the tab order in the markup, so
   nobody using a screen reader or a keyboard ever meets it.
   ========================================================================== */

.authdock-hp {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.authdock-pow-status {
	color: #646970;
	font-size: 12px;
	margin: 8px 0 0;
}

.authdock-pow-status:empty {
	display: none;
}

.authdock-captcha {
	margin: 12px 0;
}

/* ==========================================================================
   Login-screen notices

   Rendered by AuthDock_Login_Limiter::render_lockout_message(). The colours
   used to be inline style attributes on the markup, which no theme could
   override and no Content-Security-Policy would allow (doc 04 §4).
   ========================================================================== */

.login .authdock-login-notice-error {
	border-right-color: #dc3232;
}

.login .authdock-login-notice-warning {
	border-right-color: #ffb900;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 480px) {

	.authdock-social-buttons.horizontal {
		flex-direction: column;
	}

	.authdock-login-form-wrapper {
		border-right: 0;
		border-radius: 0;
		border-left: 0;
		padding: 20px 16px;
	}
}

/* ==========================================================================
   Passkeys
   ========================================================================== */

/*
 * Shared by the account centre's manager panel and the two-factor challenge.
 * The profile screen has its own copy in the admin stylesheet, because
 * wp-admin supplies most of this already and the two should not fight.
 */
.authdock-passkey-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.authdock-passkey-item {
	align-items: center;
	border-bottom: 1px solid #f0f0f1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 0;
}

.authdock-passkey-item strong {
	flex: 1 1 auto;
}

.authdock-passkey-meta {
	color: #646970;
	font-size: 13px;
}

.authdock-passkey-add label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.authdock-passkey-add input[type="text"],
.authdock-passkey-add input[type="password"] {
	max-width: 320px;
	width: 100%;
}

/*
 * Empty until something happens, and hidden while it is — a live region that
 * is display:none is not in the accessibility tree, so it stays in the
 * document and collapses on :empty instead (doc 04 §4).
 */
.authdock-passkey-status {
	margin: 8px 0 0;
}

.authdock-passkey-status:empty {
	display: none;
}

.authdock-passkey-status.error {
	color: #d63638;
}

.authdock-passkey-challenge {
	margin-bottom: 12px;
}

/* ==========================================================================
   Passwordless first
   ========================================================================== */

/*
 * The password row is folded away with the `hidden` attribute rather than an
 * inline style, so nothing here needs a Content-Security-Policy exception and
 * a screen reader is told the truth about what is on the page (doc 04 §4).
 */
.authdock-password-toggle[hidden],
.authdock-login-form [hidden] {
	display: none;
}

.authdock-password-toggle {
	margin: 8px 0;
}

.authdock-passwordless-status {
	margin: 8px 0 0;
}

.authdock-passwordless-status:empty {
	display: none;
}

/* ==========================================================================
   Front-end forms: registration, lost password, notices and links

   The registration and lost-password forms shipped in 1.3 with no styles of
   their own, so they rendered as whatever the theme did to a bare form —
   beside a sign-in form that had a card, focus rings and a full-width button.
   These give all three the same card, and the same custom properties the
   blocks set.
   ========================================================================== */

.authdock-login-form-wrapper,
.authdock-register-form-wrapper,
.authdock-lost-password-wrapper {
	box-sizing: border-box;
	color: #1d2327;
}

.authdock-register-form-wrapper,
.authdock-lost-password-wrapper {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	margin: 0 auto;
	max-width: 400px;
	padding: 24px;
}

.authdock-form-field {
	margin: 0 0 16px;
}

.authdock-form-field label {
	color: var(--authdock-label-color, #1d2327);
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}

.authdock-form-field input {
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	box-sizing: border-box;
	color: #2c3338;
	font-size: 14px;
	line-height: 2;
	min-height: 40px;
	padding: 0 10px;
	width: 100%;
}

.authdock-form-field input:focus {
	border-color: #3858e9;
	box-shadow: 0 0 0 1px #3858e9;
	outline: none;
}

.authdock-form-note {
	color: #646970;
	font-size: 13px;
	margin: 0 0 16px;
}

.authdock-form-submit {
	margin: 0;
}

.authdock-form-submit .button {
	background: var(--authdock-btn-bg, #3858e9);
	border: 1px solid var(--authdock-btn-bg, #3858e9);
	border-radius: 4px;
	box-sizing: border-box;
	color: var(--authdock-btn-text, #fff);
	cursor: pointer;
	font-size: var(--authdock-btn-font-size, 14px);
	font-weight: 600;
	line-height: 2.15;
	min-height: 40px;
	padding: 0 16px;
	text-align: center;
	width: 100%;
}

.authdock-form-submit .button:hover {
	filter: brightness(0.92);
}

.authdock-form-submit .button:focus {
	box-shadow: 0 0 0 2px #3858e9;
	outline: none;
}

.authdock-form-errors,
.authdock-form-success,
.authdock-form-notice {
	border-right: 4px solid;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 16px;
	padding: 10px 14px;
}

.authdock-form-errors {
	background: #fcf0f1;
	border-color: #d63638;
	color: #8a2424;
}

.authdock-form-errors p {
	margin: 0;
}

.authdock-form-errors p + p {
	margin-top: 4px;
}

.authdock-form-success {
	background: #edfaef;
	border-color: #00a32a;
	color: #1e4620;
}

.authdock-form-notice {
	background: #f6f7f7;
	border-color: #72aee6;
	color: #1d2327;
}

.authdock-form-links,
.authdock-login-links {
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 4px 16px;
	justify-content: center;
	margin: 16px 0 0;
}

/*
 * The plain style: no card, and the colours of whatever the form sits in.
 * The block adds `is-style-plain` to its wrapper; the shortcode's
 * `style="plain"` adds it to the form's own wrapper.
 */
.is-style-plain .authdock-login-form-wrapper,
.is-style-plain .authdock-register-form-wrapper,
.is-style-plain .authdock-lost-password-wrapper,
.authdock-login-form-wrapper.is-style-plain,
.authdock-register-form-wrapper.is-style-plain,
.authdock-lost-password-wrapper.is-style-plain {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	max-width: none;
	padding: 0;
}

.is-style-plain .authdock-login-field label,
.is-style-plain .authdock-form-field label,
.is-style-plain .authdock-login-remember label,
.is-style-plain.authdock-login-form-wrapper .authdock-login-field label,
.is-style-plain.authdock-login-form-wrapper .authdock-login-remember label,
.is-style-plain.authdock-register-form-wrapper .authdock-form-field label,
.is-style-plain.authdock-lost-password-wrapper .authdock-form-field label {
	color: var(--authdock-label-color, inherit);
}

/* ==========================================================================
   Log-out button
   ========================================================================== */

.authdock-logout-button {
	border: 1px solid currentColor;
	border-radius: 4px;
	box-sizing: border-box;
	display: inline-block;
	font-size: 14px;
	line-height: 1.5;
	padding: 8px 16px;
	text-decoration: none;
}

.authdock-logout-wrap .authdock-logout-button {
	float: none;
	margin-right: 0;
	margin-left: 0;
}

.authdock-logout-wrap.is-align-left {
	text-align: right;
}

.authdock-logout-wrap.is-align-center {
	text-align: center;
}

.authdock-logout-wrap.is-align-right {
	text-align: left;
}

/* ==========================================================================
   Account centre
   ========================================================================== */

.authdock-account {
	box-sizing: border-box;
}

.authdock-account-loading {
	color: #646970;
}

.authdock-account-section {
	border-top: 1px solid #dcdcde;
	padding: 16px 0;
}

.authdock-account-section h3 {
	font-size: 1.05em;
	margin: 0 0 6px;
}

.authdock-account-section .description {
	color: #646970;
	font-size: 13px;
	margin: 0 0 10px;
}

.authdock-account-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.authdock-account-list li {
	align-items: center;
	border-bottom: 1px solid #f0f0f1;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 10px 0;
}

.authdock-account-list li:last-child {
	border-bottom: 0;
}

.authdock-account-list li strong {
	flex: 1 1 auto;
}

.authdock-account-detail {
	color: #646970;
	font-size: 13px;
}

.authdock-account-message {
	color: #d63638;
}

.authdock-account-message:empty {
	display: none;
}

/* ==========================================================================
   Block editor placeholders

   Shown to the author, never to a visitor: what a block will do when the
   module behind it is switched off or has nothing to show.
   ========================================================================== */

.authdock-block-placeholder {
	background: #f6f7f7;
	border: 1px dashed #c3c4c7;
	border-radius: 4px;
	box-sizing: border-box;
	color: #50575e;
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 12px;
	padding: 12px 16px;
}

.authdock-block-placeholder p {
	margin: 0;
}