/* ==========================================================================
   WasSMM — style.css
   Tema escuro inspirado na Binance, adaptado para painel SMM.

   ONDE ESTE ARQUIVO VIVE
   Appearance -> Bootstrap templates -> CSS -> style.css
   É o 2º arquivo da cascata: vem DEPOIS do bootstrap.css (por isso vence ele)
   e ANTES de select2/datetimepicker (por isso aqueles são tratados no
   <style> do fim do layout.twig, não aqui).

   SUMÁRIO
   01. Tokens (cores, espaço, raio, sombra)
   02. Reset e base
   03. Tipografia
   04. Shell e containers
   05. Topbar
   06. Menu de conta (dropdown)
   07. Drawer mobile
   08. Barra inferior mobile
   09. Botões
   10. Cards
   11. Tabelas
   12. Formulários
   13. Alerts, badges e status
   14. Rodapé
   15. Utilitários
   16. Neutralização do Bootstrap 3
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   Um acento só. Amarelo é ação, verde/vermelho são estado, o resto é cinza.
   Essa disciplina é o que separa "premium" de "árvore de natal".
   ========================================================================== */

:root {
  /* --- Acento (azul WasSMM) -----------------------------------------
     AZUL MARINHO É COR DE FUNDO, NÃO DE AÇÃO. Um botão marinho sobre um
     fundo escuro simplesmente some. Por isso o marinho foi para as
     superfícies (bg/surface) e a AÇÃO ficou com um azul vivo, que se lê
     tanto no tema escuro quanto no claro.

     Repare no --wp-accent-ink: com o âmbar ele era quase preto, porque
     amarelo é claro. Com azul ele vira BRANCO. Errar isso deixa todo
     botão do site ilegível. */
  --wp-accent:        #2b7fff;
  --wp-accent-hover:  #4f96ff;
  --wp-accent-press:  #1c62d6;
  --wp-accent-ink:    #ffffff;   /* texto EM CIMA do azul */
  --wp-accent-soft:   rgba(43, 127, 255, .14);
  --wp-accent-line:   rgba(43, 127, 255, .38);

  /* --- Semânticos --- */
  --wp-up:            #21c57e;
  --wp-up-soft:       rgba(33, 197, 126, .12);
  --wp-down:          #f0475f;
  --wp-down-soft:     rgba(240, 71, 95, .12);
  --wp-info:          #38bdf8;   /* ciano: azul brigaria com a ação */
  --wp-info-soft:     rgba(56, 189, 248, .12);
  --wp-warn:          #e8933a;
  --wp-warn-soft:     rgba(232, 147, 58, .12);

  /* --- Geometria: raios pequenos. Nada de pílula em card. --- */
  --wp-r-sm: 4px;
  --wp-r:    6px;
  --wp-r-lg: 8px;

  /* --- Ritmo vertical --- */
  --wp-topbar-h: 64px;
  --wp-shell-w:  1440px;

  /* --- Movimento: curto. Animação lenta parece lenta, não elegante. --- */
  --wp-t: 130ms cubic-bezier(.4, 0, .2, 1);

  --wp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --wp-mono: "SF Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* --- ESCURO (padrão) --------------------------------------------------- */
:root,
[data-theme="dark"] {
  --wp-bg:          #070b14;   /* fundo da página */
  --wp-surface:     #0f1626;   /* topbar, cards */
  --wp-surface-2:   #151d30;   /* hover, linha zebrada, campo */
  --wp-surface-3:   #1d2840;   /* elevado: dropdown, modal */
  --wp-border:      #223050;   /* borda padrão */
  --wp-border-2:    #33456a;   /* borda em foco/hover */

  --wp-text:        #e8edf6;   /* texto principal */
  --wp-text-2:      #8b98b0;   /* rótulo, secundário */
  --wp-text-3:      #5c6b85;   /* placeholder, desabilitado */

  --wp-shadow:      0 8px 24px rgba(0, 0, 0, .5);
  --wp-shadow-sm:   0 2px 8px rgba(0, 0, 0, .4);
  --wp-overlay:     rgba(4, 8, 18, .74);
  color-scheme: dark;
}

/* --- CLARO (modelo E, aprovado) -----------------------------------------
   ALTO CONTRASTE, de proposito.

   Vinha o pedido de "deixar o claro mais vivo". O caminho obvio seria
   saturar o fundo - e e o errado: seu cliente passa o tempo nesta tela
   conferindo numero, e fundo forte cansa em minutos e faz o texto parecer
   menos nitido.

   O que ficou: fundo com um cinza-azulado de verdade (nao quase branco),
   bordas que se enxergam, texto quase preto e um azul mais fechado. Da
   vida por CONTRASTE, nao por saturacao - e e o que melhor se le no
   celular na rua, que e onde a maior parte dos pedidos acontece.

   O verde e o vermelho tambem escurecem: os tons do tema escuro sao claros
   e sobre branco quase somem. Mesma familia, so que fechada. --- */
[data-theme="light"] {
  --wp-bg:          #eef2f8;
  --wp-surface:     #ffffff;
  --wp-surface-2:   #e6ecf5;
  --wp-surface-3:   #ffffff;
  --wp-border:      #c8d4e6;
  --wp-border-2:    #94a8c6;

  --wp-text:        #050e1c;
  --wp-text-2:      #42546e;
  --wp-text-3:      #748aa8;

  /* o azul da acao fecha um tom: sobre branco, o #2b7fff do escuro clareia
     demais e o texto branco em cima dele perde contraste */
  --wp-accent:      #0b5ed7;
  --wp-accent-hover:#1f73e8;
  --wp-accent-press:#094ba9;
  --wp-accent-ink:  #ffffff;
  --wp-accent-soft: rgba(11, 94, 215, .12);
  --wp-accent-line: rgba(11, 94, 215, .40);

  /* estados fechados para o fundo claro */
  --wp-up:          #067a4a;
  --wp-up-soft:     rgba(6, 122, 74, .12);
  --wp-down:        #c92a3c;
  --wp-down-soft:   rgba(201, 42, 60, .12);
  --wp-info:        #0369a1;
  --wp-info-soft:   rgba(3, 105, 161, .12);
  --wp-warn:        #b45309;
  --wp-warn-soft:   rgba(180, 83, 9, .12);

  --wp-shadow:      0 8px 24px rgba(10, 26, 51, .13);
  --wp-shadow-sm:   0 2px 8px rgba(10, 26, 51, .09);
  --wp-overlay:     rgba(5, 14, 28, .48);
  color-scheme: light;
}


/* ==========================================================================
   02. RESET E BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--wp-bg);
  color: var(--wp-text);
  font-family: var(--wp-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* espaço para a barra inferior do mobile não cobrir conteúdo */
  padding-bottom: 0;
}

::selection {
  background: var(--wp-accent-soft);
  color: var(--wp-text);
}

/* Scrollbar discreta — detalhe pequeno, diferença grande */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--wp-border-2);
  border: 2px solid var(--wp-bg);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--wp-text-3); }

a {
  color: var(--wp-text);
  text-decoration: none;
  transition: color var(--wp-t);
}
a:hover, a:focus {
  color: var(--wp-accent);
  text-decoration: none;
}

/* Foco visível só para teclado — acessibilidade sem poluir o mouse */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--wp-accent);
  outline-offset: 2px;
  border-radius: var(--wp-r-sm);
}

img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--wp-border); margin: 20px 0; }


/* ==========================================================================
   03. TIPOGRAFIA
   Hierarquia por tamanho e peso, não por cor. Números sempre tabulares.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.wp-h1, .wp-h2, .wp-h3 {
  margin: 0 0 12px;
  color: var(--wp-text);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

h1, .wp-h1 { font-size: 28px; letter-spacing: -.02em; }
h2, .wp-h2 { font-size: 22px; }
h3, .wp-h3 { font-size: 18px; }
h4         { font-size: 16px; }
h5, h6     { font-size: 14px; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

small, .wp-small { font-size: 12px; }

/* Rótulo de dado: minúsculo, cinza, sem caixa alta exagerada */
.wp-label {
  display: block;
  margin-bottom: 4px;
  color: var(--wp-text-2);
  font-size: 12px;
  font-weight: 400;
}

/* Todo número que o usuário compara entre linhas usa isto */
.wp-num,
.wp-price,
.wp-table td,
.wp-balance-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.wp-mono { font-family: var(--wp-mono); font-size: 13px; }

.wp-muted   { color: var(--wp-text-2); }
.wp-dim     { color: var(--wp-text-3); }
.wp-up      { color: var(--wp-up); }
.wp-down    { color: var(--wp-down); }
.wp-accent  { color: var(--wp-accent); }


/* ==========================================================================
   04. SHELL E CONTAINERS
   ========================================================================== */

.wp-shell {
  width: 100%;
  max-width: var(--wp-shell-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* Área de conteúdo das páginas */
.wp-page {
  padding: 24px 0 48px;
  min-height: calc(100vh - var(--wp-topbar-h) - 120px);
}

.wp-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.wp-page-title { margin: 0; font-size: 22px; }
.wp-page-sub   { margin: 2px 0 0; color: var(--wp-text-2); font-size: 13px; }

/* Grades reutilizáveis */
.wp-grid      { display: grid; gap: 16px; }
.wp-grid-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wp-grid-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wp-grid-4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991px) {
  .wp-grid-3, .wp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .wp-grid-2, .wp-grid-3, .wp-grid-4 { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   05. TOPBAR
   ========================================================================== */

.wp-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--wp-topbar-h);
  background: var(--wp-surface);
  border-bottom: 1px solid var(--wp-border);
}

.wp-topbar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
}

/* --- Marca --- */
.wp-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: 20px;
  flex-shrink: 0;
  color: var(--wp-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.wp-brand:hover { color: var(--wp-text); }
.wp-brand img   { max-height: 30px; width: auto; display: block; }
.wp-brand-mark  { color: var(--wp-accent); display: block; flex-shrink: 0; }
.wp-brand-mark svg { display: block; }

/* --- Menu principal --- */
.wp-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 0 8px;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.wp-nav > li { display: block; }

.wp-nav > li > a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  height: 36px;
  border-radius: var(--wp-r-sm);
  color: var(--wp-text-2);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--wp-t), background var(--wp-t);
}
.wp-nav > li > a:hover { color: var(--wp-text); background: var(--wp-surface-2); }

/* Item ativo: texto branco + traço amarelo fino embaixo.
   Sem pílula amarela — o amarelo é reservado para AÇÃO. */
.wp-nav > li.active > a,
.wp-nav > li > a.active {
  position: relative;
  color: var(--wp-text);
  font-weight: 600;
}
.wp-nav > li.active > a::after,
.wp-nav > li > a.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: -15px;
  height: 2px;
  background: var(--wp-accent);
  border-radius: 2px 2px 0 0;
}
.wp-nav .navbar-icon,
.wp-nav > li > a > i { font-size: 13px; opacity: .85; }

/* --- Lado direito --- */
.wp-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Saldo: rótulo minúsculo em cima, valor forte embaixo */
.wp-balance {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px 0 4px;
  line-height: 1.15;
  text-align: right;
}
.wp-balance-label {
  color: var(--wp-text-2);
  font-size: 11px;
  letter-spacing: .02em;
}
.wp-balance-value {
  color: var(--wp-text);
  font-size: 15px;
  font-weight: 600;
}

/* --- Carteira: saldo + adicionar, numa peça só ------------------------
   Antes eram duas coisas soltas — o saldo em duas linhas alinhadas à
   direita e um botão amarelo largo do lado. O saldo era o único elemento
   do topo que não tinha altura própria, e por isso parecia torto no meio
   dos outros. Agora é um bloco de 38px como os demais.

   O amarelo ficou só no "+": adicionar saldo é ação secundária, e o botão
   largo competia com o "Fazer pedido" das telas. */
.wp-wallet {
  display: flex;
  align-items: stretch;
  height: 38px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  overflow: hidden;
  flex-shrink: 0;
}
.wp-wallet-val {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px;
  border: 0;
  background: transparent;
  line-height: 1.1;
  text-align: left;
  font-family: inherit;
  white-space: nowrap;
}
.wp-wallet-val small {
  display: block;
  color: var(--wp-text-2);
  font-size: 10px;
  letter-spacing: .02em;
}
.wp-wallet-val b {
  color: var(--wp-text);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* quando há mais de uma moeda, o valor vira botão do menu de moedas */
button.wp-wallet-val { cursor: pointer; }
button.wp-wallet-val:hover b { color: var(--wp-accent); }

.wp-wallet-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
  border: 0;
  border-left: 1px solid var(--wp-border);
  background: var(--wp-accent);
  color: var(--wp-accent-ink);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--wp-t);
}
.wp-wallet-add:hover { background: var(--wp-accent-hover); color: var(--wp-accent-ink); }
.wp-wallet-add:active { background: var(--wp-accent-press); }

/* divide "seu dinheiro" das ferramentas */
.wp-sep {
  width: 1px;
  height: 22px;
  margin: 0 8px;
  background: var(--wp-border);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .wp-wallet-val { padding: 0 10px; }
  .wp-wallet-val b { font-size: 13px; }
  .wp-sep { display: none; }
}

/* Botão-ícone da topbar */
.wp-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 0;
  padding: 0;
  border-radius: var(--wp-r-sm);
  background: transparent;
  color: var(--wp-text-2);
  font-size: 15px;
  cursor: pointer;
  transition: color var(--wp-t), background var(--wp-t);
}
.wp-icon-btn:hover { color: var(--wp-text); background: var(--wp-surface-2); }

/* Bolinha de notificação */
.wp-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wp-accent);
  border: 2px solid var(--wp-surface);
}

/* Alternador de tema: segmento sol/lua, igual ao da referência */
.wp-theme-switch {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-bg);
}
.wp-theme-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 26px;
  border: 0;
  padding: 0;
  border-radius: var(--wp-r-sm);
  background: transparent;
  color: var(--wp-text-3);
  font-size: 13px;
  cursor: pointer;
  transition: color var(--wp-t), background var(--wp-t);
}
.wp-theme-switch button:hover { color: var(--wp-text-2); }
[data-theme="dark"]  .wp-theme-switch button[data-set="dark"],
:root:not([data-theme="light"]) .wp-theme-switch button[data-set="dark"],
[data-theme="light"] .wp-theme-switch button[data-set="light"] {
  background: var(--wp-surface-2);
  color: var(--wp-text);
}

/* --- botao de tema do celular ---------------------------------------
   Um botao so, que alterna. Dois nao cabem na barra estreita, e por isso o
   segmento sol/lua e marcado como .wp-only-desktop.

   38px de altura de proposito: e a mesma da carteira do lado. Um icone
   solto de 34px ficaria flutuando no meio de blocos mais altos - com a
   moldura, a barra do topo passa a ter duas pecas do mesmo tamanho. */
.wp-theme-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-size: 15px;
  cursor: pointer;
  transition: border-color var(--wp-t), color var(--wp-t), background var(--wp-t);
}
.wp-theme-btn:hover {
  border-color: var(--wp-border-2);
  background: var(--wp-surface-3);
  color: var(--wp-text);
}
/* .wp-only-mobile do tema usa display:initial, que num botao flex nao
   serve - por isso a regra propria aqui */
@media (max-width: 767px) {
  .wp-theme-btn.wp-only-mobile { display: flex; }
}

/* Avatar */
.wp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--wp-surface-2);
  border: 1px solid var(--wp-border);
  color: var(--wp-text-2);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Botão hambúrguer (só mobile) */
.wp-burger { display: none; }

/* Seletor de moeda / idioma na topbar */
.wp-pill-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-sm);
  background: transparent;
  color: var(--wp-text-2);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--wp-t), color var(--wp-t);
}
.wp-pill-select:hover { border-color: var(--wp-border-2); color: var(--wp-text); }


/* ==========================================================================
   06. MENU DE CONTA (dropdown)
   ========================================================================== */

.wp-drop { position: relative; }

.wp-drop-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  padding: 6px;
  background: var(--wp-surface-3);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  box-shadow: var(--wp-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--wp-t), transform var(--wp-t), visibility var(--wp-t);
  z-index: 1040;
}
.wp-drop.is-open > .wp-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wp-drop-head {
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--wp-border);
  margin-bottom: 6px;
}
.wp-drop-name { font-size: 14px; font-weight: 600; }
.wp-drop-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
  color: var(--wp-text-2);
  font-size: 12px;
}

.wp-drop-menu a,
.wp-drop-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--wp-r-sm);
  background: transparent;
  color: var(--wp-text-2);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: color var(--wp-t), background var(--wp-t);
}
.wp-drop-menu a:hover,
.wp-drop-menu button:hover { background: var(--wp-surface-2); color: var(--wp-text); }
.wp-drop-menu a > i { width: 16px; text-align: center; font-size: 13px; opacity: .8; }
.wp-drop-sep { height: 1px; background: var(--wp-border); margin: 6px 0; }
.wp-drop-menu .wp-danger,
.wp-drop-menu .wp-danger:hover { color: var(--wp-down); }


/* ==========================================================================
   07. DRAWER MOBILE
   Tela cheia, como na referência — não meia gaveta.
   ========================================================================== */

.wp-drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--wp-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
  z-index: 1050;
}
.wp-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.wp-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--wp-surface);
  border-left: 1px solid var(--wp-border);
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(.32, .72, 0, 1);
  z-index: 1051;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.wp-drawer.is-open { transform: translateX(0); }

.wp-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}
.wp-drawer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 16px;
}
.wp-drawer-body { padding: 0 8px 24px; }

.wp-drawer-body a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 12px;
  border-radius: var(--wp-r);
  color: var(--wp-text);
  font-size: 15px;
  font-weight: 500;
}
.wp-drawer-body a:hover { background: var(--wp-surface-2); color: var(--wp-text); }
.wp-drawer-body a > i {
  width: 20px;
  text-align: center;
  color: var(--wp-text-2);
  font-size: 15px;
}

/* página em que o usuário está */
.wp-drawer-body a.is-active,
.wp-drawer-body a.is-active:hover {
  background: var(--wp-accent-soft);
  color: var(--wp-accent);
  font-weight: 600;
}
.wp-drawer-body a.is-active > i { color: var(--wp-accent); }

/* sair fica vermelho — convenção que todo mundo já lê sem pensar */
.wp-drawer-body a.is-danger,
.wp-drawer-body a.is-danger > i { color: var(--wp-down); }
.wp-drawer-body a.is-danger:hover { background: var(--wp-down-soft); color: var(--wp-down); }

/* rótulo de seção */
.wp-drawer-lab {
  padding: 4px 12px 8px;
  color: var(--wp-text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.wp-drawer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  color: var(--wp-text);
  font-size: 15px;
  font-weight: 500;
}
.wp-drawer-row > span { display: flex; align-items: center; gap: 14px; }
.wp-drawer-row > span > i { width: 20px; text-align: center; color: var(--wp-text-2); }
.wp-drawer-sep { height: 1px; background: var(--wp-border); margin: 8px 12px; }


/* ==========================================================================
   08. BARRA INFERIOR MOBILE
   ========================================================================== */

.wp-tabbar { display: none; }

@media (max-width: 767px) {
  .wp-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 58px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--wp-surface);
    border-top: 1px solid var(--wp-border);
    z-index: 1020;
  }
  .wp-tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--wp-text-3);
    font-size: 10px;
    font-weight: 500;
  }
  .wp-tabbar a > i { font-size: 17px; }
  .wp-tabbar a.active { color: var(--wp-accent); }

  /* Ação central em destaque */
  .wp-tabbar .wp-tab-main > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 28px;
    margin-bottom: 1px;
    border-radius: var(--wp-r);
    background: var(--wp-accent);
    color: var(--wp-accent-ink);
    font-size: 15px;
  }
  .wp-tabbar .wp-tab-main { color: var(--wp-text-2); }

  body.wp-has-tabbar { padding-bottom: 58px; }
}


