/* Nexa Login – button + QR dialog. Plain, flat and close to WordPress core's own controls (.button /
   .button-primary colours, 3–4px corners, no gradients). */

:root {
	--nexa-login-text: #1d2327;
	--nexa-login-muted: #646970;
	--nexa-login-border: #dcdcde;
	--nexa-login-primary: #2271b1;
	--nexa-login-primary-hover: #135e96;
	--nexa-login-warn: #996800;
	--nexa-login-err: #b32d2e;
	--nexa-login-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* ---------- button ---------- */
.nexa-login-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5em 1em;
	border: 1px solid var(--nexa-login-primary);
	border-radius: 3px;
	background: var(--nexa-login-primary);
	color: #fff;
	font: inherit;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
}
.nexa-login-button:hover, .nexa-login-button:focus { background: var(--nexa-login-primary-hover); border-color: var(--nexa-login-primary-hover); color: #fff; }
.nexa-login-button:focus-visible { outline: 2px solid var(--nexa-login-primary); outline-offset: 2px; }
.nexa-login-button__logo { width: 1.25em; height: 1.25em; margin-right: 0.5em; vertical-align: middle; } /* margin, not flex gap: core's .button turns the element back into inline-block */
.nexa-login-button[hidden] { display: none; }

/* wp-login.php placement: a core secondary .button (white, blue text); primary when the wallet is the main way in */
.login .nexa-login-wplogin { margin: 16px 0 4px; }
.login .nexa-login-wplogin .nexa-login-button.button {
	display: inline-flex;
	width: 100%;
	height: auto;
	padding: 8px 12px;
	font-size: 14px;
	line-height: 1.4;
	box-sizing: border-box;
}
.login.nexa-login-pw-wallet_first .nexa-login-wplogin .nexa-login-button.button,
.login.nexa-login-pw-disabled .nexa-login-wplogin .nexa-login-button.button {
	background: var(--nexa-login-primary);
	border-color: var(--nexa-login-primary);
	color: #fff;
}
.login.nexa-login-pw-wallet_first .nexa-login-wplogin .nexa-login-button.button:hover,
.login.nexa-login-pw-disabled .nexa-login-wplogin .nexa-login-button.button:hover { background: var(--nexa-login-primary-hover); border-color: var(--nexa-login-primary-hover); }
.nexa-login-sep {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0;
	color: var(--nexa-login-muted);
	font-size: 13px;
}
.nexa-login-sep::before, .nexa-login-sep::after { content: ""; flex: 1; height: 1px; background: var(--nexa-login-border); }

/* ---------- dialog ---------- */
.nexa-login-modal-open { overflow: hidden; }
.nexa-login-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.6);
	font-family: var(--nexa-login-font);
}
.nexa-login-overlay.is-open { display: flex; }

.nexa-login-card {
	width: 100%;
	max-width: 380px;
	max-height: calc(100vh - 32px);
	overflow: auto;
	border: 1px solid var(--nexa-login-border);
	border-radius: 4px;
	background: #fff;
	color: var(--nexa-login-text);
	box-shadow: 0 3px 30px rgba(0, 0, 0, 0.2);
}

.nexa-login-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--nexa-login-border);
}
.nexa-login-card__logo { width: 24px; height: 24px; }
.nexa-login-card__title { flex: 1; font-weight: 600; font-size: 15px; }
.nexa-login-card__close {
	border: 0;
	background: transparent;
	color: var(--nexa-login-muted);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}
.nexa-login-card__close:hover { color: var(--nexa-login-text); }

.nexa-login-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 20px 20px 16px;
	text-align: center;
}
.nexa-login-card__lead { margin: 0; color: var(--nexa-login-muted); font-size: 14px; }

/* The QR must be dark modules on a light background with a real quiet zone (the white box + padding).
   color-scheme: only light keeps browser "auto dark mode" (Chromium's WebContentsForceDark) from inverting the
   modules to white-on-white. */
.nexa-login-qr {
	width: 240px;
	height: 240px;
	padding: 12px;
	box-sizing: border-box;
	border: 1px solid var(--nexa-login-border);
	background: #ffffff;
	color-scheme: only light;
	forced-color-adjust: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}
.nexa-login-qr__svg, .nexa-login-qr__svg svg { width: 100%; height: 100%; display: block; }
.nexa-login-qr.is-loading { background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><circle cx='20' cy='20' r='16' fill='none' stroke='%23c8ccd6' stroke-width='4' stroke-dasharray='70 30'><animateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='1s' repeatCount='indefinite'/></circle></svg>") center/40px no-repeat; }
.nexa-login-qr.is-done { opacity: 0.35; }

.nexa-login-status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--nexa-login-muted); }
.nexa-login-status.is-ok { color: var(--nexa-login-text); }
.nexa-login-status.is-warn { color: var(--nexa-login-warn); }
.nexa-login-status.is-error { color: var(--nexa-login-err); }

