/**
 * ENNU Unified Login Component Styles
 *
 * Apple-inspired minimal black and white design.
 * Clean, elegant, and centered.
 *
 * @package ENNU\Infrastructure
 * @since 2.6.0
 */

/* ==========================================================================
   CSS Variables - Minimal Black & White
   ========================================================================== */
:root {
    /* Core Colors */
    --ennu-login-black: #000000;
    --ennu-login-white: #ffffff;
    --ennu-login-gray-50: #fafafa;
    --ennu-login-gray-100: #f5f5f5;
    --ennu-login-gray-200: #e5e5e5;
    --ennu-login-gray-300: #d4d4d4;
    --ennu-login-gray-400: #a3a3a3;
    --ennu-login-gray-500: #737373;
    --ennu-login-gray-600: #525252;
    --ennu-login-gray-700: #404040;
    --ennu-login-gray-800: #262626;
    --ennu-login-gray-900: #171717;

    /* Semantic */
    --ennu-login-success: #22c55e;
    --ennu-login-error: #ef4444;

    /* Text */
    --ennu-login-text: var(--ennu-login-gray-900);
    --ennu-login-text-secondary: var(--ennu-login-gray-600);
    --ennu-login-text-muted: var(--ennu-login-gray-400);

    /* Layout */
    --ennu-login-radius: 12px;
    --ennu-login-radius-sm: 8px;

    /* Typography - Apple SF Stack */
    --ennu-login-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Animation */
    --ennu-login-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ennu-login-duration: 200ms;
}

/* ==========================================================================
   Page Wrapper - Fullscreen Centered
   ========================================================================== */
.ennu-login-page,
body.page-template-default:has(.ennu-unified-login) {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ennu-login-white);
}

/* Override any theme padding */
body:has(.ennu-unified-login) main,
body:has(.ennu-unified-login) .elementor-section,
body:has(.ennu-unified-login) .e-con {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Fullscreen wrapper */
.ennu-login-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ennu-login-white);
    z-index: 9999;
}

/* ==========================================================================
   Base Container
   ========================================================================== */
.ennu-unified-login {
    font-family: var(--ennu-login-font);
    font-size: 17px;
    line-height: 1.47059;
    font-weight: 400;
    letter-spacing: -0.022em;
    color: var(--ennu-login-text);
    background: transparent;
    padding: 48px 40px;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fullscreen auth - ensure centered */
.ennu-auth-fullscreen .ennu-unified-login {
    margin: 0 auto;
    background: transparent;
}

.ennu-unified-login *,
.ennu-unified-login *::before,
.ennu-unified-login *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   Logo
   ========================================================================== */
/* Hide theme chrome on login pages so only the form's centered logo shows.
   Pixfort theme injects its site header above the form, which on these pages
   visually competes with our form-internal logo and pushes the layout left. */
body.ennu-auth-page-body .pix-header,
body.ennu-auth-page-body .pix-site-header,
body.ennu-auth-page-body .pixfort-header,
body.ennu-auth-page-body header[role="banner"],
body.ennu-auth-page-body .site-header,
body.ennu-auth-page-body #header,
body.ennu-auth-page-body #masthead,
body.ennu-auth-page-body .pix-page-title,
body.ennu-auth-page-body .pix-breadcrumbs,
body.ennu-auth-page-body .page-title,
body.ennu-auth-page-body .entry-header,
body.ennu-auth-page-body .breadcrumbs,
body.page-template-template-login .pix-header,
body.page-template-template-login .pix-site-header,
body.page-template-template-login header[role="banner"],
body.page-template-template-login .site-header,
body.page-template-template-login #header,
body.page-template-template-login #masthead,
body.page-template-template-login .pix-page-title,
body.page-template-template-login .page-title,
body.page-template-template-login .entry-header,
body.page-template-template-login .breadcrumbs {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Force the form column itself to be horizontally centered on the viewport */
body.ennu-auth-page-body .ennu-unified-login,
body.page-template-template-login .ennu-unified-login {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 400px !important;
    width: 100% !important;
}

.ennu-unified-login__logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto 40px auto !important;
    padding: 0 !important;
}

.ennu-unified-login__logo img {
    display: block !important;
    max-height: 56px !important;
    width: auto !important;
    max-width: 240px !important;
    margin: 0 auto !important;
    filter: grayscale(100%) brightness(0);
}

/* ==========================================================================
   Messages
   ========================================================================== */
.ennu-unified-login__messages {
    margin-bottom: 20px;
}

.ennu-unified-login__messages:empty {
    display: none;
}

.ennu-unified-login__message {
    padding: 14px 16px;
    border-radius: var(--ennu-login-radius-sm);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
}

.ennu-unified-login__message--success {
    background: #f0fdf4;
    color: #166534;
}

.ennu-unified-login__message--error {
    background: #fef2f2;
    color: #dc2626;
}

.ennu-unified-login__message--info {
    background: var(--ennu-login-gray-100);
    color: var(--ennu-login-text);
}

/* ==========================================================================
   Form Fields
   ========================================================================== */
.ennu-unified-login__field {
    margin-bottom: 20px;
}

.ennu-unified-login__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ennu-unified-login__input {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--ennu-login-font);
    font-size: 17px;
    font-weight: 400;
    color: var(--ennu-login-text);
    background: var(--ennu-login-white);
    border: 1px solid var(--ennu-login-gray-300);
    border-radius: var(--ennu-login-radius);
    outline: none;
    text-align: center;
    transition: border-color var(--ennu-login-duration) var(--ennu-login-ease),
                box-shadow var(--ennu-login-duration) var(--ennu-login-ease);
}

