/* conta-mobile.css | Account Dashboard para WooCommerce
   PELE FINA do widget wcad_conta_mobile (Minha Conta celular), desenhado para
   viver dentro da gaveta Off-Canvas do Elementor, no celular.

   AQUI A ORDEM PESA MAIS QUE A ESPECIFICIDADE: o widget imprime o CSS
   estrutural em <style id=wcad-cm-base> no CORPO da pagina, e esta folha e
   enfileirada no <head>. Empate de especificidade seria decidido pela ordem, e
   o inline vem depois, entao o base venceria. Por isso todo seletor daqui
   repete a classe raiz: .wcad-cm.wcad-cm .wcad-cm__x vale (0,3,0) e ganha do
   base (0,2,0) seja qual for a ordem, e tambem do kit do Elementor
   (.elementor-kit-NN a / button, que vale (0,1,1)). Zero !important.

   NAO REDEFINE as variaveis do base (--wcad-cm-texto, -apoio, -destaque,
   -fundo, -linha, -raio): sao elas que os controles de cor do Elementor
   alimentam, e sobrescrever aqui deixaria os controles sem efeito. Esta folha
   so acrescenta as que faltavam.

   NAO PINTA fill nem stroke em .wcad-icon: os simbolos do sprite trazem
   fill=none stroke=currentColor como atributo de apresentacao, e regra CSS
   vence atributo de apresentacao. Pintar aqui viraria os icones de contorno em
   mancha solida. Cor de icone se muda por color, que o stroke herda.

   CONTRASTE, medido contra o fundo opaco real do cartao (--wcad-cm-fundo):
   texto 18.3:1, apoio 5.3:1, icone 18.9:1, Sair 6.5:1, iniciais 14.6:1.

   TAMANHO: nenhuma medida de TEXTO daqui e absoluta. Tudo sai em em, ancorado
   na tipografia que o lojista escolheu no controle do Elementor
   ({{WRAPPER}} .wcad-cm). Mexer naquele controle continua mudando o cartao
   inteiro proporcionalmente. Os unicos px que sobram sao pisos de acesso
   (--wcad-cm-alvo: 44px de area de toque) e espessura de linha, que nao sao
   tipografia e nao podem encolher junto.
*/

.wcad-cm.wcad-cm{
  /* so o que o base nao tinha; nenhum hex repetido */
  --wcad-cm-perigo:#B3261E;
  --wcad-cm-toque:#F2F1EE;
  --wcad-cm-alvo:44px;
  --wcad-cm-folga:8px;

  display:block;

  /* CONSULTA DE CONTEINER: a largura que manda neste widget e a DELE, nao a da
     tela. Dentro do off-canvas ele divide a linha com o botao de fechar (44px)
     numa gaveta de min(88vw,380px) - numa tela de 375px sobram ~258px para o
     widget - e o lojista ainda pode arrastar o widget para uma barra lateral
     estreita ou para uma coluna larga. Media query de viewport erraria nos dois
     casos; por isso as faixas la embaixo perguntam pela largura DELE.
     inline-size contem so o eixo horizontal: a altura continua livre, entao a
     sanfona <details> abre e fecha normalmente.
     O nome evita que uma regra nossa case com conteiner declarado por terceiro. */
  container-name:wcad-cm;
  container-type:inline-size;

  /* separacao clara do menu de categorias que vem logo abaixo na gaveta */
  margin-block-end:16px;
  padding-block-end:16px;
  border-block-end:1px solid var(--wcad-cm-linha);
  -webkit-tap-highlight-color:transparent;
}

/* CARTAO DE ENTRAR (visitante) --------------------------------------------
   O base ja da borda, raio e 56px de altura. Aqui so o alvo de toque cheio:
   o <a> ocupa a linha inteira, nao so o texto. */
.wcad-cm.wcad-cm .wcad-cm__entrar{
  inline-size:100%;
  min-block-size:var(--wcad-cm-alvo);
}

/* Reticencias sao o PISO, nao a estrategia: valem para o navegador que nao
   entende @container e para largura absurda. As faixas la embaixo trocam por
   quebra de linha, que e legivel. */