.nexa-login-open {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 10px 14px;
	box-sizing: border-box;
	border: 1px solid var(--nexa-login-primary);
	border-radius: 3px;
	background: var(--nexa-login-primary);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
}
.nexa-login-open:hover, .nexa-login-open:focus { background: var(--nexa-login-primary-hover); border-color: var(--nexa-login-primary-hover); color: #fff; }
.nexa-login-open[hidden] { display: none; }
.nexa-login-open__sub { font-weight: 400; opacity: 0.9; font-size: 13px; }

.nexa-login-actions { display: flex; gap: 8px; }
.nexa-login-btn {
	padding: 6px 12px;
	border: 1px solid var(--nexa-login-primary);
	border-radius: 3px;
	background: #f6f7f7;
	color: var(--nexa-login-primary);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
.nexa-login-btn:hover { background: #f0f0f1; color: var(--nexa-login-primary-hover); border-color: var(--nexa-login-primary-hover); }
.nexa-login-btn--retry { background: var(--nexa-login-primary); color: #fff; }
.nexa-login-btn--retry:hover { background: var(--nexa-login-primary-hover); color: #fff; }
.nexa-login-btn[hidden] { display: none; }

.nexa-login-meta {
	margin: 0;
	font-size: 11px;
	color: var(--nexa-login-muted);
	word-break: break-all;
}

/* ---------- shortcode / profile bits ---------- */
.nexa-login-shortcode--in { font-size: 0.95em; }
.nexa-login-address { font-size: 13px; word-break: break-all; }

@media (max-width: 420px) {
	.nexa-login-qr { width: 200px; height: 200px; }
	.nexa-login-card__body { padding: 16px 14px 12px; }
}

/* ---------- wp-login.php: wallet-first / password-disabled layouts ---------- */
.login .nexa-login-wplogin--wallet_first,
.login .nexa-login-wplogin--disabled { margin: 0 0 12px; }
.login.nexa-login-pw-wallet_first #loginform,
.login.nexa-login-pw-disabled #loginform { display: flex; flex-direction: column; }
.login.nexa-login-pw-wallet_first #loginform .nexa-login-wplogin,
.login.nexa-login-pw-disabled #loginform .nexa-login-wplogin { order: -1; }
.login.nexa-login-pw-wallet_first #loginform:not(.nexa-login-show-pw) > :not(.nexa-login-wplogin),
.login.nexa-login-pw-disabled #loginform > :not(.nexa-login-wplogin) { display: none; }
.login.nexa-login-pw-disabled #nav a[href*="lostpassword"] { display: none; }
.nexa-login-pw-toggle { margin: 10px 0 0; text-align: center; font-size: 13px; }
.nexa-login-pw-toggle a { color: #50575e; text-decoration: underline; }
/* "Lost your password?" when passwords are disabled (the lost_password_html_link filter only exists since WP 6.1) */
.login.nexa-login-pw-disabled #nav a[href*="action=lostpassword"] { display: none; }

/* ---------- button inside arbitrary login forms (wp_login_form(), injected, WooCommerce, UM, BuddyPress) ---------- */
.nexa-login-inform, .nexa-login-inject, .nexa-login-wc, .nexa-login-um, .nexa-login-bp { margin: 12px 0 0; clear: both; }
.nexa-login-inform .nexa-login-button, .nexa-login-inject .nexa-login-button, .nexa-login-wc .nexa-login-button,
.nexa-login-um .nexa-login-button, .nexa-login-bp .nexa-login-button { width: 100%; box-sizing: border-box; }
.nexa-login-bp--login .nexa-login-button { font-size: 13px; padding: 0.5em 1em; }

/* ---------- wallet lists (WooCommerce account, BuddyPress settings, profile) ---------- */
.nexa-login-wallets__list { list-style: none; margin: 0 0 12px; padding: 0; }
.nexa-login-wallets__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--nexa-login-border); }
.nexa-login-wallets__item--disabled code { opacity: 0.55; }
.nexa-login-wallets__label { font-size: 0.9em; color: var(--nexa-login-muted); }
.nexa-login-wallets__status { font-size: 0.85em; color: var(--nexa-login-muted); }
.nexa-login-btn-text { background: none; border: 0; padding: 0; color: var(--nexa-login-primary); cursor: pointer; font: inherit; font-size: 0.9em; text-decoration: underline; }
.nexa-login-wc-wallets { margin-top: 1.5em; }

/* ---------- block / widget wrappers ---------- */
.wp-block-nexa-login-button.aligncenter, .nexa-login-shortcode.aligncenter { text-align: center; }
.wp-block-nexa-login-button.alignright, .nexa-login-shortcode.alignright { text-align: right; }
.nexa-login-widget .nexa-login-button { width: 100%; box-sizing: border-box; }