/* ==========================================================================
   BLS UI 2.0 - Design System (Login Interface Premium)
   ========================================================================== */

:root {
    --bls-primary: #0d6efd;
    --bls-primary-hover: #0b5ed7;
    --bls-primary-focus: rgba(13, 110, 253, 0.15);
    --bls-bg-body: #f1f5f9;
    --bls-bg-card: #ffffff;
    --bls-bg-input: #f8fafc;
    --bls-text-main: #0f172a;
    --bls-text-muted: #64748b;
    --bls-border: #e2e8f0;
    --bls-border-hover: #cbd5e1;
    --bls-radius-card: 14px;
    --bls-radius-input: 10px;
    --bls-radius-btn: 10px;
    --bls-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --bls-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
    --bls-shadow-btn: 0 4px 6px -1px rgba(13, 110, 253, 0.2), 0 2px 4px -2px rgba(13, 110, 253, 0.1);
    --bls-shadow-btn-hover: 0 10px 15px -3px rgba(13, 110, 253, 0.3), 0 4px 6px -4px rgba(13, 110, 253, 0.15);
}

body.login,
body.tml {
    background-color: var(--bls-bg-body);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--bls-text-main);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

#login,
.tml-login,
.bls-login-container {
    width: 100%;
    max-width: 440px;
    padding: 48px 40px;
    margin: 20px auto;
    background: var(--bls-bg-card);
    border: 1px solid var(--bls-border);
    border-radius: var(--bls-radius-card);
    box-shadow: var(--bls-shadow);
    box-sizing: border-box;
}

/* Formulário & Groups */
.tml-login form,
#loginform {
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}

.tml-field-wrap,
.login-username,
.login-password,
.bls-form-group {
    margin-bottom: 22px;
    position: relative;
}

.tml-label,
label[for="user_login"],
label[for="user_pass"] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bls-text-main);
    margin-bottom: 8px;
}

/* Input Wrappers & Inputs */
.bls-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.bls-input-wrapper input[type="text"],
.bls-input-wrapper input[type="password"],
.tml-login input[type="text"],
.tml-login input[type="password"],
#loginform input[type="text"],
#loginform input[type="password"] {
    width: 100% !important;
    height: 52px !important;
    padding: 0 44px 0 44px !important;
    font-size: 15px !important;
    color: var(--bls-text-main) !important;
    background-color: var(--bls-bg-input) !important;
    border: 1px solid var(--bls-border) !important;
    border-radius: var(--bls-radius-input) !important;
    outline: none !important;
    transition: var(--bls-transition) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.bls-input-wrapper input:hover,
.tml-login input[type="text"]:hover,
.tml-login input[type="password"]:hover {
    border-color: var(--bls-border-hover) !important;
    background-color: #ffffff !important;
}

.bls-input-wrapper input:focus,
.tml-login input[type="text"]:focus,
.tml-login input[type="password"]:focus {
    border-color: var(--bls-primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px var(--bls-primary-focus) !important;
}

/* Ícones */
.bls-input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--bls-text-muted);
    pointer-events: none;
    z-index: 2;
}

.bls-input-icon-left {
    left: 14px;
}

/* Botão Olho */
.bls-toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--bls-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: var(--bls-transition);
    z-index: 3;
}

.bls-toggle-password:hover {
    color: var(--bls-text-main);
}

.bls-toggle-password svg,
.bls-input-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Checkbox Lembrar-me */
.forgetmenot,
.tml-rememberme-wrap,
.bls-remember-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 26px;
}

.forgetmenot input[type="checkbox"],
.tml-rememberme-wrap input[type="checkbox"],
.bls-remember-wrap input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--bls-border);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    margin: 0 10px 0 0;
    position: relative;
    transition: var(--bls-transition);
    background-color: var(--bls-bg-input);
}

.forgetmenot input[type="checkbox"]:checked,
.tml-rememberme-wrap input[type="checkbox"]:checked,
.bls-remember-wrap input[type="checkbox"]:checked {
    background-color: var(--bls-primary);
    border-color: var(--bls-primary);
}

.forgetmenot input[type="checkbox"]:checked::after,
.tml-rememberme-wrap input[type="checkbox"]:checked::after,
.bls-remember-wrap input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.forgetmenot label,
.tml-rememberme-wrap label,
.bls-remember-wrap label {
    font-size: 14px;
    color: var(--bls-text-main);
    cursor: pointer;
    user-select: none;
    margin: 0;
}

/* Botão de Ação */
.tml-submit-wrap input[type="submit"],
#wp-submit,
.bls-btn-primary {
    width: 100% !important;
    height: 52px !important;
    background-color: var(--bls-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--bls-radius-btn) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: var(--bls-transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--bls-shadow-btn) !important;
    text-shadow: none !important;
}

.tml-submit-wrap input[type="submit"]:hover,
#wp-submit:hover,
.bls-btn-primary:hover {
    background-color: var(--bls-primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--bls-shadow-btn-hover) !important;
}

.tml-submit-wrap input[type="submit"]:active,
#wp-submit:active,
.bls-btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: var(--bls-shadow-btn) !important;
}

.tml-submit-wrap input[type="submit"]:focus,
#wp-submit:focus,
.bls-btn-primary:focus {
    box-shadow: 0 0 0 4px var(--bls-primary-focus) !important;
}

/* Links adicionais */
.tml-links,
.bls-login-links {
    margin-top: 26px;
    text-align: center;
}

.tml-links a,
.bls-login-links a {
    font-size: 14px;
    color: var(--bls-primary);
    text-decoration: none;
    transition: var(--bls-transition);
    font-weight: 500;
}

.tml-links a:hover,
.bls-login-links a:hover {
    text-decoration: underline;
    color: var(--bls-primary-hover);
}