/* ==========================================================================
   H2 MINERAIS GROUP - LOGIN CUSTOMIZADO (DARK THEME)
   ========================================================================== */

/* 1. FUNDO DA PÁGINA COM GRADIENTE */
body.login {
    background-image: linear-gradient(90deg, #123332 0%, #1C4241 100%) !important;
    background-color: #123332 !important; /* Cor de segurança */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. LOGO DA H2 MINERAIS DOURADA */
#login h1 a {
    display: block !important;
    background-image: url('https://h2minerais.com.br/wp-content/uploads/h2mineraisgrouplogo_dourado.svg') !important;
    background-size: contain !important;
    background-position: center !important;
    width: 80% !important;
    height: 60px !important; /* Altura da logo */
    margin-bottom: 20px !important;
}

/* 3. OCULTAR ITENS DESNECESSÁRIOS (Perdeu a senha, Voltar pro site, Idioma) */
#login .message,
#login #nav,
#login #backtoblog,
.language-switcher {
    display: none !important;
}

/* 4. CAIXA DO FORMULÁRIO (Igual ao "Minha Conta") */
#loginform {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    padding: 30px !important;
    margin-top: 0 !important;
}

/* 5. OCULTAR LABELS DOS CAMPOS DE TEXTO E ESTILIZAR PLACEHOLDER */
#loginform label[for="user_login"],
#loginform label[for="user_pass"] {
    display: none !important; /* Esconde os textos originais de cima das caixas */
}

/* Formatação do texto do Placeholder (dentro da caixa) */
#loginform input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important; /* branco */
    font-family: 'Quattrocento', sans-serif !important;
	font-size: 17px;
}

/* Oculta margens vazias que sobram ao esconder os labels */
#loginform p {
    margin-bottom: 0 !important;
}

/* 6. CAMPOS DE PREENCHIMENTO (Inputs Dark) */
#loginform input[type="text"],
#loginform input[type="password"] {
    width: 100% !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #C5AA8C !important; /* dourado */
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
    font-family: 'Quattrocento', sans-serif !important;
	font-size:18px;
    box-shadow: none !important;
	padding: 0px 10px;
}

#loginform input:focus {
    border-color: #C5AA8C !important; /* dourado */
    outline: none !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 0 1px #ef9c82 !important;
}

/* Ajuste do botão do olhinho (ver senha) */
#loginform .wp-hide-pw {
    color: #C5AA8C !important; /* dourado */
}

/* 7. BOTÃO DE ACESSO (DOURADO) */
#loginform input[type="submit"],
#wp-submit {
    background-color: #C5AA8C !important; /* dourado */
    color: #FFF !important; 
    font-weight: bold !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: 'Quattrocento', sans-serif !important;
    width: 100% !important; /* Ocupa 100% da largura */
    font-size: 16px !important;
    text-shadow: none !important;
    box-shadow: none !important;
    margin-top: 20px !important; /* Dá um respiro entre o "lembrar-me" e o botão */
    float: none !important; /* Remove o alinhamento à direita padrão do WP */
    display: block !important;
}

#loginform input[type="submit"]:hover,
#wp-submit:hover {
    background-color: #ffffff !important;
    color: #123332 !important;
}

/* 8. CHECKBOX "LEMBRAR-ME" (CUSTOMIZADO E ALINHADO) */
#loginform .forgetmenot {
    margin-top: -5px !important;
    margin-bottom: 20px !important;
    display: flex !important; /* Coloca os itens lado a lado */
    align-items: center !important; /* Centraliza verticalmente */
    gap: 8px !important; /* Espaço exato entre a caixinha e o texto */
}

#loginform .forgetmenot label {
    color: rgba(255, 255, 255, 0.7) !important; /* Texto branco 70% */
    font-weight: normal !important;
    margin: 0 !important; /* Remove margens que empurram o texto */
    padding: 0 !important;
}

/* A caixinha do Checkbox (Fundo vazio e borda 50% branca) */
#loginform input[type="checkbox"] {
    -webkit-appearance: none !important; /* Tira o estilo padrão do navegador/WP */
    appearance: none !important;
    background: transparent !important; /* Fundo transparente */
    border: 1px solid rgba(255, 255, 255, 0.5) !important; /* Borda branca 50% */
    border-radius: 3px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    position: relative !important;
    margin: 0 !important;
}

/* O que acontece quando clica/foca (Sombra dourada) */
#loginform input[type="checkbox"]:focus {
    border-color: #C5AA8C !important;
    box-shadow: 0 0 0 1px rgba(197, 170, 140, 0.5) !important; 
    outline: none !important;
}

/* Garante que o fundo azul do WP não apareça quando marcado */
#loginform input[type="checkbox"]:checked {
    background-color: transparent !important;
}

/* O ícone de Check dourado desenhado via SVG */
#loginform input[type="checkbox"]:checked::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 14px !important;
    height: 14px !important;
    /* Ícone em formato numérico (SVG) garantindo a cor #C5AA8C */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23C5AA8C'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin: 0 !important;
    display: block !important;
}