.rprp-login-wrapper { max-width: 420px; margin: 0 auto; }
.rprp-login-email-field { margin-bottom: 1em; }
.rprp-login-email-field label { display: block; margin-bottom: 0.3em; font-weight: 600; }
.rprp-login-email-field input[type="email"] { width: 100%; padding: 0.5em; font-size: 1em; box-sizing: border-box; border-radius: 8px; }
.rprp-login-password-field { margin-bottom: 1em; }
.rprp-login-password-field label { display: block; margin-bottom: 0.3em; font-weight: 600; }
.rprp-login-password-input-wrap { position: relative; }
.rprp-login-password-input-wrap input { width: 100%; padding: 0.5em 2.5em 0.5em 0.5em; font-size: 1em; box-sizing: border-box; border-radius: 8px; }
.rprp-login-password-toggle { position: absolute; right: 0.5em; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0.2em; color: #666; line-height: 1; }
.rprp-login-password-toggle:hover { color: #333; }
/* The plugin now owns the full button appearance directly — padding,
   weight, corner radius, color — instead of borrowing the theme
   .reason-btn class (removed from the markup below). That class only
   ever got the intended rounded-corner treatment inside the theme
   .paywall-gate component (resources/assets/styles/components/
   _paywall-gate.scss scopes a border-radius override onto .reason-btn
   there), so the standalone /login/ page — which never sat inside
   .paywall-gate — was still getting Bootstrap reboot rule `button {
   border-radius: 0 }` (a bare type selector, specificity 0-0-1):
   the previous `:where(.rprp-login-btn)` wrapper deliberately zeroed
   its own specificity so the actual theme button treatment could win
   when embedded normally, but that also meant an unrelated global
   reset like the Bootstrap one beat it by default everywhere the
   .reason-btn rules did not happen to reach. `button.rprp-login-btn`
   (0-1-1) now beats that reset outright, and matches or beats every
   .reason-btn arm it used to depend on (the theme own
   `button[type="submit"], input[type="submit"], .reason-btn { ... }`
   rule is also 0-1-1 for its button[type="submit"] arm; this stylesheet
   is printed after the theme stylesheet (Support\Assets prints it late in
   <head>), so an equal-specificity tie goes to whichever comes later in
   the document — this one).
   Colors reference the theme --r-brand--primary / --r-link--brand-hover
   design-system tokens (resources/assets/styles/common/
   _design-tokens.scss), the same pair the paywall-gate own CTA button
   uses, with literal hex fallbacks matching the current token values
   for a bare WordPress install without the theme active. */
button.rprp-login-btn { width: 100%; padding: 0.5em 2em; font-size: 1em; font-weight: 700; cursor: pointer; border: none; border-radius: 8px; }
/* Magic-link and password are both type="submit", so the theme own
   `button[type="submit"], input[type="submit"], .reason-btn, ... { background:
   theme-color("primary"); ... }` rule (specificity 0-1-1) still matches them
   regardless of class, same as the base rule above — the button[type="submit"]
   qualifier here is required, not decorative, to keep these colors from being
   silently replaced by that rule own orange background. The passkey button
   below is type="button", which that theme rule never matches, so it needs
   no such qualifier. */
button[type="submit"].rprp-login-btn-magic { background: var(--r-brand--primary, #f36b34); color: #fff; }
button[type="submit"].rprp-login-btn-magic:hover { background: var(--r-link--brand-hover, #c76005); }
.rprp-login-passkey { margin-top: 0.6em; }
/* The passkey button always sits in the SSO grid now (see render_login_shortcode()),
   so it needs to match its Nextend neighbours own box model instead of the
   oversized 0.5em 2em padding the shared .rprp-login-btn rule gives the full-width
   magic-link/password buttons — at grid-cell width that padding alone left almost
   no room for icon+label, forcing a wrap. Zeroed here and rebuilt from a fixed-width
   icon slot (matching Nextend own div.nsl-button-svg-container, 40px square) plus a
   flexible label with the same 0 24px 0 0 trailing margin as the Nextend override
   rule below, so both button kinds occupy their grid cell the same way. */
button.rprp-login-btn-passkey { display: flex; align-items: center; padding: 0; background: #fff; color: #333; border: 0; box-shadow: inset 0 0 0 1px #333; }
.rprp-login-btn-passkey-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rprp-login-btn-passkey-label { flex: 1; padding: 0; margin: 0 24px 0 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.rprp-login-btn-passkey:hover { background: #f3f3f3; }
.rprp-login-btn-passkey:disabled { cursor: default; opacity: 0.7; }
.rprp-login-btn-passkey .rprp-spinner { border-color: rgba(0,0,0,0.2); border-top-color: #333; }
.rprp-login-passkey-error { margin: 0.6em 0 0; font-size: 0.875em; color: #721c24; }
button[type="submit"].rprp-login-btn-password { background: #333; color: #fff; }
button[type="submit"].rprp-login-btn-password:hover { background: #111; }
.rprp-login-divider { display: flex; align-items: center; text-align: center; margin: 1.5em 0; }
.rprp-login-divider::before,
.rprp-login-divider::after { content: ""; flex: 1; border-bottom: 1px solid #ccc; }
.rprp-login-divider span { padding: 0 0.75em; color: #999; font-size: 0.875em; font-weight: 600; }
.rprp-login-links { text-align: center; margin-top: 1em; }
.rprp-login-links a { color: #f36b34; font-size: 0.875em; }
.rprp-login-success { padding: 1em; background: #d4edda; border: 1px solid #c3e6cb; color: #155724; border-radius: 4px; }
.rprp-login-error { padding: 1em; background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; border-radius: 4px; margin-bottom: 1em; }
.rprp-login-btn .rprp-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: rprp-spin 0.6s linear infinite; vertical-align: middle; }
@keyframes rprp-spin { to { transform: rotate(360deg); } }
.rprp-login-sso-grid { display: flex; flex-wrap: wrap; gap: 0.5em; }
/* Each Nextend button call renders div.nsl-container > div.nsl-container-buttons
   > a[data-provider]. display:contents on the two wrapper divs removes their
   own box (Nextend own 5px margin/padding included) without touching selector
   matching, so Nextend real per-provider styling (colors, icon, label, from
   its own template-parts/style.css) still applies to the anchor beneath. The
   anchor becomes the actual flex item; sized directly since the removed
   wrappers can no longer be targeted with a plain child selector.
   Every selector below repeats the "div" Nextend itself uses (e.g.
   "div.nsl-container .nsl-container-buttons") rather than the bare class —
   confirmed via computed-style inspection in a real browser that Nextend own
   div-qualified selectors otherwise win ties on specificity alone regardless of
   source order, silently no-opping every override in this block. Matching that
   qualification makes the specificity equal, so this block later position in
   the DOM (Nextend prints its stylesheet as an inline <style> on wp_head at
   priority 100; Support\Assets prints this file on wp_head at priority 101,
   after it) is what actually wins the cascade. */
.rprp-login-sso-grid .nsl-container,
.rprp-login-sso-grid div.nsl-container-buttons { display: contents; }
/* min-width:0 overrides the flex item default of min-width:auto, which
   otherwise refuses to shrink an item below the content natural size —
   here, the button label white-space:nowrap (Nextend own CSS) means that
   natural size is the full unwrapped label text, wider than 45% of this
   narrow card column and enough to overflow the grid entirely. Nextend
   label-container CSS already clips overflow with text-overflow:clip, so
   shrinking below that natural width just clips the label as intended,
   rather than blowing out the layout. */
.rprp-login-sso-grid div.nsl-container-buttons a,
.rprp-login-sso-grid > .rprp-login-passkey { flex: 1 1 45%; min-width: 0; width: auto; max-width: none; margin: 0; }
/* Nextend default border radius is 4px; match this component other rounded controls.
   padding/margin explicitly zeroed rather than left to inherit: the theme
   previously had a sitewide ".nsl-button { @extend .reason-btn }" rule (removed)
   sized for the single wide button on the standalone /login/ page own full
   layout - its padding: 0.5em 2em consumed nearly this whole 116px-wide grid
   cell, leaving the label container 0px wide and its text fully clipped.
   Zeroing here keeps this component correct regardless of what any other
   page-level rule does. */
.rprp-login-sso-grid div.nsl-button { border-radius: 8px; padding: 0; margin: 0; }
/* Nextend own default label-container margin sits the label right against the
   button edge, cramped against this component own rounded corners/padding.
   0 24px 0 0 (right margin only) reserves the same trailing gap this button
   own passkey label-container gets, so the two button kinds read as one
   consistent set rather than the passkey one looking like it has more
   breathing room. Scoped to .rprp-login-sso-grid (this component own wrapper),
   not the wider .entry-content ancestor, so it cannot affect an unrelated
   Nextend button elsewhere on the same page. div-qualified for the same
   specificity-tie reason as the rule above. */
.rprp-login-sso-grid div.nsl-container .nsl-button-default div.nsl-button-label-container { margin: 0 24px 0 0; }
.rprp-login-secondary-links { display: flex; justify-content: space-between; gap: 1em; margin-top: 1em; font-size: 0.75em; }
.rprp-login-secondary-links a { color: #e64c0e; }
.rprp-login-2fa-intro { margin: 0 0 1em; font-size: 0.85em; color: #555; }
#rprp-login-2fa-code { width: 100%; padding: 0.5em; font-size: 1.1em; letter-spacing: 0.1em; box-sizing: border-box; }
/* The compact layout hides the inactive panel with the HTML [hidden] attribute,
   which the UA stylesheet applies at the lowest possible specificity — any host
   theme rule touching these divs would beat it and show both panels, and both
   contradictory toggle links, at once. Scoped to this widget. */
.rprp-login-compact [hidden] { display: none !important; }