/* =====================================================
   Telas de acesso (login e cadastro) · Figma 988:916 e 988:1643
   v1.2.0: cabeçalho azul fixo e cadastro passo a passo com barra (23/09)
   Carrega só em Minha conta, depois do woocommerce.css
   (que tem !important nos inputs e botões do login).
   ===================================================== */

.ef-acesso-tela {
    max-width: 634px;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
}

/* Topo: rótulo, título e texto */
.ef-acesso-topo {
    text-align: center;
    margin-bottom: 40px;
}

.ef-acesso-rotulo {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #adadad;
}

.ef-acesso-titulo {
    margin: 0 0 12px;
    font-family: 'Inter', sans-serif;
    font-size: 38px;
    font-weight: 500;
    line-height: 1.29;
    color: #000;
}

.ef-acesso-texto {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #a2a2a2;
}

/* Cartão */
.ef-acesso-cartao {
    background: #f7f7f7;
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    padding: 40px 30px;
}

.ef-acesso-tela form.login,
.ef-acesso-tela form.register {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.ef-acesso-tela .form-row {
    margin: 0 0 16px;
    padding: 0;
}

.ef-acesso-tela .form-row label {
    display: block;
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    color: #000;
}

/* Campos */
.ef-acesso-tela .woocommerce-form-row input.input-text {
    height: 54px !important;
    padding: 0 15px !important;
    border: 1px solid #d3d3d3 !important;
    border-radius: 15px !important;
    background: transparent;
    font-size: 14px !important;
    color: #000 !important;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

.ef-acesso-tela input.input-text::placeholder {
    color: #959595;
    opacity: 1;
}

.ef-acesso-tela .woocommerce-form-row input.input-text:focus {
    outline: none;
    border-color: #008eff !important;
    box-shadow: 0 0 0 3px rgba(0, 142, 255, .15);
}

/* Olho de mostrar senha (botão que o woocommerce.js cria). `.ef-form` é o Detalhes da conta, logado */
.ef-acesso-tela .password-input,
.ef-form .password-input {
    position: relative;
    display: block;
}

.ef-acesso-tela .woocommerce-form-row .password-input input.input-text,
.ef-form .woocommerce-form-row .password-input input.input-text {
    padding-right: 50px !important;
}

/* `form` no seletor empata com o `.woocommerce form .show-password-input` do Woo, que zera o fundo */
.ef-acesso-tela form .show-password-input,
.ef-acesso-tela form .show-password-input:hover,
.ef-acesso-tela form .show-password-input:focus,
form.ef-form .show-password-input,
form.ef-form .show-password-input:hover,
form.ef-form .show-password-input:focus {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: #9a9a9a;
    cursor: pointer;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M247.31 124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57 61.26 162.88 48 128 48S61.43 61.26 36.34 86.35C17.51 105.18 9 124 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208s66.57-13.26 91.66-38.34c18.83-18.83 27.3-37.61 27.65-38.4a8 8 0 0 0 0-6.5M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.5 133.5 0 0 1 25 128a133.3 133.3 0 0 1 23.07-30.75C70.33 75.19 97.22 64 128 64s57.67 11.19 79.93 33.25A133.5 133.5 0 0 1 231.05 128c-7.21 13.46-38.62 64-103.05 64m0-112a48 48 0 1 0 48 48a48.05 48.05 0 0 0-48-48m0 80a32 32 0 1 1 32-32a32 32 0 0 1-32 32'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M247.31 124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57 61.26 162.88 48 128 48S61.43 61.26 36.34 86.35C17.51 105.18 9 124 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208s66.57-13.26 91.66-38.34c18.83-18.83 27.3-37.61 27.65-38.4a8 8 0 0 0 0-6.5M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.5 133.5 0 0 1 25 128a133.3 133.3 0 0 1 23.07-30.75C70.33 75.19 97.22 64 128 64s57.67 11.19 79.93 33.25A133.5 133.5 0 0 1 231.05 128c-7.21 13.46-38.62 64-103.05 64m0-112a48 48 0 1 0 48 48a48.05 48.05 0 0 0-48-48m0 80a32 32 0 1 1 32-32a32 32 0 0 1-32 32'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ef-acesso-tela form .show-password-input:hover,
form.ef-form .show-password-input:hover {
    background-color: #4b4b4b;
}

.ef-acesso-tela .show-password-input:focus-visible,
.ef-form .show-password-input:focus-visible {
    outline: 2px solid #008eff;
    outline-offset: 3px;
}

.ef-acesso-tela .show-password-input::before,
.ef-acesso-tela .show-password-input::after,
.ef-form .show-password-input::before,
.ef-form .show-password-input::after {
    content: none !important;
    display: none !important;
}

.ef-acesso-tela .show-password-input.display-password,
.ef-form .show-password-input.display-password {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M53.92 34.62a8 8 0 1 0-11.84 10.76l19.24 21.17C25 88.84 9.38 123.2 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208a127.1 127.1 0 0 0 52.07-10.83l22 24.21a8 8 0 1 0 11.84-10.76Zm47.33 75.84l41.67 45.85a32 32 0 0 1-41.67-45.85M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.2 133.2 0 0 1 25 128c4.69-8.79 19.66-33.39 47.35-49.38l18 19.75a48 48 0 0 0 63.66 70l14.73 16.2A112 112 0 0 1 128 192m6-95.43a8 8 0 0 1 3-15.72a48.16 48.16 0 0 1 38.77 42.64a8 8 0 0 1-7.22 8.71a6 6 0 0 1-.75 0a8 8 0 0 1-8-7.26A32.09 32.09 0 0 0 134 96.57m113.28 34.69c-.42.94-10.55 23.37-33.36 43.8a8 8 0 1 1-10.67-11.92a132.8 132.8 0 0 0 27.8-35.14a133.2 133.2 0 0 0-23.12-30.77C185.67 75.19 158.78 64 128 64a118.4 118.4 0 0 0-19.36 1.57A8 8 0 1 1 106 49.79A134 134 0 0 1 128 48c34.88 0 66.57 13.26 91.66 38.35c18.83 18.83 27.3 37.62 27.65 38.41a8 8 0 0 1 0 6.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M53.92 34.62a8 8 0 1 0-11.84 10.76l19.24 21.17C25 88.84 9.38 123.2 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208a127.1 127.1 0 0 0 52.07-10.83l22 24.21a8 8 0 1 0 11.84-10.76Zm47.33 75.84l41.67 45.85a32 32 0 0 1-41.67-45.85M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.2 133.2 0 0 1 25 128c4.69-8.79 19.66-33.39 47.35-49.38l18 19.75a48 48 0 0 0 63.66 70l14.73 16.2A112 112 0 0 1 128 192m6-95.43a8 8 0 0 1 3-15.72a48.16 48.16 0 0 1 38.77 42.64a8 8 0 0 1-7.22 8.71a6 6 0 0 1-.75 0a8 8 0 0 1-8-7.26A32.09 32.09 0 0 0 134 96.57m113.28 34.69c-.42.94-10.55 23.37-33.36 43.8a8 8 0 1 1-10.67-11.92a132.8 132.8 0 0 0 27.8-35.14a133.2 133.2 0 0 0-23.12-30.77C185.67 75.19 158.78 64 128 64a118.4 118.4 0 0 0-19.36 1.57A8 8 0 1 1 106 49.79A134 134 0 0 1 128 48c34.88 0 66.57 13.26 91.66 38.35c18.83 18.83 27.3 37.62 27.65 38.41a8 8 0 0 1 0 6.5Z'/%3E%3C/svg%3E");
}

/* Lembrar acesso + Esqueci minha senha */
.ef-acesso-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 24px;
}

.ef-acesso-tela .woocommerce-form-login__rememberme,
.ef-acesso-tela .ef-acesso-linha label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: #4b4b4b;
    cursor: pointer;
}

.ef-acesso-tela input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #008eff;
}