/* ==========================================================================
   09. BOTÕES
   ========================================================================== */

.wp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--wp-t), border-color var(--wp-t), color var(--wp-t);
}
.wp-btn:hover { background: var(--wp-surface-3); color: var(--wp-text); }
.wp-btn:active { transform: translateY(.5px); }
.wp-btn:disabled,
.wp-btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Primário — o único amarelo da tela */
.wp-btn-primary {
  background: var(--wp-accent);
  color: var(--wp-accent-ink);
  font-weight: 600;
}
.wp-btn-primary:hover { background: var(--wp-accent-hover); color: var(--wp-accent-ink); }
.wp-btn-primary:active { background: var(--wp-accent-press); }

.wp-btn-ghost {
  background: transparent;
  border-color: var(--wp-border);
  color: var(--wp-text-2);
}
.wp-btn-ghost:hover {
  background: var(--wp-surface-2);
  border-color: var(--wp-border-2);
  color: var(--wp-text);
}

.wp-btn-up   { background: var(--wp-up);   color: #04150d; font-weight: 600; }
.wp-btn-down { background: var(--wp-down); color: #fff;    font-weight: 600; }

.wp-btn-sm  { height: 30px; padding: 0 11px; font-size: 13px; }
.wp-btn-lg  { height: 46px; padding: 0 22px; font-size: 15px; }
.wp-btn-block { display: flex; width: 100%; }


/* ==========================================================================
   10. CARDS
   ========================================================================== */

.wp-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
}
.wp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--wp-border);
}
.wp-card-title { margin: 0; font-size: 15px; font-weight: 600; }
.wp-card-body  { padding: 18px; }
.wp-card-body > :last-child { margin-bottom: 0; }
.wp-card-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--wp-border);
  background: var(--wp-surface-2);
  border-radius: 0 0 var(--wp-r-lg) var(--wp-r-lg);
}

/* Bloco de estatística (saldo, gasto, pedidos) */
.wp-stat {
  padding: 16px 18px;
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
}
.wp-stat-label {
  display: flex; align-items: center; gap: 6px;
  color: var(--wp-text-2);
  font-size: 12px;
}
.wp-stat-value {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.wp-stat-delta { margin-top: 2px; font-size: 12px; }


/* ==========================================================================
   11. TABELAS
   Densas. É aqui que o painel ganha cara de plataforma de verdade.
   ========================================================================== */

.wp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.wp-table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--wp-border);
  color: var(--wp-text-2);
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}
.wp-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--wp-border);
  color: var(--wp-text);
  vertical-align: middle;
}
.wp-table tbody tr { transition: background var(--wp-t); }
.wp-table tbody tr:hover { background: var(--wp-surface-2); }
.wp-table tbody tr:last-child td { border-bottom: 0; }

/* Números à direita — regra que quase todo painel SMM erra */
.wp-table .wp-t-num { text-align: right; font-variant-numeric: tabular-nums; }
.wp-table .wp-t-id  { color: var(--wp-text-2); font-family: var(--wp-mono); font-size: 12px; }


/* ==========================================================================
   12. FORMULÁRIOS
   ========================================================================== */

.wp-field { margin-bottom: 16px; }

.wp-input,
.wp-select,
.wp-textarea {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color var(--wp-t), background var(--wp-t);
  appearance: none;
}
.wp-textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.55; resize: vertical; }

.wp-input::placeholder,
.wp-textarea::placeholder { color: var(--wp-text-3); }

.wp-input:hover,
.wp-select:hover,
.wp-textarea:hover { border-color: var(--wp-border-2); }

.wp-input:focus,
.wp-select:focus,
.wp-textarea:focus {
  outline: none;
  border-color: var(--wp-accent);
  background: var(--wp-surface);
}

.wp-select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b98b0' d='M6 8.2 1.8 4l.9-.9L6 6.4l3.3-3.3.9.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.wp-hint  { margin-top: 5px; color: var(--wp-text-2); font-size: 12px; }
.wp-error { margin-top: 5px; color: var(--wp-down); font-size: 12px; }
.wp-input.has-error, .wp-select.has-error { border-color: var(--wp-down); }

/* Campo com sufixo (ex.: total ao lado da quantidade) */
.wp-input-group { display: flex; align-items: stretch; }
.wp-input-group .wp-input { border-radius: var(--wp-r) 0 0 var(--wp-r); }
.wp-input-group .wp-input-addon {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--wp-border);
  border-left: 0;
  border-radius: 0 var(--wp-r) var(--wp-r) 0;
  background: var(--wp-surface-3);
  color: var(--wp-text-2);
  font-size: 13px;
  white-space: nowrap;
}


/* ==========================================================================
   13. ALERTS, BADGES E STATUS
   ========================================================================== */

.wp-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--wp-border);
  border-left-width: 3px;
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  font-size: 13px;
}
.wp-alert > i { margin-top: 1px; font-size: 14px; }
.wp-alert-success { border-left-color: var(--wp-up);   background: var(--wp-up-soft); }
.wp-alert-success > i { color: var(--wp-up); }
.wp-alert-danger  { border-left-color: var(--wp-down); background: var(--wp-down-soft); }
.wp-alert-danger > i  { color: var(--wp-down); }
.wp-alert-info    { border-left-color: var(--wp-info); background: var(--wp-info-soft); }
.wp-alert-info > i    { color: var(--wp-info); }
.wp-alert-warn    { border-left-color: var(--wp-warn); background: var(--wp-warn-soft); }
.wp-alert-warn > i    { color: var(--wp-warn); }

/* Selo de status — cor SÓ com significado */
.wp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--wp-r-sm);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.wp-badge::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.wp-badge-success { background: var(--wp-up-soft);   color: var(--wp-up); }
.wp-badge-danger  { background: var(--wp-down-soft); color: var(--wp-down); }
.wp-badge-warn    { background: var(--wp-warn-soft); color: var(--wp-warn); }
.wp-badge-info    { background: var(--wp-info-soft); color: var(--wp-info); }
.wp-badge-plain::before { display: none; }


/* ==========================================================================
   14. RODAPÉ
   ========================================================================== */

/* Uma linha só. Sem selo de "sistema operacional", sem enfeite. */
.wp-foot { border-top: 1px solid var(--wp-border); }
.wp-foot-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  height: 56px;
  color: var(--wp-text-3);
  font-size: 12px;
}
.wp-foot-inner a { color: var(--wp-text-3); }
.wp-foot-inner a:hover { color: var(--wp-text-2); }
.wp-foot-right { margin-left: auto; display: flex; gap: 18px; }

@media (max-width: 767px) {
  .wp-foot-inner { height: auto; padding: 16px 0 22px; gap: 14px; }
  .wp-foot-right { margin-left: 0; }
}


/* ==========================================================================
   15. UTILITÁRIOS
   ========================================================================== */

.wp-row      { display: flex; align-items: center; gap: 10px; }
.wp-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wp-wrap     { flex-wrap: wrap; }
.wp-gap-sm   { gap: 6px; }
.wp-gap-lg   { gap: 20px; }
.wp-mt-0  { margin-top: 0; }
.wp-mt    { margin-top: 12px; }
.wp-mt-lg { margin-top: 24px; }
.wp-mb-0  { margin-bottom: 0; }
.wp-mb    { margin-bottom: 12px; }
.wp-mb-lg { margin-bottom: 24px; }
.wp-hide  { display: none !important; }
.wp-only-mobile  { display: none; }
.wp-only-desktop { display: initial; }

@media (max-width: 767px) {
  .wp-shell { padding: 0 16px; }
  .wp-page  { padding: 16px 0 32px; }
  .wp-only-mobile  { display: initial; }
  .wp-only-desktop { display: none !important; }
  h1, .wp-h1 { font-size: 22px; }
  h2, .wp-h2 { font-size: 18px; }
}


/* ==========================================================================
   16. NEUTRALIZAÇÃO DO BOOTSTRAP 3
   O bootstrap.css é carregado antes deste arquivo. As páginas do Perfect Panel
   usam as classes dele (.well, .btn, .form-control, .table, .container...).
   Aqui elas são realinhadas ao tema, para que qualquer página ainda não
   reescrita já apareça correta em vez de branca.
   ========================================================================== */

body { background: var(--wp-bg); color: var(--wp-text); }

.container, .container-fluid { max-width: var(--wp-shell-w); }

/* .well é o "card" do Bootstrap 3 — está em quase todo template do painel */
.well {
  padding: 18px;
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  box-shadow: none;
}

.panel {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  box-shadow: none;
}
.panel-heading {
  background: transparent;
  border-bottom: 1px solid var(--wp-border);
  color: var(--wp-text);
}
.panel-body { color: var(--wp-text); }

/* Botões do Bootstrap */
.btn {
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-shadow: none;
  box-shadow: none;
  transition: background var(--wp-t), border-color var(--wp-t), color var(--wp-t);
}
.btn:hover, .btn:focus { background: var(--wp-surface-3); color: var(--wp-text); }

.btn-primary,
.btn-primary:focus {
  background: var(--wp-accent);
  border-color: transparent;
  color: var(--wp-accent-ink);
  font-weight: 600;
}
.btn-primary:hover  { background: var(--wp-accent-hover); border-color: transparent; color: var(--wp-accent-ink); }
.btn-primary:active,
.btn-primary.active { background: var(--wp-accent-press); border-color: transparent; color: var(--wp-accent-ink); }

.btn-default {
  background: transparent;
  border-color: var(--wp-border);
  color: var(--wp-text-2);
}
.btn-default:hover { background: var(--wp-surface-2); border-color: var(--wp-border-2); color: var(--wp-text); }

.btn-success { background: var(--wp-up);   border-color: transparent; color: #04150d; font-weight: 600; }
.btn-danger  { background: var(--wp-down); border-color: transparent; color: #fff;    font-weight: 600; }
.btn-info    { background: var(--wp-info); border-color: transparent; color: #fff;    font-weight: 600; }
.btn-link    { background: transparent; color: var(--wp-accent); border: 0; }
.btn-sm, .btn-xs { height: 30px; padding: 0 11px; font-size: 13px; }
.btn-lg          { height: 46px; padding: 0 22px; font-size: 15px; }
.btn-block       { display: flex; width: 100%; }

/* Formulários */
.form-control {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-size: 14px;
  box-shadow: none;
  transition: border-color var(--wp-t), background var(--wp-t);
}
.form-control:focus {
  border-color: var(--wp-accent);
  background: var(--wp-surface);
  box-shadow: none;
  outline: none;
}
.form-control::placeholder { color: var(--wp-text-3); }
textarea.form-control { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.55; }
.control-label, label {
  color: var(--wp-text-2);
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 4px;
}
.form-group { margin-bottom: 16px; }
.input-group-addon {
  background: var(--wp-surface-3);
  border-color: var(--wp-border);
  color: var(--wp-text-2);
  border-radius: var(--wp-r);
}
.help-block { color: var(--wp-text-2); font-size: 12px; }

/* Tabelas */
.table { color: var(--wp-text); font-size: 13px; margin-bottom: 0; }
.table > thead > tr > th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--wp-border);
  color: var(--wp-text-2);
  font-size: 12px;
  font-weight: 400;
}
.table > tbody > tr > td {
  padding: 12px 14px;
  border-top: 1px solid var(--wp-border);
  vertical-align: middle;
}
.table-hover > tbody > tr:hover { background: var(--wp-surface-2); }
.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--wp-border); }

/* Alerts */
.alert {
  padding: 12px 14px;
  border: 1px solid var(--wp-border);
  border-left-width: 3px;
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-size: 13px;
}
.alert-success { border-left-color: var(--wp-up);   background: var(--wp-up-soft);   color: var(--wp-text); }
.alert-danger  { border-left-color: var(--wp-down); background: var(--wp-down-soft); color: var(--wp-text); }
.alert-info    { border-left-color: var(--wp-info); background: var(--wp-info-soft); color: var(--wp-text); }
.alert-warning { border-left-color: var(--wp-warn); background: var(--wp-warn-soft); color: var(--wp-text); }
.alert .close  { color: var(--wp-text-2); opacity: .7; text-shadow: none; font-weight: 400; }
.alert .close:hover { color: var(--wp-text); opacity: 1; }

/* Badges e labels */
.badge {
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  border-radius: var(--wp-r-sm);
  font-weight: 500;
  padding: 4px 8px;
}
.label-success { background: var(--wp-up); }
.label-danger  { background: var(--wp-down); }
.label-info    { background: var(--wp-info); }
.label-warning { background: var(--wp-warn); }

/* Modais */
.modal-content {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  box-shadow: var(--wp-shadow);
}
.modal-header, .modal-footer { border-color: var(--wp-border); }
.modal-title { color: var(--wp-text); font-size: 16px; font-weight: 600; }
.modal-backdrop.in { opacity: .72; background: #05070a; }

/* ==========================================================================
   MODAIS — inclusive os de pagamento

   O conteúdo destes modais é montado pelo painel e vem quase sem classe
   nenhuma: um textarea com o código do PIX, uma imagem com o QR, um botão
   de copiar. Por isso aqui se mira a TAG, e não a classe — senão o campo
   do código aparece branco no meio do tema escuro, que foi o que aconteceu.
   ========================================================================== */

/* o modal fica no meio da tela, não colado no topo */
.modal.in { display: flex !important; align-items: center; }
.modal-dialog {
  width: 100%;
  max-width: 460px;
  margin: 20px auto;
}
.modal.in .modal-dialog { animation: wpModal 240ms cubic-bezier(.32, .72, 0, 1); }
@keyframes wpModal {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.modal-content { padding: 0; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--wp-border);
}
.modal-header .close {
  order: 2;
  width: 30px; height: 30px;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--wp-r-sm);
  font-size: 20px; font-weight: 400;
  opacity: 1;
}
.modal-header .close:hover { background: var(--wp-surface-2); }
.modal-body { padding: 22px; }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--wp-border);
  background: var(--wp-surface-2);
  border-radius: 0 0 var(--wp-r-lg) var(--wp-r-lg);
}
.modal-footer .btn { margin: 0; }

/* --- campos dentro do modal --- */
.modal-body textarea,
.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body input[type="email"],
.modal-body select {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-family: var(--wp-mono);
  font-size: 13px;
  line-height: 1.55;
  word-break: break-all;
  box-shadow: none;
  resize: vertical;
}
.modal-body textarea { min-height: 96px; }
.modal-body textarea:focus,
.modal-body input:focus { outline: none; border-color: var(--wp-accent); }
.modal-body textarea[readonly],
.modal-body input[readonly] { color: var(--wp-text-2); cursor: text; }

/* --- QR ---
   Fundo branco de propósito: QR escuro sobre fundo escuro muitos celulares
   não conseguem ler. Aqui o funcional ganha do visual. */
.modal-body img {
  display: block;
  max-width: 230px;
  width: 100%;
  height: auto;
  margin: 0 auto 18px;
  padding: 12px;
  background: #fff;
  border-radius: var(--wp-r-lg);
}

/* --- botões dentro do corpo do modal ---
   O botão de copiar do painel costuma vir só com o ícone. Aqui ele ganha
   largura e altura de verdade, para virar alvo fácil no celular. */
.modal-body .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-width: 44px;
  padding: 0 16px;
  margin-top: 12px;
  border-radius: var(--wp-r);
  font-size: 14px;
  font-weight: 600;
}
.modal-body .btn-primary { width: 100%; }

.modal-body p,
.modal-body div:not([class]) { color: var(--wp-text-2); font-size: 13.5px; line-height: 1.6; }
.modal-body .alert { margin-bottom: 16px; }
.modal-body label,
.modal-body .control-label {
  display: block;
  margin-bottom: 7px;
  color: var(--wp-text-2);
  font-size: 13px;
}

@media (max-width: 575px) {
  .modal-dialog { max-width: none; margin: 12px; }
  .modal-header { padding: 16px 18px; }
  .modal-body   { padding: 18px; }
  .modal-footer { padding: 14px 18px; }
  .modal-footer .btn { flex: 1; }
  .modal-body img { max-width: 200px; }
}
.close { color: var(--wp-text-2); opacity: .7; text-shadow: none; }
.close:hover { color: var(--wp-text); opacity: 1; }

/* Abas */
.nav-tabs { border-bottom: 1px solid var(--wp-border); }
.nav-tabs > li > a {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--wp-text-2);
  font-size: 14px;
  padding: 10px 14px;
  margin-right: 0;
}
.nav-tabs > li > a:hover { background: transparent; color: var(--wp-text); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--wp-accent);
  color: var(--wp-text);
  font-weight: 600;
}

/* Paginação */
.pagination > li > a,
.pagination > li > span {
  background: var(--wp-surface);
  border-color: var(--wp-border);
  color: var(--wp-text-2);
}
.pagination > li > a:hover { background: var(--wp-surface-2); border-color: var(--wp-border-2); color: var(--wp-text); }
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
  background: var(--wp-accent);
  border-color: var(--wp-accent);
  color: var(--wp-accent-ink);
}

/* Barra de progresso */
.progress { background: var(--wp-surface-2); border-radius: var(--wp-r-sm); box-shadow: none; height: 6px; }
.progress-bar { background: var(--wp-accent); box-shadow: none; }

/* A navbar antiga do Bootstrap não é usada pelo tema — some com ela caso
   algum template ainda a renderize. */
.navbar-default { background: var(--wp-surface); border-color: var(--wp-border); }
.navbar-default .navbar-nav > li > a { color: var(--wp-text-2); }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li > a:hover { background: var(--wp-surface-2); color: var(--wp-text); }


/* ==========================================================================
   17. AUTENTICAÇÃO  (signin, signup, resetpassword, setnewpassword, 2fa)

   Escrito celular-primeiro. A base é o desenho "ancorado": marca em
   destaque, tudo centralizado, redes empurradas para o fim da tela.
   A partir de 768px vira o cartão de contorno marcado, e a partir de
   992px entra o gráfico de crescimento no fundo.
   ========================================================================== */

.au-page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--wp-topbar-h) - 96px);
  padding: 34px 20px 24px;
  overflow: hidden;
}

/* brilho âmbar descendo do topo */
.au-glow {
  position: absolute; left: 0; right: 0; top: 0; height: 300px;
  z-index: 1; pointer-events: none;
  background: radial-gradient(460px 260px at 50% -6%, rgba(43,127,255,.20), transparent 70%);
}

/* --- marca em destaque (só no celular) --- */
.au-hero { text-align: center; margin-bottom: 26px; position: relative; z-index: 3; }
.au-hero-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--wp-surface-2);
  border: 1px solid var(--wp-border);
  color: var(--wp-accent);
}

/* --- bloco central --- */
.au-card {
  position: relative; z-index: 3;
  width: 100%; max-width: 372px;
  margin: 0 auto;
}
.au-title { font-size: 26px; font-weight: 600; letter-spacing: -.025em; margin: 0 0 6px; text-align: center; }

