/**
 * mc-passkeys.css
 *
 * Branded styles for the Secure Passkeys integration:
 *  - .mc-passkeys-login-block  — passkey block above the UM login form
 *  - .mc-passkeys-account-section — passkey management panel in UM account
 *
 * Design tokens follow the existing List49 palette:
 *  - Canadian red:  #D52B1E  (primary action)
 *  - Border:        #e2e2e2
 *  - Muted text:    #666
 *
 * @package MappCanada
 * @since   2.4.0
 */

/* ==========================================================================
   1. Passkey login block (above UM login form)
   ========================================================================== */

.mc-passkeys-login-block {
	margin-bottom: 1.25rem;
}

/* Helper hint text above the button */
.mc-passkeys-login-block__hint {
	font-size: 0.82rem;
	color: #666;
	text-align: center;
	margin: 0 0 0.75rem;
	font-style: italic;
	line-height: 1.45;
}

/* Divider between passkey button and password form */
.mc-passkeys-login-block__divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1rem 0 0;
	color: #999;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mc-passkeys-login-block__divider::before,
.mc-passkeys-login-block__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #e2e2e2;
}

/* Ensure any button rendered by Secure Passkeys fills the block width and
   inherits the site's primary colour so it looks branded. The selectors are
   intentionally broad to handle whatever markup the plugin generates, while
   limiting scope to our wrapper so we don't bleed into the rest of the form. */
.mc-passkeys-login-block button,
.mc-passkeys-login-block .passkey-btn,
.mc-passkeys-login-block .secure-passkeys-btn,
.mc-passkeys-login-block input[type="button"],
.mc-passkeys-login-block input[type="submit"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: #D52B1E;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.65rem 1.25rem;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease;
	text-align: center;
}

.mc-passkeys-login-block button:hover,
.mc-passkeys-login-block .passkey-btn:hover,
.mc-passkeys-login-block .secure-passkeys-btn:hover,
.mc-passkeys-login-block input[type="button"]:hover,
.mc-passkeys-login-block input[type="submit"]:hover {
	background: #b52218;
}

.mc-passkeys-login-block button:focus,
.mc-passkeys-login-block .passkey-btn:focus,
.mc-passkeys-login-block .secure-passkeys-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(213, 43, 30, 0.25);
}

/* ==========================================================================
   2. Passkeys account section (UM Account → Passkeys tab)
   ========================================================================== */

.mc-passkeys-account-section {
	max-width: 520px;
}

.mc-passkeys-account-section__title {
	font-size: 1.1rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 0.5rem;
}

.mc-passkeys-account-section__desc {
	font-size: 0.88rem;
	color: #555;
	margin: 0 0 1.25rem;
	line-height: 1.55;
}

/* Style any action buttons rendered by the register form */
.mc-passkeys-account-section button,
.mc-passkeys-account-section .passkey-btn,
.mc-passkeys-account-section .secure-passkeys-btn,
.mc-passkeys-account-section input[type="button"],
.mc-passkeys-account-section input[type="submit"] {
	background: #D52B1E;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.55rem 1.25rem;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease;
}

.mc-passkeys-account-section button:hover,
.mc-passkeys-account-section .passkey-btn:hover,
.mc-passkeys-account-section .secure-passkeys-btn:hover,
.mc-passkeys-account-section input[type="button"]:hover,
.mc-passkeys-account-section input[type="submit"]:hover {
	background: #b52218;
}

/* Credential list items (if the plugin renders them as a list) */
.mc-passkeys-account-section ul,
.mc-passkeys-account-section ol {
	padding-left: 1.25rem;
	margin-bottom: 1rem;
}

.mc-passkeys-account-section li {
	font-size: 0.88rem;
	color: #444;
	margin-bottom: 0.4rem;
}

/* Remove/delete links inside the passkey list */
.mc-passkeys-account-section a[href*="delete"],
.mc-passkeys-account-section a[href*="remove"],
.mc-passkeys-account-section .passkey-remove {
	color: #D52B1E;
	font-size: 0.8rem;
	text-decoration: none;
	margin-left: 0.5rem;
}

.mc-passkeys-account-section a[href*="delete"]:hover,
.mc-passkeys-account-section a[href*="remove"]:hover,
.mc-passkeys-account-section .passkey-remove:hover {
	text-decoration: underline;
}