.ef-acesso-link {
    font-size: 14px;
    font-weight: 600;
    color: #008eff;
    text-decoration: none;
}

.ef-acesso-link:hover,
.ef-acesso-link:focus-visible {
    text-decoration: underline;
    color: #008eff;
}

/* Regras de senha e aviso do cadastro */
.ef-acesso-regras {
    margin: -6px 0 20px;
    padding: 0 0 0 18px;
    font-size: 12px;
    line-height: 1.6;
    color: #959595;
}

.ef-acesso-aviso {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #4b4b4b;
}

/* Botão principal */
.ef-acesso-tela .ef-acesso-enviar {
    margin: 0;
}

.ef-acesso-tela .ef-acesso-enviar .button {
    display: block;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 24px !important;
    border-radius: 55px !important;
    background-color: #008eff !important;
    font-size: 14px;
    font-weight: 700 !important;
    letter-spacing: .03em;
    line-height: 50px;
    text-align: center;
    transition: background-color .15s;
}

.ef-acesso-tela .ef-acesso-enviar .button:hover,
.ef-acesso-tela .ef-acesso-enviar .button:focus-visible {
    background-color: #0078d9 !important;
}

/* Rodapé do cartão: Criar agora / Entrar */
.ef-acesso-rodape {
    max-width: 474px;
    margin: 34px auto 0;
    padding-top: 16px;
    border-top: 1px solid #e6e6e6;
    text-align: center;
    font-size: 14px;
    color: #4b4b4b;
}