/* --- O NOME DA MARCA NO TÍTULO ----------------------------------------
   O cartão que leva .is-marca troca o "Entrar" pelo nome da WasSMM,
   escrito nos dois tons da logo, com a metade âmbar em degradê.

   Centralizado de propósito: como é a marca e não uma instrução, ele lê
   como logo, e no celular forma um conjunto só com o ícone que já fica
   acima do cartão. O subtítulo acompanha — senão um fica no meio e o
   outro na esquerda.

   O @supports NÃO é enfeite. Degradê em texto funciona pintando um fundo
   e recortando as letras nele, o que obriga a deixar a cor TRANSPARENTE.
   Onde esse recorte não existir, o nome do site SUMIRIA da tela. Fora do
   bloco ele fica âmbar chapado, que é o pior caso aceitável. */
.au-card.is-marca .au-title,
.au-card.is-marca .au-sub { text-align: center; }

.au-card.is-marca .au-title {
  font-weight: 700;
  letter-spacing: -.035em;
}

.au-title .au-mark { color: var(--wp-accent); }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .au-title .au-mark {
    background: linear-gradient(100deg, #7fb4ff 0%, #4f96ff 30%, #2b7fff 65%, #1c62d6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* No tema claro o degradê desce de tom: o amarelo do escuro é claro
   demais sobre o cartão branco e o nome fica difícil de ler. Mesma
   família, só que puxada para o ouro. */
[data-theme="light"] .au-title .au-mark { color: #094ba9; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  [data-theme="light"] .au-title .au-mark {
    background: linear-gradient(100deg, #2b7fff 0%, #0b5ed7 45%, #073f8f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.au-sub   { color: var(--wp-text-2); font-size: 14px; margin: 0 0 24px; text-align: center; }

.au-field   { margin-bottom: 16px; }
.au-lab-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.au-lab     { color: var(--wp-text-2); font-size: 13px; margin: 0; font-weight: 400; }
.au-forgot  { font-size: 13px; color: var(--wp-text-2); }
.au-forgot:hover { color: var(--wp-accent); }

/* 16px na fonte: abaixo disso o iOS dá zoom ao focar e desalinha a tela */
.au-input {
  display: block; width: 100%; height: 50px; padding: 0 15px;
  border: 1px solid var(--wp-border); border-radius: 8px;
  background: var(--wp-surface-2); color: var(--wp-text);
  font-family: inherit; font-size: 16px;
  transition: border-color var(--wp-t), background var(--wp-t);
}
.au-input::placeholder { color: var(--wp-text-3); }
.au-input:hover { border-color: var(--wp-border-2); }
.au-input:focus { outline: none; border-color: var(--wp-accent); background: var(--wp-surface); box-shadow: none; }

.au-pass { position: relative; }
.au-pass .au-input { padding-right: 48px; }
.au-eye {
  position: absolute; right: 7px; top: 7px;
  width: 36px; height: 36px;
  border: 0; border-radius: var(--wp-r-sm);
  background: transparent; color: var(--wp-text-3);
  font-size: 15px; cursor: pointer;
  transition: color var(--wp-t), background var(--wp-t);
}
.au-eye:hover { color: var(--wp-text-2); background: var(--wp-surface-3); }

.au-submit {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px; margin-top: 8px;
  border: 0; border-radius: 8px;
  background: var(--wp-accent); color: var(--wp-accent-ink);
  font-family: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer;
  transition: background var(--wp-t);
}
.au-submit:hover  { background: var(--wp-accent-hover); color: var(--wp-accent-ink); }
.au-submit:active { background: var(--wp-accent-press); }

.au-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--wp-text-3); font-size: 12px; }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--wp-border); }

/* O botão do Google é um widget dele — não dá para estilizar por dentro.
   Aqui só reservamos o espaço e centralizamos. */
.au-google { display: flex; justify-content: center; min-height: 44px; }
.au-google > div { max-width: 100%; }

.au-foot { margin-top: 22px; text-align: center; font-size: 14px; color: var(--wp-text-2); }
.au-foot a { color: var(--wp-accent); font-weight: 500; }
.au-foot a:hover { color: var(--wp-accent-hover); }

/* empurra as redes para a base da tela no celular */
.au-spacer { flex: 1; min-height: 18px; }

.au-nets { position: relative; z-index: 3; margin-top: 18px; }
.au-nets-lab {
  color: var(--wp-text-3); font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase;
  text-align: center; margin-bottom: 12px;
}
.au-nets-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
.au-nets-row i { color: var(--wp-text-3); font-size: 17px; transition: color var(--wp-t); }
.au-nets-row i:hover { color: var(--wp-text-2); }

/* --- gráfico de crescimento no fundo ---------------------------------- */
.au-chart {
  position: absolute;
  width: 1500px; height: 420px;
  right: -420px; bottom: -170px;   /* no celular aparece só o trecho íngreme */
  z-index: 0; pointer-events: none;
  opacity: .22;
}
.au-chart svg { width: 100%; height: 100%; display: block; }

/* nós de rede social sobre a linha — só no PC */
.au-node {
  position: absolute; transform: translate(-50%, -50%);
  display: none;
  width: 40px; height: 40px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  color: var(--wp-text-2);
  font-size: 16px;
  box-shadow: 0 0 0 6px rgba(43,127,255,.07);
}
.au-node.is-top {
  color: var(--wp-accent);
  border-color: var(--wp-accent-line);
  box-shadow: 0 0 0 7px rgba(43,127,255,.12);
}

/* texto livre que o admin pode publicar abaixo do formulário */
.au-text {
  position: relative; z-index: 3;
  max-width: 640px; margin: 28px auto 0;
  color: var(--wp-text-2); font-size: 14px;
}

/* --- peças das telas menores (reset de senha, 2FA, confirmar e-mail) --- */

/* ícone de estado no topo do cartão */
.au-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  margin: 0 auto 18px;
  border-radius: 12px;
  background: var(--wp-accent-soft);
  border: 1px solid var(--wp-accent-line);
  color: var(--wp-accent);
  font-size: 20px;
}

/* texto de apoio abaixo do título */
.au-note {
  color: var(--wp-text-2);
  font-size: 14px; line-height: 1.6;
  text-align: center;
  margin: 0 0 24px;
}
.au-note strong { color: var(--wp-text); font-weight: 600; }

/* aceite dos termos */
.au-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 2px 0 18px;
  color: var(--wp-text-2); font-size: 13px; line-height: 1.5;
}
.au-check input[type="checkbox"] {
  width: 17px; height: 17px; margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--wp-accent);
  cursor: pointer;
}
.au-check a { color: var(--wp-accent); }
.au-check a:hover { color: var(--wp-accent-hover); }

/* campo travado (usuário no reset de senha) */
.au-input[readonly],
.au-input[disabled] {
  background: var(--wp-surface-3);
  color: var(--wp-text-2);
  cursor: not-allowed;
}

/* código de verificação em duas etapas */
.au-code {
  text-align: center;
  font-family: var(--wp-mono);
  font-size: 20px; font-weight: 600;
  letter-spacing: .35em;
  text-indent: .35em;   /* compensa o espaço extra à direita */
}

/* linha de botões */
.au-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
}

/* voltar para o login */
.au-back {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 22px;
  color: var(--wp-text-2); font-size: 14px;
}
.au-back:hover { color: var(--wp-accent); }

@media (min-width: 768px) {
  .au-card-icon { margin-left: 0; }
  .au-note      { text-align: left; }
  .au-actions   { justify-content: flex-start; }
}


/* --- TABLET E PC: o formulário vira cartão --------------------------- */
@media (min-width: 768px) {
  .au-page {
    align-items: center;
    justify-content: center;
    padding: 48px 24px 56px;
    min-height: calc(100vh - var(--wp-topbar-h) - 56px);
  }
  .au-glow { background: radial-gradient(820px 400px at 50% -8%, rgba(43,127,255,.10), transparent 66%); }
  .au-hero, .au-spacer { display: none; }

  .au-card {
    max-width: 432px;
    padding: 40px 38px 36px;
    background: var(--wp-surface);
    border: 1px solid var(--wp-border-2);
    border-radius: 10px;
    box-shadow: var(--wp-shadow);
  }
  .au-title { font-size: 32px; text-align: left; }
  .au-sub   { text-align: left; margin-bottom: 30px; }

  .au-input  { height: 46px; font-size: 15px; }
  .au-eye    { top: 5px; }
  .au-submit { height: 48px; font-size: 15px; }

  .au-nets {
    width: 100%; max-width: 432px;
    margin: 26px auto 0;
    padding-top: 0;
  }
}

/* --- PC: entra o gráfico com os nós das redes ------------------------- */
@media (min-width: 992px) {
  .au-chart {
    left: 50%; right: auto; bottom: -26px;
    transform: translateX(-50%);
    opacity: .42;
  }
  .au-node { display: flex; }
}


/* ==========================================================================
   18. NOVO PEDIDO

   ATENÇÃO — por que aqui se estiliza .form-group / .form-control:
   o <div id="fields"> é preenchido pelo JavaScript do Perfect Panel com o
   HTML dele (link, quantidade, comentários...), sempre com as classes do
   Bootstrap. Como esse HTML não passa por nós, é ele quem manda: as regras
   abaixo dão a aparência do tema às classes do Bootstrap DENTRO da página,
   e assim os campos injetados nascem iguais aos nossos.
   Nunca trocar por classes próprias aqui — quebraria a metade injetada.
   ========================================================================== */

.no-page { padding: 22px 0 48px; }

.no-head { margin-bottom: 20px; }
.no-title { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.no-sub   { margin: 3px 0 0; color: var(--wp-text-2); font-size: 13px; }

/* --- cards do topo -----------------------------------------------------
   Só o de saldo tem dado vivo (vem do painel). Os outros são números
   escritos no template — o comentário no neworder.twig marca onde editar. */
/* auto-fit: o número de cartões muda conforme o painel entrega os dados
   (o de saldo saiu, o de total de pedidos só entra se a variável existir) */
.no-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.no-stat {
  padding: 13px 15px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  background: var(--wp-surface);
}
.no-stat small {
  display: block;
  margin-bottom: 4px;
  color: var(--wp-text-2);
  font-size: 11px;
}
.no-stat b {
  font-size: 18px; font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
/* Cada cartão com a cor do que ele significa. As classes são explícitas
   (e não :nth-child) porque a quantidade de cartões varia: o de total de
   pedidos só existe se o painel entregar a variável. */
.no-stat-main { border-color: var(--wp-accent-line); background: var(--wp-accent-soft); }
.no-stat-main b { color: var(--wp-accent); }
.no-stat-info { border-color: rgba(56, 189, 248, .3); background: var(--wp-info-soft); }
.no-stat-info b { color: var(--wp-info); }
.no-stat-up   { border-color: rgba(33, 197, 126, .3); background: var(--wp-up-soft); }
.no-stat-up b { color: var(--wp-up); }

@media (max-width: 575px) {
  .no-stats { gap: 8px; margin-bottom: 14px; }
  .no-stat  { padding: 10px 11px; }
  .no-stat small { font-size: 10px; }
  .no-stat b { font-size: 15px; }
}

/* --- rótulo de etapa ---------------------------------------------------
   Legenda da seção, não título: cinza e pequeno, para não competir com os
   campos que o cliente realmente vai preencher. */
.no-step {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 9px;
}
.no-step i {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--wp-accent);
  color: var(--wp-accent-ink);
  font-size: 10px; font-weight: 700; font-style: normal; line-height: 1;
}
.no-step span {
  color: var(--wp-text-2);
  font-size: 12px; font-weight: 600;
  letter-spacing: .02em;
}

/* --- as duas colunas ---------------------------------------------------
   No celular a ordem tem de ser: escolher o serviço → ler a descrição →
   informar link e quantidade → fechar. No PC vira duas colunas.

   O `display: contents` dissolve os dois invólucros no celular, deixando os
   quatro blocos como filhos diretos do flex — só assim o `order` consegue
   intercalar a descrição (que no PC mora na coluna da direita) entre os
   blocos da coluna da esquerda. */
.no-grid { display: flex; flex-direction: column; gap: 12px; }
.no-col-main, .no-col-side { display: contents; }
.no-b1 { order: 1; }
.no-b2 { order: 2; }
.no-b3 { order: 3; }
.no-b4 { order: 4; }

@media (min-width: 992px) {
  .no-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
  }
  .no-col-main, .no-col-side { display: block; }
  .no-col-side { position: sticky; top: calc(var(--wp-topbar-h) + 20px); }
  .no-b1, .no-b2, .no-b3, .no-b4 { order: 0; }
  /* no PC as colunas já organizam a leitura — o número vira ruído */
  .no-step i { display: none; }
}

.no-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  padding: 20px;
}
.no-card + .no-card { margin-top: 16px; }

.no-card-title {
  margin: 0 0 16px;
  font-size: 15px; font-weight: 600;
}

/* --- campos (Bootstrap, estilizados) --- */
.no-page .form-group { margin-bottom: 16px; }
.no-page .form-group:last-child { margin-bottom: 0; }

.no-page .control-label,
.no-page label.control-label {
  display: block;
  margin-bottom: 7px;
  color: var(--wp-text-2);
  font-size: 13px; font-weight: 400;
}

.no-page .form-control {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-size: 15px;
  box-shadow: none;
}
.no-page .form-control:hover { border-color: var(--wp-border-2); }
.no-page .form-control:focus {
  border-color: var(--wp-accent);
  background: var(--wp-surface);
  box-shadow: none;
}
.no-page textarea.form-control { height: auto; min-height: 96px; padding: 11px 14px; line-height: 1.55; }
.no-page .help-block { margin-top: 6px; color: var(--wp-text-2); font-size: 12px; }

/* --- busca de serviços --- */
.no-search .form-control { padding-left: 38px; }
.no-search button .fas { color: var(--wp-text-3); font-size: 14px; }

/* --- descrição do serviço ---------------------------------------------
   Nada de rolagem dentro da caixa: no celular ela some visualmente e o
   cliente acha que o texto foi cortado. Aqui o texto é recolhido com um
   esmaecido no fim e um "ver mais" que abre tudo. */
.no-desc .panel-body {
  position: relative;
  padding: 14px 16px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-size: 13px; line-height: 1.6;
  max-height: 230px;
  overflow: hidden;
}
.no-desc .panel-body a { color: var(--wp-accent); }
.no-desc .panel-body img { max-width: 100%; }

/* esmaecido só quando há texto escondido */
.no-desc.has-more .panel-body::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 58px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--wp-surface-2));
  pointer-events: none;
}
.no-desc.is-open .panel-body { max-height: none; }
.no-desc.is-open .panel-body::after { display: none; }

.no-desc-more {
  display: none;
  align-items: center; gap: 6px;
  margin-top: 9px; padding: 0;
  border: 0; background: transparent;
  color: var(--wp-accent);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.no-desc-more:hover { color: var(--wp-accent-hover); }
.no-desc-more i { font-size: 11px; transition: transform var(--wp-t); }
.no-desc.has-more .no-desc-more { display: inline-flex; }
.no-desc.is-open .no-desc-more i { transform: rotate(180deg); }

/* --- total --- */
.no-total {
  padding: 16px 18px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  background: var(--wp-surface-2);
}
.no-total .control-label { margin-bottom: 2px; font-size: 12px; }
/* o #charge é um input readonly: vira só o número, sem cara de campo */
.no-page .no-total .form-control {
  height: auto; padding: 0;
  border: 0; background: transparent;
  color: var(--wp-text);
  font-size: 26px; font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.no-page .no-total .form-control:focus { border: 0; background: transparent; }

/* --- saldo e troco --- */
.no-balance {
  margin: 14px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface);
}
.no-bal-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13px;
}
.no-bal-row + .no-bal-row { margin-top: 7px; }
.no-bal-row span { color: var(--wp-text-2); }
.no-bal-row b {
  color: var(--wp-text); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.no-bal-row.is-after { padding-top: 7px; border-top: 1px solid var(--wp-border); }
.no-bal-row.is-after b { color: var(--wp-up); }
.no-bal-row.is-short b { color: var(--wp-down); }

.no-bal-warn {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; padding: 9px 11px;
  border-radius: var(--wp-r-sm);
  background: var(--wp-down-soft);
  color: var(--wp-down);
  font-size: 12px; line-height: 1.45;
}

/* --- aceite dos termos --- */
.no-page .terms,
.no-terms {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px;
  color: var(--wp-text-2);
  font-size: 13px; font-weight: 400; line-height: 1.5;
}
.no-page .terms input[type="checkbox"],
.no-terms input[type="checkbox"] {
  width: 17px; height: 17px; margin: 1px 0 0;
  flex-shrink: 0; accent-color: var(--wp-accent); cursor: pointer;
}
.no-page .terms a, .no-terms a { color: var(--wp-accent); }

/* --- botão de enviar --- */
.no-page .btn-primary[type="submit"],
.no-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 50px;
  border: 0; border-radius: var(--wp-r);
  background: var(--wp-accent); color: var(--wp-accent-ink);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background var(--wp-t);
}
.no-page .btn-primary[type="submit"]:hover,
.no-submit:hover { background: var(--wp-accent-hover); color: var(--wp-accent-ink); }

