/**
 * MLM Backoffice - Login Styles (Glassmorphism Design)
 * Silver Theme Edition
 *
 * @package MLM_Backoffice
 * @author  Ali Elkhaiat
 */

/* ========== CSS VARIABLES ========== */
:root {
    /* Silver Colors */
    --clr-silver: #c0c0c0;
    --clr-silver-light: #e8e8e8;
    --clr-silver-dark: #a0a0a0;
    --clr-silver-shine: #f5f5f5;
    --clr-silver-shadow: #707070;
    
    /* Legacy Gold Names mapped to Silver */
    --clr-gold: #c0c0c0;
    --clr-gold-light: #e8e8e8;
    --clr-gold-dark: #a0a0a0;
    
    /* Status Colors */
    --clr-danger: #ef4444;
    --clr-success: #22c55e;
    --clr-white: #ffffff;
    --clr-black: #000000;
    
    /* Text Colors */
    --clr-text-primary: rgba(255, 255, 255, 0.95);
    --clr-text-secondary: rgba(255, 255, 255, 0.8);
    --clr-text-muted: rgba(255, 255, 255, 0.6);
    --clr-text-faint: rgba(255, 255, 255, 0.4);
    
    /* Backgrounds */
    --clr-bg-glass: rgba(255, 255, 255, 0.03);
    --clr-bg-glass-hover: rgba(255, 255, 255, 0.06);
    --clr-bg-input: rgba(255, 255, 255, 0.08);
    
    /* Borders */
    --clr-border: rgba(255, 255, 255, 0.1);
    --clr-border-strong: rgba(255, 255, 255, 0.2);
    --clr-silver-border: rgba(192, 192, 192, 0.4);
    
    /* Effects */
    --blur-light: 8px;
    --blur-medium: 16px;
    
    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    
    /* Transitions */
    --transition: all 0.25s ease;
}

/* ========== RESET ========== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ========== BACKGROUND ========== */
html {
    min-height: 100%;
    background-color: #030303;
    background-image:
        repeating-linear-gradient(
        90deg,
        transparent 0px, transparent 18px,
        rgba(180,180,180,0.03) 18px, rgba(180,180,180,0.03) 20px,
        transparent 20px, transparent 28px,
        rgba(120,120,120,0.025) 28px, rgba(120,120,120,0.025) 34px,
        transparent 34px, transparent 42px,
        rgba(160,160,160,0.02) 42px, rgba(160,160,160,0.02) 44px,
        transparent 44px, transparent 56px,
        rgba(180,180,180,0.035) 56px, rgba(180,180,180,0.035) 60px,
        transparent 60px, transparent 68px,
        rgba(140,140,140,0.02) 68px, rgba(140,140,140,0.02) 70px,
        transparent 70px, transparent 80px
        ),
        repeating-linear-gradient(
        180deg,
        transparent 0px, transparent 59px,
        rgba(255,255,255,0.025) 59px, rgba(255,255,255,0.025) 60px
        ),
        repeating-linear-gradient(
        90deg,
        transparent 0px, transparent 23px,
        rgba(160,160,160,0.015) 23px, rgba(160,160,160,0.015) 24px,
        transparent 24px, transparent 59px,
        rgba(140,140,140,0.012) 59px, rgba(140,140,140,0.012) 60px,
        transparent 60px, transparent 80px
        ),
        radial-gradient(
        ellipse 80% 70% at 50% 50%,
        transparent 40%,
        rgba(0,0,0,0.5) 100%
        ),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    background-size:
        80px 100%,
        100% 60px,
        80px 100%,
        100% 100%,
        256px 256px;
    background-repeat: repeat, repeat, repeat, no-repeat, repeat;
    background-attachment: fixed;
}

html:before {
    content: "";
    display: table;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

body.login {
    background: transparent !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
}

p#backtoblog{
    display: none;
}

/* ========== HEADER ========== */
.mlm-login-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 40px;
    z-index: 1000;
}

.mlm-login-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--clr-white);
    font-size: 1em;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.mlm-login-logo img {
    max-height: 32px;
    width: auto;
}

/* ========== MAIN CONTAINER ========== */
#login {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-height: 100vh;
}

/* Hide default WordPress logo */
.login h1 {
    display: none !important;
}