.ennu-unified-login__input::placeholder {
    color: var(--ennu-login-gray-400);
}

.ennu-unified-login__input:hover {
    border-color: var(--ennu-login-gray-400);
}

.ennu-unified-login__input:focus {
    border-color: var(--ennu-login-gray-400);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
}

.ennu-unified-login__field-error {
    display: block;
    font-size: 13px;
    color: var(--ennu-login-error);
    margin-top: 8px;
}

/* ==========================================================================
   Turnstile Widget (Cloudflare Bot Protection)
   ========================================================================== */
.ennu-unified-login__turnstile {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    margin-bottom: 8px;
}

.ennu-unified-login__turnstile .cf-turnstile {
    transform-origin: center;
}

/* Hide hidden input for Turnstile token */
.ennu-unified-login__turnstile input[type="hidden"] {
    display: none;
}

/* ==========================================================================
   Logged In State
   ========================================================================== */
.ennu-unified-login__logged-in-state {
    margin-bottom: 24px;
}

.ennu-unified-login__logged-in-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f0fdf4;
    border-radius: var(--ennu-login-radius);
    color: #166534;
}

.ennu-unified-login__logged-in-banner svg {
    flex-shrink: 0;
    stroke: #22c55e;
}

.ennu-unified-login__user-name {
    font-weight: 600;
    color: var(--ennu-login-text);
}

/* ==========================================================================
   Login Options Panel
   ========================================================================== */
.ennu-unified-login__options {
    margin-top: 24px;
}

.ennu-unified-login__options-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--ennu-login-gray-50);
    border-radius: var(--ennu-login-radius);
    margin-bottom: 24px;
    white-space: nowrap;
}

.ennu-unified-login__options-header svg {
    flex-shrink: 0;
    stroke: var(--ennu-login-gray-500);
}

.ennu-unified-login__options-notice {
    font-size: 14px;
    color: var(--ennu-login-text-secondary);
    line-height: 1;
    white-space: nowrap;
}

/* ==========================================================================
   Social/Login Buttons
   ========================================================================== */