/* --- cartão de pedido criado --- */
.no-success {
  margin-bottom: 18px;
  border: 1px solid var(--wp-up);
  border-left-width: 3px;
  border-radius: var(--wp-r-lg);
  background: var(--wp-up-soft);
  padding: 16px 18px;
}
.no-success-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 12px;
  color: var(--wp-up);
  font-size: 15px; font-weight: 600;
}
/* aparece quando o pedido é enviado sem recarregar a página */
.no-success.is-novo { animation: wpEntrada 320ms cubic-bezier(.32, .72, 0, 1); }
@keyframes wpEntrada {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.no-success-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(33, 197, 126, .22);
}
.no-success-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px;
  border: 1px solid transparent; border-radius: var(--wp-r);
  background: var(--wp-up); color: #04150d;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: opacity var(--wp-t);
}
.no-success-btn:hover { opacity: .88; color: #04150d; }
.no-success-btn.is-ghost {
  background: transparent;
  border-color: rgba(33, 197, 126, .4);
  color: var(--wp-up);
}
.no-success-btn.is-ghost:hover { background: rgba(33, 197, 126, .1); color: var(--wp-up); }

.no-success dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.no-success dt { color: var(--wp-text-2); font-size: 13px; font-weight: 400; }
.no-success dd {
  margin: 0; color: var(--wp-text); font-size: 13px;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

/* --- aviso de "não deu para confirmar" ---------------------------------
   Aparece quando a resposta do envio não chegou ou não foi reconhecida.
   Nunca reenviamos o pedido nesse caso: ele pode ter entrado, e repetir
   cobraria o cliente duas vezes. Melhor mandar conferir a lista. */
.no-doubt {
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--wp-warn);
  border-left-width: 3px;
  border-radius: var(--wp-r-lg);
  background: var(--wp-warn-soft);
}
.no-doubt-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 8px;
  color: var(--wp-warn);
  font-size: 15px; font-weight: 600;
}
.no-doubt p {
  margin: 0;
  color: var(--wp-text);
  font-size: 13px; line-height: 1.6;
}
.no-doubt strong { font-weight: 600; }
.no-doubt .no-success-actions { border-top-color: rgba(232, 147, 58, .25); }
.no-doubt .no-success-btn { background: var(--wp-warn); color: #1b1103; }
.no-doubt .no-success-btn.is-ghost {
  background: transparent;
  border-color: rgba(232, 147, 58, .45);
  color: var(--wp-warn);
}
.no-doubt .no-success-btn.is-ghost:hover { background: rgba(232, 147, 58, .12); color: var(--wp-warn); }

/* --- texto livre do admin abaixo do formulário --- */
.no-text {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  background: var(--wp-surface);
  color: var(--wp-text-2);
  font-size: 14px;
}

/* --- CELULAR -----------------------------------------------------------
   Aqui existiu uma barra fixa no rodapé com o total e o botão de enviar.
   Ela foi REMOVIDA: escondia a barra de navegação do site só nesta tela,
   e o cliente perdia o caminho para Pedidos, Serviços e Saldo justamente
   na página onde ele mais entra.

   O total e o botão voltaram para o passo 4, no fim do formulário, que é
   a ordem natural de quem preenche de cima para baixo. */
@media (max-width: 767px) {
  .no-page { padding: 16px 0 32px; }
  .no-card { padding: 16px; }
  .no-title { font-size: 20px; }
  /* 16px evita o zoom automático do iOS ao focar o campo */
  .no-page .form-control { font-size: 16px; }
}


/* ==========================================================================
   19. SERVIÇOS

   ATENÇÃO: a tabela é filtrada e pesquisada pelo JavaScript do painel, que
   mostra e esconde as <tr> pelos atributos data-filter-*. Por isso, no
   celular ela NÃO vira uma lista nova de <div>: continua sendo a mesma
   tabela, só que com as células empilhadas por CSS. Trocar a estrutura
   quebraria o filtro e a busca.

   O padrão de tabela definido aqui é reaproveitado por orders, refill,
   subscriptions e refunds.
   ========================================================================== */

.sv-page { padding: 22px 0 48px; }

.sv-head { margin-bottom: 18px; }
.sv-title { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.sv-sub   { margin: 3px 0 0; color: var(--wp-text-2); font-size: 13px; }

/* --- barra de filtros --- */
.sv-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.sv-bar .dropdown { position: relative; }

/* botão de categoria — contorno, não amarelo: filtrar não é a ação
   principal da tela, e amarelo aqui competiria com o resto do tema */
.sv-page .sv-cat-btn,
.sv-page .dropdown > .btn.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.sv-page .sv-cat-btn:hover,
.sv-page .dropdown > .btn.dropdown-toggle:hover {
  background: var(--wp-surface-3);
  border-color: var(--wp-border-2);
  color: var(--wp-text);
}
.sv-page .sv-cat-btn .caret { margin-left: 2px; opacity: .7; }
.sv-page .sv-cat-btn > .fal,
.sv-page .sv-cat-btn > .fa-filter { color: var(--wp-text-2); font-size: 13px; }

/* lista de categorias — o Bootstrap deixa isto branco por padrão */
.sv-page .dropdown-menu {
  min-width: 260px;
  max-height: 380px;
  overflow-y: auto;
  padding: 6px;
  margin-top: 6px;
  background: var(--wp-surface-3);
  border: 1px solid var(--wp-border-2);
  border-radius: var(--wp-r-lg);
  box-shadow: var(--wp-shadow);
}
.sv-page .dropdown-menu > li > a,
.sv-page .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: var(--wp-r-sm);
  background: transparent;
  color: var(--wp-text-2);
  font-size: 13.5px;
  line-height: 1.4;
  white-space: normal;
}
.sv-page .dropdown-menu > li > a:hover,
.sv-page .dropdown-menu > li > a:focus,
.sv-page .dropdown-menu > .active > a,
.sv-page .dropdown-menu > .active > a:hover {
  background: var(--wp-surface-2);
  color: var(--wp-text);
}
.sv-page .dropdown-menu img { max-height: 18px; width: auto; flex-shrink: 0; }
.sv-page .dropdown-menu .fa-star { color: var(--wp-accent); }

/* --- busca --- */
.sv-search { flex: 1; min-width: 220px; position: relative; }
.sv-page .sv-search .form-control {
  height: 40px;
  padding: 0 42px 0 14px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-size: 14px;
  box-shadow: none;
}
.sv-page .sv-search .form-control:focus { border-color: var(--wp-accent); background: var(--wp-surface); }
.sv-page .sv-search-btn {
  position: absolute;
  right: 4px; top: 4px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--wp-r-sm);
  background: transparent;
  color: var(--wp-text-3);
  cursor: pointer;
}
.sv-page .sv-search-btn:hover { color: var(--wp-text-2); background: var(--wp-surface-3); }

/* --- a tabela --- */
.sv-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  overflow: hidden;
}
.sv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sv-page #service-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 13.5px;
}
.sv-page #service-table > thead > tr > th {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--wp-border);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.sv-page #service-table > tbody > tr > td {
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid var(--wp-border);
  color: var(--wp-text);
  vertical-align: middle;
}
.sv-page #service-table > tbody > tr:hover > td { background: var(--wp-surface-2); }

/* linha de título de categoria (a que usa colspan) */
.sv-page #service-table > tbody > tr > td[colspan] {
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-size: 13px;
  padding: 11px 14px;
}
.sv-page #service-table > tbody > tr > td[colspan] strong { font-weight: 600; }
.sv-page #service-table > tbody > tr > td[colspan] img { max-height: 18px; width: auto; vertical-align: -3px; }

/* números: à direita e alinhados entre as linhas */
.sv-page #service-table td[data-col="rate"],
.sv-page #service-table td[data-col="min"],
.sv-page #service-table td[data-col="max"],
.sv-page #service-table th[data-col="rate"],
.sv-page #service-table th[data-col="min"],
.sv-page #service-table th[data-col="max"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* o preço em verde, igual à lista do Novo pedido */
.sv-page #service-table td[data-col="rate"] { color: var(--wp-up); font-weight: 600; }

/* id do serviço como etiqueta, igual ao select */
.sv-page #service-table td[data-col="id"] {
  color: var(--wp-text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sv-page .service-name { color: var(--wp-text); line-height: 1.45; }
.sv-page .width-service-name { min-width: 320px; }

/* favoritar */
.sv-page [data-favorite-service-id] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--wp-r-sm);
  color: var(--wp-text-3);
  cursor: pointer;
  transition: color var(--wp-t), background var(--wp-t);
}
.sv-page [data-favorite-service-id]:hover { color: var(--wp-accent); background: var(--wp-surface-3); }
.sv-page [data-favorite-service-id].favorite-active { color: var(--wp-accent); }

/* botão "descrição" */
.sv-page [data-description-id] {
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-sm);
  background: transparent;
  color: var(--wp-text-2);
  font-size: 12.5px;
  white-space: nowrap;
}
.sv-page [data-description-id]:hover {
  background: var(--wp-surface-2);
  border-color: var(--wp-border-2);
  color: var(--wp-text);
}

/* texto livre do admin */
.sv-text {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  background: var(--wp-surface);
  color: var(--wp-text-2);
  font-size: 14px;
}


/* --- CELULAR: cada linha vira um cartão -------------------------------
   A tabela continua sendo tabela (o filtro do painel depende disso).
   O que muda é só a forma de exibir: as células empilham e cada uma
   ganha o rótulo da coluna pelo atributo data-label. */
@media (max-width: 767px) {
  .sv-page { padding: 16px 0 32px; }
  .sv-title { font-size: 20px; }
  .sv-search { min-width: 0; width: 100%; }

  .sv-card { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .sv-scroll { overflow: visible; }

  .sv-page #service-table,
  .sv-page #service-table > tbody,
  .sv-page #service-table > tbody > tr,
  .sv-page #service-table > tbody > tr > td { display: block; width: 100%; }

  .sv-page #service-table > thead { display: none; }

  .sv-page #service-table > tbody > tr {
    position: relative;
    margin-bottom: 10px;
    padding: 4px 0;
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-r-lg);
    overflow: hidden;
  }
  .sv-page #service-table > tbody > tr > td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 14px;
    border: 0;
  }
  .sv-page #service-table > tbody > tr:hover > td { background: transparent; }

  /* o rótulo da coluna aparece à esquerda de cada valor */
  .sv-page #service-table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    color: var(--wp-text-2);
    font-size: 12px;
    flex-shrink: 0;
  }

  /* o nome do serviço vira o título do cartão, sem rótulo */
  .sv-page #service-table > tbody > tr > td.service-name {
    display: block;
    padding: 12px 14px 8px;
    color: var(--wp-text);
    font-size: 14px;
    font-weight: 500;
  }
  .sv-page #service-table > tbody > tr > td.service-name::before { content: none; }

  /* o preço ganha destaque de cartão */
  .sv-page #service-table td[data-col="rate"] { font-size: 15px; }

  /* a estrela sai do fluxo e vai para o canto do cartão */
  .sv-page #service-table > tbody > tr > td[data-col="fav"] {
    position: absolute;
    top: 8px; right: 8px;
    width: auto;
    padding: 0;
  }
  .sv-page #service-table > tbody > tr > td[data-col="fav"]::before { content: none; }
  .sv-page #service-table > tbody > tr > td.service-name { padding-right: 46px; }

  /* o botão de descrição ocupa a largura do cartão */
  .sv-page #service-table > tbody > tr > td[data-col="acao"] { padding: 4px 14px 12px; }
  .sv-page [data-description-id] { width: 100%; height: 34px; }

  /* linha de categoria: fica sem cartão, virando um separador */
  .sv-page #service-table > tbody > tr:has(> td[colspan]) {
    margin: 18px 0 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .sv-page #service-table > tbody > tr > td[colspan] {
    display: block;
    padding: 0 2px 6px;
    background: transparent;
    border-bottom: 1px solid var(--wp-border);
    color: var(--wp-text-2);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .sv-page #service-table > tbody > tr > td[colspan]::before { content: none; }
}


/* ==========================================================================
   20. PEDIDOS

   Mesma ideia da tabela de serviços: no celular as células empilham, mas a
   tabela continua sendo tabela. Aqui cada linha vira um cartão com ordem
   própria — o serviço e o status vêm primeiro, e o id e a data, que quase
   ninguém procura, descem para o fim.
   ========================================================================== */

.od-page { padding: 22px 0 48px; }

.od-head { margin-bottom: 18px; }
.od-title { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.od-sub   { margin: 3px 0 0; color: var(--wp-text-2); font-size: 13px; }

/* --- abas de status --- */
.od-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.od-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 0 2px;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.od-tabs::-webkit-scrollbar { display: none; }
.od-tabs > li { flex-shrink: 0; }
.od-tabs > li > a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--wp-border);
  border-radius: 999px;
  background: transparent;
  color: var(--wp-text-2);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--wp-t), border-color var(--wp-t), color var(--wp-t);
}
.od-tabs > li > a:hover {
  background: var(--wp-surface-2);
  border-color: var(--wp-border-2);
  color: var(--wp-text);
}
.od-tabs > li.active > a {
  background: var(--wp-accent-soft);
  border-color: var(--wp-accent-line);
  color: var(--wp-accent);
  font-weight: 600;
}

/* --- busca --- */
.od-search { position: relative; flex-shrink: 0; width: 260px; }
.od-page .od-search .form-control {
  height: 34px;
  padding: 0 38px 0 13px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-size: 13px;
  box-shadow: none;
}
.od-page .od-search .form-control:focus { border-color: var(--wp-accent); background: var(--wp-surface); }
.od-page .od-search-btn {
  position: absolute; right: 3px; top: 3px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--wp-r-sm);
  background: transparent; color: var(--wp-text-3);
  cursor: pointer;
}
.od-page .od-search-btn:hover { color: var(--wp-text-2); background: var(--wp-surface-3); }

/* --- tabela --- */
.od-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  overflow: hidden;
}
.od-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.od-page .od-table {
  width: 100%; margin: 0;
  border-collapse: collapse;
  font-size: 13px;
}
.od-page .od-table > thead > tr > th {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--wp-border);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.od-page .od-table > tbody > tr > td {
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid var(--wp-border);
  color: var(--wp-text);
  vertical-align: middle;
}
.od-page .od-table > tbody > tr:hover > td { background: var(--wp-surface-2); }

.od-page .od-table td[data-col="id"] {
  color: var(--wp-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.od-page .od-table td[data-col="date"] { color: var(--wp-text-2); white-space: nowrap; }
.od-page .od-table td[data-col="charge"],
.od-page .od-table td[data-col="start"],
.od-page .od-table td[data-col="qtd"],
.od-page .od-table td[data-col="remains"],
.od-page .od-table th[data-col="charge"],
.od-page .od-table th[data-col="start"],
.od-page .od-table th[data-col="qtd"],
.od-page .od-table th[data-col="remains"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.od-page .od-table td[data-col="charge"] { font-weight: 600; }
.od-page .od-table td[data-col="link"] {
  max-width: 260px;
  word-break: break-all;
  color: var(--wp-text-2);
}
.od-page .od-table td[data-col="link"] a { color: var(--wp-text-3); }
.od-page .od-table td[data-col="link"] a:hover { color: var(--wp-accent); }
.od-page .od-table td[data-col="service"] { min-width: 240px; line-height: 1.45; }

/* --- selo de status ---
   A cor é decidida no template, comparando o texto com as traduções do
   painel — ele não entrega um código de status, só o texto pronto. */
.od-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--wp-r-sm);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.od-status::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.od-status.is-ok      { background: var(--wp-up-soft);   color: var(--wp-up); }
.od-status.is-run     { background: var(--wp-info-soft); color: var(--wp-info); }
.od-status.is-wait    { background: var(--wp-warn-soft); color: var(--wp-warn); }
.od-status.is-cancel  { background: var(--wp-down-soft); color: var(--wp-down); }
.od-status .fa-comment-alt-lines,
.od-status .fas { font-size: 11px; opacity: .9; }

/* --- ações --- */
.od-page .order-actions {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  color: var(--wp-text-2);
  font-size: 12px;
}
.od-page .order-actions .btn {
  height: 30px; padding: 0 11px;
  border-radius: var(--wp-r-sm);
  font-size: 12.5px; font-weight: 500;
}
.od-page .order-actions .btn-primary {
  background: transparent;
  border: 1px solid var(--wp-up);
  color: var(--wp-up);
}
.od-page .order-actions .btn-primary:hover { background: var(--wp-up-soft); color: var(--wp-up); }
.od-page .order-actions .btn-default {
  background: transparent;
  border: 1px solid var(--wp-border);
  color: var(--wp-text-2);
}
.od-page .order-actions .btn-default:hover {
  background: var(--wp-down-soft);
  border-color: var(--wp-down);
  color: var(--wp-down);
}
.od-page .order-actions .btn.disabled { opacity: .4; }

/* --- paginação --- */
.od-page .pagination {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 18px 0 0; padding: 0;
  list-style: none;
}
.od-page .pagination > li > a,
.od-page .pagination > li > span {
  display: flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-sm);
  background: var(--wp-surface);
  color: var(--wp-text-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.od-page .pagination > li > a:hover {
  background: var(--wp-surface-2);
  border-color: var(--wp-border-2);
  color: var(--wp-text);
}
.od-page .pagination > .active > a,
.od-page .pagination > .active > a:hover {
  background: var(--wp-accent);
  border-color: var(--wp-accent);
  color: var(--wp-accent-ink);
  font-weight: 600;
}

/* nada encontrado */
.od-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--wp-text-2);
}
.od-empty i { display: block; font-size: 28px; color: var(--wp-text-3); margin-bottom: 12px; }


/* --- CELULAR: cada pedido vira um cartão ------------------------------ */
@media (max-width: 767px) {
  .od-page { padding: 16px 0 32px; }
  .od-title { font-size: 20px; }

  .od-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .od-search { width: 100%; }
  .od-tabs { margin: 0 -16px; padding: 0 16px 2px; }

  .od-card { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .od-scroll { overflow: visible; }

  .od-page .od-table,
  .od-page .od-table > tbody { display: block; width: 100%; }
  .od-page .od-table > thead { display: none; }

  .od-page .od-table > tbody > tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    padding: 4px 0 8px;
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-r-lg);
  }
  .od-page .od-table > tbody > tr > td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    width: auto;
    padding: 6px 14px;
    border: 0;
    text-align: right;
  }
  .od-page .od-table > tbody > tr:hover > td { background: transparent; }
  .od-page .od-table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    color: var(--wp-text-2);
    font-size: 12px;
    flex-shrink: 0;
    text-align: left;
  }

  /* a ordem no cartão: o que importa primeiro */
  .od-page .od-table td[data-col="service"] { order: 1; }
  .od-page .od-table td[data-col="status"]  { order: 2; }
  .od-page .od-table td[data-col="link"]    { order: 3; }
  .od-page .od-table td[data-col="qtd"]     { order: 4; }
  .od-page .od-table td[data-col="start"]   { order: 5; }
  .od-page .od-table td[data-col="remains"] { order: 6; }
  .od-page .od-table td[data-col="charge"]  { order: 7; }
  .od-page .od-table td[data-col="date"]    { order: 8; }
  .od-page .od-table td[data-col="id"]      { order: 9; }
  .od-page .od-table td[data-col="acao"]    { order: 10; }

  /* o serviço vira o título do cartão */
  .od-page .od-table td[data-col="service"] {
    display: block;
    padding: 12px 14px 8px;
    color: var(--wp-text);
    font-size: 14px; font-weight: 500;
    text-align: left;
  }
  .od-page .od-table td[data-col="service"]::before { content: none; }

  .od-page .od-table td[data-col="link"] { max-width: none; text-align: right; }

  /* a linha do valor ganha um traço acima, separando do resto */
  .od-page .od-table td[data-col="charge"] {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--wp-border);
    font-size: 15px;
  }

  .od-page .od-table td[data-col="acao"] { padding: 10px 14px 4px; }
  .od-page .od-table td[data-col="acao"]::before { content: none; }
  .od-page .order-actions { width: 100%; justify-content: stretch; }
  .od-page .order-actions .btn { flex: 1; height: 34px; }

  .od-page .pagination { justify-content: center; }
}


/* ==========================================================================
   21. ADICIONAR SALDO

   O <div id="amount-fields"> é trocado pelo JavaScript do painel conforme o
   meio de pagamento escolhido (alguns têm valores fixos em vez de campo
   livre). Por isso aqui se estiliza .form-control em vez de classe própria:
   o que o painel injetar já nasce com a aparência do tema.
   ========================================================================== */

.af-page { padding: 22px 0 48px; }

.af-head { margin-bottom: 18px; }
.af-title { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.af-sub   { margin: 3px 0 0; color: var(--wp-text-2); font-size: 13px; }

.af-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 992px) {
  .af-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
}

.af-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  padding: 20px;
}
.af-card + .af-card { margin-top: 16px; }
.af-card-title {
  margin: 0 0 16px;
  font-size: 15px; font-weight: 600;
}