/* ========== LOGIN BOX ========== */
.login form {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius-lg) !important;
    backdrop-filter: blur(var(--blur-medium));
    -webkit-backdrop-filter: blur(var(--blur-medium));
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
    padding: 40px !important;
    margin: 0 !important;
    overflow: hidden;
}

/* Shine Line */
.login form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
}

/* Inner Glow - Silver */
.login form::after {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 100px;
    background: radial-gradient(ellipse at top center, rgba(192, 192, 192, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.login #loginform {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ========== TITLE ========== */
.login-title-custom {
    text-align: center;
    margin-bottom: 32px !important;
    position: relative;
    z-index: 1;
}

.login-title-custom h2 {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--clr-white);
    margin: 0 0 10px 0;
}

.login-title-custom p {
    color: var(--clr-text-muted);
    font-size: 1em;
    margin: 0;
}

/* ========== LABELS ========== */
.login label {
    display: block;
    color: var(--clr-text-secondary) !important;
    font-size: 0.8em !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

/* ========== INPUTS ========== */
.login .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 1em !important;
    color: var(--clr-text-primary) !important;
    background: var(--clr-bg-input) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: var(--transition) !important;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--clr-silver) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(192, 192, 192, 0.15) !important;
}

.login input::placeholder {
    color: var(--clr-text-faint) !important;
}

/* Password field spacing */
.login .user-pass-wrap {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

/* Password toggle */
.wp-pwd {
    position: relative !important;
}

.wp-pwd input {
    padding-right: 50px !important;
}

.wp-pwd .button.wp-hide-pw {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: var(--clr-text-muted) !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    height: auto !important;
    transition: var(--transition) !important;
}

.wp-pwd .button.wp-hide-pw:hover {
    color: var(--clr-silver) !important;
}

.wp-pwd .button.wp-hide-pw .dashicons {
    font-size: 1em;
    width: 20px;
    height: 20px;
}

/* ========== REMEMBER ME ========== */
.login .forgetmenot {
    margin-top: 20px !important;
}

.login .forgetmenot label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--clr-text-muted) !important;
    font-size: 0.8em !important;
    cursor: pointer;
}

.login input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    background: var(--clr-bg-input) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: 4px !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: var(--transition) !important;
}

.login input[type="checkbox"]:checked {
    background: var(--clr-silver) !important;
    border-color: var(--clr-silver) !important;
}

.login input[type="checkbox"]:checked::after {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-black);
    font-size: 12px;
    font-weight: 700;
    width: 100%;
    height: 100%;
}

/* ========== FORGOT PASSWORD ========== */
.login #nav {
    text-align: center !important;
    margin: 24px 0 0 0 !important;
    padding: 0 !important;
}

.login #nav a {
    color: var(--clr-silver) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: var(--transition) !important;
}

.login #nav a:hover {
    color: var(--clr-silver-light) !important;
    text-decoration: underline !important;
}

/* ========== SUBMIT BUTTON - ULTRA SHINY SILVER ========== */
.login .submit {
    margin-top: 28px !important;
    margin-bottom: 20px !important;
    position: relative !important;
}

/* Shimmer overlay - wrapper needed since input can't have ::before */
.login .submit::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 70% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 35%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0.3) 65%,
        transparent 100%
    ) !important;
    transform: skewX(-20deg) !important;
    animation: btn-shimmer 2.5s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 10 !important;
    border-radius: var(--radius-sm) !important;
}

@keyframes btn-shimmer {
    0%, 100% {
        left: -100%;
    }
    60% {
        left: 150%;
    }
}

