/* BankID login button + modal — wp-login.php only. Staging/test only. */

.bankid-login-block {
	margin: 16px 0;
	clear: both;
	text-align: center;
}

/* wp-login.php ships `.login .button-primary { float: right; }` for the
 * default submit button. We use button-primary for theming but don't want
 * the float, so override explicitly. */
.bankid-login-trigger.button-primary {
	float: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 10px 0;
	font-size: 14px;
}

/* WooCommerce my-account placement: BankID primary on top, "eller" divider
 * before the e-post/lösenord fields. wp-login.php keeps the centered block above. */
.bankid-login-block--woo {
	margin: 0 0 20px;
	text-align: left;
}

/* High specificity (.woocommerce prefix) so we beat WooCommerce's own
 * `.woocommerce button.button` rule, which otherwise leaves the button grey. */
.woocommerce .bankid-login-block--woo .bankid-login-trigger,
.woocommerce-page .bankid-login-block--woo .bankid-login-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: var(--wp--preset--color--primary, #3e6666);
	color: var(--wp--preset--color--surface, #fff);
	border: none;
}

.woocommerce .bankid-login-block--woo .bankid-login-trigger:hover,
.woocommerce .bankid-login-block--woo .bankid-login-trigger:focus,
.woocommerce-page .bankid-login-block--woo .bankid-login-trigger:hover,
.woocommerce-page .bankid-login-block--woo .bankid-login-trigger:focus {
	background: var(--wp--preset--color--primary-hover, #2e4f4f);
	color: var(--wp--preset--color--surface, #fff);
}

/* Secondary "Logga in med BankID på annan enhet" (QR) choice next to the primary
 * mobile button. JS injects it by cloning the primary, so it carries the themed
 * fill classes — !important to flip it to an outlined secondary across both
 * wp-login (.button-primary) and WooCommerce surfaces. */
.bankid-login-trigger--secondary {
	margin-top: 12px !important;
	background: none !important;
	color: var(--wp--preset--color--primary, #3e6666) !important;
	border: 1px solid var(--wp--preset--color--primary, #3e6666) !important;
}

.bankid-login-trigger--secondary:hover,
.bankid-login-trigger--secondary:focus {
	background: var(--wp--preset--color--primary, #3e6666) !important;
	color: var(--wp--preset--color--surface, #fff) !important;
}

/* White BankID mark before the label. Sized by height; the logo's own ratio
 * sets the width. */
.bankid-login-trigger__logo {
	height: 1.4em;
	width: auto;
	display: block;
	flex-shrink: 0;
}

.bankid-login-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 4px;
	color: #777;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bankid-login-or::before,
.bankid-login-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: 0.25;
}

/* Enrollment card on the my-account dashboard — logged-in users without a PNR. */
.bankid-enroll-card {
	margin: 0 0 24px;
	padding: 20px;
	border: 1px solid rgba(62, 102, 102, 0.25);
	border-radius: 8px;
	background: rgba(62, 102, 102, 0.04);
}

.bankid-enroll-card h2 {
	margin: 0 0 8px;
	font-size: 18px;
}

.bankid-enroll-card p {
	margin: 0 0 16px;
	color: #555;
	font-size: 14px;
}

/* Enrollment nudges (banner B2, interstitial B3, booking prompt B4). Shared
 * trigger is the standard .bankid-login-trigger; these wrap it with surface
 * chrome. */
.bankid-nudge__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* The shared enroll trigger carries no standalone styling — wp-login.php and the
 * Woo login form each style it in their own context. Inside a nudge card (B2/B3
 * inline + interstitial, B4 checkout) it would otherwise fall back to a bare
 * theme button with an invisible white logo. Give it the primary fill here. */
/* The .woocommerce-prefixed selector matches the Woo-login rule above: WC ships
 * `.woocommerce button.button` (0,2,1), so the card variant needs the prefix to
 * win on the my-account page. */
.bankid-nudge .bankid-login-trigger,
.bankid-login-wall .bankid-login-trigger,
.woocommerce .bankid-nudge .bankid-login-trigger,
.woocommerce-page .bankid-nudge .bankid-login-trigger,
.woocommerce .bankid-login-wall .bankid-login-trigger,
.woocommerce-page .bankid-login-wall .bankid-login-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 16px;
	border: none;
	border-radius: 4px;
	background: var(--wp--preset--color--primary, #3e6666);
	color: var(--wp--preset--color--surface, #fff);
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
}

.bankid-nudge .bankid-login-trigger:hover,
.bankid-nudge .bankid-login-trigger:focus,
.bankid-login-wall .bankid-login-trigger:hover,
.bankid-login-wall .bankid-login-trigger:focus,
.woocommerce .bankid-nudge .bankid-login-trigger:hover,
.woocommerce .bankid-nudge .bankid-login-trigger:focus,
.woocommerce-page .bankid-nudge .bankid-login-trigger:hover,
.woocommerce-page .bankid-nudge .bankid-login-trigger:focus,
.woocommerce .bankid-login-wall .bankid-login-trigger:hover,
.woocommerce .bankid-login-wall .bankid-login-trigger:focus,
.woocommerce-page .bankid-login-wall .bankid-login-trigger:hover,
.woocommerce-page .bankid-login-wall .bankid-login-trigger:focus {
	background: var(--wp--preset--color--primary-hover, #2e4f4f);
	color: var(--wp--preset--color--surface, #fff);
}

.bankid-nudge-dismiss {
	background: none;
	border: none;
	color: inherit;
	opacity: 0.85;
	text-decoration: underline;
	cursor: pointer;
	font-size: 13px;
}

.bankid-nudge--interstitial {
	margin: 0 0 24px;
	padding: 20px;
	border: 1px solid rgba(62, 102, 102, 0.25);
	border-radius: 8px;
	background: rgba(62, 102, 102, 0.06);
}

.bankid-nudge--interstitial h2 {
	margin: 0 0 8px;
	font-size: 20px;
}

.bankid-nudge--interstitial p {
	margin: 0 0 16px;
	color: #555;
}

/* The same card rendered in-page above the heading (nudge B2). It hangs off
 * loop_start as a full-width child of <main>, so constrain it to the theme
 * content width and centre it — matching .sbf__layout (max-width: 1100px;
 * margin: 0 auto) so it lines up with the booking/checkout wizard and normal
 * page content alike.
 *
 * Palette mirrors the site's warning notice (.sbf__notice--warning): amber
 * background + left accent, so the prompt reads as an info/warning status
 * rather than a brand-coloured card. The CTA button keeps the primary fill. */
.bankid-nudge--inline {
	max-width: var(--wp--style--global--content-size, 1100px);
	margin: 24px auto;
	border: none;
	border-left: 3px solid #b8860b;
	background: #fdf6e3;
	color: #6b5900;
}

.bankid-nudge--inline h2,
.bankid-nudge--inline p {
	color: #6b5900;
}

.bankid-nudge--checkout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.bankid-nudge-skip {
	color: #777;
	text-decoration: underline;
	font-size: 14px;
}

.bankid-login-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.bankid-login-modal[hidden] {
	display: none;
}

.bankid-login-modal__panel {
	background: #fff;
	border-radius: 8px;
	padding: 36px 32px;
	max-width: 420px;
	width: 92%;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
}

.bankid-login-modal__panel h2 {
	margin: 0 0 20px;
	font-size: 24px;
}

/* Mobile autostart: deep-link launch button (primary) + QR fallback toggle.
 * Injected by login.js only on mobile, so they don't exist on desktop. */
.bankid-login-launch {
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 0;
	text-align: center;
	text-decoration: none;
	font-size: 15px;
	background: var(--wp--preset--color--primary, #3e6666);
	color: var(--wp--preset--color--surface, #fff);
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.bankid-login-launch:hover,
.bankid-login-launch:focus {
	background: var(--wp--preset--color--primary-hover, #2e4f4f);
	color: var(--wp--preset--color--surface, #fff);
}

/* WooCommerce/theme `.button` rules can carry `display: …` (sometimes
 * !important) and beat the bare `[hidden]` attribute selector, leaving the
 * launch button on screen even after JS sets `.hidden = true` (e.g. the
 * "BankID not linked" notice). Force it off so hidden always means gone. */
.bankid-login-launch[hidden],
.bankid-login-qr-toggle[hidden] {
	display: none !important;
}

/* The QR fallback reads as the second of two explicit choices ("on this device"
 * vs "scan on another device"), so style it as a secondary outlined button next
 * to the filled launch button rather than a faint text link. */
.bankid-login-qr-toggle {
	display: block;
	width: 100%;
	margin: 0 0 16px;
	padding: 12px 0;
	background: none;
	border: 1px solid var(--wp--preset--color--primary, #3e6666);
	border-radius: 4px;
	color: var(--wp--preset--color--primary, #3e6666);
	font-size: 15px;
	cursor: pointer;
}

.bankid-login-qr-toggle:hover,
.bankid-login-qr-toggle:focus {
	background: var(--wp--preset--color--primary, #3e6666);
	color: var(--wp--preset--color--surface, #fff);
}

.bankid-login-modal__qr[hidden] {
	display: none;
}

.bankid-login-modal__qr {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	margin: 0 auto 16px;
}

.bankid-login-modal__qr img,
.bankid-login-modal__qr canvas,
.bankid-login-modal__qr svg {
	max-width: 220px;
	height: auto;
}

.bankid-login-modal__status {
	min-height: 1.5em;
	margin: 4px 0 20px;
	color: #555;
	font-size: 15px;
}

/* Boxed warning for terminal states (BankID not linked to an account, PNR
 * already linked elsewhere). Reads as an alert, not a passing status line. */
.bankid-login-notice {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid #e0b400;
	border-radius: 6px;
	background: #fff8e1;
	color: #5b4a00;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

.bankid-login-notice[hidden] {
	display: none;
}

.bankid-login-modal__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
}

/* The cancel button ships unstyled (bare theme .button). Give it the page's
 * secondary look: outlined in the brand primary, filling on hover/focus. The
 * modal renders at wp_footer, outside any .woocommerce wrapper, so WC's
 * `.woocommerce button.button` rule doesn't reach it. */
.bankid-login-modal__actions .button {
	width: 100%;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.2;
	background: none;
	border: 1px solid var(--wp--preset--color--primary, #3e6666);
	color: var(--wp--preset--color--primary, #3e6666);
	cursor: pointer;
}

.bankid-login-modal__actions .button:hover,
.bankid-login-modal__actions .button:focus {
	background: var(--wp--preset--color--primary, #3e6666);
	color: var(--wp--preset--color--surface, #fff);
}

/* Scan countdown shown under the QR while the order waits to be scanned. */
.bankid-login-countdown {
	margin: 0 0 16px;
	color: #777;
	font-size: 13px;
	text-align: center;
}

/* Large "waiting on the app" spinner that replaces the QR after a scan, or
 * while the login is being finalised. Same min-height as the QR box so the
 * panel doesn't jump when it swaps in. */
.bankid-login-spinner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	margin: 0 auto 16px;
}

.bankid-login-spinner[hidden] {
	display: none;
}

.bankid-login-spinner__ring {
	width: 56px;
	height: 56px;
	border: 5px solid rgba(62, 102, 102, 0.2);
	border-top-color: var(--wp--preset--color--primary, #3e6666);
	border-radius: 50%;
	animation: bankid-spin 0.9s linear infinite;
}

@keyframes bankid-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bankid-login-spinner__ring {
		animation-duration: 2s;
	}
}

/* Retry button (shown on expiry/failure) — the primary action next to the
 * secondary Cancel. Scoped to win over the outlined .button rule above. */
.bankid-login-modal__actions .bankid-login-retry {
	width: 100%;
	padding: 12px 16px;
	border: none;
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.2;
	background: var(--wp--preset--color--primary, #3e6666);
	color: var(--wp--preset--color--surface, #fff);
	cursor: pointer;
}

.bankid-login-modal__actions .bankid-login-retry:hover,
.bankid-login-modal__actions .bankid-login-retry:focus {
	background: var(--wp--preset--color--primary-hover, #2e4f4f);
	color: var(--wp--preset--color--surface, #fff);
}

/* The retry button carries the theme `.button` class, whose `display: inline-block`
 * (an author rule) overrides the UA `[hidden] { display: none }`. Without this it
 * shows the moment the modal opens, before any expiry. Restore the hide. The
 * launch/QR-toggle buttons above need the same treatment for the same reason. */
.bankid-login-modal__actions .bankid-login-retry[hidden] {
	display: none;
}

/* Post-login verification wall (nudge B3). Full-screen overlay with a large,
 * centred panel. The .is-blocking variant (rendered on/after ENROLL_DEADLINE for
 * un-linked members) looks identical — the difference is behavioural: it renders
 * on every page and carries no dismiss, so the member can only enrol or log out. */
.bankid-login-wall {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(20, 30, 30, 0.72);
	overflow-y: auto;
}

/* display:flex above means the UA `[hidden]` rule loses; restore it so login.js
 * can hide the soft wall when the user opens the enroll modal. */
.bankid-login-wall[hidden] {
	display: none;
}

.bankid-login-wall__panel {
	position: relative;
	background: #fff;
	border-radius: 12px;
	padding: 48px 40px;
	max-width: 560px;
	width: 100%;
	text-align: center;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

/* Soft-wall close (×). Dismisses for this view without snoozing; rendered only
 * on the non-blocking wall (the blocking wall offers logout as the only exit). */
.bankid-login-wall__close {
	position: absolute;
	top: 12px;
	right: 16px;
	padding: 4px 10px;
	background: none;
	border: none;
	color: #999;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.bankid-login-wall__close:hover,
.bankid-login-wall__close:focus {
	color: #333;
}

.bankid-login-wall__logo {
	display: block;
	width: 72px;
	height: auto;
	margin: 0 auto 20px;
}

.bankid-login-wall__title {
	margin: 0 0 16px;
	font-size: 28px;
	line-height: 1.2;
}

.bankid-login-wall__lead {
	margin: 0 0 28px;
	font-size: 17px;
	line-height: 1.6;
	color: #444;
}

/* Stack the CTA over the secondary action and let the primary button fill. */
.bankid-login-wall__actions {
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}

.bankid-login-wall__actions .bankid-login-trigger,
.woocommerce .bankid-login-wall__actions .bankid-login-trigger,
.woocommerce-page .bankid-login-wall__actions .bankid-login-trigger {
	justify-content: center;
	width: 100%;
	padding: 14px 16px;
	font-size: 16px;
}

.bankid-login-wall__logout {
	align-self: center;
	color: #777;
	text-decoration: underline;
	font-size: 14px;
}

/* "Kan du inte använda BankID? Kontakta oss." — the way out for a member who
 * has no BankID to link at all. Quieter than the CTA, louder than the logout
 * link, since it is the useful one of the two. */
.bankid-login-wall__help {
	margin: 0;
	color: #555;
	font-size: 14px;
	line-height: 1.5;
}

/* The panel takes focus when the blocking wall renders (login.js). It is a
 * programmatic target, not a tab stop, so drop the outline it would otherwise
 * draw around the whole dialog. */
.bankid-login-wall__panel:focus,
.bankid-login-modal__panel:focus {
	outline: none;
}

/* Membership signup: the "verify with BankID" call-to-action above the checkout
 * place-order button. JS swaps it for the confirmation line once BankID returns. */
.bankid-signup-verify {
	margin: 0 0 20px;
}

.bankid-signup-verify__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 20px;
	border: 1px solid var(--wp--preset--color--primary, #3e6666);
	border-radius: 8px;
	background: #f4f8f8;
	text-align: center;
}

.bankid-signup-verify__logo {
	width: 48px;
	height: auto;
}

.bankid-signup-verify__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.bankid-signup-verify__text strong {
	display: block;
	margin-bottom: 4px;
}

/* Primary fill, beating WooCommerce's `.woocommerce button.button` on checkout. */
.woocommerce .bankid-signup-verify .bankid-verify-trigger,
.woocommerce-page .bankid-signup-verify .bankid-verify-trigger,
.bankid-signup-verify .bankid-verify-trigger {
	width: 100%;
	max-width: 320px;
	padding: 12px 16px;
	background: var(--wp--preset--color--primary, #3e6666);
	color: var(--wp--preset--color--surface, #fff);
	border: none;
	border-radius: 4px;
	font-size: 15px;
	cursor: pointer;
}

.woocommerce .bankid-signup-verify .bankid-verify-trigger:hover,
.woocommerce .bankid-signup-verify .bankid-verify-trigger:focus,
.bankid-signup-verify .bankid-verify-trigger:hover,
.bankid-signup-verify .bankid-verify-trigger:focus {
	background: var(--wp--preset--color--primary-hover, #2e4f4f);
	color: var(--wp--preset--color--surface, #fff);
}

/* Verified: the whole outer box turns green; the confirmation line is plain
 * text inside it (no nested box). */
.bankid-signup-verify__box--done {
	border-color: #2e7d32;
	background: #edf7ed;
}

.bankid-signup-verify__done {
	margin: 0;
	color: #1b5e20;
	font-size: 15px;
	text-align: center;
}

/* Guest booking verification gate (booking wizard only).
 *
 * While `.bankid-verify-pending` is on the checkout form, hide every section
 * except the verify block, so BankID verification is the first and only step
 * shown. login.js adds the class on load (when the guest verify block is
 * present) and removes it on completion; the wizard defers activateCheckout()
 * — and thus the Stripe/payment mount — until the class is gone, so payment
 * never mounts into hidden DOM. !important beats Alpine's x-show inline style. */
form.sbf__checkout-form.bankid-verify-pending > *:not(#bankid-signup-verify) {
	display: none !important;
}

/* Name fields locked to the BankID-confirmed identity (CheckoutNameLock, and
 * login.js once a guest verifies). They stay readonly rather than disabled so
 * the value still posts — the greying is the only signal the customer gets that
 * the field is not theirs to edit. */
.bankid-locked-field,
.woocommerce .bankid-locked-field,
.woocommerce-page .bankid-locked-field {
	background: var(--wp--preset--color--surface-muted, #f2f2f0);
	color: #6b6b6b;
	cursor: not-allowed;
}

.bankid-locked-field:focus {
	box-shadow: none;
}

/* Return view (templates/bankid/login-return.php): what stands in for the login
 * form on the single page load iOS Safari makes on its way back from the BankID
 * app. Mostly covered by the modal — it only shows through if the modal is
 * closed or the script never ran. */
.bankid-login-return {
	text-align: center;
}

.bankid-login-return__status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 8px;
	font-size: 17px;
}

.bankid-login-return__spinner {
	width: 20px;
	height: 20px;
	border: 3px solid rgba(62, 102, 102, 0.2);
	border-top-color: var(--wp--preset--color--primary, #3e6666);
	border-radius: 50%;
	animation: bankid-spin 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.bankid-login-return__spinner {
		animation-duration: 2s;
	}
}

.bankid-login-return__hint {
	margin: 0 0 20px;
	color: #555;
	font-size: 15px;
}

.bankid-login-return__fallback {
	margin: 0;
	font-size: 14px;
}