/* --- saldo atual em destaque --- */
.af-balance {
  padding: 20px;
  border: 1px solid var(--wp-accent-line);
  border-radius: var(--wp-r-lg);
  background: var(--wp-accent-soft);
}
.af-balance small {
  display: block;
  color: var(--wp-text-2);
  font-size: 12px;
  margin-bottom: 6px;
}
.af-balance b {
  display: block;
  color: var(--wp-accent);
  font-size: 28px; font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

/* --- total recarregado (abaixo do saldo) --- */
.af-total {
  display: none;              /* o script mostra quando consegue somar */
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  background: var(--wp-surface);
}
.af-total.is-on { display: block; }
.af-total small { display: block; color: var(--wp-text-2); font-size: 12px; margin-bottom: 4px; }
.af-total b {
  display: block;
  color: var(--wp-text);
  font-size: 19px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- escolha do meio de pagamento em cartões -------------------------
   O <select> continua na página, só que escondido: é ele que o painel lê
   e é nele que o painel escuta a troca para montar o campo de valor.
   Os cartões só escrevem no select e disparam o evento.

   Importante: o select começa VISÍVEL e só some quando o script consegue
   montar os cartões. Se o JavaScript falhar, o cliente ainda escolhe pela
   lista normal em vez de ficar sem como pagar. */
.af-methods { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.af-methods.is-on { display: grid; }
@media (min-width: 480px) { .af-methods.is-on { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.af-method {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  padding: 14px 10px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--wp-t), background var(--wp-t), color var(--wp-t);
}
.af-method:hover {
  border-color: var(--wp-border-2);
  background: var(--wp-surface-3);
  color: var(--wp-text);
}
.af-method.is-on {
  border-color: var(--wp-accent);
  background: var(--wp-accent-soft);
  color: var(--wp-text);
}
.af-method.is-on::after {
  content: "\f00c";                       /* o "check" do Font Awesome */
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 7px; right: 9px;
  color: var(--wp-accent);
  font-size: 11px;
}

.af-method-logo {
  display: flex; align-items: center; justify-content: center;
  height: 26px;
}
.af-method-logo img { max-height: 26px; max-width: 76px; width: auto; }
.af-method-logo i { font-size: 22px; color: var(--wp-text-2); }
.af-method.is-on .af-method-logo i { color: var(--wp-accent); }

.af-method-name { display: block; word-break: break-word; }

/* selo de "cai na hora" */
.af-method-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--wp-up-soft);
  color: var(--wp-up);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* --- campos --- */
.af-page .form-group { margin-bottom: 16px; }
.af-page .form-group:last-child { margin-bottom: 0; }
.af-page .control-label {
  display: block;
  margin-bottom: 7px;
  color: var(--wp-text-2);
  font-size: 13px; font-weight: 400;
}
.af-page .form-control {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-size: 15px;
  box-shadow: none;
}
.af-page .form-control:hover { border-color: var(--wp-border-2); }
.af-page .form-control:focus {
  border-color: var(--wp-accent);
  background: var(--wp-surface);
  box-shadow: none;
}
.af-page select.form-control {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b98b0' d='M6 8.2 1.8 4l.9-.9L6 6.4l3.3-3.3.9.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.af-page #amount { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- valores rápidos ---
   O script só mostra estes botões quando existe o campo de valor livre.
   Alguns meios de pagamento trocam esse campo por valores fixos, e aí eles
   não fariam sentido. */
.af-quick { display: none; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.af-quick.is-on { display: flex; }
.af-quick button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-family: inherit;
  font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--wp-t), border-color var(--wp-t), color var(--wp-t);
}
.af-quick button:hover {
  background: var(--wp-surface-3);
  border-color: var(--wp-border-2);
  color: var(--wp-text);
}
.af-quick button.is-on {
  background: var(--wp-accent-soft);
  border-color: var(--wp-accent-line);
  color: var(--wp-accent);
}

/* --- botão pagar --- */
.af-page .btn-primary[type="submit"] {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 50px;
  margin-top: 4px;
  border: 0; border-radius: var(--wp-r);
  background: var(--wp-accent); color: var(--wp-accent-ink);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.af-page .btn-primary[type="submit"]:hover { background: var(--wp-accent-hover); color: var(--wp-accent-ink); }

/* --- texto livre do admin --- */
.af-text {
  color: var(--wp-text-2);
  font-size: 13.5px;
  line-height: 1.65;
}
.af-text a { color: var(--wp-accent); }
.af-text img { max-width: 100%; }

/* --- histórico --- */
.af-hist { margin-top: 20px; }
.af-hist-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.af-hist-title { margin: 0; font-size: 16px; font-weight: 600; }

.af-tablewrap {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  overflow: hidden;
}
.af-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.af-page .af-table {
  width: 100%; margin: 0;
  border-collapse: collapse;
  font-size: 13px;
}
.af-page .af-table > thead > tr > th {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--wp-border);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.af-page .af-table > tbody > tr > td {
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid var(--wp-border);
  color: var(--wp-text);
  vertical-align: middle;
}
.af-page .af-table > tbody > tr:hover > td { background: var(--wp-surface-2); }
.af-page .af-table td[data-col="id"],
.af-page .af-table td[data-col="date"] { color: var(--wp-text-2); white-space: nowrap; }
.af-page .af-table td[data-col="valor"],
.af-page .af-table th[data-col="valor"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* recarga é dinheiro entrando: verde, mesma lógica dos preços */
.af-page .af-table td[data-col="valor"] { color: var(--wp-up); font-weight: 600; }
.af-page .af-table td[data-col="nota"] { text-align: right; white-space: nowrap; }
.af-page .af-table td[data-col="nota"] a { color: var(--wp-text-2); font-size: 12.5px; }
.af-page .af-table td[data-col="nota"] a:hover { color: var(--wp-accent); }

.af-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--wp-text-2);
  font-size: 13.5px;
}
.af-empty i { display: block; font-size: 26px; color: var(--wp-text-3); margin-bottom: 10px; }

/* --- paginação (mesma da lista de pedidos) --- */
.af-page .pagination {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 16px 0 0; padding: 0;
  list-style: none;
}
.af-page .pagination > li > a,
.af-page .pagination > li > span {
  display: flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-sm);
  background: var(--wp-surface);
  color: var(--wp-text-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.af-page .pagination > li > a:hover {
  background: var(--wp-surface-2);
  border-color: var(--wp-border-2);
  color: var(--wp-text);
}
.af-page .pagination > .active > a,
.af-page .pagination > .active > a:hover {
  background: var(--wp-accent);
  border-color: var(--wp-accent);
  color: var(--wp-accent-ink);
  font-weight: 600;
}


/* --- CELULAR --------------------------------------------------------- */
@media (max-width: 767px) {
  .af-page { padding: 16px 0 32px; }
  .af-title { font-size: 20px; }
  .af-card { padding: 16px; }
  .af-balance { padding: 16px; }
  .af-balance b { font-size: 24px; }
  /* 16px evita o zoom automático do iOS ao focar o campo */
  .af-page .form-control { font-size: 16px; }
  .af-page #amount { font-size: 18px; }

  .af-tablewrap { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .af-scroll { overflow: visible; }

  .af-page .af-table,
  .af-page .af-table > tbody,
  .af-page .af-table > tbody > tr,
  .af-page .af-table > tbody > tr > td { display: block; width: 100%; }
  .af-page .af-table > thead { display: none; }

  .af-page .af-table > tbody > tr {
    margin-bottom: 10px;
    padding: 6px 0;
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-r-lg);
  }
  .af-page .af-table > tbody > tr > td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 14px;
    border: 0;
    text-align: right;
  }
  .af-page .af-table > tbody > tr:hover > td { background: transparent; }
  .af-page .af-table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    color: var(--wp-text-2);
    font-size: 12px;
    flex-shrink: 0;
    text-align: left;
  }
  .af-page .af-table td[data-col="valor"] { font-size: 15px; }
  .af-page .af-table td[data-col="nota"]::before { content: none; }
  .af-page .af-table td[data-col="nota"] { justify-content: flex-end; }

  .af-page .pagination { justify-content: center; }
}


/* ==========================================================================
   22. SUPORTE — abrir chamado e lista

   O <div class="tickets-uploader"> é montado pelo JavaScript do painel:
   ele injeta ali o botão de anexar e a lista de arquivos. Como não
   controlamos esse HTML, as regras abaixo miram o que ele produz.
   ========================================================================== */

.tk-page { padding: 22px 0 48px; }

.tk-head { margin-bottom: 18px; }
.tk-title { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.tk-sub   { margin: 3px 0 0; color: var(--wp-text-2); font-size: 13px; }

.tk-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 992px) {
  .tk-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px; }
  .tk-form-col { position: sticky; top: calc(var(--wp-topbar-h) + 20px); }
}

.tk-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  padding: 20px;
}
.tk-card-title {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 16px;
  font-size: 15px; font-weight: 600;
}
.tk-card-title i { color: var(--wp-accent); font-size: 14px; }

/* --- campos --- */
.tk-page .form-group { margin-bottom: 16px; }
.tk-page .form-group:last-child { margin-bottom: 0; }
.tk-page .control-label {
  display: block; margin-bottom: 7px;
  color: var(--wp-text-2);
  font-size: 13px; font-weight: 400;
}
.tk-page .form-control {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-size: 15px;
  box-shadow: none;
}
.tk-page .form-control:hover { border-color: var(--wp-border-2); }
.tk-page .form-control:focus {
  border-color: var(--wp-accent);
  background: var(--wp-surface);
  box-shadow: none;
}
.tk-page textarea.form-control {
  height: auto; min-height: 130px;
  padding: 12px 14px;
  line-height: 1.6;
  resize: vertical;
}
.tk-page select.form-control {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b98b0' d='M6 8.2 1.8 4l.9-.9L6 6.4l3.3-3.3.9.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* --- anexos (o painel monta o conteúdo daqui) --- */
.tickets-uploader { display: block; }
.tickets-uploader .btn,
.tickets-uploader button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border: 1px dashed var(--wp-border-2);
  border-radius: var(--wp-r);
  background: transparent;
  color: var(--wp-text-2);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.tickets-uploader .btn:hover,
.tickets-uploader button:hover {
  border-color: var(--wp-accent-line);
  background: var(--wp-surface-2);
  color: var(--wp-text);
}
.tickets-uploader a { color: var(--wp-accent); font-size: 13px; }
.tickets-uploader img { max-height: 44px; width: auto; border-radius: var(--wp-r-sm); }

/* --- botão enviar --- */
.tk-page .btn-primary[type="submit"] {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px;
  border: 0; border-radius: var(--wp-r);
  background: var(--wp-accent); color: var(--wp-accent-ink);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.tk-page .btn-primary[type="submit"]:hover { background: var(--wp-accent-hover); color: var(--wp-accent-ink); }

/* --- busca --- */
.tk-listhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.tk-listtitle { margin: 0; font-size: 16px; font-weight: 600; }
.tk-search { position: relative; width: 240px; max-width: 100%; }
.tk-page .tk-search .form-control {
  height: 36px; padding: 0 38px 0 13px; font-size: 13px;
}
.tk-page .tk-search-btn {
  position: absolute; right: 3px; top: 3px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--wp-r-sm);
  background: transparent; color: var(--wp-text-3);
  cursor: pointer;
}
.tk-page .tk-search-btn:hover { color: var(--wp-text-2); background: var(--wp-surface-3); }

/* --- lista de chamados --- */
.tk-tablewrap {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  overflow: hidden;
}
.tk-page .tk-table {
  width: 100%; margin: 0;
  border-collapse: collapse;
  font-size: 13px;
}
.tk-page .tk-table > thead > tr > th {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--wp-border);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.tk-page .tk-table > tbody > tr > td {
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid var(--wp-border);
  color: var(--wp-text);
  vertical-align: middle;
}
.tk-page .tk-table > tbody > tr:hover > td { background: var(--wp-surface-2); }
.tk-page .tk-table td[data-col="id"] { color: var(--wp-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-page .tk-table td[data-col="quando"] { color: var(--wp-text-2); white-space: nowrap; text-align: right; }
.tk-page .tk-table td[data-col="assunto"] a { color: var(--wp-text); }
.tk-page .tk-table td[data-col="assunto"] a:hover { color: var(--wp-accent); }

/* chamado com resposta nova — o painel marca com ticket['new'] == 1 */
.tk-new {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--wp-accent-soft);
  color: var(--wp-accent);
  font-size: 11px; font-weight: 600;
  vertical-align: 1px;
}
.tk-status {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  border-radius: var(--wp-r-sm);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
}

.tk-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--wp-text-2);
  font-size: 13.5px;
}
.tk-empty i { display: block; font-size: 26px; color: var(--wp-text-3); margin-bottom: 10px; }

.tk-text {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  background: var(--wp-surface);
  color: var(--wp-text-2);
  font-size: 14px;
}

/* --- paginação --- */
.tk-page .pagination {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 16px 0 0; padding: 0;
  list-style: none;
}
.tk-page .pagination > li > a,
.tk-page .pagination > li > span {
  display: flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-sm);
  background: var(--wp-surface);
  color: var(--wp-text-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tk-page .pagination > li > a:hover {
  background: var(--wp-surface-2);
  border-color: var(--wp-border-2);
  color: var(--wp-text);
}
.tk-page .pagination > .active > a,
.tk-page .pagination > .active > a:hover {
  background: var(--wp-accent);
  border-color: var(--wp-accent);
  color: var(--wp-accent-ink);
  font-weight: 600;
}

/* alerta que o painel mostra por JavaScript */
.tk-page .ticket-danger { margin-bottom: 16px; }


/* ==========================================================================
   23. SUPORTE — a conversa

   O original empilhava as mensagens numa coluna só, todas iguais, e era
   preciso ler o nome do autor para saber quem falou. Aqui vira conversa:
   o cliente à direita, o suporte à esquerda — o lado já diz quem é antes
   de qualquer leitura.
   ========================================================================== */

.tv-page { padding: 22px 0 48px; }

.tv-wrap { max-width: 860px; margin: 0 auto; }

.tv-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg) var(--wp-r-lg) 0 0;
}
.tv-back {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-size: 14px;
}
.tv-back:hover { background: var(--wp-surface-3); color: var(--wp-text); }
.tv-head-txt { min-width: 0; }
.tv-theme {
  margin: 0;
  color: var(--wp-text);
  font-size: 16px; font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}
.tv-meta { margin-top: 2px; color: var(--wp-text-2); font-size: 12px; }

/* --- corpo da conversa --- */
.tv-body {
  padding: 22px 20px;
  background: var(--wp-bg);
  border: 1px solid var(--wp-border);
  border-top: 0;
}
.tv-msg { display: flex; margin-bottom: 16px; }
.tv-msg:last-child { margin-bottom: 0; }
.tv-msg.is-mine { justify-content: flex-end; }

.tv-bubble {
  max-width: 78%;
  padding: 12px 15px;
  border-radius: 14px;
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  color: var(--wp-text);
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}
.tv-bubble p:last-child { margin-bottom: 0; }
.tv-bubble a { color: var(--wp-accent); }

/* a minha mensagem: âmbar suave e canto "preso" do lado direito */
.tv-msg.is-mine .tv-bubble {
  background: var(--wp-accent-soft);
  border-color: var(--wp-accent-line);
  border-bottom-right-radius: 4px;
}
/* a do suporte: canto preso do lado esquerdo */
.tv-msg.is-support .tv-bubble { border-bottom-left-radius: 4px; }

.tv-files { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--wp-border); }
.tv-msg.is-mine .tv-files { border-top-color: var(--wp-accent-line); }
.tv-files a {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 3px 8px 3px 0;
  padding: 5px 10px;
  border-radius: var(--wp-r-sm);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-size: 12.5px;
}
.tv-files a:hover { background: var(--wp-surface-3); color: var(--wp-accent); }

.tv-info {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 6px;
  color: var(--wp-text-3);
  font-size: 11.5px;
}
.tv-msg.is-mine .tv-info { justify-content: flex-end; }
.tv-info strong { color: var(--wp-text-2); font-weight: 500; }

/* --- responder --- */
.tv-reply {
  padding: 18px 20px;
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-top: 0;
  border-radius: 0 0 var(--wp-r-lg) var(--wp-r-lg);
}
.tv-page .form-group { margin-bottom: 14px; }
.tv-page .control-label {
  display: block; margin-bottom: 7px;
  color: var(--wp-text-2); font-size: 13px; font-weight: 400;
}
.tv-page .form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-size: 15px;
  line-height: 1.6;
  box-shadow: none;
  resize: vertical;
  min-height: 110px;
}
.tv-page .form-control:focus {
  border-color: var(--wp-accent);
  background: var(--wp-surface);
  box-shadow: none;
}
.tv-page .btn-primary[type="submit"] {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 46px;
  border: 0; border-radius: var(--wp-r);
  background: var(--wp-accent); color: var(--wp-accent-ink);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.tv-page .btn-primary[type="submit"]:hover { background: var(--wp-accent-hover); color: var(--wp-accent-ink); }

/* chamado encerrado */
.tv-closed {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-top: 0;
  border-radius: 0 0 var(--wp-r-lg) var(--wp-r-lg);
  color: var(--wp-text-2);
  font-size: 13.5px;
}
.tv-closed i { color: var(--wp-text-3); }


@media (max-width: 767px) {
  .tk-page, .tv-page { padding: 16px 0 32px; }
  .tk-title { font-size: 20px; }
  .tk-card { padding: 16px; }
  .tk-search { width: 100%; }
  .tk-listhead { flex-direction: column; align-items: stretch; }
  /* 16px evita o zoom automático do iOS ao focar o campo */
  .tk-page .form-control, .tv-page .form-control { font-size: 16px; }

  .tk-tablewrap { background: transparent; border: 0; border-radius: 0; }
  .tk-page .tk-table,
  .tk-page .tk-table > tbody,
  .tk-page .tk-table > tbody > tr,
  .tk-page .tk-table > tbody > tr > td { display: block; width: 100%; }
  .tk-page .tk-table > thead { display: none; }
  .tk-page .tk-table > tbody > tr {
    margin-bottom: 10px;
    padding: 6px 0;
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-r-lg);
  }
  .tk-page .tk-table > tbody > tr > td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; padding: 6px 14px; border: 0; text-align: right;
  }
  .tk-page .tk-table > tbody > tr:hover > td { background: transparent; }
  .tk-page .tk-table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    color: var(--wp-text-2); font-size: 12px;
    flex-shrink: 0; text-align: left;
  }
  .tk-page .tk-table td[data-col="assunto"] {
    display: block; text-align: left;
    padding: 12px 14px 8px;
    font-size: 14px; font-weight: 500;
  }
  .tk-page .tk-table td[data-col="assunto"]::before { content: none; }

  .tv-bubble { max-width: 88%; }
  .tv-head, .tv-body, .tv-reply, .tv-closed { padding-left: 16px; padding-right: 16px; }
}


/* ==========================================================================
   24. MINHA CONTA

   O original empilhava sete caixas iguais, sem título nenhum — era preciso
   ler os campos para descobrir o que cada uma fazia. Aqui cada bloco ganha
   ícone e nome, e no PC eles se distribuem em duas colunas.
   ========================================================================== */

.ac-page { padding: 22px 0 48px; }

.ac-head { margin-bottom: 18px; }
.ac-title { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.ac-sub   { margin: 3px 0 0; color: var(--wp-text-2); font-size: 13px; }

/* --- abas (geral / notificações) --- */
.ac-tabs {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 16px; padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.ac-tabs::-webkit-scrollbar { display: none; }
.ac-tabs > li { flex-shrink: 0; }
.ac-tabs > li > a {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--wp-border);
  border-radius: 999px;
  color: var(--wp-text-2);
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
}
.ac-tabs > li > a:hover {
  background: var(--wp-surface-2);
  border-color: var(--wp-border-2);
  color: var(--wp-text);
}
.ac-tabs > li.active > a {
  background: var(--wp-accent-soft);
  border-color: var(--wp-accent-line);
  color: var(--wp-accent);
  font-weight: 600;
}

/* --- os cards --- */
.ac-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 992px) {
  .ac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

.ac-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  padding: 20px;
}
.ac-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.ac-card-ico {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-accent);
  font-size: 13px;
}
.ac-card-title { margin: 0; font-size: 15px; font-weight: 600; }
.ac-card-note { margin: 1px 0 0; color: var(--wp-text-2); font-size: 12px; }

