/* Passkeys: sign-in button on the login forms, Mein Konto › Passkeys, offer after a password sign-in. */

.hms-passkey-sign-in {
	margin: 18px 0 6px;
	padding-top: 16px;
	border-top: 1px solid var(--brdcolor-gray-300, #e6e6e6);
}

.hms-passkey-sign-in__button.button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background-color: transparent;
	color: var(--wd-title-color, #242424);
	border: 2px solid var(--wd-primary-color, #83b735);
	box-shadow: none;
}

.hms-passkey-sign-in__button.button:hover,
.hms-passkey-sign-in__button.button:focus-visible {
	background-color: var(--wd-primary-color, #83b735);
	color: #fff;
}

.hms-passkey-sign-in__icon {
	flex: none;
	width: 22px;
	height: 22px;
}

.hms-passkey-sign-in__hint {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--wd-text-color, #767676);
	text-align: center;
}

.hms-passkey-sign-in__message,
.hms-passkeys__message,
.hms-passkey-offer__message {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--wd-title-color, #242424);
}

/* Mein Konto › Passkeys */

.hms-passkeys__intro {
	max-width: 640px;
}

/* Primary actions in WoodMart's accented button colours (its own design tokens, like the "Anmelden" button). */
.hms-passkeys .hms-passkeys__add.button,
.hms-passkey-offer .hms-passkey-offer__accept.button {
	color: var(--btn-accented-color, #fff);
	background-color: var(--btn-accented-bgcolor, var(--wd-primary-color, #83b735));
	box-shadow: var(--btn-accented-box-shadow, none);
}

.hms-passkeys .hms-passkeys__add.button:hover,
.hms-passkey-offer .hms-passkey-offer__accept.button:hover {
	color: var(--btn-accented-color-hover, #fff);
	background-color: var(--btn-accented-bgcolor-hover, var(--wd-primary-color, #83b735));
}

.hms-passkeys__add.button {
	margin: 4px 0 24px;
}

.hms-passkeys__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--brdcolor-gray-300, #e6e6e6);
}

.hms-passkeys__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--brdcolor-gray-300, #e6e6e6);
}

.hms-passkeys__details {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hms-passkeys__dates {
	font-size: 13px;
	color: var(--wd-text-color, #767676);
}

.hms-passkeys__actions {
	display: flex;
	gap: 16px;
}

.hms-passkeys .hms-passkeys__rename,
.hms-passkeys .hms-passkeys__remove,
.hms-passkey-offer .hms-passkey-offer__decline {
	min-height: 0;
	box-shadow: none;
	text-transform: none;
	font-weight: 600;
	padding: 0;
	background: none;
	border: 0;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--wd-title-color, #242424);
	cursor: pointer;
}

.hms-passkeys .hms-passkeys__remove {
	color: #b42318;
}

/* Mein Konto dashboard tile and menu: WoodMart's icon font has no key or fingerprint, so the icon is drawn from the same
   fingerprint as the sign-in button (CSS mask in the current text colour). */
.wd-my-acc-passkeys .wd-nav-icon:before {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' d='M7.5 5.6A8 8 0 0 1 20 12.1M4.6 9a8 8 0 0 0-.6 3.1c0 1.9.7 3.7 1.8 5.1M8 12a4 4 0 0 1 8 0c0 2.6-.6 5-1.7 7.1M12 12c0 3.2-.9 6.1-2.6 8.5M16.8 17.7a12 12 0 0 0 1.2-3.4M8 16.4a8.4 8.4 0 0 1-.7 2.2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' d='M7.5 5.6A8 8 0 0 1 20 12.1M4.6 9a8 8 0 0 0-.6 3.1c0 1.9.7 3.7 1.8 5.1M8 12a4 4 0 0 1 8 0c0 2.6-.6 5-1.7 7.1M12 12c0 3.2-.9 6.1-2.6 8.5M16.8 17.7a12 12 0 0 0 1.2-3.4M8 16.4a8.4 8.4 0 0 1-.7 2.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Offer after a password sign-in */

.hms-passkey-offer {
	position: fixed;
	z-index: 400;
	left: 16px;
	bottom: 16px;
	width: min(360px, calc(100vw - 32px));
	padding: 20px;
	background: #fff;
	border-radius: 8px;
	border-top: 4px solid var(--wd-primary-color, #83b735);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.hms-passkey-offer__title {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	color: var(--wd-title-color, #242424);
}

.hms-passkey-offer__text {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
}

.hms-passkey-offer__accept.button {
	margin-right: 16px;
}