/**
 * Vbox Auth — Login Page Styles
 * Layout split-screen moderno. Substitui completamente o CSS padrão do WP.
 *
 * @package VboxAuth
 * @since   1.0.0
 */

/* ── Variáveis ─────────────────────────────────────────────────────────────── */
:root {
    --vboxauth-primary: #6366f1;
    --vboxauth-primary-dark: color-mix(in srgb, var(--vboxauth-primary) 70%, #000);
    --vboxauth-primary-light: color-mix(in srgb, var(--vboxauth-primary) 60%, #fff);
    --vboxauth-primary-glow: color-mix(in srgb, var(--vboxauth-primary) 30%, transparent);

    --va-white: #ffffff;
    --va-gray-50: #f9fafb;
    --va-gray-100: #f3f4f6;
    --va-gray-200: #e5e7eb;
    --va-gray-300: #d1d5db;
    --va-gray-400: #9ca3af;
    --va-gray-500: #6b7280;
    --va-gray-700: #374151;
    --va-gray-900: #111827;
    --va-error: #ef4444;
    --va-error-bg: #fef2f2;
    --va-error-border: #fecaca;

    --va-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --va-radius: 12px;
    --va-shadow: 0 20px 60px rgba(0, 0, 0, .12);
    --va-transition: .2s ease;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
body.vboxauth-login {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--va-font);
    background: var(--va-white);
    overflow-x: hidden;
}

/* ── Painel Esquerdo ───────────────────────────────────────────────────────── */
.vboxauth-left-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(145deg,
            var(--vboxauth-primary-dark) 0%,
            var(--vboxauth-primary) 50%,
            var(--vboxauth-primary-light) 100%);
    animation: va-gradient-shift 10s ease-in-out infinite alternate;
}

@keyframes va-gradient-shift {
    0% {
        filter: hue-rotate(0deg) brightness(1);
    }

    100% {
        filter: hue-rotate(15deg) brightness(1.08);
    }
}

/* Padrão de pontos decorativos */
.vboxauth-left-decor {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .18) 1.5px, transparent 1.5px);
    background-size: 36px 36px;
    animation: va-dots-move 20s linear infinite;
}

@keyframes va-dots-move {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 36px 36px;
    }
}

/* Orbes de luz de fundo */
.vboxauth-left-panel::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    animation: va-orb1 12s ease-in-out infinite alternate;
}

.vboxauth-left-panel::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -60px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    animation: va-orb2 15s ease-in-out infinite alternate;
}

@keyframes va-orb1 {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(40px, 30px) scale(1.15);
    }
}

@keyframes va-orb2 {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-30px, -40px) scale(1.1);
    }
}

/* Conteúdo do painel esquerdo */
.vboxauth-left-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 2;
    padding: 40px;
    text-align: center;
}

.vboxauth-left-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.6);
    padding: 12px;
    backdrop-filter: blur(10px);
    animation: va-logo-float 4s ease-in-out infinite;
}

@keyframes va-logo-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.vboxauth-left-wordmark {
    font-size: 28px;
    font-weight: 800;
    color: rgba(255, 255, 255, .95);
    letter-spacing: -0.5px;
}

.vboxauth-left-tagline {
    font-size: 14px;
    color: rgba(255, 255, 255, .65);
    letter-spacing: 0.5px;
}

/* ── Painel Direito (#login do WP) ─────────────────────────────────────────── */
body.vboxauth-login #login {
    position: relative;
    z-index: 10;
    margin-left: 50%;
    width: 50% !important;
    max-width: none !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 40px;
    background: var(--va-white);
    animation: va-panel-in .5s ease;
}

@keyframes va-panel-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Logo / h1 ─────────────────────────────────────────────────────────────── */
body.vboxauth-login h1 {
    width: 100%;
    max-width: 360px;
    margin: 0 0 32px;
    text-align: center;
}

body.vboxauth-login h1 a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
    color: var(--va-gray-900);
    background: none;
    background-image: none;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 auto;
}