.ennu-unified-login__buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* UNIFIED BUTTON STYLES - ALL buttons use EXACT same design as input fields */
.ennu-unified-login__social-btn,
.ennu-unified-login__btn--primary,
.ennu-unified-login__login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    font-family: var(--ennu-login-font);
    font-size: 17px;
    font-weight: 400;
    color: var(--ennu-login-text);
    background: var(--ennu-login-white);
    border: 1px solid var(--ennu-login-gray-300);
    border-radius: var(--ennu-login-radius);
    cursor: pointer;
    transition: all var(--ennu-login-duration) var(--ennu-login-ease);
    text-decoration: none;
    box-sizing: border-box;
    position: relative;
}

/* Hover - ALL buttons */
.ennu-unified-login__social-btn:hover,
.ennu-unified-login__btn--primary:hover,
.ennu-unified-login__login-btn:hover {
    background: var(--ennu-login-gray-50);
    border-color: var(--ennu-login-gray-400);
}

/* Active/pressed - ALL buttons */
.ennu-unified-login__social-btn:active,
.ennu-unified-login__btn--primary:active,
.ennu-unified-login__login-btn:active {
    background: var(--ennu-login-gray-100);
    transform: scale(0.98);
}

/* Icons - consistent sizing */
.ennu-unified-login__social-btn svg,
.ennu-unified-login__btn--primary svg,
.ennu-unified-login__login-btn svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    stroke: var(--ennu-login-gray-600);
    fill: none;
}

/* Force visibility for button icons */
.ennu-unified-login__social-btn svg path,
.ennu-unified-login__social-btn svg polyline,
.ennu-unified-login__social-btn svg rect,
.ennu-unified-login__social-btn svg circle {
    stroke: var(--ennu-login-gray-600) !important;
    fill: none !important;
}

/* ==========================================================================
   Divider
   ========================================================================== */
.ennu-unified-login__divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.ennu-unified-login__divider::before,
.ennu-unified-login__divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--ennu-login-gray-200);
}

.ennu-unified-login__divider span {
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ennu-login-gray-400);
    text-transform: lowercase;
}

/* ==========================================================================
   Password Form
   ========================================================================== */
.ennu-unified-login__password-form {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--ennu-login-gray-200);
}

.ennu-unified-login__password-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

/* ==========================================================================
   Magic Link Sent State
   ========================================================================== */
.ennu-unified-login__magic-sent {
    text-align: center;
    padding: 32px 24px;
    background: var(--ennu-login-gray-50);
    border-radius: var(--ennu-login-radius);
    margin-top: 24px;
}

.ennu-unified-login__magic-sent svg {
    stroke: var(--ennu-login-gray-600);
    margin-bottom: 16px;
}

.ennu-unified-login__magic-sent h4 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: var(--ennu-login-text);
    letter-spacing: -0.02em;
}

.ennu-unified-login__magic-sent p {
    margin: 0 0 16px;
    font-size: 15px;
    color: var(--ennu-login-text-secondary);
}

/* ==========================================================================
   Register Section
   ========================================================================== */
.ennu-unified-login__register-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--ennu-login-gray-200);
}

.ennu-unified-login__register-notice {
    font-size: 15px;
    color: var(--ennu-login-text-secondary);
    margin-bottom: 24px;
    text-align: center;
}

.ennu-unified-login__social-register {
    margin-top: 24px;
}

.ennu-unified-login__social-register-buttons {
    display: flex;
    gap: 12px;
}

.ennu-unified-login__social-register-buttons .ennu-unified-login__social-btn {
    flex: 1;
    padding: 12px;
}

/* ==========================================================================
   Buttons - Apple Style
   ========================================================================== */
.ennu-unified-login__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    font-family: var(--ennu-login-font);
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-radius: var(--ennu-login-radius);
    cursor: pointer;
    transition: all var(--ennu-login-duration) var(--ennu-login-ease);
}

/* Primary button - matches all other buttons exactly */
.ennu-unified-login__btn--primary {
    /* All styling inherited from unified button styles above - no overrides */
}

/* Disabled state only */

.ennu-unified-login__btn--primary:disabled {
    background: var(--ennu-login-gray-300);
    color: var(--ennu-login-gray-500);
    cursor: not-allowed;
}