.ef-acesso-rodape a {
    font-weight: 700;
    color: #000;
    text-decoration: none;
}

.ef-acesso-rodape a:hover,
.ef-acesso-rodape a:focus-visible {
    color: #008eff;
}

/* Avisos do Woo dentro da tela */
.ef-acesso-tela .woocommerce-error,
.ef-acesso-tela .woocommerce-message,
.ef-acesso-tela .woocommerce-info {
    margin: 0 0 20px;
    border-radius: 15px;
    font-size: 14px;
}

/* Aceites do cadastro: Termos e Privacidade em caixas separadas */
.ef-acesso-aceites {
    display: grid;
    gap: 10px;
    margin: 4px 0 24px;
}

.ef-acesso-tela .ef-acesso-aceite {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #4b4b4b;
    cursor: pointer;
}

.ef-acesso-aceite input[type="checkbox"] {
    flex: none;
    margin-top: 3px;
}

.ef-acesso-aceite a {
    font-weight: 600;
    color: #008eff;
    text-decoration: none;
}

.ef-acesso-aceite a:hover,
.ef-acesso-aceite a:focus-visible {
    text-decoration: underline;
}

/* Complete seus dados: PF ou PJ troca os campos sem JS */
.ef-dados-tipo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

.ef-dados-tipo legend {
    margin-bottom: 10px;
    padding: 0;
    font-size: 15px;
    font-weight: 500;
    color: #000;
}

.ef-acesso-tela .ef-dados-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #000;
    cursor: pointer;
    transition: border-color .1s;
}

.ef-dados-opcao input {
    margin: 0;
    accent-color: #008eff;
}

.ef-dados-opcao:has(input:checked) {
    border-color: #008eff;
    box-shadow: inset 0 0 0 1px #008eff;
}