body.vboxauth-login.has-custom-logo h1 a {
    display: block !important;
    width: 280px !important;
    max-width: 100% !important;
    height: 80px !important;
    margin: 0 auto !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

/* Subtítulo acima do form removido a pedido */

/* Ocultar elementos nativos conflitantes */
body.vboxauth-login .wp-hide-pw,
body.vboxauth-login .caps-icon,
body.vboxauth-login #caps-lock-warning,
body.vboxauth-login .pw-weak,
body.vboxauth-login .wp-tooltip,
body.vboxauth-login .wp-is-toggletip {
    display: none !important;
}

/* ── Formulário ────────────────────────────────────────────────────────────── */
body.vboxauth-login form {
    width: 100%;
    max-width: 360px;
}

body.vboxauth-login form p {
    margin: 0 0 20px;
}

body.vboxauth-login label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--va-gray-700);
    margin-bottom: 6px;
}

/* Campos de texto */
body.vboxauth-login input[type="text"],
body.vboxauth-login input[type="password"],
body.vboxauth-login input[type="email"] {
    width: 100% !important;
    padding: 12px 16px 12px 44px !important;
    border: 2px solid var(--va-gray-200) !important;
    border-radius: var(--va-radius) !important;
    font-size: 15px !important;
    font-family: var(--va-font) !important;
    color: var(--va-gray-900) !important;
    background: var(--va-gray-50) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color var(--va-transition), background var(--va-transition), box-shadow var(--va-transition) !important;
    appearance: none !important;
}

body.vboxauth-login input[type="text"]:focus,
body.vboxauth-login input[type="password"]:focus,
body.vboxauth-login input[type="email"]:focus {
    border-color: var(--vboxauth-primary) !important;
    background: var(--va-white) !important;
    box-shadow: 0 0 0 4px var(--vboxauth-primary-glow) !important;
}

/* Ícones FA nos campos — injetados via JS */
.vboxauth-field-wrap {
    position: relative;
}

.vboxauth-field-wrap .vboxauth-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--va-gray-400);
    font-size: 15px;
    pointer-events: none;
    z-index: 1;
}

.vboxauth-field-wrap .vboxauth-pass-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--va-gray-400);
    font-size: 15px;
    padding: 0;
    z-index: 1;
    transition: color var(--va-transition);
}

.vboxauth-field-wrap .vboxauth-pass-toggle:hover {
    color: var(--vboxauth-primary);
}

/* Remember me */
body.vboxauth-login .forgetmenot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0 24px 0 !important;
}

body.vboxauth-login .forgetmenot label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--va-gray-500);
    user-select: none;
}

body.vboxauth-login input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    border: 2px solid var(--va-gray-300) !important;
    border-radius: 4px !important;
    appearance: none !important;
    cursor: pointer !important;
    background: var(--va-white) !important;
    transition: all var(--va-transition) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

body.vboxauth-login input[type="checkbox"]:checked {
    background: var(--vboxauth-primary) !important;
    border-color: var(--vboxauth-primary) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20,6 9,17 4,12'/%3E%3C/svg%3E") !important;
    background-size: 12px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ── Botão Submit ───────────────────────────────────────────────────────────── */
body.vboxauth-login .submit {
    margin: 0 !important;
}

body.vboxauth-login #wp-submit {
    width: 100% !important;
    padding: 13px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: var(--va-font) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--va-radius) !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, var(--vboxauth-primary-dark), var(--vboxauth-primary), var(--vboxauth-primary-light)) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    transition: background-position .4s ease, transform .15s ease, box-shadow .2s ease !important;
    box-shadow: 0 4px 20px var(--vboxauth-primary-glow) !important;
    height: auto !important;
    letter-spacing: 0.2px !important;
}

body.vboxauth-login #wp-submit:hover {
    background-position: 100% 0% !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 28px var(--vboxauth-primary-glow) !important;
}

body.vboxauth-login #wp-submit:active {
    transform: translateY(0) !important;
}

/* ── Navegação (links) ──────────────────────────────────────────────────────── */
body.vboxauth-login #nav,
body.vboxauth-login #backtoblog,
body.vboxauth-login .privacy-policy-page-link {
    width: 100%;
    max-width: 360px;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    display: block;
}

body.vboxauth-login #nav {
    margin-top: 24px;
}

body.vboxauth-login #nav a,
body.vboxauth-login #backtoblog a {
    color: var(--va-gray-500);
    font-size: 13px;
    text-decoration: none;
    transition: color var(--va-transition);
}

body.vboxauth-login #nav a:hover,
body.vboxauth-login #backtoblog a:hover {
    color: var(--vboxauth-primary);
}