/* selo de ligado/desligado (usado no 2FA) */
.ac-flag {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px;
  border-radius: var(--wp-r-sm);
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.ac-flag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ac-flag.is-on  { background: var(--wp-up-soft);   color: var(--wp-up); }
.ac-flag.is-off { background: var(--wp-surface-2); color: var(--wp-text-3); }

/* --- campos --- */
.ac-page .form-group { margin-bottom: 14px; }
.ac-page .form-group:last-child { margin-bottom: 0; }
.ac-page .control-label,
.ac-page label {
  display: block; margin-bottom: 7px;
  color: var(--wp-text-2);
  font-size: 13px; font-weight: 400;
}
.ac-page .form-control {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-size: 14px;
  box-shadow: none;
}
.ac-page .form-control:hover { border-color: var(--wp-border-2); }
.ac-page .form-control:focus {
  border-color: var(--wp-accent);
  background: var(--wp-surface);
  box-shadow: none;
}
.ac-page .form-control[readonly],
.ac-page .form-control[disabled] {
  background: var(--wp-surface-3);
  color: var(--wp-text-2);
  cursor: default;
}
.ac-page textarea.form-control {
  height: auto; min-height: 120px;
  padding: 12px 14px; line-height: 1.6;
  resize: vertical;
}
.ac-page select.form-control {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b98b0' d='M6 8.2 1.8 4l.9-.9L6 6.4l3.3-3.3.9.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.ac-page .help-block { margin-top: 6px; color: var(--wp-text-3); font-size: 12px; }
.ac-page p { color: var(--wp-text-2); font-size: 13.5px; line-height: 1.6; }

/* mostrar / ocultar senha */
.ac-pass { position: relative; }
.ac-pass .form-control { padding-right: 44px; }
.ac-eye {
  position: absolute; right: 5px; top: 5px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--wp-r-sm);
  background: transparent; color: var(--wp-text-3);
  font-size: 14px; cursor: pointer;
}
.ac-eye:hover { color: var(--wp-text-2); background: var(--wp-surface-3); }

/* --- chave da API --- */
.ac-key { position: relative; }
.ac-key .form-control {
  padding-right: 48px;
  font-family: var(--wp-mono);
  font-size: 13px;
}
.ac-key-copy {
  position: absolute; right: 5px; top: 5px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--wp-r-sm);
  background: var(--wp-surface-3);
  color: var(--wp-text-2);
  font-size: 13px; cursor: pointer;
  transition: background var(--wp-t), color var(--wp-t);
}
.ac-key-copy:hover { background: var(--wp-accent-soft); color: var(--wp-accent); }
.ac-key-copy.is-ok { background: var(--wp-up-soft); color: var(--wp-up); }

/* --- botões --- */
.ac-page .btn-primary,
.ac-page .btn-primary[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px;
  margin-top: 4px;
  border: 0; border-radius: var(--wp-r);
  background: var(--wp-accent); color: var(--wp-accent-ink);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.ac-page .btn-primary:hover { background: var(--wp-accent-hover); color: var(--wp-accent-ink); }

/* o de trocar e-mail e o de desligar o 2FA são secundários */
.ac-page .btn-primary.is-ghost {
  background: transparent;
  border: 1px solid var(--wp-border);
  color: var(--wp-text-2);
}
.ac-page .btn-primary.is-ghost:hover {
  background: var(--wp-surface-2);
  border-color: var(--wp-border-2);
  color: var(--wp-text);
}

.ac-page .alert { margin-bottom: 14px; }

@media (max-width: 767px) {
  .ac-page { padding: 16px 0 32px; }
  .ac-title { font-size: 20px; }
  .ac-card { padding: 16px; }
  /* 16px evita o zoom automático do iOS ao focar o campo */
  .ac-page .form-control { font-size: 16px; }
  .ac-page .btn-primary,
  .ac-page .btn-primary[type="submit"] { width: 100%; }
}


/* ==========================================================================
   25. PEDIDO EM MASSA

   O original era uma caixa cinza com um textarea de 15 linhas e nada mais.
   Quem cola 200 pedidos ali não tem como conferir se colou tudo, nem em que
   linha está o erro que o painel reclamou depois.

   Aqui o campo vira um editor: numeração na lateral, cada pedido numa linha
   só (sem quebra automática, que desalinharia os números) e um contador
   embaixo. A numeração é decorativa — o que é enviado continua sendo o
   texto puro do textarea, com o mesmo name de sempre.
   ========================================================================== */

.mo-page { padding: 22px 0 48px; }

.mo-head { margin-bottom: 18px; }
.mo-title { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.mo-sub   { margin: 3px 0 0; color: var(--wp-text-2); font-size: 13px; }

.mo-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 992px) {
  .mo-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
  .mo-side { position: sticky; top: calc(var(--wp-topbar-h) + 20px); }
}

.mo-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  padding: 20px;
}
.mo-card + .mo-card { margin-top: 16px; }
.mo-card-title {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px;
  font-size: 15px; font-weight: 600;
}
.mo-card-title i { color: var(--wp-accent); font-size: 13px; }

/* --- o editor ---------------------------------------------------------
   A altura da linha (22px) e o padding do topo (12px) têm de ser IGUAIS
   no textarea e na régua de números, senão um desce em relação ao outro
   depois de algumas linhas. Mexer em um, mexer no outro. */
.mo-editor {
  position: relative;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  overflow: hidden;
  transition: border-color var(--wp-t);
}
.mo-editor:hover { border-color: var(--wp-border-2); }
.mo-editor.is-focus { border-color: var(--wp-accent); background: var(--wp-surface); }

.mo-lines {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 46px;
  padding: 12px 0 12px;
  border-right: 1px solid var(--wp-border);
  background: var(--wp-surface-3);
  color: var(--wp-text-3);
  font-family: var(--wp-mono);
  font-size: 13px;
  line-height: 22px;
  text-align: right;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}
.mo-lines span { display: block; padding-right: 10px; }

.mo-page .mo-editor .form-control {
  display: block;
  width: 100%;
  min-height: 340px;
  margin: 0;
  padding: 12px 14px 12px 58px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wp-text);
  font-family: var(--wp-mono);
  font-size: 13px;
  line-height: 22px;
  box-shadow: none;
  resize: vertical;
  /* uma linha = um pedido: sem quebra automática, os números continuam
     apontando para a linha certa mesmo com link comprido */
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.mo-page .mo-editor .form-control:focus { border: 0; background: transparent; box-shadow: none; }
.mo-page .mo-editor .form-control::placeholder { color: var(--wp-text-3); }

/* --- rodapé do editor --- */
.mo-count {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 10px;
  color: var(--wp-text-2);
  font-size: 12.5px;
}
.mo-count b {
  color: var(--wp-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mo-clear {
  border: 0; padding: 0;
  background: transparent;
  color: var(--wp-text-3);
  font-family: inherit; font-size: 12.5px;
  cursor: pointer;
}
.mo-clear:hover { color: var(--wp-down); }

/* --- campos e botão --- */
.mo-page .control-label {
  display: block; margin-bottom: 7px;
  color: var(--wp-text-2);
  font-size: 13px; font-weight: 400;
}
.mo-page .form-group { margin-bottom: 16px; }
.mo-page .btn-primary[type="submit"] {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px;
  margin-top: 4px;
  border: 0; border-radius: var(--wp-r);
  background: var(--wp-accent); color: var(--wp-accent-ink);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.mo-page .btn-primary[type="submit"]:hover { background: var(--wp-accent-hover); color: var(--wp-accent-ink); }

/* --- resultado do envio -----------------------------------------------
   O painel devolve dois números: quantos entraram e quantos falharam.
   No original vinham como texto corrido com <br>. Aqui viram dois blocos,
   e o de erros só fica vermelho se realmente houver erro. */
.mo-result {
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--wp-up);
  border-left-width: 3px;
  border-radius: var(--wp-r-lg);
  background: var(--wp-up-soft);
}
.mo-result.is-bad { border-color: var(--wp-down); background: var(--wp-down-soft); }

.mo-result-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 14px;
  color: var(--wp-up);
  font-size: 15px; font-weight: 600;
}
.mo-result.is-bad .mo-result-head { color: var(--wp-down); }

.mo-nums { display: flex; gap: 10px; flex-wrap: wrap; }
.mo-num {
  flex: 1; min-width: 120px;
  padding: 11px 14px;
  border-radius: var(--wp-r);
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
}
.mo-num small { display: block; color: var(--wp-text-2); font-size: 11.5px; margin-bottom: 2px; }
.mo-num b {
  font-size: 20px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.mo-num.is-ok b   { color: var(--wp-up); }
.mo-num.is-fail b { color: var(--wp-down); }
/* zero erro não merece vermelho */
.mo-num.is-fail.is-zero b { color: var(--wp-text-2); }

.mo-result-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px;
  color: var(--wp-text);
  font-size: 13.5px; font-weight: 500;
}
.mo-result-link:hover { color: var(--wp-accent); }

/* --- lateral --- */
.mo-tip {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--wp-text-2);
  font-size: 13px; line-height: 1.6;
}
.mo-tip + .mo-tip { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wp-border); }
.mo-tip i { color: var(--wp-text-3); font-size: 13px; margin-top: 2px; flex-shrink: 0; }
.mo-tip a { color: var(--wp-accent); }

.mo-bal {
  padding: 16px 18px;
  border: 1px solid var(--wp-accent-line);
  border-radius: var(--wp-r-lg);
  background: var(--wp-accent-soft);
  margin-bottom: 16px;
}
.mo-bal small { display: block; color: var(--wp-text-2); font-size: 12px; margin-bottom: 4px; }
.mo-bal b {
  display: block;
  color: var(--wp-accent);
  font-size: 22px; font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

@media (max-width: 767px) {
  .mo-page { padding: 16px 0 32px; }
  .mo-title { font-size: 20px; }
  .mo-card { padding: 16px; }

  /* no celular a régua come largura demais e o teclado já atrapalha:
     sai a numeração, volta a quebra normal de linha */
  .mo-lines { display: none; }
  .mo-page .mo-editor .form-control {
    padding-left: 14px;
    min-height: 260px;
    font-size: 13px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow-x: hidden;
  }
  .mo-num b { font-size: 18px; }
}


/* ==========================================================================
   26. ENTREGA GRADUAL (drip-feed)

   Reaproveita a tabela e as abas de Pedidos (.od-*) — é a mesma leitura,
   e duas telas parecidas com desenhos diferentes é o tipo de coisa que
   entrega tema improvisado. O que muda é só o que existe aqui e não lá:
   o andamento das execuções.
   ========================================================================== */

/* quantas execuções já rodaram das que foram contratadas */
.df-runs {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  min-width: 84px;
}
.df-runs-txt {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.df-runs-txt b { font-weight: 600; }
.df-runs-txt span { color: var(--wp-text-3); }
.df-runs-txt a { color: var(--wp-accent); font-weight: 600; }
.df-runs-txt a:hover { color: var(--wp-accent-hover); }

.df-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--wp-surface-3);
  overflow: hidden;
}
.df-bar i {
  display: block;
  height: 100%;
  background: var(--wp-accent);
  border-radius: 2px;
}
.df-bar.is-done i { background: var(--wp-up); }

@media (max-width: 767px) {
  /* dentro do cartão, a barra ocupa a largura que sobrar à direita */
  .od-page .od-table td[data-col="runs"] .df-runs { min-width: 120px; align-items: flex-end; }
  .od-page .od-table td[data-col="runs"] .df-bar { width: 100%; }
}
/* colunas que só existem na entrega gradual */
.od-page .od-table td[data-col="interval"],
.od-page .od-table th[data-col="interval"],
.od-page .od-table td[data-col="total"],
.od-page .od-table th[data-col="total"],
.od-page .od-table td[data-col="runs"],
.od-page .od-table th[data-col="runs"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.od-page .od-table td[data-col="interval"] { color: var(--wp-text-2); }

@media (max-width: 767px) {
  /* a ordem no cartão da entrega gradual */
  .od-page.df-page .od-table td[data-col="service"]  { order: 1; }
  .od-page.df-page .od-table td[data-col="status"]   { order: 2; }
  .od-page.df-page .od-table td[data-col="runs"]     { order: 3; }
  .od-page.df-page .od-table td[data-col="link"]     { order: 4; }
  .od-page.df-page .od-table td[data-col="qtd"]      { order: 5; }
  .od-page.df-page .od-table td[data-col="interval"] { order: 6; }
  .od-page.df-page .od-table td[data-col="total"]    { order: 7; }
  .od-page.df-page .od-table td[data-col="charge"]   { order: 8; }
  .od-page.df-page .od-table td[data-col="date"]     { order: 9; }
  .od-page.df-page .od-table td[data-col="id"]       { order: 10; }
  .od-page.df-page .od-table td[data-col="acao"]     { order: 11; }
}
/* pontinho de "está atualizando sozinho" no cartão de total de pedidos.
   Some quando o script para de reler — assim ele nunca promete o que não
   está mais fazendo. */
.no-live {
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--wp-info);
  vertical-align: 1px;
  animation: wpPulso 2s ease-in-out infinite;
}
@keyframes wpPulso {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(56, 189, 248, .45); }
  50%      { opacity: .5; box-shadow: 0 0 0 4px rgba(56, 189, 248, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .no-live { animation: none; }
}

/* ==========================================================================
   27. REPOSIÇÕES, ASSINATURAS E REEMBOLSOS

   As três reaproveitam a tabela de Pedidos (.od-*) e, na assinatura, a
   barra de andamento da entrega gradual (.df-*). Aqui só ficam os poucos
   ajustes que cada uma pede.
   ========================================================================== */

/* reembolso é dinheiro voltando: verde, mesma lógica das recargas */
.rf-page .od-table td[data-col="charge"] { color: var(--wp-up); }

/* colunas de data que só existem na assinatura */
.od-page .od-table td[data-col="atualizado"],
.od-page .od-table td[data-col="expira"] { color: var(--wp-text-2); white-space: nowrap; }

/* o link do pedido de origem, em reposições e reembolsos */
.od-page .od-table td[data-col="pedido"] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.od-page .od-table td[data-col="pedido"] a { color: var(--wp-accent); font-weight: 500; }
.od-page .od-table td[data-col="pedido"] a:hover { color: var(--wp-accent-hover); }

@media (max-width: 767px) {
  /* --- ordem no cartão: assinaturas ---
     São doze colunas. No celular o que interessa é para quem é, se está
     rodando e quanto já entregou; as três datas descem para o fim. */
  .od-page.sb-page .od-table td[data-col="service"]    { order: 1; }
  .od-page.sb-page .od-table td[data-col="status"]     { order: 2; }
  .od-page.sb-page .od-table td[data-col="link"]       { order: 3; }
  .od-page.sb-page .od-table td[data-col="novos"]      { order: 4; }
  .od-page.sb-page .od-table td[data-col="antigos"]    { order: 5; }
  .od-page.sb-page .od-table td[data-col="qtd"]        { order: 6; }
  .od-page.sb-page .od-table td[data-col="interval"]   { order: 7; }
  .od-page.sb-page .od-table td[data-col="expira"]     { order: 8; }
  .od-page.sb-page .od-table td[data-col="atualizado"] { order: 9; }
  .od-page.sb-page .od-table td[data-col="date"]       { order: 10; }
  .od-page.sb-page .od-table td[data-col="id"]         { order: 11; }
  .od-page.sb-page .od-table td[data-col="acao"]       { order: 12; }

  /* as duas barras de andamento também encostam à direita no cartão */
  .od-page .od-table td[data-col="novos"] .df-runs,
  .od-page .od-table td[data-col="antigos"] .df-runs { min-width: 120px; align-items: flex-end; }
  .od-page .od-table td[data-col="novos"] .df-bar,
  .od-page .od-table td[data-col="antigos"] .df-bar { width: 100%; }

  /* --- ordem no cartão: reposições --- */
  .od-page .od-table td[data-col="pedido"] { text-align: right; }
}

/* ==========================================================================
   28. FERRAMENTA — QUEM NÃO TE SEGUE DE VOLTA

   Página de uso único, com quatro estados que se substituem no mesmo lugar:
   busca → confirmação do preço → processando → resultado.

   O estado de processamento não é enfeite: a consulta de um perfil grande
   passa de um minuto, e tela parada nesse tempo faz o cliente recarregar
   a página no meio — o que gasta o dinheiro de novo sem entregar nada.
   ========================================================================== */

.nf-page { padding: 22px 0 48px; }

/* --- 1 · BUSCA -------------------------------------------------------- */

.nf-hero {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 0 24px;
  text-align: center;
}
.nf-hero-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  margin-bottom: 20px;
  border-radius: 18px;
  background: var(--wp-accent-soft);
  border: 1px solid var(--wp-accent-line);
  color: var(--wp-accent);
  font-size: 24px;
}
.nf-title {
  margin: 0 0 8px;
  font-size: 30px; font-weight: 700;
  letter-spacing: -.03em;
}
.nf-sub {
  margin: 0 0 28px;
  color: var(--wp-text-2);
  font-size: 15px; line-height: 1.6;
}

/* o campo: a arroba fica dentro, fixa, para o cliente não digitar duas */
.nf-search { position: relative; display: flex; gap: 10px; }
.nf-search-wrap { position: relative; flex: 1; min-width: 0; }
.nf-at {
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--wp-text-3);
  font-size: 17px; font-weight: 500;
  pointer-events: none;
}
.nf-page .nf-search input {
  width: 100%; height: 56px;
  padding: 0 16px 0 36px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-family: inherit;
  font-size: 17px;
  box-shadow: none;
}
.nf-page .nf-search input::placeholder { color: var(--wp-text-3); font-size: 16px; }
.nf-page .nf-search input:hover { border-color: var(--wp-border-2); }
.nf-page .nf-search input:focus {
  outline: none;
  border-color: var(--wp-accent);
  background: var(--wp-surface);
}
.nf-go {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 0 26px;
  border: 0; border-radius: var(--wp-r-lg);
  background: var(--wp-accent); color: var(--wp-accent-ink);
  font-family: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background var(--wp-t);
}
.nf-go:hover { background: var(--wp-accent-hover); color: var(--wp-accent-ink); }
.nf-go:disabled { opacity: .45; cursor: not-allowed; }

.nf-hint {
  margin-top: 14px;
  color: var(--wp-text-3);
  font-size: 12.5px; line-height: 1.6;
}

/* como funciona, em três passos */
.nf-steps {
  display: grid; gap: 12px;
  max-width: 720px; margin: 44px auto 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nf-step {
  padding: 16px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  background: var(--wp-surface);
  text-align: center;
}
.nf-step i {
  display: block;
  margin-bottom: 9px;
  color: var(--wp-accent);
  font-size: 17px;
}
.nf-step b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.nf-step span { color: var(--wp-text-2); font-size: 12.5px; line-height: 1.5; }

/* --- 2 · CONFIRMAÇÃO DO PREÇO ----------------------------------------- */

.nf-confirm {
  max-width: 460px;
  margin: 40px auto 0;
  padding: 24px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  background: var(--wp-surface);
}

.nf-who {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--wp-border);
}
.nf-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--wp-surface-3);
  border: 1px solid var(--wp-border-2);
  color: var(--wp-text-2);
  font-size: 18px; font-weight: 600;
  text-transform: uppercase;
  overflow: hidden;
}
.nf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nf-who-txt { min-width: 0; }
.nf-who-name { font-size: 15px; font-weight: 600; }
.nf-who-at { color: var(--wp-text-2); font-size: 13px; }

