/* llq-signin: inherits the site's look through a few variables; override any class freely. */
.llq-signin {
	--_radius: var(--llq-signin-radius, 8px);
	--_font: var(--llq-signin-font, inherit);
	--_accent: var(--llq-signin-accent, #1f1f1f);
	--_on-accent: var(--llq-signin-on-accent, #ffffff);
	--_text: var(--llq-signin-text, inherit);
	--_surface: var(--llq-signin-surface, transparent);
	display: grid;
	gap: 0.75rem;
	font-family: var(--_font);
	color: var(--_text);
	background: var(--_surface);
}
.llq-signin--dark {
	--_accent: var(--llq-signin-accent, #f5f5f5);
	--_on-accent: var(--llq-signin-on-accent, #131314);
}
.llq-signin__heading { margin: 0; font-size: 1.25rem; }
.llq-signin__text { margin: 0; }
.llq-signin__text--caution { padding: 0.5rem 0.75rem; border-radius: var(--_radius); background: color-mix(in srgb, #f9a825 18%, transparent); font-size: 0.9375rem; }
.llq-signin__label { display: block; font-size: 0.875rem; margin-bottom: 0.25rem; }
.llq-signin__input {
	width: 100%; box-sizing: border-box; min-height: 44px; padding: 0.5rem 0.75rem;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: var(--_radius);
	background: transparent; color: inherit; font: inherit;
}
.llq-signin__button {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
	min-height: 44px; padding: 0.5rem 1rem; border-radius: var(--_radius); font: inherit; font-weight: 600; cursor: pointer;
	border: 1px solid var(--_accent); background: transparent; color: inherit;
}
.llq-signin__button--primary { background: var(--_accent); color: var(--_on-accent); }
.llq-signin__button svg { width: 18px; height: 18px; flex: none; }
.llq-signin__link, .llq-signin__claim, .llq-signin__complete, .llq-signin__provider, .llq-signin__passkey-only-form { display: grid; gap: 0.5rem; margin: 0; }
.llq-signin__divider { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; opacity: 0.7; }
.llq-signin__divider::before, .llq-signin__divider::after { content: ""; flex: 1; border-top: 1px solid currentColor; opacity: 0.3; }
/* The WooCommerce login placement: the block, then this line naming WooCommerce's own password form below. Outside .llq-signin, so it takes the page's ink. */
.llq-signin__or { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 0.875rem; opacity: 0.7; }
.llq-signin__or::before, .llq-signin__or::after { content: ""; flex: 1; border-top: 1px solid currentColor; opacity: 0.3; }
.llq-signin__password-note { margin-top: 0.75rem; font-size: 0.9375rem; }
.llq-signin__notice { margin: 0; padding: 0.5rem 0.75rem; border-radius: var(--_radius); font-size: 0.9375rem; }
.llq-signin__notice--ok { background: color-mix(in srgb, #2e7d32 12%, transparent); }
.llq-signin__notice--error { background: color-mix(in srgb, #c62828 12%, transparent); }
.llq-signin__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.llq-signin__turnstile { min-height: 65px; }
/* Google's button rules: white or dark surface, their logo, no recolouring. */
.llq-signin__button--google.llq-signin__button--light { background: #fff; color: #1f1f1f; border-color: #747775; }
.llq-signin__button--google.llq-signin__button--dark { background: #131314; color: #e3e3e3; border-color: #8e918f; }
/* Connected sign-ins: one row per provider, Disconnect at the end of the row. */
.llq-signin__connections { gap: 0.5rem; }
.llq-signin__connection { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-height: 44px; }
.llq-signin__connection > svg { width: 18px; height: 18px; flex: none; }
.llq-signin__connection-label { font-weight: 600; }
.llq-signin__connection-status { font-size: 0.875rem; opacity: 0.7; }
.llq-signin__disconnect { margin: 0 0 0 auto; }
.llq-signin__button--small { width: auto; min-height: 36px; padding: 0.25rem 0.75rem; font-weight: 500; }
.llq-signin__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Passkeys: the button in the block; on the connections list one line per key with Remove, then the add form. */
.llq-signin__passkey, .llq-signin__passkey-add { display: grid; gap: 0.5rem; margin: 0; }
/* The forms ship hidden and the script reveals them; an author display rule would otherwise beat the UA's [hidden]. */
.llq-signin__passkey[hidden], .llq-signin__passkey-add[hidden] { display: none; }
.llq-signin__passkey-status { font-size: 0.875rem; }
.llq-signin__passkey-status:empty { display: none; }
.llq-signin__passkey-item { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-height: 44px; padding-left: 1.625rem; }
.llq-signin__passkey-only { display: grid; gap: 0.5rem; margin: 0; padding-left: 1.625rem; font-size: 0.875rem; }
.llq-signin__passkey-name { font-weight: 500; }
.llq-signin__passkey-remove { margin: 0 0 0 auto; }
.llq-signin__passkey-add { padding-left: 1.625rem; }

/* The hero: the offer an account without a passkey sees, inside the add form. */
.llq-signin__passkey-hero-title {
	margin: 0 0 .25rem;
	font-size: 1.125rem;
	line-height: 1.3;
}
.llq-signin__passkey-add .llq-signin__text {
	margin: 0 0 .5rem;
}
.llq-signin__passkey-add .llq-signin__text strong {
	display: inline-block;
	margin-top: .25rem;
}