/* Biometric widget — shortcode / Elementor / Bricks surfaces.
 *
 * Structure-only defaults — NO panel chrome (no padding, no border, no
 * background). The widget drops transparently into the host layout; any
 * visual styling comes from builder controls. The three buttons
 * (Enable/Disable, Clear all, Login with) each expose their own full
 * style section in the builder.
 */
.appress-biometric {
	--appress-bio-gap: 0.75rem;
}
.appress-biometric__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	margin-bottom: var(--appress-bio-gap);
}
.appress-biometric__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}
.appress-biometric__status {
	font-size: 0.875rem;
	opacity: 0.7;
}
.appress-biometric__actions {
	display: flex;
	flex-direction: column;
	gap: var(--appress-bio-gap);
}
/* Button skeleton — structure only, no opinionated colors. Builders
 * write background / color / border-color / border-radius / border-width
 * / typography directly onto the per-button selectors
 * (`.btn--primary`, `.btn--danger`, `.btn--login`). Default 1px solid
 * border keeps every button visible against any host background even
 * when the builder hasn't painted custom chrome yet. */
.appress-biometric__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.625rem 1rem;
	background: transparent;
	color: inherit;
	border: 1px solid #bfc3c8;
	border-radius: 6px;
	font: inherit;
	cursor: pointer;
}
.appress-biometric__btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}
.appress-biometric__icon {
	flex-shrink: 0;
}
.appress-biometric__error {
	margin: 0.625rem 0 0;
	font-size: 0.8125rem;
	opacity: 0.8;
}