.nf-counts { display: flex; gap: 22px; padding: 16px 0; }
.nf-count small { display: block; color: var(--wp-text-2); font-size: 11.5px; margin-bottom: 2px; }
.nf-count b {
  font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* o preço: o número que decide o clique */
.nf-price {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--wp-accent-line);
  border-radius: var(--wp-r);
  background: var(--wp-accent-soft);
}
.nf-price small { display: block; color: var(--wp-text-2); font-size: 12px; margin-bottom: 2px; }
.nf-price b {
  color: var(--wp-accent);
  font-size: 22px; font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.nf-price-bal { text-align: right; }
.nf-price-bal small { color: var(--wp-text-2); }
.nf-price-bal span {
  color: var(--wp-text);
  font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nf-actions { display: flex; gap: 10px; margin-top: 16px; }
.nf-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px;
  border: 0; border-radius: var(--wp-r);
  background: var(--wp-accent); color: var(--wp-accent-ink);
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.nf-btn:hover { background: var(--wp-accent-hover); color: var(--wp-accent-ink); }
.nf-btn.is-ghost {
  flex: 0 0 auto; padding: 0 18px;
  background: transparent;
  border: 1px solid var(--wp-border);
  color: var(--wp-text-2);
}
.nf-btn.is-ghost:hover { background: var(--wp-surface-2); color: var(--wp-text); }

/* aviso de perfil privado / grande demais */
.nf-warn {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px; padding: 12px 14px;
  border-radius: var(--wp-r);
  background: var(--wp-warn-soft);
  color: var(--wp-text);
  font-size: 13px; line-height: 1.55;
}
.nf-warn i { color: var(--wp-warn); margin-top: 2px; flex-shrink: 0; }

/* --- 3 · PROCESSANDO -------------------------------------------------- */

.nf-work {
  max-width: 460px;
  margin: 60px auto 0;
  text-align: center;
}
.nf-work-ring {
  width: 62px; height: 62px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 3px solid var(--wp-surface-3);
  border-top-color: var(--wp-accent);
  animation: nfGira 900ms linear infinite;
}
@keyframes nfGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nf-work-ring { animation-duration: 3s; } }

.nf-work h2 { font-size: 19px; margin: 0 0 6px; }
.nf-work p { color: var(--wp-text-2); font-size: 13.5px; margin: 0 0 22px; }

.nf-track {
  height: 6px;
  border-radius: 3px;
  background: var(--wp-surface-3);
  overflow: hidden;
}
.nf-track i {
  display: block; height: 100%;
  border-radius: 3px;
  background: var(--wp-accent);
  transition: width 400ms ease;
}
.nf-track-txt {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 9px;
  color: var(--wp-text-2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* não fechar a página — o dinheiro já foi gasto */
.nf-keep {
  margin-top: 24px; padding: 12px 14px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface);
  color: var(--wp-text-2);
  font-size: 12.5px; line-height: 1.55;
}

/* --- 4 · RESULTADO ---------------------------------------------------- */

.nf-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.nf-head .nf-who { padding: 0; border: 0; flex: 1; min-width: 220px; }
.nf-redo {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 15px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: transparent;
  color: var(--wp-text-2);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer;
}
.nf-redo:hover { background: var(--wp-surface-2); border-color: var(--wp-border-2); color: var(--wp-text); }
.nf-redo b { color: var(--wp-up); }

.nf-stats {
  display: grid; gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
}
.nf-stat {
  padding: 14px 16px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  background: var(--wp-surface);
}
.nf-stat small { display: block; margin-bottom: 4px; color: var(--wp-text-2); font-size: 11.5px; }
.nf-stat b {
  font-size: 21px; font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.nf-stat.is-main { border-color: var(--wp-down); background: var(--wp-down-soft); }
.nf-stat.is-main b { color: var(--wp-down); }

/* abas do resultado */
.nf-tabs {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 12px; padding: 0 0 2px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.nf-tabs::-webkit-scrollbar { display: none; }
.nf-tabs li { flex-shrink: 0; }
.nf-tabs button {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--wp-border);
  border-radius: 999px;
  background: transparent;
  color: var(--wp-text-2);
  font-family: inherit; font-size: 13px; font-weight: 500;
  white-space: nowrap; cursor: pointer;
  transition: background var(--wp-t), border-color var(--wp-t), color var(--wp-t);
}
.nf-tabs button:hover { background: var(--wp-surface-2); border-color: var(--wp-border-2); color: var(--wp-text); }
.nf-tabs button.is-on {
  background: var(--wp-accent-soft);
  border-color: var(--wp-accent-line);
  color: var(--wp-accent);
  font-weight: 600;
}
.nf-tabs button em {
  font-style: normal;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--wp-surface-3);
  color: var(--wp-text-2);
  font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nf-tabs button.is-on em { background: rgba(43,127,255,.22); color: var(--wp-accent); }

/* barra de ferramentas da lista */
.nf-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.nf-filter { position: relative; flex: 1; min-width: 200px; }
.nf-page .nf-filter input {
  width: 100%; height: 38px;
  padding: 0 14px 0 36px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text);
  font-family: inherit; font-size: 14px;
  box-shadow: none;
}
.nf-page .nf-filter input:focus { outline: none; border-color: var(--wp-accent); background: var(--wp-surface); }
.nf-filter i {
  position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--wp-text-3); font-size: 13px;
}
.nf-copy {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r);
  background: transparent;
  color: var(--wp-text-2);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.nf-copy:hover { background: var(--wp-surface-2); border-color: var(--wp-border-2); color: var(--wp-text); }
.nf-copy.is-ok { border-color: var(--wp-up); color: var(--wp-up); }

/* a lista */
.nf-list {
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-r-lg);
  background: var(--wp-surface);
  overflow: hidden;
}
.nf-row {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 16px;
  border-top: 1px solid var(--wp-border);
  transition: background var(--wp-t);
}
.nf-row:first-child { border-top: 0; }
.nf-row:hover { background: var(--wp-surface-2); }

.nf-row .nf-avatar { width: 40px; height: 40px; font-size: 14px; }
.nf-row-txt { flex: 1; min-width: 0; }
.nf-row-at {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500;
}
.nf-row-name {
  color: var(--wp-text-2);
  font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nf-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .01em;
}
.nf-tag.is-ghost { background: var(--wp-surface-3); color: var(--wp-text-3); }
.nf-tag.is-priv  { background: var(--wp-info-soft); color: var(--wp-info); }
.nf-tag.is-ok    { background: var(--wp-info-soft); color: var(--wp-info); }

.nf-open {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--wp-r);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-size: 13px;
}
.nf-open:hover { background: var(--wp-surface-3); color: var(--wp-accent); }

.nf-more {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 46px;
  border: 0; border-top: 1px solid var(--wp-border);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer;
}
.nf-more:hover { color: var(--wp-text); }

.nf-none {
  padding: 44px 20px;
  text-align: center;
  color: var(--wp-text-2);
  font-size: 13.5px;
}
.nf-none i { display: block; font-size: 26px; color: var(--wp-text-3); margin-bottom: 10px; }

/* --- o convite para comprar, no fim do resultado ----------------------
   A ferramenta atrai; esta faixa é o que transforma em pedido. Fica no
   FIM da lista de propósito: quem chegou até aqui já viu o problema. */
.nf-cta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 18px; padding: 20px 22px;
  border: 1px solid var(--wp-accent-line);
  border-radius: var(--wp-r-lg);
  background: var(--wp-accent-soft);
}
.nf-cta-txt { flex: 1; min-width: 220px; }
.nf-cta-txt b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 4px; }
.nf-cta-txt span { color: var(--wp-text-2); font-size: 13.5px; line-height: 1.55; }
.nf-cta .nf-btn { flex: 0 0 auto; padding: 0 22px; }

/* --- CELULAR ---------------------------------------------------------- */
@media (max-width: 767px) {
  .nf-page { padding: 16px 0 32px; }
  .nf-hero { padding: 24px 0 18px; }
  .nf-hero-ico { width: 52px; height: 52px; font-size: 21px; margin-bottom: 16px; }
  .nf-title { font-size: 24px; }
  .nf-sub { font-size: 14px; margin-bottom: 22px; }

  /* o botão desce: lado a lado, o campo fica curto demais para caber um @ */
  .nf-search { flex-direction: column; }
  .nf-go { width: 100%; }
  /* 16px evita o zoom automático do iOS ao focar o campo */
  .nf-page .nf-search input { font-size: 16px; }

  .nf-steps { grid-template-columns: 1fr; margin-top: 28px; }
  .nf-step { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 13px 14px; }
  .nf-step i { margin: 2px 0 0; font-size: 15px; }

  .nf-confirm { margin-top: 22px; padding: 18px; }
  .nf-actions { flex-direction: column-reverse; }
  .nf-btn.is-ghost { width: 100%; }

  .nf-stats { grid-template-columns: 1fr; gap: 8px; }
  .nf-stat { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 14px; }
  .nf-stat small { margin: 0; }
  .nf-stat b { font-size: 18px; }

  .nf-head { gap: 10px; }
  .nf-redo { width: 100%; justify-content: center; }
  .nf-row { padding: 10px 13px; gap: 11px; }
  .nf-cta { padding: 16px; }
  .nf-cta .nf-btn { width: 100%; }
}

/* ==========================================================================
   28b. FERRAMENTA — peças escolhidas nos testes

   Decisões fechadas com o preview:
     · ícone grande = símbolo do Instagram em degradê
     · botão de analisar DENTRO do campo, não ao lado
     · os três cartões de "como funciona" viram selos numa linha
     · perfis consultados antes viram atalhos de um toque
   ========================================================================== */

/* o degradê do Instagram, num token só */
:root { --wp-ig: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }

/* --- o ícone grande ---
   Degradê aqui não é enfeite: diz de qual rede é a ferramenta antes de
   qualquer leitura. E é UM elemento, não uma lista inteira. */
.nf-hero-ico.is-ig {
  background: var(--wp-ig);
  border-color: transparent;
  color: #fff;
}

/* --- botão dentro do campo -------------------------------------------
   Ao lado, no celular, ele espremia o campo; embaixo, virava um bloco do
   tamanho da tela. Dentro, vira uma peça só — e 42px continua sendo alvo
   confortável para o dedo. */
.nf-search { flex-direction: row; }
.nf-search-wrap { flex: 1; min-width: 0; }
.nf-page .nf-search input { padding-right: 58px; }

.nf-go-in {
  position: absolute; right: 7px; top: 7px;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 0; border-radius: var(--wp-r);
  background: var(--wp-accent); color: var(--wp-accent-ink);
  font-size: 16px; cursor: pointer;
  transition: background var(--wp-t);
}
.nf-go-in:hover    { background: var(--wp-accent-hover); color: var(--wp-accent-ink); }
.nf-go-in:active   { background: var(--wp-accent-press); }
.nf-go-in:disabled { opacity: .5; cursor: default; }

/* --- selos de garantia ---
   Dizem o mesmo que os três cartões diziam, logo abaixo do campo, que é
   onde a dúvida ("vou ter que dar minha senha?") realmente aparece. */
.nf-safe {
  display: flex; align-items: center; justify-content: center;
  gap: 7px; flex-wrap: wrap;
  margin-top: 16px;
}
.nf-safe span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--wp-border);
  border-radius: 999px;
  background: var(--wp-surface);
  color: var(--wp-text-2);
  font-size: 11.5px; font-weight: 500;
  white-space: nowrap;
}
.nf-safe i { color: var(--wp-up); font-size: 10px; }

/* --- perfis consultados antes ---
   Digitar um @ comprido no celular é chato, e quem usa a ferramenta volta
   nos mesmos perfis. Fica guardado só no navegador da pessoa. */
.nf-recentes { max-width: 560px; margin: 22px auto 0; }
.nf-recentes-lab {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 9px; padding: 0 2px;
}
.nf-recentes-lab small {
  color: var(--wp-text-3);
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
}
.nf-recentes-lab button {
  border: 0; padding: 0; background: transparent;
  color: var(--wp-text-3);
  font-family: inherit; font-size: 11.5px;
  cursor: pointer;
}
.nf-recentes-lab button:hover { color: var(--wp-down); }

.nf-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.nf-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 6px;
  border: 1px solid var(--wp-border);
  border-radius: 999px;
  background: var(--wp-surface);
  color: var(--wp-text);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: border-color var(--wp-t), background var(--wp-t);
}
.nf-chip:hover { border-color: var(--wp-accent-line); background: var(--wp-surface-2); color: var(--wp-text); }
.nf-chip .av {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  background: var(--wp-surface-3);
  color: var(--wp-text-2);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase;
}
.nf-chip .av img { width: 100%; height: 100%; object-fit: cover; }

/* a foto de perfil de verdade, dentro do redondo */
.nf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   29. ETIQUETA DA REDE SOCIAL NAS CATEGORIAS

   Cada categoria ganha na frente o SÍMBOLO da rede, na cor da marca. O
   objetivo é varredura: numa lista de 40 itens o olho desce por uma coluna
   de símbolos em vez de ler nome por nome.

   POR QUE SÓ O SÍMBOLO (modelo 3, aprovado)
   Antes era uma pílula com fundo colorido e o nome da rede dentro. Cinco
   pílulas fortes empilhadas cansavam, e no escuro o degradê do Instagram
   puxava o olho para a linha errada. Num símbolo de 13px a cor identifica
   sem competir com o nome do serviço, que é o que a pessoa está lendo.

   POR QUE SEMPRE NA FRENTE
   Se o símbolo ficasse onde a palavra aparece no nome, ele mudaria de
   posição a cada linha e a coluna se perderia. O script o põe no começo.

   Quem monta isso é o script no fim do layout.twig — o select2 refaz a
   lista a cada busca, então não dá para fazer no Twig.
   ========================================================================== */

/* --- as cores das marcas ---
   Não são as oficiais em dois casos: o preto do TikTok e o branco do X
   somem no tema escuro. Foi escolhido um tom da mesma família que se lê
   nos dois temas. */
:root {
  --wp-r-instagram: #E1306C;
  --wp-r-tiktok:    #25F4EE;
  --wp-r-youtube:   #FF3D3D;
  --wp-r-facebook:  #1877F2;
  --wp-r-kwai:      #FF6A00;
  --wp-r-telegram:  #29A9EB;
  --wp-r-whatsapp:  #25D366;
  --wp-r-spotify:   #1DB954;
  --wp-r-twitter:   #8FA3B8;
  --wp-r-threads:   #B9BFC9;
  --wp-r-twitch:    #9146FF;
  --wp-r-linkedin:  #0A66C2;
  --wp-r-outro:     #8b94a3;
}

/* No claro, as cores claras precisam escurecer: ciano e cinza-claro sobre
   fundo branco não se leem. */
[data-theme="light"] {
  --wp-r-tiktok:   #0AA9A3;
  --wp-r-twitter:  #4A657F;
  --wp-r-threads:  #4A5058;
  --wp-r-kwai:     #D65800;
  --wp-r-whatsapp: #128C3E;
  --wp-r-spotify:  #12833B;
  --wp-r-youtube:  #E11D1D;
}

.wp-rede {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  flex-shrink: 0;
  margin-right: 2px;
  color: var(--wp-rede-cor, var(--wp-r-outro));
  font-size: 13px;
  line-height: 1;
}
.wp-rede i { font-size: 13px; }

.wp-rede[data-rede="instagram"] { --wp-rede-cor: var(--wp-r-instagram); }
.wp-rede[data-rede="tiktok"]    { --wp-rede-cor: var(--wp-r-tiktok); }
.wp-rede[data-rede="youtube"]   { --wp-rede-cor: var(--wp-r-youtube); }
.wp-rede[data-rede="facebook"]  { --wp-rede-cor: var(--wp-r-facebook); }
.wp-rede[data-rede="kwai"]      { --wp-rede-cor: var(--wp-r-kwai); }
.wp-rede[data-rede="telegram"]  { --wp-rede-cor: var(--wp-r-telegram); }
.wp-rede[data-rede="whatsapp"]  { --wp-rede-cor: var(--wp-r-whatsapp); }
.wp-rede[data-rede="spotify"]   { --wp-rede-cor: var(--wp-r-spotify); }
.wp-rede[data-rede="twitter"]   { --wp-rede-cor: var(--wp-r-twitter); }
.wp-rede[data-rede="threads"]   { --wp-rede-cor: var(--wp-r-threads); }
.wp-rede[data-rede="twitch"]    { --wp-rede-cor: var(--wp-r-twitch); }
.wp-rede[data-rede="linkedin"]  { --wp-rede-cor: var(--wp-r-linkedin); }

/* o Instagram nao tem uma cor, tem um degrade - mas degrade dentro de um
   simbolo de 13px vira sujeira. Fica o rosa da marca, que e o tom que as
   pessoas reconhecem. */
