/* ===========================================================================
   Wordfence Login Security no layout do site.

   Duas telas do plugin aparecem para o encontreiro:

   1) **/minha-conta/wordfence-2fa/** — o endpoint que o Wordfence acrescenta
      ao menu do WooCommerce. Quem imprime é o próprio plugin
      (`views/page/manage-embedded.php` e `views/passkey/manage.php`), com o
      vocabulário `wfls-*` do painel do wp-admin: cartão branco, cabeçalho
      cinza, botão azul. Sobre o fundo escuro da conta o texto sumia.

   2) **o passo do 2FA no login** — depois da senha certa, o `login.js` cria um
      `#wfls-prompt-overlay` **por cima** do formulário (`position:absolute;
      inset:0`) com `background:#fff` cravado no `login.css`. Era o retângulo
      branco em cima do "Entrar", com o rótulo claro invisível.

   O CSS do plugin **fica**: ele é todo prefixado em `.wfls-` (não vaza para o
   tema) e é quem desenha a modal do jQuery UI, os ícones e a grade de
   colunas. Aqui só se repinta — cor, borda, raio e tipografia — no
   vocabulário da conta.

   **Por que os seletores repetem a `.eftl-ct-wrap`.** No endpoint do 2FA o
   plugin não enfileira o `admin.css`: ele o injeta por JavaScript
   (`jQuery('head').append(...)`, no `Model_Style::renderInline()`) no fim do
   `<head>` e ainda marca o handle como impresso, então enfileirar a mesma
   folha antes só faz o `<link>` do tema ser engolido. Sem mandar na ordem,
   quem desempata é o peso do seletor — daí a classe repetida, que vale um
   ponto a mais e dispensa `!important`.

   No login é diferente: o `login.css` é enfileirado de verdade (durante a
   renderização, o que o jogava para o rodapé) e o `EFT_Conta::assets()` o
   traz para o `<head>`, antes deste arquivo.
   =========================================================================== */

/* ==================================================== a moldura da tela */

/* o plugin monta linha (`.wfls-flex-row`) e coluna com a mesma classe; o que
   separa uma da outra é a posição, então a grade fala em filhos diretos do
   contêiner, que tem id. */
.eftl-ct-wrap.eftl-ct-wrap #wfls-management-embedded,
.eftl-ct-wrap.eftl-ct-wrap #wfls-passkey-management-embedded{
  display:grid;gap:18px;
}
.eftl-ct-wrap.eftl-ct-wrap #wfls-management-embedded > div,
.eftl-ct-wrap.eftl-ct-wrap #wfls-passkey-management-embedded > div{
  display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  float:none;margin:0;
}
/* o `stacked` é a preferência do próprio plugin por uma coluna só */
.eftl-ct-wrap.eftl-ct-wrap #wfls-management-embedded.stacked > div,
.eftl-ct-wrap.eftl-ct-wrap #wfls-passkey-management-embedded.stacked > div{
  grid-template-columns:minmax(0,1fr);
}
.eftl-ct-wrap.eftl-ct-wrap #wfls-management-embedded > div > div,
.eftl-ct-wrap.eftl-ct-wrap #wfls-passkey-management-embedded > div > div{
  display:block;min-width:0;float:none;margin:0;padding:0;width:auto;
}

/* o parágrafo de abertura ("A autenticação de dois fatores...") */
.eftl-ct-wrap.eftl-ct-wrap #wfls-management-embedded > p,
.eftl-ct-wrap.eftl-ct-wrap #wfls-passkey-management-embedded > p{
  margin:0;max-width:75ch;
  font-size:15px;line-height:1.6;color:var(--eft-fg-dim,#a396b0);
}

/* ========================================================= cartão (block) */