.ennu-unified-login__btn .btn-loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   Spinner
   ========================================================================== */
.ennu-unified-login__spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--ennu-login-white);
    border-radius: 50%;
    animation: ennu-login-spin 0.8s linear infinite;
}

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

/* ==========================================================================
   Modern Social Login Buttons (Brand Colors)
   ========================================================================== */

/* NSL wraps each button in <a><div class="nsl-button">. Strip ALL styling
   from the intermediate containers — container, container-buttons, and <a> —
   so they don't add padding, borders, shadows, or width constraints that
   would make the NSL buttons look different from the .ennu-unified-login__social-btn
   buttons (magic link / password) below them. */
.ennu-unified-login__nsl-buttons .nsl-container,
.ennu-unified-login__nsl-buttons .nsl-container-block,
.ennu-unified-login__nsl-buttons .nsl-container-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center !important;
}

.ennu-unified-login__nsl-buttons .nsl-container-buttons > a {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* The clickable button — EXACT mirror of .ennu-unified-login__social-btn so
   Google + Microsoft are visually indistinguishable from the magic-link and
   password buttons sitting below them (same width, height, padding, font, ONE
   border, NO drop shadow). Use the var(--ennu-login-*) tokens already used by
   the reference button. !important defeats both NSL's inline
   `style="background-color:..."` AND the theme's inset-box-shadow border. */
.ennu-unified-login__nsl-buttons .nsl-button,
.ennu-unified-login__nsl-buttons a > .nsl-button,
.ennu-unified-login__nsl-buttons .nsl-button-default,
.ennu-unified-login__nsl-buttons .nsl-button-google,
.ennu-unified-login__nsl-buttons .nsl-button-microsoft,
div.nsl-container .nsl-button-google,
div.nsl-container .nsl-button-microsoft {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    font-family: var(--ennu-login-font) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--ennu-login-text) !important;
    background: var(--ennu-login-white) !important;
    background-color: var(--ennu-login-white) !important;
    border: 1px solid var(--ennu-login-gray-300) !important;
    border-radius: var(--ennu-login-radius) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background var(--ennu-login-duration) var(--ennu-login-ease), border-color var(--ennu-login-duration) var(--ennu-login-ease) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.ennu-unified-login__nsl-buttons .nsl-button:hover,
.ennu-unified-login__nsl-buttons .nsl-button-google:hover,
.ennu-unified-login__nsl-buttons .nsl-button-microsoft:hover,
div.nsl-container .nsl-button-google:hover,
div.nsl-container .nsl-button-microsoft:hover {
    background: var(--ennu-login-gray-50) !important;
    background-color: var(--ennu-login-gray-50) !important;
    border-color: var(--ennu-login-gray-400) !important;
    box-shadow: none !important;
}

/* Icon container — sized identical for Google + Microsoft so the two buttons
   look balanced. SVG fills are inline on the NSL markup; we must NOT override
   them with a CSS fill, or we'll grayscale Microsoft's colored 4-square. */
.ennu-unified-login__nsl-buttons .nsl-button-svg-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.ennu-unified-login__nsl-buttons .nsl-button-svg-container svg,
.ennu-unified-login__nsl-buttons .nsl-button-svg-container img {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    /* Preserve the SVG path fills (e.g. Microsoft 4-square red/green/blue/yellow).
       Some themes set svg path { fill: currentColor } globally — defeat that. */
}
.ennu-unified-login__nsl-buttons .nsl-button-svg-container svg path,
.ennu-unified-login__nsl-buttons .nsl-button-svg-container svg rect,
.ennu-unified-login__nsl-buttons .nsl-button-svg-container svg polygon {
    fill: revert !important;
}

/* Label — flatten the wrapper's text styles + strip the <b> emphasis */
.ennu-unified-login__nsl-buttons .nsl-button-label-container {
    font-family: var(--ennu-login-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #1f2937 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ennu-unified-login__nsl-buttons .nsl-button-label-container b,
.ennu-unified-login__nsl-buttons .nsl-button-label-container strong {
    font-weight: 500 !important;
}

/* Magic Link Button - Elegant Gray */
.ennu-unified-login__social-btn--magic {
    background: var(--ennu-login-gray-50) !important;
    border: 1px solid var(--ennu-login-gray-200) !important;
    color: var(--ennu-login-text) !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.ennu-unified-login__social-btn--magic:hover {
    background: var(--ennu-login-gray-100) !important;
    border-color: var(--ennu-login-gray-300) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

/* Password Button - Subtle Outline */
.ennu-unified-login__social-btn--password {
    background: transparent !important;
    border: 1px solid var(--ennu-login-gray-300) !important;
    color: var(--ennu-login-text-secondary) !important;
}

.ennu-unified-login__social-btn--password:hover {
    background: var(--ennu-login-gray-50) !important;
    border-color: var(--ennu-login-gray-400) !important;
    color: var(--ennu-login-text) !important;
}

/* Primary Action Button (Log In, Create Account) */
.ennu-unified-login__login-btn,
.ennu-unified-login__register-btn {
    background: var(--ennu-login-black) !important;
    color: var(--ennu-login-white) !important;
    border: none !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

.ennu-unified-login__login-btn:hover,
.ennu-unified-login__register-btn:hover {
    background: var(--ennu-login-gray-800) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.12) !important;
}

.ennu-unified-login__login-btn:active,
.ennu-unified-login__register-btn:active {
    background: var(--ennu-login-gray-900) !important;
    transform: scale(0.98) !important;
}

/* Spinner for dark buttons */
.ennu-unified-login__login-btn .ennu-unified-login__spinner,
.ennu-unified-login__register-btn .ennu-unified-login__spinner {
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-top-color: #ffffff !important;
}

/* Smooth transitions for all buttons */
.ennu-unified-login__options {
    transition: opacity 200ms ease;
}

/* ==========================================================================
   Links
   ========================================================================== */
.ennu-unified-login__link {
    display: inline-block;
    font-size: 15px;
    color: var(--ennu-login-text-secondary);
    text-decoration: none;
    transition: color var(--ennu-login-duration);
    text-align: center;
}

.ennu-unified-login__link:hover {
    color: var(--ennu-login-black);
}

.ennu-unified-login__back-to-options {
    display: block;
    text-align: center;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.ennu-unified-login__footer {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--ennu-login-gray-200);
    text-align: center;
}

.ennu-unified-login__footer a {
    color: var(--ennu-login-gray-400);
    font-size: 14px;
    text-decoration: none;
    transition: color var(--ennu-login-duration);
}

.ennu-unified-login__footer a:hover {
    color: var(--ennu-login-text);
}

/* ==========================================================================
   Logged In State (Full Page)
   ========================================================================== */
.ennu-unified-login--logged-in {
    text-align: center;
}

.ennu-unified-login__logged-in-content {
    margin-top: 24px;
}

.ennu-unified-login__welcome {
    font-size: 17px;
    color: var(--ennu-login-text-secondary);
    margin-bottom: 24px;
}

.ennu-unified-login__welcome strong {
    color: var(--ennu-login-text);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 480px) {
    .ennu-unified-login {
        padding: 32px 24px;
        max-width: none;
    }

    .ennu-unified-login__logo {
        margin-bottom: 32px;
    }

    .ennu-unified-login__logo img {
        max-height: 36px;
    }

    .ennu-unified-login__input {
        padding: 12px 14px;
        font-size: 16px;
    }

    .ennu-unified-login__social-btn,
    .ennu-unified-login__btn--primary,
    .ennu-unified-login__login-btn {
        padding: 12px 14px;
        font-size: 16px;
    }

    .ennu-unified-login__social-register-buttons {
        flex-direction: column;
    }
}

/* ==========================================================================
   Fullscreen Login Page Wrapper
   ========================================================================== */
.ennu-login-fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 20px;
    background: var(--ennu-login-white);
}

.ennu-login-fullscreen .ennu-unified-login {
    width: 100%;
}

/* ==========================================================================
   Inline/Embedded Login (Wizard Context)
   ========================================================================== */
.ennu-unified-login--inline {
    max-width: none;
    padding: 0;
    background: transparent;
}

.ennu-unified-login--inline .ennu-unified-login__logo {
    display: none;
}

.ennu-unified-login--inline .ennu-unified-login__footer {
    display: none;
}

/* Wrapper for inline login within other forms */
.ennu-unified-login-wrapper {
    margin: 20px 0;
    padding: 24px;
    background: var(--ennu-login-gray-50);
    border-radius: var(--ennu-login-radius);
}

/* ==========================================================================
   Nextend Social Login Integration
   ========================================================================== */
.ennu-unified-login__nsl-buttons {
    width: 100%;
}

.ennu-unified-login__nsl-buttons .nsl-container {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ennu-unified-login__nsl-buttons .nsl-container-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ennu-unified-login__nsl-buttons .nsl-container-buttons::before,
.ennu-unified-login__nsl-buttons .nsl-container::before {
    display: none !important;
    content: none !important;
}

/* Style Nextend Social Login buttons — EXACT SAME AS OTHER LOGIN BUTTONS.
   Only target the INNER .nsl-button div, NEVER the wrapping <a>. The previous
   selector list included `.nsl-container-buttons a` which double-painted the
   button styling on both the link AND the inner div, producing a visible
   double border + doubled padding. */
.ennu-unified-login__nsl-buttons .nsl-button,
.ennu-unified-login__nsl-buttons .nsl-button-google,
.ennu-unified-login__nsl-buttons .nsl-button-microsoft,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-button,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-button-google,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-button-microsoft {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    font-family: var(--ennu-login-font) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    background: var(--ennu-login-white) !important;
    color: var(--ennu-login-text) !important;
    border: 1px solid var(--ennu-login-gray-300) !important;
    border-radius: var(--ennu-login-radius) !important;
    cursor: pointer !important;
    transition: all var(--ennu-login-duration) var(--ennu-login-ease) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    list-style: none !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.ennu-unified-login__nsl-buttons .nsl-button::before,
.ennu-unified-login__nsl-buttons .nsl-button-google::before,
.ennu-unified-login__nsl-buttons .nsl-button-microsoft::before {
    display: none !important;
    content: none !important;
}

/* Hover state — EXACT SAME AS OTHER BUTTONS. <a> wrapper excluded. */
.ennu-unified-login__nsl-buttons .nsl-button:hover,
.ennu-unified-login__nsl-buttons .nsl-button-google:hover,
.ennu-unified-login__nsl-buttons .nsl-button-microsoft:hover,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-button:hover,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-button-google:hover,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-button-microsoft:hover {
    background: var(--ennu-login-gray-50) !important;
    border-color: var(--ennu-login-gray-400) !important;
    box-shadow: none !important;
}

/* Active state — EXACT SAME AS OTHER BUTTONS. <a> wrapper excluded. */
.ennu-unified-login__nsl-buttons .nsl-button:active,
.ennu-unified-login__nsl-buttons .nsl-button-google:active,
.ennu-unified-login__nsl-buttons .nsl-button-microsoft:active,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-button:active,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-button-google:active,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-button-microsoft:active {
    background: var(--ennu-login-gray-100) !important;
    transform: scale(0.98) !important;
}

/* Focus state — EXACT SAME AS OTHER BUTTONS. <a> wrapper excluded. */
.ennu-unified-login__nsl-buttons .nsl-button:focus,
.ennu-unified-login__nsl-buttons .nsl-button-google:focus,
.ennu-unified-login__nsl-buttons .nsl-button-microsoft:focus,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-button:focus,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-button-google:focus,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-button-microsoft:focus {
    outline: 2px solid var(--ennu-login-gray-300) !important;
    outline-offset: 2px !important;
}

/* Link containers — pure transparent wrappers, NO button styling here.
   The visible button is the inner div. The <a> must NEVER paint a border,
   padding, background, or shadow or it will visually compound the inner
   button (double border, doubled padding). */
.ennu-unified-login__nsl-buttons a,
.ennu-unified-login__nsl-buttons a[data-plugin="nsl"],
.ennu-unified-login__nsl-buttons a.ennu-unified-login__social-link,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-container-buttons a,
div.nsl-container-block .nsl-container-buttons a,
div.nsl-container-block-fullwidth .nsl-container-buttons a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: none !important;
}

.ennu-unified-login__nsl-buttons a:hover,
.ennu-unified-login__nsl-buttons a:focus,
.ennu-unified-login__nsl-buttons a:active,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-container-buttons a:hover,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-container-buttons a:focus,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-container-buttons a:active {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Hide the Intercom messenger launcher on login/auth pages — covers the
   form on small screens and is unrelated to the auth flow. */
body.ennu-auth-page-body .intercom-lightweight-app,
body.ennu-auth-page-body .intercom-app,
body.ennu-auth-page-body #intercom-container,
body.ennu-auth-page-body iframe[name="intercom-messenger-frame"],
body.ennu-auth-page-body iframe[name="intercom-launcher-frame"],
body.ennu-auth-page-body iframe[name="intercom-launcher-badge-frame"],
body.ennu-auth-page-body iframe[title*="Intercom"],
body.page-template-template-login .intercom-lightweight-app,
body.page-template-template-login .intercom-app,
body.page-template-template-login #intercom-container,
body.page-template-template-login iframe[name="intercom-messenger-frame"],
body.page-template-template-login iframe[name="intercom-launcher-frame"],
body.page-template-template-login iframe[name="intercom-launcher-badge-frame"],
body.page-template-template-login iframe[title*="Intercom"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Button label - MATCH OTHER BUTTONS */
.ennu-unified-login__nsl-buttons .nsl-button-label-container,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-button-label-container {
    flex-grow: 1 !important;
    text-align: center !important;
    font-family: var(--ennu-login-font) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: var(--ennu-login-text) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ennu-unified-login__nsl-buttons .nsl-button-label-container b,
.ennu-auth-fullscreen.ennu-auth-fullscreen .nsl-button-label-container b {
    font-weight: 400 !important;
}

/* SVG icon container - visible icons - MATCH OTHER BUTTON ICONS */
.ennu-unified-login__nsl-buttons .nsl-button-svg-container,
.ennu-auth-fullscreen .nsl-button-svg-container,
.ennu-auth-fullscreen .nsl-button img,
.ennu-auth-fullscreen .nsl-button svg {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    filter: none !important;
}

.ennu-unified-login__nsl-buttons .nsl-button-svg-container svg,
.ennu-auth-fullscreen .nsl-button-svg-container svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.ennu-unified-login__nsl-buttons .nsl-button-svg-container svg path,
.ennu-auth-fullscreen .nsl-button-svg-container svg path {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Keep original colors for recognizability */
.ennu-unified-login__nsl-buttons .nsl-button-google svg path,
.ennu-unified-login__nsl-buttons .nsl-button-microsoft svg path,
.ennu-auth-fullscreen .nsl-button-google svg path,
.ennu-auth-fullscreen .nsl-button-microsoft svg path {
    fill-opacity: 1 !important;
}

.nsl-button.nsl-button-default {
    padding: 0px !important;
    border: none !important;
    background: none !important;
}

div.nsl-container div.nsl-container-buttons a[data-plugin="nsl"] {
    background: none !important;
}

.nsl-container.nsl-container-block {
    margin: 0px !important;
}

/* Registration flow buttons - smaller in row */
.ennu-unified-login__social-register-buttons .ennu-unified-login__nsl-buttons {
    display: flex;
    gap: 12px;
}

.ennu-unified-login__social-register-buttons .ennu-unified-login__nsl-buttons .nsl-container-buttons {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
}

.ennu-unified-login__social-register-buttons .ennu-unified-login__nsl-buttons a[data-plugin="nsl"] {
    flex: 1;
}

.ennu-unified-login__social-register-buttons .ennu-unified-login__nsl-buttons .nsl-button {
    padding: 12px !important;
}

.ennu-unified-login__social-register-buttons .ennu-unified-login__nsl-buttons .nsl-button-label-container {
    display: none;
}

/* Responsive adjustments for Nextend buttons */
@media (max-width: 480px) {
    .ennu-unified-login__nsl-buttons .nsl-button {
        padding: 12px 14px !important;
        font-size: 16px !important;
    }

    .ennu-unified-login__social-register-buttons .ennu-unified-login__nsl-buttons .nsl-container-buttons {
        flex-direction: column;
    }

    .ennu-unified-login__social-register-buttons .ennu-unified-login__nsl-buttons .nsl-button-label-container {
        display: block;
    }
}

/* ==========================================================================
   Page-level centering - Force TRUE center on screen
   ========================================================================== */

/* Elementor Canvas template - form is direct child of body */
body.elementor-template-canvas:has(.ennu-unified-login) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

body.elementor-template-canvas:has(.ennu-unified-login) .elementor {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
}

body.elementor-template-canvas:has(.ennu-unified-login) .elementor-element,
body.elementor-template-canvas:has(.ennu-unified-login) .elementor-widget-wrap,
body.elementor-template-canvas:has(.ennu-unified-login) .elementor-widget-container,
body.elementor-template-canvas:has(.ennu-unified-login) .e-con,
body.elementor-template-canvas:has(.ennu-unified-login) .e-con-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
}

/* Elementor standard page overrides */
body.elementor-page:has(.ennu-unified-login) .elementor-section.elementor-section-boxed > .elementor-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Generic WordPress page overrides */
body:has(.ennu-unified-login) .entry-content,
body:has(.ennu-unified-login) .page-content,
body:has(.ennu-unified-login) article.page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Pixfort theme override */
body:has(.ennu-unified-login) .pix-main-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Universal fallback - make form absolutely centered */
.ennu-unified-login {
    position: relative;
}

/* ==========================================================================
   Social Link Buttons
   ========================================================================== */
.ennu-unified-login__social-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

.ennu-unified-login__social-link .nsl-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    font-family: var(--ennu-login-font) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    background: var(--ennu-login-white) !important;
    color: var(--ennu-login-text) !important;
    border: 1px solid var(--ennu-login-gray-300) !important;
    border-radius: var(--ennu-login-radius) !important;
    cursor: pointer !important;
    transition: all var(--ennu-login-duration) var(--ennu-login-ease) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.ennu-unified-login__social-link:hover .nsl-button {
    background: var(--ennu-login-gray-50) !important;
    border-color: var(--ennu-login-gray-400) !important;
}

.ennu-unified-login__social-link:active .nsl-button {
    background: var(--ennu-login-gray-100) !important;
    transform: scale(0.98);
}

/* ==========================================================================
   Loading Overlay
   ========================================================================== */
.ennu-unified-login__loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: var(--ennu-login-radius);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ennu-unified-login__loading-content {
    text-align: center;
    padding: 40px;
}

.ennu-unified-login__loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--ennu-login-gray-200);
    border-top-color: var(--ennu-login-black);
    border-radius: 50%;
    animation: ennu-auth-spin 0.8s linear infinite;
    margin: 0 auto 24px;
}

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

.ennu-unified-login__loading-text {
    font-size: 17px;
    font-weight: 600;
    color: var(--ennu-login-text);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.ennu-unified-login__loading-subtext {
    font-size: 14px;
    color: var(--ennu-login-gray-500);
}

/* ==========================================================================
   Success Animation
   ========================================================================== */
.ennu-unified-login__success-checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ennu-login-success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    animation: ennu-success-pop 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ennu-unified-login__success-checkmark svg {
    stroke: white;
    stroke-width: 2.5;
    fill: none;
    width: 28px;
    height: 28px;
}

@keyframes ennu-success-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}