.wp-rede[data-rede="instagram"] { --wp-rede-cor: #E1306C; }

@media (max-width: 767px) {
  /* no celular a etiqueta encolhe para sobrar largura ao nome */
  .wp-rede { padding: 2px 7px; font-size: 11px; gap: 4px; }
}


/* ==========================================================================
   32. COMPRA RAPIDA — a pagina de Pedido em massa   (wassmm)

   Este bloco veio inteiro do preview que foi aprovado: modelo B (passos com
   barra de progresso) + tratamento 3 de cor (icone colorido, fundo tingido).

   Nao reescrever "melhorando": o desenho foi escolhido olhando lado a lado
   com outras quatro opcoes.
   ========================================================================== */
.cr-page { padding: 22px 0 120px; }
.cr-head { margin-bottom: 18px; }
.cr-title { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.cr-sub   { margin: 3px 0 0; color: var(--wp-text-2); font-size: 13px; }

/* --- rótulo de etapa --- */
.cr-lab { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.cr-lab i {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  background: var(--wp-accent); color: var(--wp-accent-ink);
  font: 700 11px Inter, sans-serif; font-style: normal;
}
.cr-lab span { color: var(--wp-text-2); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.cr-lab b { margin-left: auto; color: var(--wp-accent); font-size: 12.5px; font-weight: 600; }

/* --- os cards de tipo --- */
.cr-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (min-width: 768px) { .cr-cards { grid-template-columns: repeat(6, minmax(0,1fr)); } }

/* card sem servico correspondente some. Precisa ser explicito: o display:flex
   abaixo venceria o [hidden] do navegador. */
.cr-cards .cr-card[hidden] { display: none; }

.cr-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 96px; padding: 14px 8px;
  border: 1px solid var(--wp-border); border-radius: var(--wp-r-lg);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  text-align: center; cursor: pointer;
  transition: border-color var(--wp-t), background var(--wp-t), color var(--wp-t);
}
.cr-card:hover { border-color: var(--wp-border-2); background: var(--wp-surface-3); color: var(--wp-text); }
.cr-card i.ico { font-size: 21px; color: var(--wp-text-2); transition: color var(--wp-t); }
.cr-card b { display: block; font-size: 13px; font-weight: 600; color: inherit; }
.cr-card small { display: block; color: var(--wp-text-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }

.cr-card.is-on {
  border-color: var(--wp-accent);
  background: var(--wp-accent-soft);
  color: var(--wp-text);
}
.cr-card.is-on i.ico { color: var(--wp-accent); }
.cr-card.is-on::after {
  content: "\f00c";
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900;
  position: absolute; top: 7px; right: 9px;
  color: var(--wp-accent); font-size: 10px;
}

/* --- blocos de configuração --- */
.cr-bloco {
  margin-top: 18px; padding: 18px;
  border: 1px solid var(--wp-border); border-radius: var(--wp-r-lg);
  background: var(--wp-surface);
}
.cr-page .form-group { margin-bottom: 14px; }
.cr-page .form-group:last-child { margin-bottom: 0; }
.cr-page .control-label { display: block; margin-bottom: 7px; color: var(--wp-text-2); font-size: 13px; font-weight: 400; }
.cr-page .form-control {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--wp-border); border-radius: var(--wp-r);
  background: var(--wp-surface-2); color: var(--wp-text);
  font-size: 15px; box-shadow: none;
}
.cr-page .form-control:focus { border-color: var(--wp-accent); background: var(--wp-surface); box-shadow: none; }
.cr-page select.form-control {
  appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b94a3' d='M6 8.2 1.8 4l.9-.9L6 6.4l3.3-3.3.9.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.cr-dupla { display: grid; gap: 12px; }
@media (min-width: 600px) { .cr-dupla { grid-template-columns: 1fr 160px; } }

/* valor do item */
.cr-valor {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 13px 15px;
  border-radius: var(--wp-r); background: var(--wp-surface-2);
}
.cr-valor span { color: var(--wp-text-2); font-size: 13px; }
.cr-valor b { font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.cr-acoes { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.cr-btn {
  flex: 1; min-width: 150px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; border: 0; border-radius: var(--wp-r);
  background: var(--wp-accent); color: var(--wp-accent-ink);
  font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.cr-btn:hover { background: var(--wp-accent-hover); color: var(--wp-accent-ink); }
.cr-btn.is-ghost { background: transparent; border: 1px solid var(--wp-border); color: var(--wp-text-2); }
.cr-btn.is-ghost:hover { background: var(--wp-surface-2); color: var(--wp-text); }

/* --- resumo fixo no rodapé (o carrinho) --- */
.cr-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025;
  background: var(--wp-surface); border-top: 1px solid var(--wp-border);
  box-shadow: 0 -8px 24px rgba(0,0,0,.3);
}
.cr-dock-in {
  max-width: var(--wp-shell-w); margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 24px;
}
.cr-dock-itens { flex: 1; min-width: 0; line-height: 1.2; }
.cr-dock-itens small { display: block; color: var(--wp-text-2); font-size: 11.5px; }
.cr-dock-itens b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cr-dock-saldo { text-align: right; line-height: 1.2; flex-shrink: 0; }
.cr-dock-saldo small { display: block; color: var(--wp-text-2); font-size: 11.5px; }
.cr-dock-saldo span { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-dock .cr-btn { flex: 0 0 auto; min-width: 0; padding: 0 22px; }
@media (max-width: 767px) {
  .cr-dock-in { padding: 10px 16px; gap: 10px; }
  .cr-dock-saldo { display: none; }
  .cr-dock .cr-btn { padding: 0 16px; }
}

/* lista de itens já montados */
.cr-itens { margin-top: 18px; }
.cr-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--wp-border); border-radius: var(--wp-r);
  background: var(--wp-surface); margin-bottom: 8px;
}
.cr-item-ico {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--wp-r);
  background: var(--wp-accent-soft); color: var(--wp-accent); font-size: 13px;
}
.cr-item-txt { flex: 1; min-width: 0; }
.cr-item-txt b { display: block; font-size: 13.5px; font-weight: 500; }
.cr-item-txt small { color: var(--wp-text-2); font-size: 12px; word-break: break-all; }
.cr-item-val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-item-x {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--wp-r-sm);
  background: transparent; color: var(--wp-text-3); cursor: pointer;
}
.cr-item-x:hover { background: var(--wp-down-soft); color: var(--wp-down); }

/* ══════════ MODELO B · passos ══════════ */
.m-b .cr-bloco { display: none; }
.m-b .cr-bloco.is-passo { display: block; }
.cr-barra { display: none; gap: 6px; margin-bottom: 16px; }
.m-b .cr-barra { display: flex; }
.cr-barra i { flex: 1; height: 3px; border-radius: 2px; background: var(--wp-surface-3); }
.cr-barra i.is-on { background: var(--wp-accent); }


/* --- tratamento de cor 3 (aprovado): icone colorido, fundo tingido de leve.
   A cor diz O TIPO; o azul da acao diz O QUE ESTA ESCOLHIDO. Por isso nenhum
   card usa a cor de acao do tema. --- */
.cr-card { background: color-mix(in srgb, var(--c) 9%, var(--wp-surface)); }
.cr-card i.ico { color: var(--c); }
.cr-card:hover { background: color-mix(in srgb, var(--c) 15%, var(--wp-surface)); }
.cr-card.is-on { border-color: var(--wp-accent); background: var(--wp-accent-soft); color: var(--wp-text); }
.cr-card.is-on i.ico { color: var(--c); }

/* o icone do item no pedido herda a cor do tipo */
.cr-item-ico { background: color-mix(in srgb, var(--c, var(--wp-accent)) 16%, transparent); color: var(--c, var(--wp-accent)); }


/* ==========================================================================
   33. ABAS DO TOPO E AVISO DE QUANTIDADE

   Duas cápsulas de contorno (visual 15, aprovado), metade da largura cada.
   A ativa ganha borda azul e um fundo de leve.

   São links de verdade, cada um para sua página. A sensação de "continuo na
   mesma tela" vem de ficarem no mesmo lugar, com o mesmo desenho, nas duas —
   não de truque nenhum. Por isso a ORDEM é igual nas duas páginas.

   Metade da largura cada também é decisão de celular: com a largura do texto,
   "Novo pedido" ficaria bem menor que "Pedido em massa" e daria um alvo de
   dedo desigual.
   ========================================================================== */

.no-abas {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.no-abas a {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 44px;
  border: 1.5px solid var(--wp-border);
  border-radius: 999px;
  color: var(--wp-text-2);
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--wp-t), background var(--wp-t), color var(--wp-t);
}
.no-abas a:hover { border-color: var(--wp-border-2); color: var(--wp-text); }
.no-abas a > i { font-size: 14px; }
.no-abas a.is-on {
  border-color: var(--wp-accent);
  background: var(--wp-accent-soft);
  color: var(--wp-accent);
}
.no-abas a.is-on > i { color: var(--wp-accent); }

/* --- aviso de quantidade fora do limite ---
   Avisa enquanto digita; o bloqueio só acontece na hora de adicionar, que
   é quando ainda dá para consertar sem custo nenhum. */
.no-qtd-aviso {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 7px;
  color: var(--wp-down);
  font-size: 12.5px; line-height: 1.45;
}
.no-qtd-aviso::before {
  content: "\f06a";
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
  font-weight: 900; flex-shrink: 0; font-size: 12px;
}
.cr-page .form-control.is-fora,
.cr-page .form-control.is-fora:focus,
.no-page .form-control.is-fora,
.no-page .form-control.is-fora:focus { border-color: var(--wp-down); }

/* o jeito antigo (colar a lista) fica recolhido: é o caminho da minoria */
.cr-colar { margin-top: 18px; }
.cr-colar > summary {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 14px;
  border: 1px dashed var(--wp-border-2);
  border-radius: var(--wp-r);
  color: var(--wp-text-2);
  font-size: 13.5px; font-weight: 500;
  cursor: pointer; list-style: none;
}
.cr-colar > summary::-webkit-details-marker { display: none; }
.cr-colar > summary:hover {
  border-color: var(--wp-accent-line);
  background: var(--wp-surface-2);
  color: var(--wp-text);
}
.cr-colar[open] > summary { border-style: solid; color: var(--wp-text); }


@media (max-width: 767px) {
  .no-abas { gap: 8px; margin-bottom: 14px; }
  .no-abas a { height: 42px; font-size: 13px; gap: 7px; }
  .cr-colar > summary { display: flex; width: 100%; justify-content: center; }

  /* no celular a barra de abas ja ocupa o rodape: o resumo sobe para cima
     dela em vez de tapar a navegacao */
  .wp-has-tabbar .cr-dock { bottom: 58px; bottom: calc(58px + env(safe-area-inset-bottom)); }
  .cr-page { padding-bottom: 150px; }
}
@media (max-width: 380px) {
  /* "Pedido em massa" e o nome mais comprido: abaixo disso o icone rouba
     espaco dele e o texto comeca a ser cortado */
  .no-abas a > i { display: none; }
  .no-abas a { font-size: 12.5px; }
}

/* ==========================================================================
   34 . ESCOLHA A REDE SOCIAL  (neworder)

   Modelo I aprovado: um botao fechado + as 3 redes mais vendidas do lado.
   Fechado ocupa uma linha so; quem sempre pede a mesma rede resolve em um
   clique sem nunca abrir a lista.
   ========================================================================== */
.rs-bloco { margin-bottom: 16px; }
.rs-linha { display: flex; align-items: stretch; gap: 8px; }

.rs-tr {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 14px;
  border: 1px solid var(--wp-border); border-radius: var(--wp-r);
  background: var(--wp-surface-2); color: var(--wp-text);
  font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer;
}
.rs-tr:hover { border-color: var(--wp-accent-line); }
.rs-tr .ic { width: 20px; flex-shrink: 0; text-align: center; font-size: 15px; color: var(--wp-text-3); }
.rs-tr .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-tr .ca { flex-shrink: 0; color: var(--wp-text-3); font-size: 12px; transition: transform .16s ease; }
/* quantas categoria(s) sobraram depois do filtro: o botao fechado passa a
   dizer o que esta filtrado, entao ninguem precisa abrir para lembrar */
.rs-tr .qt { color: var(--wp-text-2); font-size: 12px; font-weight: 400; }
.rs-tr.is-open { border-color: var(--wp-accent-line); border-radius: var(--wp-r) var(--wp-r) 0 0; }
.rs-tr.is-open .ca { transform: rotate(180deg); }

/* os 3 atalhos */
.rs-atalhos { display: flex; gap: 6px; flex-shrink: 0; }
.rs-atalhos button {
  width: 46px; height: 46px;
  border: 1px solid var(--wp-border); border-radius: var(--wp-r);
  background: color-mix(in srgb, var(--c) 11%, var(--wp-surface));
  color: var(--c); font-size: 16px; cursor: pointer;
}
.rs-atalhos button:hover { background: color-mix(in srgb, var(--c) 20%, var(--wp-surface)); }
.rs-atalhos button.is-on { border-color: var(--wp-accent); box-shadow: inset 0 0 0 1px var(--wp-accent); }

/* o painel que abre */
.rs-pn {
  display: none; padding: 11px;
  border: 1px solid var(--wp-accent-line); border-top: 0;
  border-radius: 0 0 var(--wp-r) var(--wp-r);
  background: var(--wp-surface);
}
.rs-pn.is-open { display: block; }

.rs-gr { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
@media (min-width: 560px) { .rs-gr { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.rs-gr button {
  display: flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 9px 0 11px;
  border: 1px solid var(--wp-border); border-radius: var(--wp-r-sm);
  background: var(--wp-surface); color: var(--wp-text);
  font-size: 13px; font-weight: 500; text-align: left; cursor: pointer;
}
.rs-gr button i { flex-shrink: 0; font-size: 14px; color: var(--c); }
.rs-gr button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-gr button em {
  flex-shrink: 0; font-style: normal;
  padding: 2px 7px; border-radius: 999px;
  background: var(--wp-surface-3); color: var(--wp-text-2);
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.rs-gr button:hover { border-color: var(--wp-accent-line); background: var(--wp-accent-soft); }
.rs-gr button.is-on { border-color: var(--wp-accent); background: var(--wp-accent-soft); }
.rs-gr button.is-on em { background: var(--wp-accent); color: var(--wp-accent-ink); }

/* no celular o 3o atalho rouba largura do nome; ficam 2 */
@media (max-width: 420px) {
  .rs-atalhos button:nth-child(3) { display: none; }
  .rs-tr { padding: 0 11px; font-size: 13px; }
}

/* ==========================================================================
   35 . COMPRA RAPIDA - as duas abas e o estado vazio   (opcao 3 aprovada)
   ========================================================================== */

/* --- Instagram | Outra rede --- */
.cr-modo {
  display: flex; gap: 4px; margin: 0 0 16px; padding: 4px;
  border: 1px solid var(--wp-border); border-radius: var(--wp-r);
  background: var(--wp-surface-2);
}
.cr-modo button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; border: 0; border-radius: var(--wp-r-sm);
  background: transparent; color: var(--wp-text-2);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.cr-modo button i { font-size: 14px; }
.cr-modo button:hover { color: var(--wp-text); }
.cr-modo button.is-on {
  background: var(--wp-surface); color: var(--wp-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
}

.cr-modo-pane { display: none; }
.cr-modo-pane.is-on { display: block; }

/* --- a aba da lista pronta --- */
.cr-fora > p { margin: 0 0 12px; color: var(--wp-text-2); font-size: 13px; line-height: 1.6; }
.cr-fora > p b { color: var(--wp-text); font-weight: 600; }
.cr-fora-btn { width: 100%; margin-top: 12px; }
@media (min-width: 768px) { .cr-fora-btn { width: auto; min-width: 220px; } }

/* a barra fixa nao serve a esta aba: ela conta itens, e aqui nao ha itens */
.cr-dock.cr-dock-off { display: none; }

/* --- carrinho vazio que ensina --- */
.cr-vazio {
  padding: 26px 18px; text-align: center;
  border: 1px dashed var(--wp-border-2); border-radius: var(--wp-r);
}
.cr-vazio h4 { margin: 0 0 3px; font-size: 14.5px; }
.cr-vazio p  { margin: 0 0 16px; color: var(--wp-text-2); font-size: 12.5px; }
.cr-vazio-ps { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.cr-vazio-ps div {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--wp-surface-2); color: var(--wp-text-2); font-size: 12px;
}
.cr-vazio-ps em {
  font-style: normal; display: flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--wp-accent); color: var(--wp-accent-ink);
  font-size: 10px; font-weight: 700;
}
@media (max-width: 420px) {
  .cr-vazio { padding: 22px 12px; }
  .cr-vazio-ps { flex-direction: column; align-items: stretch; }
  .cr-vazio-ps div { justify-content: center; }
}


/* ==========================================================================
   36 . PAGINAS AINDA NAO REESCRITAS

   Estas regras existem para as 13 paginas que continuam no formato original
   do painel (api, termos, faq, inicial, notificacoes, afiliados, atualizacoes,
   painel filho, suporte, giro gratis, testes, nova pagina, blog).

   Elas nao usam nenhuma classe do tema - so as do Bootstrap 3. A secao 16 ja
   cuida de .well, .btn, .form-control, .table e .alert. O que faltava era
   isto aqui. Sem estas regras o conteudo encosta na barra do topo e o menu
   suspenso das atualizacoes fica branco no meio do tema escuro.

   Quando uma dessas paginas for reescrita, ela passa a trazer o proprio
   invólucro e deixa de depender desta secao.
   ========================================================================== */

/* o ar que o .wp-shell da nas paginas novas, o .container passa a dar nas
   antigas. So quando ele e o primeiro elemento da pagina - um .container
   aninhado dentro de outro nao deve ganhar padding de novo. */
body > .container,
body > .container-fluid,
body > .max-w-6xl {            /* a pagina de API usa este invólucro */
  padding-top: 24px;
  padding-bottom: 40px;
}
/* o .max-w-6xl vem de um utilitario que o painel pode nao carregar: sem
   isto a pagina de API ficaria colada nas bordas da tela */
body > .max-w-6xl {
  max-width: 1100px;
  margin-left: auto; margin-right: auto;
  padding-left: 24px; padding-right: 24px;
}

@media (max-width: 767px) {
  body > .container,
  body > .container-fluid,
  body > .max-w-6xl { padding-top: 16px; padding-bottom: 28px; }
  body > .max-w-6xl { padding-left: 16px; padding-right: 16px; }
}

/* abas em pilula (conta / notificacoes) */
.nav-pills > li > a {
  border-radius: 999px;
  padding: 8px 15px;
  color: var(--wp-text-2);
  font-size: 13px; font-weight: 500;
}
.nav-pills > li > a:hover { background: var(--wp-surface-2); color: var(--wp-text); }
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background: var(--wp-accent-soft);
  color: var(--wp-accent);
  font-weight: 600;
}

/* menu suspenso fora da pagina de servicos (a de atualizacoes usa um).
   Sem isto ele nasce branco do Bootstrap e cega no tema escuro. */
.dropdown-menu {
  padding: 6px;
  background: var(--wp-surface-3);
  border: 1px solid var(--wp-border-2);
  border-radius: var(--wp-r-lg);
  box-shadow: var(--wp-shadow);
}
.dropdown-menu > li > a,
.dropdown-menu .dropdown-item {
  padding: 9px 11px;
  border-radius: var(--wp-r-sm);
  color: var(--wp-text-2);
  font-size: 13.5px;
  white-space: normal;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background: var(--wp-surface-2);
  color: var(--wp-text);
}
.dropdown-menu .divider { background: var(--wp-border); }

/* .label do Bootstrap 3 e um selo, nao um rotulo de campo. Sem isto ele
   fica cinza-chumbo e some. */
.label {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--wp-r-sm);
  background: var(--wp-surface-2);
  color: var(--wp-text-2);
  font-size: 11.5px; font-weight: 600;
}
.label-default { background: var(--wp-surface-2); color: var(--wp-text-2); }

/* texto livre que o admin publica (termos, faq, inicial) */
.well p:last-child { margin-bottom: 0; }
.well a { color: var(--wp-accent); }
.well img { max-width: 100%; height: auto; }
.well table { width: 100%; }

/* ==========================================================================
   37 . NADA EMPURRA A PAGINA PARA O LADO

   Sintoma: no celular a pagina rolava para a direita e tudo parecia jogado
   para a esquerda, com uma faixa vazia sobrando.

   Duas causas, as duas tratadas aqui:

   1) A GAVETA FECHADA. Ela fica em position:fixed, encostada na direita e
      empurrada para fora com translateX(100%). Pela regra, elemento fixo
      nao deveria criar rolagem - mas o Safari do iPhone cria. O
      visibility:hidden tira ela da conta ate abrir, e de quebra impede que
      um link de dentro dela seja focado por engano com a gaveta fechada.

   2) QUALQUER COISA LARGA DEMAIS. O 'clip' corta o que passar da largura
      SEM criar caixa de rolagem - e e por isso que ele e usado aqui em vez
      de 'hidden'.

      ⚠️ NAO TROCAR POR 'overflow-x: hidden', nem aqui nem no <html>.
      'hidden' cria caixa de rolagem, e caixa de rolagem em QUALQUER
      ancestral desliga o position:sticky de tudo que esta dentro - a barra
      do topo para de grudar e some ao rolar, e as colunas laterais do Novo
      pedido, do Suporte e do Pedido em massa param de acompanhar.

      Ja aconteceu: uma versao anterior tinha 'html { overflow-x: hidden }'
      como "reserva para navegador antigo" e matou o grude da barra em todos
      os navegadores. Sem reserva e melhor - a causa de verdade (o numero do
      saldo comprido e a gaveta fechada) ja esta tratada acima.
   ========================================================================== */
body { overflow-x: clip; }

.wp-drawer:not(.is-open) { visibility: hidden; }
.wp-drawer.is-open { visibility: visible; }

/* a barra do topo nunca deve estourar: o nome encolhe antes disso */
.wp-topbar-inner { min-width: 0; }
.wp-brand { min-width: 0; overflow: hidden; }
.wp-wallet { min-width: 0; }
.wp-wallet-val { min-width: 0; overflow: hidden; }
.wp-wallet-val b { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 400px) {
  /* telas bem estreitas: o nome da marca vira so o simbolo */
  .wp-brand { font-size: 0; gap: 0; margin-right: 10px; }
  .wp-brand .wp-brand-mark { font-size: 17px; }
  .wp-brand img { font-size: 17px; }
}