.eftl-ct-wrap.eftl-ct-wrap .wfls-block{
  display:flex;flex-direction:column;height:100%;
  background:var(--eft-bg-card,#1b1729);
  border:1px solid var(--eft-line,#2e2542);
  border-radius:var(--eft-radius,12px);
  box-shadow:none;color:var(--eft-fg,#f2e9df);
  overflow:hidden;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-header,
.eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-footer{
  background:transparent;border:none;padding:0;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-header{
  padding:14px 18px;border-bottom:1px solid var(--eft-line,#2e2542);
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-header-content{
  display:flex;align-items:center;gap:10px;margin:0;padding:0;list-style:none;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-title{
  margin:0;padding:0;
  font-family:'El Messiri',sans-serif;
  font-size:16px;line-height:1.3;color:#f6ece1;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-title strong{font-weight:600;}

.eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-content{
  flex:1 1 auto;padding:18px;background:transparent;border:none;
  font-size:15px;line-height:1.6;color:var(--eft-fg,#f2e9df);
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-content p{margin:0 0 12px;}
.eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-content p:last-child{margin-bottom:0;}

.eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-footer{
  padding:14px 18px;border-top:1px solid var(--eft-line,#2e2542);
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-footer-content{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin:0;padding:0;list-style:none;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-footer .wfls-block-title{
  font-family:'Raleway',system-ui,sans-serif;
  font-size:13.5px;color:var(--eft-fg-dim,#a396b0);
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-footer-action{margin:0;}

/* o rodapé do "2. Enter Code" tem link à esquerda e botão à direita */
.eftl-ct-wrap.eftl-ct-wrap .wfls-block a{color:var(--eft-brand-soft,#f3c88c);}
.eftl-ct-wrap.eftl-ct-wrap .wfls-text-small,
.eftl-ct-wrap.eftl-ct-wrap .wfls-block em{
  font-style:normal;font-size:12.5px;color:var(--eft-fg-dim,#a396b0);
}
.eftl-ct-wrap.eftl-ct-wrap hr.wfls-half{
  height:0;margin:18px 0;border:none;border-top:1px solid var(--eft-line,#2e2542);
}

/* ================================================================ botões */

/* o `.wfls-btn` do plugin é o botão azul do wp-admin; aqui vira o botão
   fantasma da conta, e o de ação principal (Ativar, Gerar) o cheio */
.eftl-ct-wrap.eftl-ct-wrap .wfls-btn,
.eftl-ct-wrap.eftl-ct-wrap .wfls-btn-default{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 17px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--eft-fg,#f2e9df);
  border:1px solid var(--eft-line,#2e2542);
  font:inherit;font-size:14.5px;font-weight:500;line-height:1.2;
  text-decoration:none;text-shadow:none;box-shadow:none;
  transition:border-color .14s,background .14s,color .14s;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-btn:hover,
.eftl-ct-wrap.eftl-ct-wrap .wfls-btn:focus,
.eftl-ct-wrap.eftl-ct-wrap .wfls-btn-default:hover,
.eftl-ct-wrap.eftl-ct-wrap .wfls-btn-default:focus{
  background:#221c33;border-color:var(--eft-brand-soft,#f3c88c);
  color:#f6ece1;text-decoration:none;
}
/* os que confirmam a ação — "Ativar" e "Adicionar chave" — são os cheios */
.eftl-ct-wrap.eftl-ct-wrap #wfls-activate,
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-add-button{
  background:linear-gradient(135deg,var(--eft-brand-soft,#f3c88c),var(--eft-brand,#e8a54e));
  color:#2a1602;border-color:transparent;font-weight:600;
}
.eftl-ct-wrap.eftl-ct-wrap #wfls-activate:hover,
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-add-button:hover{
  background:linear-gradient(135deg,var(--eft-brand-soft,#f3c88c),var(--eft-brand,#e8a54e));
  color:#2a1602;border-color:transparent;
  box-shadow:0 10px 24px rgba(232,165,78,.22);
}
/* o botão nasce desativado até o campo ter os 6 dígitos */
.eftl-ct-wrap.eftl-ct-wrap .wfls-btn.wfls-disabled,
.eftl-ct-wrap.eftl-ct-wrap .wfls-btn[disabled]{
  opacity:.45;cursor:not-allowed;box-shadow:none;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-btn .dashicons{
  width:18px;height:18px;font-size:18px;line-height:1;
}
/* o plugin troca o rótulo do botão por um curto no celular */
.eftl-ct-wrap.eftl-ct-wrap .wfls-btn-label-xs{display:none;}
@media (max-width:520px){
  .eftl-ct-wrap.eftl-ct-wrap .wfls-btn-label-full{display:none;}
  .eftl-ct-wrap.eftl-ct-wrap .wfls-btn-label-xs{display:inline;}
}

/* ================================================================= avisos */

/* "As chaves de acesso estão desativadas", "2FA obrigatório em X dias" — o
   plugin usa o amarelo de aviso do wp-admin */
.eftl-ct-wrap.eftl-ct-wrap .wfls-notice{
  margin:0;padding:14px 16px;
  background:rgba(232,165,78,.08);
  border:1px solid rgba(232,165,78,.34);
  border-left:3px solid var(--eft-brand,#e8a54e);
  border-radius:var(--eft-radius,12px);
  color:var(--eft-fg,#f2e9df);font-size:14.5px;line-height:1.6;
  box-shadow:none;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-notice p{margin:0 0 10px;}
.eftl-ct-wrap.eftl-ct-wrap .wfls-notice p:last-child{margin-bottom:0;}
.eftl-ct-wrap.eftl-ct-wrap .wfls-notice strong{color:#f6ece1;}

/* ================================================================ campos */

/* a chave em texto do QR e o campo dos 6 dígitos: o input do tema já vem
   escuro, aqui só o que é próprio de um código */
.eftl-ct-wrap.eftl-ct-wrap #wfls-qr-code-text{
  width:100%;max-width:420px;margin:0 auto;
  text-align:center;letter-spacing:.06em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;
  background:var(--eft-bg-soft,#141020);color:var(--eft-fg,#f2e9df);
  border:1px solid var(--eft-line,#2e2542);border-radius:9px;padding:10px 12px;
}
.eftl-ct-wrap.eftl-ct-wrap #wfls-activate-field{
  width:100%;max-width:180px;padding:12px;
  text-align:center;letter-spacing:.42em;text-indent:.42em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:22px;
  background:var(--eft-bg-soft,#141020);color:#f6ece1;
  border:1px solid var(--eft-line,#2e2542);border-radius:10px;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-add-input{
  width:100%;padding:10px 12px;border-radius:9px;
  border:1px solid var(--eft-line,#2e2542);
  background:var(--eft-bg-soft,#141020);color:var(--eft-fg,#f2e9df);
  font:inherit;font-size:15px;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-add-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-add-row > *{flex:1 1 200px;}
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-add-row .wfls-btn{flex:0 0 auto;}

/* ============================================================== QR code */

/* o `jquery.qrcode` desenha preto sobre transparente: sem uma placa clara
   atrás, o código some no fundo escuro (e a câmera não lê). */
.eftl-ct-wrap.eftl-ct-wrap #wfls-qr-code{
  display:grid;place-items:center;
  width:max-content;max-width:100%;margin:0 auto 14px;
  padding:14px;border-radius:10px;background:#fff;
}
.eftl-ct-wrap.eftl-ct-wrap #wfls-qr-code canvas,
.eftl-ct-wrap.eftl-ct-wrap #wfls-qr-code img,
.eftl-ct-wrap.eftl-ct-wrap #wfls-qr-code table{max-width:100%;height:auto;display:block;}

/* ================================================= códigos de recuperação */

.eftl-ct-wrap.eftl-ct-wrap .wfls-recovery-codes{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;
  margin:0 0 14px;padding:14px;list-style:none;
  background:var(--eft-bg-soft,#141020);
  border:1px solid var(--eft-line,#2e2542);border-radius:10px;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-recovery-codes li{
  margin:0;padding:0;list-style:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;letter-spacing:.04em;color:#f6ece1;
}

/* ====================================================== chaves de acesso */

.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;
  padding:12px 14px;border-radius:10px;
  background:var(--eft-bg-soft,#141020);
  border:1px solid var(--eft-line,#2e2542);
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-item-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0;}
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-item-label{font-weight:600;color:#f6ece1;min-width:0;overflow-wrap:anywhere;}
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-item-details,
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-hostname{font-size:12.5px;color:var(--eft-fg-dim,#a396b0);}
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-information{
  margin:0;padding:14px 16px;border-radius:10px;
  background:var(--eft-bg-soft,#141020);
  border:1px solid var(--eft-line,#2e2542);
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-information h3.wfls-passkey-information-title{
  margin:0 0 8px;font-size:15px;color:#f6ece1;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-information-list{margin:0;padding:0;list-style:none;display:grid;gap:6px;}
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-information-list > li{
  margin:0;font-size:14px;color:var(--eft-fg-dim,#a396b0);
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-ion-ios-checkmark-empty,
.eftl-ct-wrap.eftl-ct-wrap .wfls-ion-ios-information-outline{color:var(--eft-brand,#e8a54e);}
/* dentro da caixa marcada o mesmo tique é escuro sobre o âmbar */
.eftl-ct-wrap.eftl-ct-wrap .wfls-option-checkbox.wfls-checked .wfls-ion-ios-checkmark-empty{color:#2a1602;}

/* ================================================== opções com interruptor */

/* o "User Options" das chaves é uma <ul> em que o primeiro <li> é a caixa de
   marcar e o segundo o texto; o `admin.css` pinta o texto de cinza-escuro. */
.eftl-ct-wrap.eftl-ct-wrap .wfls-option,
.eftl-ct-wrap.eftl-ct-wrap .wfls-option li,
.eftl-ct-wrap.eftl-ct-wrap .wfls-option-title,
.eftl-ct-wrap.eftl-ct-wrap .wfls-option-extended-toggle{
  color:var(--eft-fg,#f2e9df);
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-option-title strong{color:#f6ece1;}
.eftl-ct-wrap.eftl-ct-wrap .wfls-option-subtitle,
.eftl-ct-wrap.eftl-ct-wrap .wfls-option-subtitle.wfls-option-extended-toggle{
  color:var(--eft-fg-dim,#a396b0);font-size:13px;line-height:1.5;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-option-checkbox{
  /* o `admin.css` crava o azul com !important nesta caixa */
  background-color:var(--eft-bg-soft,#141020) !important;
  border:1px solid var(--eft-line,#2e2542);
  border-radius:6px;color:transparent;cursor:pointer;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-option-checkbox.wfls-checked{
  background-color:var(--eft-brand,#e8a54e) !important;
  border-color:var(--eft-brand,#e8a54e);color:#2a1602;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-option-checkbox:focus-visible{
  outline:2px solid var(--eft-brand-soft,#f3c88c);outline-offset:2px;
}

/* o "+" de acrescentar chave é só um ícone: sem largura própria vira um
   disco sem alvo de clique */
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-add-button{
  flex:0 0 auto;width:44px;height:44px;min-width:44px;padding:0;border-radius:12px;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-add-button .wfls-fa{font-size:16px;line-height:1;}
/* o rótulo do ícone é só para leitor de tela */
.eftl-ct-wrap.eftl-ct-wrap .sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.eftl-ct-wrap.eftl-ct-wrap .wfls-passkey-remove{
  flex:0 0 auto;width:38px;height:38px;padding:0;border-radius:10px;
}

/* ============================================================== alinhamentos */
/* utilitários do plugin que o `admin.css` resolve com float/table */
.eftl-ct-wrap.eftl-ct-wrap .wfls-center{text-align:center;}
.eftl-ct-wrap.eftl-ct-wrap .wfls-add-top{margin-top:14px;}
.eftl-ct-wrap.eftl-ct-wrap .wfls-add-bottom{margin-bottom:14px;}
.eftl-ct-wrap.eftl-ct-wrap .wfls-no-bottom{margin-bottom:0;}

/* ================================================================= modal */

/* a modal ("Desativar 2FA", "Novos códigos") é um diálogo do jQuery UI preso
   ao <body>, fora da moldura da conta — daí o seletor por id. */
/* o `embedded.css` crava um degradê cinza-claro com !important */
body #wfls-standalone-modal-overlay{
  background:rgba(6,4,12,.74) !important;
  backdrop-filter:blur(2px);
}
body #wfls-standalone-modal,
body #wfls-standalone-modal .ui-dialog-content{
  background:var(--eft-bg-card,#1b1729);
  color:var(--eft-fg,#f2e9df);
  border:1px solid var(--eft-line,#2e2542);
  border-radius:var(--eft-radius,12px);
  box-shadow:var(--eft-shadow,0 18px 45px rgba(0,0,0,.55));
  font-family:'Raleway',system-ui,-apple-system,'Segoe UI',sans-serif;
  padding:0;overflow:hidden;
}
body #wfls-standalone-modal .ui-dialog-titlebar{display:none;}
body #wfls-standalone-modal h1,
body #wfls-standalone-modal h2,
body #wfls-standalone-modal h3,
body #wfls-standalone-modal .wfls-modal-title{
  font-family:'El Messiri',sans-serif;color:#f6ece1;margin:0;
}
body #wfls-standalone-modal p{color:var(--eft-fg,#f2e9df);font-size:15px;line-height:1.6;}
body #wfls-standalone-modal a{color:var(--eft-brand-soft,#f3c88c);}
body #wfls-standalone-modal .wfls-modal .wfls-modal-header{
  background:transparent;border:none;border-bottom:1px solid var(--eft-line,#2e2542);
  padding:16px 20px;
}
body #wfls-standalone-modal .wfls-modal .wfls-modal-content{
  background:transparent;border:none;padding:18px 20px;
}
body #wfls-standalone-modal .wfls-modal .wfls-modal-footer{
  background:transparent;border:none;border-top:1px solid var(--eft-line,#2e2542);
  padding:14px 20px;
}
body #wfls-standalone-modal .wfls-modal ul,
body #wfls-standalone-modal .wfls-modal li{color:var(--eft-fg,#f2e9df);}
body #wfls-standalone-modal .wfls-recovery-codes{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;
  padding:14px;list-style:none;
  background:var(--eft-bg-soft,#141020);
  border:1px solid var(--eft-line,#2e2542);border-radius:10px;
}
body #wfls-standalone-modal .wfls-recovery-codes li{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#f6ece1;
}
body #wfls-standalone-modal .wfls-btn,
body #wfls-standalone-modal .wfls-btn-default,
body #wfls-standalone-modal .wfls-btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 17px;border-radius:999px;
  background:transparent;color:var(--eft-fg,#f2e9df);
  border:1px solid var(--eft-line,#2e2542);
  font:inherit;font-size:14.5px;font-weight:500;line-height:1.2;
  text-shadow:none;box-shadow:none;text-decoration:none;
}
body #wfls-standalone-modal .wfls-btn-primary,
body #wfls-standalone-modal .wfls-recovery-new-download{
  background:linear-gradient(135deg,var(--eft-brand-soft,#f3c88c),var(--eft-brand,#e8a54e));
  color:#2a1602;border-color:transparent;font-weight:600;
}
body #wfls-standalone-modal .wfls-btn-danger{
  background:transparent;color:#ff9a8a;border:1px solid rgba(239,68,68,.5);
}
body #wfls-standalone-modal .wfls-btn:hover,
body #wfls-standalone-modal .wfls-btn-default:hover{
  background:#221c33;border-color:var(--eft-brand-soft,#f3c88c);color:#f6ece1;
}

/* ===========================================================================
   O passo do 2FA no login

   O `login.js` acrescenta o `#wfls-prompt-overlay` dentro do <form> (que ele
   mesmo põe em `position:relative`) e o cobre por inteiro. Como é uma camada
   por cima, e não um passo do formulário, ela precisa ter o fundo do cartão —
   senão vê-se o "Entrar" atrás.
   =========================================================================== */

.eftl-ct-wrap.eftl-ct-wrap #wfls-prompt-overlay,
form.woocommerce-form-login #wfls-prompt-overlay{
  position:absolute;inset:0;z-index:2;
  display:grid;align-content:center;gap:2px;
  padding:22px;
  background:var(--eft-bg-card,#1b1729);
  border-radius:var(--eft-radius,12px);
  color:var(--eft-fg,#f2e9df);
}
#wfls-prompt-wrapper{width:100%;}
#wfls-prompt-wrapper > p{margin:0 0 12px;}
#wfls-prompt-wrapper label[for="wfls-token"]{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;color:var(--eft-fg,#f2e9df);
}
#wfls-prompt-wrapper .wfls-2fa-code-help{
  color:var(--eft-fg-dim,#a396b0);line-height:1;text-decoration:none;
}
#wfls-prompt-wrapper .wfls-2fa-code-help .dashicons{width:18px;height:18px;font-size:18px;}
#wfls-token{
  width:100%;box-sizing:border-box;padding:12px;
  text-align:center;letter-spacing:.34em;text-indent:.34em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:20px;
  background:var(--eft-bg-soft,#141020);color:#f6ece1;
  border:1px solid var(--eft-line,#2e2542);border-radius:10px;
}
#wfls-token:focus{
  outline:none;border-color:var(--eft-brand-soft,#f3c88c);
  box-shadow:0 0 0 3px rgba(232,165,78,.14);
}
/* o `login.css` do plugin deixa o "Lembrar por 30 dias" flutuando ao lado do
   botão; aqui os dois são blocos, um debaixo do outro */
.woocommerce-form-login .wfls-remember-device-wrapper,
#wfls-prompt-wrapper .wfls-remember-device-wrapper{
  float:none;display:flex;align-items:center;gap:9px;margin:0 0 14px;
}
.woocommerce-form-login .wfls-remember-device-wrapper label,
#wfls-prompt-wrapper .wfls-remember-device-wrapper label{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;line-height:1.4;color:var(--eft-fg-dim,#a396b0);
}
#wfls-remember-device{width:auto;margin:0;accent-color:var(--eft-brand,#e8a54e);}
#wfls-prompt-wrapper p.submit{margin:0;}
#wfls-token-submit{
  width:100%;padding:11px 18px;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,var(--eft-brand-soft,#f3c88c),var(--eft-brand,#e8a54e));
  color:#2a1602;border:1px solid transparent;
  font:inherit;font-size:15px;font-weight:600;line-height:1.2;
  text-shadow:none;box-shadow:none;
}
#wfls-token-submit.disabled,
#wfls-token-submit[disabled]{opacity:.5;cursor:not-allowed;}
#wfls-token-error{
  margin:8px 0 0;font-size:13px;color:#ff9a8a;
}

/* ------------------------------------------- entrar com chave de acesso */

/* o `login.js` acrescenta, embaixo do "Acessar", um separador e o botão da
   chave de acesso. O separador vem com o rótulo em fundo branco (pensado para
   o wp-login) e o botão herda o degradê do tema — dois botões cheios em
   seguida, sem hierarquia. Aqui o da chave é o caminho alternativo. */
form.woocommerce-form-login .wfls-passkey-container .wfls-passkey-divider{
  color:var(--eft-fg-dim,#a396b0);
}
form.woocommerce-form-login .wfls-passkey-container .wfls-passkey-divider:before,
form.woocommerce-form-login .wfls-passkey-container .wfls-passkey-divider:after{
  border-top-color:var(--eft-line,#2e2542);
}
form.woocommerce-form-login .wfls-passkey-container .wfls-passkey-divider-label{
  background:var(--eft-bg-card,#1b1729);
  color:var(--eft-fg-dim,#a396b0);font-size:12.5px;
}
#wfls-passkey-submit{
  width:100%;padding:11px 18px;border-radius:999px;cursor:pointer;
  /* o botão nasce com a classe `button`, e o `conta.css` crava nela o marrom
     do texto sobre o degradê com !important */
  background:transparent;color:var(--eft-fg,#f2e9df) !important;
  border:1px solid var(--eft-line,#2e2542);
  font:inherit;font-size:15px;font-weight:500;line-height:1.2;
  box-shadow:none;text-shadow:none;
}
#wfls-passkey-submit:hover,
#wfls-passkey-submit:focus{
  background:#221c33;border-color:var(--eft-brand-soft,#f3c88c);color:#f6ece1 !important;
  transform:none;box-shadow:none;
}
#wfls-passkey-submit .wfls-passkey-icon{background-color:var(--eft-brand-soft,#f3c88c);}
#wfls-passkey-submit:hover .wfls-passkey-icon,
#wfls-passkey-submit:focus .wfls-passkey-icon{background-color:var(--eft-brand,#e8a54e);}

/* a dica do "?" é uma Zebra_Tooltip presa ao <body> */
.Zebra_Tooltip .Zebra_Tooltip_Message{
  background:#120e1d;border-radius:10px;
  font-family:'Raleway',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:12.5px;
  box-shadow:0 12px 30px rgba(0,0,0,.55);
}

/* ============================================================ responsivo */

@media (max-width:620px){
  .eftl-ct-wrap.eftl-ct-wrap #wfls-management-embedded > div,
  .eftl-ct-wrap.eftl-ct-wrap #wfls-passkey-management-embedded > div{grid-template-columns:minmax(0,1fr);}
  .eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-header,
  .eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-footer{padding:12px 14px;}
  .eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-content{padding:14px;}
  .eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-footer-content{flex-direction:column;align-items:stretch;}
  .eftl-ct-wrap.eftl-ct-wrap .wfls-block .wfls-block-footer-action .wfls-btn{width:100%;}
  .eftl-ct-wrap.eftl-ct-wrap #wfls-prompt-overlay,
  form.woocommerce-form-login #wfls-prompt-overlay{padding:16px;}
}