/**
 * SITE-WIDE auth button styles (social + passkey) — loaded on every front
 * page (SCF_Passkeys::enqueue_auth_assets), not just the checkout. The user
 * rule (2026-07-18): "our" button skins must look the same everywhere the
 * engines render them — checkout card, My Account login, theme login
 * sidebars/popups. Falls back to neutral colors where the checkout's --ck-*
 * tokens are not defined; inside #scf-checkout the tokens win automatically.
 * wp-login.php loads this sheet too (login_enqueue_scripts) — the engine
 * renders a DIFFERENT wrap class there (.advapafo-login-passkey-wrap, from
 * templates/login/button.php) with body.login-prefixed !important rules, so
 * every passkey block below carries a body.login variant to outrank them.
 */

/* ── Animated fingerprint (.ck-fp) — port of codepen ainalem/mQBNpg (MIT),
   minus the button chrome: a dim BASE layer draws the print fast, then the
   ACTIVE full-color layer scans over it slowly, both fade and the loop
   restarts (reset happens while invisible). Dash metrics (0/50 arrays,
   -41 offset) are the pen's own — the paths are identical. The pen ships
   no reduced-motion fallback and the user asked for the pen's behaviour,
   so none is added here (it also masked the animation as "static" before).
   Markup: SCF_Passkeys::fingerprint_icon() (PHP) = window.scfAuth.fp (JS). */
.ck-fp {
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 0;
	flex-shrink: 0;
}
.ck-fp svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
/* Resting state is the GREY print, not blank (user request 2026-07-18):
   the dim base layer stays fully drawn the whole time; only the active
   layer scans over it, holds, fades back to grey and loops. */
.ck-fp__base { opacity: .25; }
.ck-fp__active { animation: ck-fp-fade 6s linear infinite; }
.ck-fp__active .odd  { stroke-dasharray: 0 50; animation: ck-fp-odd-active 6s linear infinite; }
.ck-fp__active .even { stroke-dasharray: 50 50; stroke-dashoffset: -41; animation: ck-fp-even-active 6s linear infinite; }

/* Pen timeline on a 6s loop: scan draws ~1.3–3.5s, holds, fades ~5.3–5.6s,
   dash reset happens while the layer is invisible. */
@keyframes ck-fp-odd-active {
	0%, 21.5%  { stroke-dasharray: 0 50; }
	58%, 100%  { stroke-dasharray: 50 50; }
}
@keyframes ck-fp-even-active {
	0%, 20%    { stroke-dashoffset: -41; }
	55%, 100%  { stroke-dashoffset: 0; }
}
@keyframes ck-fp-fade {
	0%, 88%    { opacity: 1; }
	94%, 100%  { opacity: 0; }
}

/* ── Passkey button (Advanced Passkeys engine) — same outlined language as
   the checkout's Entrar card, applied wherever the engine renders a button
   (My Account login auto-inject, theme login sidebars, shortcodes). The
   engine hard-codes a black pill with !important, so the overrides match it;
   the extra `div.` type bumps specificity above the engine's own rules. ── */