.ef-dados:has(#ef_tipo_pf:checked) .ef-dados-pj,
.ef-dados:has(#ef_tipo_pj:checked) .ef-dados-pf {
    display: none;
}

.ef-dados-opcional {
    font-weight: 400;
    color: #959595;
}

.ef-acesso-tela .ef-acesso-enviar a.button {
    color: #fff;
    text-decoration: none;
}

/* Cabeçalho reduzido e sem rodapé, como no Figma */
body.ef-acesso .elementor-location-header .elementor-element-5b04084,
body.ef-acesso .elementor-location-header .elementor-element-17b5d67,
body.ef-acesso .elementor-location-header .elementor-element-641ffc4,
body.ef-acesso .elementor-location-header .elementor-element-e1fc642,
body.ef-acesso .elementor-location-footer {
    display: none !important;
}

body.ef-acesso .elementor-location-header .ef-voltar-inicio {
    display: block;
}

/* Faixa do logo branca, emendando com o fundo da tela (pedido do Nico 29/09).
   O cinza #F7F7F7 vem do container 6690c99 no template 276. */
body.ef-acesso .elementor-location-header .elementor-element-6690c99 {
    background-color: #fff !important;
}

/* Nas telas de acesso a barra azul também fica presa (pedido do Nico 23/09).
   O global.css solta os 38px dela com top negativo; aqui o topo é zero.
   No celular o cabeçalho tem 285px e não fica preso, como no resto do site. */
body.ef-acesso header.elementor-location-header {
    position: relative; /* a barra de progresso se ancora no pé dele */
}

@media (min-width: 768px) {
    body.ef-acesso header.elementor-location-header {
        position: sticky;
        top: 0;
    }
}

/* Barra de progresso do cadastro: o JS pendura no pé do cabeçalho */
.ef-progresso {
    height: 4px;
    margin: 0 0 32px;
    background: #e6e6e6;
    border-radius: 4px;
    overflow: hidden;
}

.ef-progresso.ef-progresso-no-topo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    border-radius: 0;
}

.ef-progresso span {
    display: block;
    height: 100%;
    background: #008eff;
    transition: width .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ef-progresso span {
        transition: none;
    }
}

/* Complete seus dados, uma pergunta por tela (só com JS) */
.ef-dados-passos .ef-passo[hidden] {
    display: none;
}

.ef-dados-passos .ef-dados-tipo {
    margin-bottom: 0;
}

.ef-dados-passos .ef-dados-tipo legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* A escolha de tipo não tem o respiro de 24px que o campo de texto traz */
.ef-dados-passos .ef-passo[data-passo="2"]:not([hidden]) ~ .ef-acesso-enviar {
    margin-top: 24px;
}

/* Voltar ao lado do Avançar, da segunda pergunta em diante */
.ef-dados-com-voltar .ef-acesso-enviar {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
}

.ef-acesso-tela .ef-dados-voltar {
    height: 50px;
    margin: 0;
    padding: 0 24px;
    border: 1px solid #d9d9d9;
    border-radius: 55px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    color: #000;
    cursor: pointer;
    transition: border-color .15s;
}

.ef-acesso-tela .ef-dados-voltar:hover,
.ef-acesso-tela .ef-dados-voltar:focus-visible {
    border-color: #000;
}

.ef-acesso-tela .ef-dados-voltar[hidden] {
    display: none;
}

.ef-acesso-tela .ef-acesso-enviar .button:disabled {
    background-color: #d9d9d9 !important;
    color: #fff;
    cursor: not-allowed;
}

/* Container da página 14: 140px no topo afastam demais o título do cabeçalho (pedido do Nico 21/09) */
body.ef-acesso .elementor-element-43126e66 {
    margin-top: 64px !important;
}

@media (max-width: 767px) {
    .ef-acesso-tela {
        padding: 0 16px;
    }

    /* Container da página 14: 140px de margem vertical fica largo demais no celular */
    body.ef-acesso .elementor-element-43126e66 {
        margin-top: 48px !important;
        margin-bottom: 64px !important;
    }

    .ef-acesso-titulo {
        font-size: 28px;
    }

    .ef-acesso-texto {
        font-size: 15px;
    }

    .ef-acesso-cartao {
        padding: 28px 20px;
    }

    .ef-acesso-tela .form-row label {
        font-size: 16px;
    }

    .ef-acesso-linha {
        flex-wrap: wrap;
    }
}