.wcad-cm.wcad-cm .wcad-cm__entrar-rotulo,
.wcad-cm.wcad-cm .wcad-cm__entrar-apoio{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* AVATAR ------------------------------------------------------------------
   O pedido era circulo de fundo TENUE com as iniciais em peso alto. O base
   pinta o circulo inteiro com --wcad-cm-destaque. Em vez de trocar por uma cor
   fixa (que desligaria o controle de cor do Elementor), o fundo vira uma
   diluicao do proprio destaque sobre o fundo do cartao: o controle continua
   mandando e o circulo fica leve. Sem color-mix, cai no cinza neutro.

   O TAMANHO do circulo nao mora aqui: o base declara --wcad-cm-avatar em em, e
   so as faixas la embaixo mexem nessa variavel. Repetir a medida nos dois
   arquivos era exatamente a briga que se quer evitar. */
.wcad-cm.wcad-cm .wcad-cm__avatar{
  background:transparent;
  color:var(--wcad-cm-texto);
  font-weight:700;
}

@supports (background:color-mix(in srgb, #000 12%, #fff)){
  .wcad-cm.wcad-cm .wcad-cm__avatar{
    background:color-mix(in srgb, var(--wcad-cm-destaque) 12%, var(--wcad-cm-fundo));
    color:var(--wcad-cm-destaque);
  }
}

/* ATALHOS -----------------------------------------------------------------
   Vira cartao proprio, com separador discreto entre as linhas. O separador
   fica no <li>, nunca no <a>, para nao cortar a area de toque. */
.wcad-cm.wcad-cm .wcad-cm__atalhos{
  margin-block-start:var(--wcad-cm-folga);
  border:1px solid var(--wcad-cm-linha);
  border-radius:var(--wcad-cm-raio);
  background:var(--wcad-cm-fundo);
  overflow:hidden;
}

.wcad-cm.wcad-cm .wcad-cm__atalho + .wcad-cm__atalho{
  border-block-start:1px solid var(--wcad-cm-linha);
}

/* dentro do cartao o raio por linha sobraria; quem arredonda e o cartao */
.wcad-cm.wcad-cm .wcad-cm__link{
  inline-size:100%;
  min-block-size:var(--wcad-cm-alvo);
  border-radius:0;
  color:var(--wcad-cm-texto);
}

.wcad-cm.wcad-cm .wcad-cm__link-rotulo{
  flex:1 1 auto;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* SAIR --------------------------------------------------------------------
   Separado dos demais, em vermelho, com o mesmo alvo de 44px. O icone segue a
   cor do texto por currentColor, sem tocar em fill/stroke. */
.wcad-cm.wcad-cm .wcad-cm__sair{
  inline-size:100%;
  min-block-size:var(--wcad-cm-alvo);
  margin-block-start:var(--wcad-cm-folga);
  color:var(--wcad-cm-perigo);
}

.wcad-cm.wcad-cm .wcad-cm__sair .wcad-cm__link-icone{color:currentColor;}

/* TOQUE E FOCO ------------------------------------------------------------ */
.wcad-cm.wcad-cm .wcad-cm__sair{background:none}

.wcad-cm.wcad-cm .wcad-cm__entrar,
.wcad-cm.wcad-cm .wcad-cm__link,
.wcad-cm.wcad-cm .wcad-cm__sair{
  transition:transform .14s ease, background-color .14s ease;
}

/* press profissional: tinta quente leve + recuo fisico de 1% (mobile e de toque) */
.wcad-cm.wcad-cm .wcad-cm__entrar:active,
.wcad-cm.wcad-cm .wcad-cm__link:active,
.wcad-cm.wcad-cm .wcad-cm__sair:active{
  background:rgba(23,23,23,.05);
  background:color-mix(in srgb, var(--wcad-cm-destaque) 7%, var(--wcad-cm-fundo));
  transform:scale(.99);
}

@media (hover:hover){
  .wcad-cm.wcad-cm .wcad-cm__entrar:hover,
  .wcad-cm.wcad-cm .wcad-cm__link:hover,
  .wcad-cm.wcad-cm .wcad-cm__sair:hover{background:transparent;}
}

@media (prefers-reduced-motion:no-preference){
  .wcad-cm.wcad-cm .wcad-cm__entrar,
  .wcad-cm.wcad-cm .wcad-cm__link,
  .wcad-cm.wcad-cm .wcad-cm__sair{transition:background-color .18s ease;}
}

/* =========================================================================
   FAIXAS - o widget reage a PROPRIA largura
   =========================================================================

   ESTA SECAO E A ULTIMA DO ARQUIVO DE PROPOSITO. Toda regra daqui tem a mesma
   especificidade (0,3,0 / 0,4,0) das regras de cima que ela refina; num empate
   quem vence e quem vem depois. Mover esta secao para cima desliga metade dela.

   ORDEM DE DEGRADACAO (quem o cliente menos precisa ler cede espaco primeiro):
     1. nada          - acima de 380px cabe tudo em uma linha, como sempre foi;
     2. o e-mail      - e confirmacao, nao identificacao: sai da coluna do nome e
                        ocupa a largura inteira do cartao, onde cabe INTEIRO.
                        Perde posicao, nao perde letra;
     3. a decoracao   - abaixo de 250px o avatar encolhe e os respiros apertam,
                        devolvendo largura para o nome e para os rotulos;
     4. a linha unica - so no fim o texto aceita virar duas linhas. Duas linhas
                        legiveis valem mais que uma linha cortada.
   Reticencias continuam existindo (nas regras de cima) como ULTIMO recurso,
   nunca como a unica resposta - que era a queixa do dono.

   NAVEGADOR SEM @container: ignora estes blocos inteiros e fica com o layout de
   cima, que e exatamente o de hoje (uma linha, reticencias). Degrada para o que
   ja funcionava, nunca para quebrado. Por isso nenhuma regra ESTRUTURAL nasce
   aqui dentro: grid, quebra e aperto sao sempre SOBREPOSICAO de um layout que
   ja se sustenta sozinho.

   Nada de clamp() nem de px em texto: as medidas sao em e partem da tipografia
   do lojista. A .8em abaixo vale 12px nos 15px salvos hoje e vira 16px se ele
   subir a fonte para 20px - a escala anda junto. */

/* FAIXA MEDIA - ate 379px de largura DO WIDGET (toda gaveta cabe aqui) ------
   379 e o teto porque a gaveta e min(88vw,380px): dentro dela o e-mail SEMPRE
   ganha a linha inteira, previsivel em qualquer telefone. O e-mail longo de
   teste (cliente.muito.longo@exemplo.com.br) pede 214px; na coluna do nome so
   havia 144px aos 258px reais de hoje - por isso vinha cortado. Na linha
   inteira sobram 228px e ele aparece completo. */
@container wcad-cm (max-width: 379px){

  /* O <summary> vira grade de duas linhas. Continua <summary>: mudar display
     nao mexe no clique que abre e fecha o <details>, e o marcador ja estava
     escondido pelo base. */
  .wcad-cm.wcad-cm .wcad-cm__topo{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar nome  seta"
      "email  email email";
    align-items:center;
    column-gap:.8em;
    row-gap:.2667em;
  }

  /* a caixa da identidade some e seus dois filhos passam a ser itens da grade;
     sem isto o e-mail ficaria preso na coluna estreita do nome. Quem entende
     @container (2023) entende display:contents (2018), entao nao ha navegador
     que pegue um sem o outro. */
  .wcad-cm.wcad-cm .wcad-cm__identidade{display:contents;}

  .wcad-cm.wcad-cm .wcad-cm__avatar{grid-area:avatar;}
  .wcad-cm.wcad-cm .wcad-cm__nome{grid-area:nome;}

  /* o base empurra a seta com margin-inline-start:auto, que so faz sentido em
     flex; na grade ela ja tem coluna propria */
  .wcad-cm.wcad-cm .wcad-cm__seta{grid-area:seta;margin-inline-start:0;}

  /* aqui morre a reticencia do e-mail: com a largura inteira ele cabe, e quando
     nao couber quebra em duas linhas legiveis. overflow-wrap:anywhere porque
     endereco de e-mail e uma palavra so - sem isso o navegador nao teria onde
     quebrar. */
  .wcad-cm.wcad-cm .wcad-cm__email{
    grid-area:email;
    overflow:visible;
    white-space:normal;
    text-overflow:clip;
    overflow-wrap:anywhere;
  }

  /* visitante: as duas frases sao escritas pelo lojista e podem ser longas.
     Quebrar em duas linhas mostra a frase toda; cortar escondia o fim dela. */
  .wcad-cm.wcad-cm .wcad-cm__entrar-rotulo,
  .wcad-cm.wcad-cm .wcad-cm__entrar-apoio{
    overflow:visible;
    white-space:normal;
    text-overflow:clip;
    overflow-wrap:break-word;
  }
}

/* FAIXA ESTREITA - ate 249px (barra lateral apertada, gaveta de telefone
   pequeno). 250 e o corte porque abaixo dele nem a linha inteira comporta o
   e-mail longo: 249 - 30 de respiro = 219px contra os 214px que ele pede.
   Aqui a DECORACAO cede: o circulo cai de 40 para 32px e o respiro lateral de
   14 para 10px, o que devolve ~30px por linha ao texto.
   So padding-inline: o respiro vertical e a altura de toque de 44px ficam
   intactos - aperto nao pode virar alvo de dedo menor. */
@container wcad-cm (max-width: 249px){

  .wcad-cm.wcad-cm .wcad-cm__topo{
    padding-inline:.6667em;
    column-gap:.5333em;
  }

  /* 32px na tipografia salva. Mesma conta do base: o avatar roda a .875em, e
     dividir por .875 faz o em bater com a fonte do CARTAO. */
  .wcad-cm.wcad-cm .wcad-cm__avatar{
    --wcad-cm-avatar:calc(2.1333em / .875);
  }

  /* ultimo recurso do nome: duas linhas em vez de reticencia. Nome proprio e
     identificacao - le-se inteiro ou nao serve. */
  .wcad-cm.wcad-cm .wcad-cm__nome{
    overflow:visible;
    white-space:normal;
    text-overflow:clip;
    overflow-wrap:anywhere;
  }

  .wcad-cm.wcad-cm .wcad-cm__entrar,
  .wcad-cm.wcad-cm .wcad-cm__link,
  .wcad-cm.wcad-cm .wcad-cm__sair{
    padding-inline:.6667em;
    gap:.5333em;
  }
}

/* FAIXA LARGA - 440px para cima (coluna larga, desktop, barra lateral gorda).
   Adaptar tambem e usar o espaco que sobra: quatro linhas de 44px esticadas
   numa coluna de 600px sao quatro linhas vazias. Em duas colunas o cartao
   perde metade da altura sem perder nada de texto.
   440 e o piso porque cada metade precisa comportar o rotulo mais longo:
   (440 - 2) / 2 - 60 de icone e respiro = 159px contra os ~105px de
   "Dados da conta". */
@container wcad-cm (min-width: 440px){

  .wcad-cm.wcad-cm .wcad-cm__atalhos{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  /* o separador de cima era feito por irmao adjacente, que em duas colunas
     riscaria o item 2 no meio da primeira fileira. Desliga e redesenha:
     linha horizontal so a partir da segunda fileira, linha vertical so na
     coluna da direita. As duas regras valem (0,4,0), igual a que desligam:
     empate resolvido pela ordem, e por isso elas vem DEPOIS. */
  .wcad-cm.wcad-cm .wcad-cm__atalho + .wcad-cm__atalho{
    border-block-start:0;
  }

  .wcad-cm.wcad-cm .wcad-cm__atalho:nth-child(n+3){
    border-block-start:1px solid var(--wcad-cm-linha);
  }

  .wcad-cm.wcad-cm .wcad-cm__atalho:nth-child(2n){
    border-inline-start:1px solid var(--wcad-cm-linha);
  }
}

/* =============================================================================
   UPDATE 1.10.1 — Apresentacao moderna e RESPONSIVA do widget na gaveta mobile

   O widget agora e um container query: ele se adapta a PROPRIA largura, nao a
   tela — encolhe ladrilho, chevron e respiros quando o espaco aperta.

   Sem sombra no cartao (pedido do dono). Texto nunca quebra no meio da
   palavra: so espacos. Apresentacao apenas: as cores saem das variaveis do
   widget (controles do Elementor seguem valendo). Mesma dupla-classe da pele;
   zero !important.
   ========================================================================== */

.wcad-cm.wcad-cm {
  container-type: inline-size;
}

/* ---- cartao de visitante ---- */
.wcad-cm.wcad-cm .wcad-cm__entrar {
  min-height: 60px;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
}

.wcad-cm.wcad-cm .wcad-cm__entrar-icone {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(17, 17, 17, .06);
  background: color-mix(in srgb, var(--wcad-cm-destaque) 9%, var(--wcad-cm-fundo));
}

.wcad-cm.wcad-cm .wcad-cm__entrar-textos {
  flex: 1 1 auto;
  min-width: 0;
}

/* nunca cortar palavra: quebra so em espaco, sem hifen automatico */
.wcad-cm.wcad-cm .wcad-cm__entrar-rotulo,
.wcad-cm.wcad-cm .wcad-cm__entrar-apoio {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* affordance: chevron a direita */
.wcad-cm.wcad-cm .wcad-cm__entrar::after {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-inline-start: auto;
  border-radius: 999px;
  background-color: rgba(17, 17, 17, .05);
  background-color: color-mix(in srgb, var(--wcad-cm-destaque) 8%, var(--wcad-cm-fundo));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
}

.wcad-cm.wcad-cm .wcad-cm__entrar:active {
  transform: scale(.99);
}

/* ---- usuario logado ---- */
.wcad-cm.wcad-cm .wcad-cm__topo {
  border-radius: 16px;
}

.wcad-cm.wcad-cm .wcad-cm__avatar {
  background: rgba(17, 17, 17, .08);
  background: color-mix(in srgb, var(--wcad-cm-destaque) 12%, var(--wcad-cm-fundo));
  color: var(--wcad-cm-destaque);
}

.wcad-cm.wcad-cm .wcad-cm__atalhos {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.wcad-cm.wcad-cm .wcad-cm__atalho + .wcad-cm__atalho {
  border-top: 0;
}

.wcad-cm.wcad-cm .wcad-cm__link {
  border-radius: 12px;
}

.wcad-cm.wcad-cm .wcad-cm__link-icone {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, .05);
  background: color-mix(in srgb, var(--wcad-cm-destaque) 8%, var(--wcad-cm-fundo));
}

.wcad-cm.wcad-cm .wcad-cm__sair {
  color: #DC2626;
}

.wcad-cm.wcad-cm .wcad-cm__sair .wcad-cm__link-icone {
  background: #FEF2F2;
  color: #DC2626;
}

/* ---- adaptacao ao tamanho do proprio widget ---- */
@container (max-width: 320px) {
  .wcad-cm.wcad-cm .wcad-cm__entrar {
    gap: 10px;
    padding: 10px 12px;
  }

  .wcad-cm.wcad-cm .wcad-cm__entrar-icone {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .wcad-cm.wcad-cm .wcad-cm__entrar::after {
    width: 24px;
    height: 24px;
    background-size: 13px;
  }
}

@container (max-width: 250px) {
  .wcad-cm.wcad-cm .wcad-cm__entrar::after {
    content: none;
  }

  /* rotulo inteiro numa linha: menor e, se ainda faltar espaco, reticencias -
     nunca quebrar a palavra no meio (o hifen de Cadastre-se e ponto de quebra) */
  .wcad-cm.wcad-cm .wcad-cm__entrar-rotulo {
    font-size: .875em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