/* Main Button Styles */
.login .submit .button-primary,
.login #wp-submit,
.login input[type="submit"] {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    background: 
        /* Glass shine overlay baked into gradient */
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.7) 12%,
            rgba(255, 255, 255, 0.4) 25%,
            rgba(255, 255, 255, 0.1) 45%,
            transparent 46%,
            transparent 100%
        ),
        /* Main silver metallic gradient */
        linear-gradient(
            180deg, 
            #f5f5f5 0%,
            #ececec 8%,
            #e0e0e0 20%,
            #d0d0d0 35%,
            #c0c0c0 50%,
            #a8a8a8 70%,
            #989898 85%,
            #888888 100%
        ) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9) !important;
    box-shadow: 
        /* Top inner highlight line */
        inset 0 1px 0 0 rgba(255, 255, 255, 1),
        inset 0 2px 2px 0 rgba(255, 255, 255, 0.7),
        /* Bottom inner shadow for 3D depth */
        inset 0 -2px 4px 0 rgba(0, 0, 0, 0.12),
        /* 3D edge effect */
        0 1px 0 0 rgba(255, 255, 255, 0.4),
        0 -1px 0 0 rgba(0, 0, 0, 0.1),
        /* External drop shadows */
        0 4px 6px -1px rgba(0, 0, 0, 0.25),
        0 8px 15px -3px rgba(0, 0, 0, 0.2),
        0 12px 25px -5px rgba(0, 0, 0, 0.15),
        /* Glow effect */
        0 0 20px rgba(200, 200, 200, 0.35),
        0 0 40px rgba(180, 180, 180, 0.15) !important;
    height: auto !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    /* Remove any WP defaults */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Hover State */
.login .submit:hover::before {
    animation: btn-shimmer-fast 1.2s ease-in-out infinite !important;
}

@keyframes btn-shimmer-fast {
    0% {
        left: -100%;
    }
    100% {
        left: 150%;
    }
}

.login #wp-submit:hover,
.login input[type="submit"]:hover {
    background: 
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.85) 12%,
            rgba(255, 255, 255, 0.55) 25%,
            rgba(255, 255, 255, 0.2) 45%,
            transparent 46%,
            transparent 100%
        ),
        linear-gradient(
            180deg, 
            #ffffff 0%,
            #f8f8f8 8%,
            #f0f0f0 20%,
            #e0e0e0 35%,
            #d0d0d0 50%,
            #b8b8b8 70%,
            #a8a8a8 85%,
            #989898 100%
        ) !important;
    transform: translateY(-2px) !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 1),
        inset 0 3px 4px 0 rgba(255, 255, 255, 0.8),
        inset 0 -2px 4px 0 rgba(0, 0, 0, 0.08),
        0 1px 0 0 rgba(255, 255, 255, 0.5),
        0 8px 12px -2px rgba(0, 0, 0, 0.3),
        0 16px 25px -5px rgba(0, 0, 0, 0.2),
        0 20px 35px -8px rgba(0, 0, 0, 0.15),
        0 0 30px rgba(220, 220, 220, 0.45),
        0 0 60px rgba(200, 200, 200, 0.2) !important;
}

/* Active/Pressed State */
.login #wp-submit:active,
.login input[type="submit"]:active {
    transform: translateY(1px) !important;
    background: 
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.25) 15%,
            transparent 35%,
            transparent 100%
        ),
        linear-gradient(
            180deg, 
            #d8d8d8 0%,
            #c8c8c8 25%,
            #b0b0b0 55%,
            #a0a0a0 100%
        ) !important;
    box-shadow: 
        inset 0 2px 5px 0 rgba(0, 0, 0, 0.2),
        inset 0 -1px 2px 0 rgba(255, 255, 255, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.2),
        0 0 12px rgba(180, 180, 180, 0.25) !important;
}

/* Focus State */
.login #wp-submit:focus,
.login input[type="submit"]:focus {
    outline: none !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 1),
        inset 0 2px 2px 0 rgba(255, 255, 255, 0.7),
        inset 0 -2px 4px 0 rgba(0, 0, 0, 0.12),
        0 4px 6px -1px rgba(0, 0, 0, 0.25),
        0 8px 15px -3px rgba(0, 0, 0, 0.2),
        0 0 0 3px rgba(192, 192, 192, 0.5),
        0 0 25px rgba(192, 192, 192, 0.35) !important;
}

/* Remove Firefox inner border */
.login #wp-submit::-moz-focus-inner,
.login input[type="submit"]::-moz-focus-inner {
    border: 0 !important;
    padding: 0 !important;
}

/* ========== FOOTER ========== */
.mlm-login-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 24px;
    color: var(--clr-text-faint);
    font-size: 13px;
}

.mlm-login-footer a {
    color: var(--clr-text-muted);
    text-decoration: none;
    transition: var(--transition);
}