/* ── Política de Privacidade: mesmo layout do "Perdeu a senha?" ────────────── */
/* O WordPress renderiza: <div class="privacy-policy-page-link">
                            <p class="privacy-policy-link"><a>...</a></p>
                        </div>
*/
body.vboxauth-login .privacy-policy-page-link {
    margin-top: 16px;   /* ← espaço entre "Perdeu a senha?" e a Política */
    margin-bottom: 8px;
    line-height: 1.6;
    font-family: var(--va-font);
}

body.vboxauth-login .privacy-policy-page-link p.privacy-policy-link {
    margin: 0;
    padding: 0;
    font-family: var(--va-font);
    color: var(--va-gray-500);
    font-size: 13px;
}

body.vboxauth-login .privacy-policy-page-link p.privacy-policy-link a,
body.vboxauth-login .privacy-policy-page-link a.privacy-policy-link {
    color: var(--va-gray-500);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--va-transition);
    border-bottom: 1px dotted var(--va-gray-300);
    padding-bottom: 1px;
    font-family: var(--va-font);
}

body.vboxauth-login .privacy-policy-page-link p.privacy-policy-link a:hover,
body.vboxauth-login .privacy-policy-page-link a.privacy-policy-link:hover {
    color: var(--vboxauth-primary);
    border-bottom-color: var(--vboxauth-primary);
}

/* Fallback: se o WP renderizar via filter the_privacy_policy_link (sem wrapper) */
body.vboxauth-login .login .privacy-policy-link-wrapper,
body.vboxauth-login .privacy-policy-wrapper {
    width: 100%;
    max-width: 360px;
    margin: 16px auto 0;
    text-align: center;
}

body.vboxauth-login .privacy-policy-wrapper a,
body.vboxauth-login .privacy-policy-link-wrapper a {
    color: var(--va-gray-500);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--va-transition);
    border-bottom: 1px dotted var(--va-gray-300);
    padding-bottom: 1px;
}

body.vboxauth-login .privacy-policy-wrapper a:hover,
body.vboxauth-login .privacy-policy-link-wrapper a:hover {
    color: var(--vboxauth-primary);
    border-bottom-color: var(--vboxauth-primary);
}

/* ── Tela de confirmação de e-mail admin (admin_email_confirm) ─────────────── */
/* Evita sobreposição e z-index errado no split-screen layout */
body.vboxauth-login.login-action-confirmaction,
body.vboxauth-login.login-action-login_admin_notices {
    min-height: 100vh;
    overflow-y: auto;
}

body.vboxauth-login .admin-email-confirm,
body.vboxauth-login .confirm-admin-email,
body.vboxauth-login #login .admin-email__wrapper {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 24px;
    padding: 0;
    display: block;
    box-sizing: border-box;
}

/* Garante que #nav e .privacy-policy-link fiquem ABAIXO do aviso em telas de admin notice */
body.vboxauth-login.login-action-confirmaction #login,
body.vboxauth-login.login-action-login_admin_notices #login {
    padding-top: 32px;
    padding-bottom: 40px;
}

/* Quando o WP injeta o modal em fixed/absolute (WP 6.4+), ajusta para não ficar no meio */
body.vboxauth-login .wp-admin-email__overlay,
body.vboxauth-login .admin-email__backdrop {
    position: fixed !important;
    inset: 0;
    z-index: 9999 !important;
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(4px);
}

body.vboxauth-login .wp-admin-email__modal,
body.vboxauth-login .admin-email__modal {
    position: relative !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    max-width: 440px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    background: var(--va-white) !important;
    border-radius: var(--va-radius) !important;
    box-shadow: var(--va-shadow) !important;
    padding: 32px 28px !important;
    margin: 0 !important;
}

body.vboxauth-login .wp-admin-email__modal h2,
body.vboxauth-login .admin-email__modal h3 {
    font-family: var(--va-font) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--va-gray-900) !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: none !important;
}

body.vboxauth-login .wp-admin-email__modal p,
body.vboxauth-login .admin-email__modal p {
    font-family: var(--va-font) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--va-gray-700) !important;
    margin: 0 0 16px !important;
}

