/* =========================================================
   Ultra Login Customizer — Login Page 🌈 v3.1
   ========================================================= */

/* =========================================================
   Base + центрирование
   ========================================================= */
body.login {
    background: var(--ulc-bg, #050615);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ulc-text, #ecf0ff);
    min-height: 100vh;
    margin: 0;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 🎯 Центрирование формы */
body.login.ulc-center {
    justify-content: center;
}

body.login:not(.ulc-center) {
    justify-content: flex-start;
    padding-top: 10vh;
}

body.login.ulc-center #login {
    margin: 0 auto;
}

body.login.ulc-center #nav,
body.login.ulc-center #backtoblog {
    margin-top: 20px;
}

/* =========================================================
   🌈 Анимированный mesh-градиент позади формы
   ========================================================= */
body.login.ulc-bg-animated::before {
    content: "";
    position: fixed;
    inset: -40%;
    z-index: -3;
    background:
        radial-gradient(circle at 20% 20%, rgba(0,224,255,.65), transparent 32%),
        radial-gradient(circle at 80% 15%, rgba(255,46,147,.55), transparent 32%),
        radial-gradient(circle at 70% 80%, rgba(217,70,239,.55), transparent 36%),
        radial-gradient(circle at 15% 90%, rgba(124,58,237,.6), transparent 34%),
        radial-gradient(circle at 50% 50%, rgba(16,247,161,.35), transparent 42%);
    filter: blur(90px) saturate(150%);
    animation:
        ulcMeshFloat var(--ulc-bg-speed, 24s) ease-in-out infinite,
        ulcHueShift calc(var(--ulc-bg-speed, 24s) * 1.5) linear infinite;
    will-change: transform, filter;
    pointer-events: none;
}

body.login.ulc-bg-animated::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 50% 50%, transparent 0%, rgba(5,6,21, var(--ulc-bg-overlay, .35)) 100%);
    pointer-events: none;
}

/* Обычный (не анимированный) фон */
body.login:not(.ulc-bg-animated)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background: var(--ulc-bg, #050615);
    filter: blur(var(--ulc-bg-blur, 0)) brightness(var(--ulc-bg-brightness, 100%));
    transform: scale(1.1);
}

body.login:not(.ulc-bg-animated)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: rgba(5,6,21, var(--ulc-bg-overlay, 0.35));
    pointer-events: none;
}

@keyframes ulcMeshFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(5%, -4%) scale(1.15);
    }
    50% {
        transform: translate(-6%, 6%) scale(1.08);
    }
    75% {
        transform: translate(-5%, -5%) scale(1.12);
    }
}

@keyframes ulcHueShift {
    0%   { filter: blur(90px) saturate(150%) hue-rotate(0deg); }
    50%  { filter: blur(90px) saturate(165%) hue-rotate(25deg); }
    100% { filter: blur(90px) saturate(150%) hue-rotate(0deg); }
}

/* =========================================================
   Форма
   ========================================================= */
body.login #login {
    width: var(--ulc-form-width, 400px);
    max-width: 100%;
    padding: 0;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

body.login #loginform,
body.login #registerform,
body.login #lostpasswordform {
    margin-top: 0;
    padding: var(--ulc-form-padding, 40px);
    border-radius: var(--ulc-form-radius, 24px);
    background: var(--ulc-form-bg, rgba(14,16,38,.85));
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(0,224,255,.14);
    box-shadow:
        0 24px 60px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.06);
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

body.login #loginform::before,
body.login #registerform::before,
body.login #lostpasswordform::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0,224,255,.4), rgba(255,46,147,.25), rgba(217,70,239,.35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Логотип */
body.login #login h1 {
    margin-bottom: 24px;
}

body.login #login h1 a {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    transition: transform .3s ease;
}

body.login #login h1 a:hover { transform: scale(1.05); }

/* Поля */
body.login #loginform label,
body.login #registerform label,
body.login #lostpasswordform label {
    color: var(--ulc-text, #ecf0ff);
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
    width: 100%;
    padding: 12px 44px 12px 16px;
    border-radius: var(--ulc-field-radius, 14px);
    background: var(--ulc-field-bg, rgba(0,224,255,.06));
    color: var(--ulc-field-text, #ecf0ff);
    border: 1px solid var(--ulc-field-border, rgba(0,224,255,.18));
    font-size: .9rem;
    font-family: inherit;
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
    box-shadow: none;
    margin-bottom: 14px;
    box-sizing: border-box;
}

body.login input:focus {
    outline: none;
    border-color: #00e0ff;
    background: rgba(0,224,255,.1);
    box-shadow: 0 0 0 4px rgba(0,224,255,.15);
}

/* Чекбокс Remember me */
body.login .forgetmenot label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: var(--ulc-muted, #7c86b8);
}

body.login input[type="checkbox"] {
    accent-color: #00e0ff;
}

/* Кнопка */
body.login .submit input[type="submit"],
body.login #wp-submit {
    width: 100%;
    padding: 14px 24px;
    border-radius: var(--ulc-btn-radius, 14px);
    background: var(--ulc-btn-bg, linear-gradient(135deg, #00e0ff 0%, #7c3aed 100%));
    color: var(--ulc-btn-text, #050615);
    font-size: .95rem;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 10px 30px rgba(0,224,255,.35);
    text-shadow: none;
    height: auto;
    line-height: 1;
    font-family: inherit;
}

body.login #wp-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 44px rgba(0,224,255,.5);
    opacity: 1;
}

/* Ссылки */
body.login #nav,
body.login #backtoblog {
    text-align: center;
    margin-top: 16px;
    font-size: .8rem;
}

body.login #nav a,
body.login #backtoblog a {
    color: var(--ulc-links, #00e0ff);
    text-decoration: none;
    font-weight: 600;
    transition: color .2s ease;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
    color: var(--ulc-links-hover, #ff2e93);
    opacity: 1;
}

/* Уведомления */
body.login .message,
body.login #login_error {
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    margin-bottom: 16px;
    padding: 14px 18px;
    font-size: .85rem;
    color: #050615;
}

body.login .message {
    background: rgba(0,224,255,.85);
    border-left: 3px solid #00e0ff;
}

body.login #login_error {
    background: rgba(255,46,147,.85);
    color: #ffffff;
    border-left: 3px solid #ff2e93;
}

/* Toggle пароля */
.ulc-pw-toggle {
    z-index: 10;
}

/* Анимация появления формы */
body.login.ulc-animate #login {
    animation: ulcLoginIn .6s cubic-bezier(.4, 0, .2, 1);
}

@keyframes ulcLoginIn {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================
   Адаптив
   ========================================================= */
@media (max-width: 480px) {
    body.login { padding: 20px 16px; }
    body.login #loginform,
    body.login #registerform,
    body.login #lostpasswordform {
        padding: 28px 22px;
        border-radius: 20px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    body.login #login,
    body.login #loginform,
    body.login #login h1 a {
        animation: none !important;
        transition: none !important;
    }
    body.login.ulc-bg-animated::before {
        animation: none !important;
    }
}