.mlm-login-footer a:hover {
    color: var(--clr-silver);
}

/* ========== SEPARATOR ========== */
.login-separator {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 28px 0;
    color: var(--clr-text-faint);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.login-separator::before,
.login-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--clr-border);
}

/* ========== SOCIAL LOGIN (if needed) ========== */
.social-login {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.social-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    font-size: 0.8em;
    font-weight: 500;
    color: var(--clr-text-primary);
    background: var(--clr-bg-glass);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.social-login-btn:hover {
    background: var(--clr-bg-glass-hover);
    border-color: var(--clr-border-strong);
}

.social-login-btn i,
.social-login-btn svg {
    font-size: 18px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
    .mlm-login-header {
        padding: 20px 24px;
    }
    
    .mlm-login-logo a {
        font-size: 18px;
    }
    
    #login {
        padding: 0 16px !important;
    }
    
    .login form {
        padding: 28px 24px !important;
    }
    
    .login-title-custom h2 {
        font-size: 24px;
    }
    
    .login-title-custom p {
        font-size: 0.8em;
    }
    
    .login .input,
    .login input[type="text"],
    .login input[type="password"],
    .login input[type="email"] {
        padding: 12px 14px !important;
        font-size: 0.8em !important;
    }
    
    .login #wp-submit {
        padding: 12px 20px !important;
        font-size: 0.8em !important;
    }
    
    .language-switcher {
        top: 20px;
        right: 24px;
    }
    
    .mlm-login-footer {
        padding: 20px 16px;
        font-size: 12px;
    }
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login form {
    animation: fadeIn 0.5s ease-out;
}

/* ========== TWO-FACTOR AUTH (if plugin installed) ========== */
.login .backup-methods-wrap {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--clr-border);
}

.login .backup-methods-wrap a {
    color: var(--clr-silver) !important;
    font-size: 0.8em;
}

/* ========== INTERIM LOGIN (popup) ========== */
.interim-login #login {
    min-height: auto;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.interim-login .login form {
    margin-top: 0 !important;
}

/* ========== BACK TO SITE LINK ========== */
.login #backtoblog a {
    color: var(--clr-text-muted) !important;
    transition: var(--transition) !important;
}

.login #backtoblog a:hover {
    color: var(--clr-silver) !important;
}

/* ========== ERROR MESSAGES ========== */
.login .message,
.login #login_error {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 4px solid var(--clr-silver) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--clr-text-primary) !important;
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    font-size: 0.8em;
}

.login #login_error {
    border-left-color: var(--clr-danger) !important;
}

.login .message a,
.login #login_error a {
    color: var(--clr-silver) !important;
}

/* ========== 2FA AUTHENTICATION ========== */

/* Hide WordPress form when in 2FA mode */
body.mlm-2fa-mode #loginform {
    display: none !important;
}

body.mlm-2fa-mode #login_error,
body.mlm-2fa-mode .notice,
body.mlm-2fa-mode .message,
body.mlm-2fa-mode .mlm-2fa-dummy-form,
body.mlm-2fa-mode #nav {
    display: none !important;
}

/* 2FA Form */
.mlm-2fa-form {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(var(--blur-medium));
    -webkit-backdrop-filter: blur(var(--blur-medium));
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    padding: 40px;
    animation: fadeIn 0.5s ease-out;
}

/* Shine Line */
.mlm-2fa-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
}