body.vboxauth-login .wp-admin-email__modal button,
body.vboxauth-login .admin-email__modal input[type="submit"],
body.vboxauth-login .admin-email__modal .button,
body.vboxauth-login .wp-admin-email__modal .button {
    font-family: var(--va-font) !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

body.vboxauth-login .wp-admin-email__modal .button-primary,
body.vboxauth-login .admin-email__modal .button-primary {
    background: linear-gradient(135deg, var(--vboxauth-primary-dark), var(--vboxauth-primary)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px var(--vboxauth-primary-glow) !important;
}

body.vboxauth-login .wp-admin-email__modal .dismiss,
body.vboxauth-login .admin-email__modal .dismiss {
    background: var(--va-gray-100) !important;
    color: var(--va-gray-600) !important;
    border: 1px solid var(--va-gray-200) !important;
}

/* Layout mobile: admin email modal não fica cortado */
@media (max-width: 767px) {
    body.vboxauth-login .wp-admin-email__modal,
    body.vboxauth-login .admin-email__modal {
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 auto !important;
    }
}

/* ── Mensagens de erro / sucesso — Alertas Estilizados ─────────────────── */
body.vboxauth-login #login_error,
body.vboxauth-login .message,
body.vboxauth-login .error,
body.vboxauth-login .success {
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
    border-radius: var(--va-radius) !important;
    border: none !important;
    margin: 0 0 20px !important;
    padding: 14px 16px 14px 46px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-family: var(--va-font) !important;
    position: relative;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06) !important;
}

/* Ícone do alerta via pseudo-elemento */
body.vboxauth-login #login_error::before,
body.vboxauth-login .message::before,
body.vboxauth-login .error::before,
body.vboxauth-login .success::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 16px;
    position: absolute;
    left: 16px;
    top: 15px;
    line-height: 1;
}

/* Erro */
body.vboxauth-login #login_error,
body.vboxauth-login .error {
    background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%) !important;
    border: 1px solid var(--va-error-border) !important;
    color: #991b1b !important;
    animation: va-shake .4s ease;
}

body.vboxauth-login #login_error::before,
body.vboxauth-login .error::before {
    content: '\f071';
    color: var(--va-error);
}

/* Sucesso / Info */
body.vboxauth-login .message,
body.vboxauth-login .success {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf9 100%) !important;
    border: 1px solid #a7f3d0 !important;
    color: #065f46 !important;
}

body.vboxauth-login .message::before,
body.vboxauth-login .success::before {
    content: '\f058';
    color: #10b981;
}

/* Links dentro das mensagens */
body.vboxauth-login #login_error a,
body.vboxauth-login .error a {
    color: #991b1b !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(153, 27, 27, .3);
    transition: text-decoration-color var(--va-transition);
}

body.vboxauth-login #login_error a:hover,
body.vboxauth-login .error a:hover {
    text-decoration-color: #991b1b;
}

body.vboxauth-login .message a,
body.vboxauth-login .success a {
    color: #065f46 !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(6, 95, 70, .3);
    transition: text-decoration-color var(--va-transition);
}

body.vboxauth-login .message a:hover,
body.vboxauth-login .success a:hover {
    text-decoration-color: #065f46;
}

/* Strong dentro das mensagens */
body.vboxauth-login #login_error strong,
body.vboxauth-login .error strong {
    font-weight: 700;
    color: #7f1d1d;
}

@keyframes va-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Remove o seletor de idioma (reforço CSS) */
body.vboxauth-login #language-switcher,
body.vboxauth-login .language-switcher {
    display: none !important;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .vboxauth-left-panel {
        display: none;
    }

    body.vboxauth-login {
        background: linear-gradient(145deg,
                var(--vboxauth-primary-dark) 0%,
                var(--vboxauth-primary) 50%,
                var(--vboxauth-primary-light) 100%);
        min-height: 100vh;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 40px 20px;
    }

    body.vboxauth-login #login {
        margin-left: 0;
        width: 100% !important;
        min-height: auto;
        padding: 40px 28px;
        background: var(--va-white);
        border-radius: 20px;
        box-shadow: 0 25px 60px rgba(0, 0, 0, .2);
        max-width: 400px;
    }

    body.vboxauth-login #login::before,
    body.vboxauth-login #login::after {
        display: none;
    }

    body.vboxauth-login h1 {
        margin-bottom: 20px;
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .vboxauth-left-panel {
        width: 40%;
    }

    body.vboxauth-login #login {
        margin-left: 40%;
        width: 60% !important;
    }
}

/* ── Avatares Grid ───────────────────────────────────────────────────────────── */
.vboxauth-avatars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}