div.advapafo-shortcode-login-wrap,
div.advapafo-login-passkey-wrap { max-width: none; margin: 10px 0; }
div.advapafo-shortcode-login-wrap .advapafo-passkey-btn,
div.advapafo-login-passkey-wrap .advapafo-passkey-btn,
body.login div.advapafo-login-passkey-wrap .advapafo-passkey-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100% !important;
	max-width: 340px;
	min-height: 44px;
	padding: 10px 16px !important;
	border: 1px solid color-mix(in srgb, var(--ck-text, #1d2327) 80%, transparent) !important;
	border-radius: 8px !important;
	background: var(--ck-bg, #fff) !important;
	color: var(--ck-text, #1d2327) !important;
	font-size: 14px;
	font-weight: 700;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}
div.advapafo-shortcode-login-wrap .advapafo-passkey-btn:hover,
div.advapafo-shortcode-login-wrap .advapafo-passkey-btn:focus,
body.login div.advapafo-login-passkey-wrap .advapafo-passkey-btn:hover,
body.login div.advapafo-login-passkey-wrap .advapafo-passkey-btn:focus {
	border-color: var(--ck-text, #1d2327) !important;
	background: var(--ck-bg, #fff) !important;
	color: var(--ck-text, #1d2327) !important;
	transform: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
div.advapafo-shortcode-login-wrap .advapafo-passkey-icon,
body.login div.advapafo-login-passkey-wrap .advapafo-passkey-icon { color: inherit; }
div.advapafo-shortcode-login-wrap .advapafo-passkey-icon .ck-fp,
div.advapafo-login-passkey-wrap .advapafo-passkey-icon .ck-fp { width: 24px; height: 24px; }
/* Original engine glyph (before/without the JS swap) sized to match. */
div.advapafo-shortcode-login-wrap .advapafo-passkey-icon svg,
div.advapafo-login-passkey-wrap .advapafo-passkey-icon svg { width: 20px; height: 20px; }
div.advapafo-shortcode-login-wrap .advapafo-passkey-icon .ck-fp svg,
div.advapafo-login-passkey-wrap .advapafo-passkey-icon .ck-fp svg { width: 100%; height: 100%; }
/* wp-login: match the engine glyph's stroke to the outlined face. */
body.login div.advapafo-login-passkey-wrap .advapafo-passkey-icon svg { stroke-width: 2; }

/* Smart visibility: sign-in entry points hidden on browsers that never
   saved/used a working passkey here (scf-auth.js drives the flag). */
.ck-pk-hide { display: none !important; }

/* Visible failure toast on the checkout (the engine's own message element
   sits inside the hidden proxy container there — failures were silent). */
.ck-pk-toast {
	margin: 10px 24px 0;
	padding: 9px 12px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--ck-danger, #d63638) 9%, var(--ck-bg, #fff));
	color: var(--ck-text, #1d2327);
	font-size: 12.5px;
	line-height: 1.45;
}

/* The engine's status line under the button (e.g. after a failed attempt):
   quiet plain text, shielded from theme paragraph decoration (borders/
   backgrounds were leaking in on the hosted theme). */
.advapafo-shortcode-login-wrap .advapafo-login-message,
.advapafo-login-passkey-wrap .advapafo-login-message {
	margin: 8px 0 0;
	padding: 0;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ck-muted, #333333);
}

/* The auto-inject promotional card around the button (purple border,
   gradient, shadow) — flattened so the button reads as a sibling of the
   social buttons, everywhere. !important: the engine sheet can enqueue
   after this one, and specificity ties resolve by order. */
div.advapafo-integration-passkey {
	margin: 10px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* ── Social login (Nextend) — the checkout's outlined two-line skin
   ("Continuar com" / provider in bold), site-wide. Same rules as the
   #scf-checkout block in scf-checkout.css, minus the scope; custom
   per-provider templates keep their layout via :not([style]). ── */
div.nsl-container .nsl-button-default {
	display: flex;
	border: 1px solid color-mix(in srgb, var(--ck-text, #1d2327) 80%, transparent);
	border-radius: 8px;
	padding: 2px 8px;
	box-sizing: border-box;
	max-width: 165px;
	width: 100%;
	align-items: center;
	justify-content: flex-start;
	box-shadow: inset 0 0 0 100vmax var(--ck-bg, #fff);
	transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}
div.nsl-container .nsl-button-default:hover {
	border-color: var(--ck-text, #1d2327);
	box-shadow: inset 0 0 0 100vmax var(--ck-bg, #fff), 0 2px 8px rgba(0, 0, 0, .12);
}
div.nsl-container .nsl-button-default .nsl-button-svg-container {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	padding: 0;
	margin-right: 8px;
	justify-content: center;
	border-radius: 6px;
	background-color: inherit;
}
div.nsl-container .nsl-button-google .nsl-button-svg-container { background-color: #fff; }
div.nsl-container .nsl-button-default .nsl-button-svg-container svg { width: 26px; height: 26px; }
div.nsl-container .nsl-button-default div.nsl-button-label-container:not([style]) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	flex: 0 1 auto;
	margin: 0 6px 0 0;
	padding: 6px 0;
	line-height: 1.15;
	text-align: left;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--ck-muted, #333333);
}
div.nsl-container .nsl-button-default div.nsl-button-label-container:not([style]) b {
	font-size: 14px;
	font-weight: 700;
	color: var(--ck-text, #1d2327);
}