/* Inner Glow */
.mlm-2fa-form::after {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 100px;
    background: radial-gradient(ellipse at top center, rgba(192, 192, 192, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* 2FA Label */
.mlm-2fa-form label {
    display: block;
    color: var(--clr-text-secondary);
    font-size: 0.8em;
    font-weight: 500;
    margin-bottom: 8px;
}

/* 2FA Code Input */
.mlm-2fa-form input[type="text"] {
    width: 100%;
    padding: 14px 16px;
    font-size: 1.5em !important;
    letter-spacing: 8px;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: var(--clr-text-primary);
    background: var(--clr-bg-input);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    box-shadow: none;
    margin-bottom: 8px;
    transition: var(--transition);
}

.mlm-2fa-form input[type="text"]:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--clr-silver);
    outline: none;
    box-shadow: 0 0 0 3px rgba(192, 192, 192, 0.15);
}

.mlm-2fa-form input[type="text"]::placeholder {
    letter-spacing: 8px;
    font-weight: normal;
    opacity: 0.5;
    color: var(--clr-text-faint);
}

/* 2FA Hint */
.mlm-2fa-hint {
    display: block;
    margin-top: 5px;
    margin-bottom: 24px;
    font-size: 0.8em;
    color: var(--clr-text-muted);
    text-align: center;
}

/* 2FA Error */
.mlm-2fa-error {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid var(--clr-danger);
    color: #ef4444;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
    font-size: 0.8em;
}

/* 2FA Submit Button - Same as login button */
.mlm-2fa-submit {
    position: relative;
    margin-bottom: 20px;
}

.mlm-2fa-submit button {
    position: relative;
    display: block;
    width: 100%;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    background: 
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.7) 12%,
            rgba(255, 255, 255, 0.4) 25%,
            rgba(255, 255, 255, 0.1) 45%,
            transparent 46%,
            transparent 100%
        ),
        linear-gradient(
            180deg, 
            #f5f5f5 0%,
            #ececec 8%,
            #e0e0e0 20%,
            #d0d0d0 35%,
            #c0c0c0 50%,
            #a8a8a8 70%,
            #989898 85%,
            #888888 100%
        );
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 1),
        inset 0 2px 2px 0 rgba(255, 255, 255, 0.7),
        inset 0 -2px 4px 0 rgba(0, 0, 0, 0.12),
        0 1px 0 0 rgba(255, 255, 255, 0.4),
        0 -1px 0 0 rgba(0, 0, 0, 0.1),
        0 4px 6px -1px rgba(0, 0, 0, 0.25),
        0 8px 15px -3px rgba(0, 0, 0, 0.2),
        0 12px 25px -5px rgba(0, 0, 0, 0.15),
        0 0 20px rgba(200, 200, 200, 0.35),
        0 0 40px rgba(180, 180, 180, 0.15);
    height: auto;
    line-height: 1.3;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mlm-2fa-submit button:hover {
    background: 
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.85) 12%,
            rgba(255, 255, 255, 0.55) 25%,
            rgba(255, 255, 255, 0.2) 45%,
            transparent 46%,
            transparent 100%
        ),
        linear-gradient(
            180deg, 
            #ffffff 0%,
            #f8f8f8 8%,
            #f0f0f0 20%,
            #e0e0e0 35%,
            #d0d0d0 50%,
            #b8b8b8 70%,
            #a8a8a8 85%,
            #989898 100%
        );
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 1),
        inset 0 3px 4px 0 rgba(255, 255, 255, 0.8),
        inset 0 -2px 4px 0 rgba(0, 0, 0, 0.08),
        0 1px 0 0 rgba(255, 255, 255, 0.5),
        0 8px 12px -2px rgba(0, 0, 0, 0.3),
        0 16px 25px -5px rgba(0, 0, 0, 0.2),
        0 20px 35px -8px rgba(0, 0, 0, 0.15),
        0 0 30px rgba(220, 220, 220, 0.45),
        0 0 60px rgba(200, 200, 200, 0.2);
}

.mlm-2fa-submit button:active {
    transform: translateY(1px);
    background: 
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.25) 15%,
            transparent 35%,
            transparent 100%
        ),
        linear-gradient(
            180deg, 
            #d8d8d8 0%,
            #c8c8c8 25%,
            #b0b0b0 55%,
            #a0a0a0 100%
        );
    box-shadow: 
        inset 0 2px 5px 0 rgba(0, 0, 0, 0.2),
        inset 0 -1px 2px 0 rgba(255, 255, 255, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.2),
        0 0 12px rgba(180, 180, 180, 0.25);
}

.mlm-2fa-submit button:focus {
    outline: none;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 1),
        inset 0 2px 2px 0 rgba(255, 255, 255, 0.7),
        inset 0 -2px 4px 0 rgba(0, 0, 0, 0.12),
        0 4px 6px -1px rgba(0, 0, 0, 0.25),
        0 8px 15px -3px rgba(0, 0, 0, 0.2),
        0 0 0 3px rgba(192, 192, 192, 0.5),
        0 0 25px rgba(192, 192, 192, 0.35);
}

/* 2FA Back Link */
.mlm-2fa-back {
    text-align: center;
    margin-top: 8px;
}

.mlm-2fa-back a {
    color: var(--clr-text-muted);
    text-decoration: none;
    font-size: 0.8em;
    transition: var(--transition);
}

.mlm-2fa-back a:hover {
    color: var(--clr-silver);
    text-decoration: underline;
}

/* 2FA Responsive */
@media (max-width: 480px) {
    .mlm-2fa-form {
        padding: 28px 24px;
    }
    
    .mlm-2fa-form input[type="text"] {
        font-size: 1em;
        padding: 12px 14px;
    }
    
    .mlm-2fa-submit button {
        padding: 12px 20px;
        font-size: 0.8em;
    }
}

/* ========== REGISTRATION FORM ========== */

/* Required asterisk */
.login label .required {
    color: var(--clr-danger);
    font-weight: bold;
}

/* Field with error */
.login .mlm-reg-field.has-error .input,
.login .input-error,
.login input.input-error {
    border-color: var(--clr-danger) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

.login .mlm-reg-field.has-error .input:focus,
.login .input-error:focus {
    border-color: var(--clr-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3) !important;
}

/* Error message under field */
.login .field-error-msg {
    display: block;
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 13px;
    color: var(--clr-danger);
}

/* Hint under field */
.login .field-hint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--clr-text-faint);
}

/* Readonly input */
.login input[readonly] {
    background: rgba(255, 255, 255, 0.03) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Registration error box */
.mlm-reg-error {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid var(--clr-danger);
    color: var(--clr-danger);
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
}

.mlm-remove-ref-link {
    color: var(--clr-danger) !important;
    text-decoration: underline !important;
}

.mlm-remove-ref-link:hover {
    opacity: 0.8;
}

/* Registration field spacing */
.login .mlm-reg-field {
    margin-bottom: 16px;
}

/* ========== REGISTRATION FORM SPACING ========== */

/* Hide registration confirmation text */
#registerform #reg_passmail,
#registerform p#reg_passmail {
    display: none !important;
}

/* Registration form field spacing */
#registerform > p {
    margin-bottom: 20px !important;
}

#registerform .mlm-reg-field {
    margin-bottom: 20px !important;
}

/* Submit button spacing */
#registerform .submit {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    padding-bottom: 12px;
}

/* Hide registration message only on register page */
body.login-action-register .message {
    display: none !important;
}

/* Privacy checkbox styling */
.mlm-privacy-field {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

.mlm-privacy-field.has-error .mlm-privacy-label {
    color: var(--clr-danger);
}

.mlm-privacy-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    color: var(--clr-text-secondary) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    cursor: pointer;
}

.mlm-privacy-label input[type="checkbox"] {
    margin-top: 2px !important;
    flex-shrink: 0;
}

.mlm-privacy-label a {
    color: var(--clr-silver) !important;
    text-decoration: underline !important;
}

.mlm-privacy-label a:hover {
    color: var(--clr-silver-light) !important;
}

/* ========== REGISTRATION PAGE SPECIFIC ========== */

/* Allow registration page to scroll and have proper spacing */
body.login-action-register #login {
    min-height: auto;
    padding-top: 120px !important;
    padding-bottom: 80px !important;
    justify-content: flex-start;
}

/* Error box spacing */
body.login-action-register #login_error {
    margin-bottom: 24px !important;
}

/* Form container */
body.login-action-register .login form {
    margin-bottom: 24px !important;
}


/* Privacy error message */
.mlm-privacy-field .field-error-msg {
    margin-top: 8px;
    margin-left: 30px;
}

p.description.indicator-hint{
    color: var(--clr-text-secondary) !important;
}

button.button.wp-generate-pw {
    position: relative !important;
    display: table !important;
    padding: 12px 18px !important;
    font-size: 0.7em !important;
    font-weight: 600 !important;
    color: #fff !important;
    border: 2px solid #fff;
    background: transparent;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    height: auto !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin-bottom: 20px !important;
}

.wp-pwd .button.wp-hide-pw {
    top: 15px !important;
    right: 5px !important;
    transform: unset !important;
}