/* ==========================================================================
   WasProvider — 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 (âmbar WasProvider) --- */
  --wp-accent:        #f7b500;
  --wp-accent-hover:  #ffc933;
  --wp-accent-press:  #d99c00;
  --wp-accent-ink:    #14161a;   /* texto EM CIMA do amarelo */
  --wp-accent-soft:   rgba(247, 181, 0, .12);
  --wp-accent-line:   rgba(247, 181, 0, .32);

  /* --- 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:          #3a8bfd;
  --wp-info-soft:     rgba(58, 139, 253, .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:          #0a0c10;   /* fundo da página */
  --wp-surface:     #14171d;   /* topbar, cards */
  --wp-surface-2:   #1b1f27;   /* hover, linha zebrada, campo */
  --wp-surface-3:   #232833;   /* elevado: dropdown, modal */
  --wp-border:      #252a34;   /* borda padrão */
  --wp-border-2:    #333a47;   /* borda em foco/hover */

  --wp-text:        #e9ecf1;   /* texto principal */
  --wp-text-2:      #8b94a3;   /* rótulo, secundário */
  --wp-text-3:      #5d6675;   /* 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(5, 7, 10, .72);
  color-scheme: dark;
}

/* --- CLARO -------------------------------------------------------------- */
[data-theme="light"] {
  /* O fundo é levemente cinza para que as superfícies brancas (topbar,
     cards) se destaquem dele. Fundo e card ambos #fff apagam a estrutura. */
  --wp-bg:          #f7f8fa;
  --wp-surface:     #ffffff;
  --wp-surface-2:   #f2f4f7;
  --wp-surface-3:   #ffffff;
  --wp-border:      #e3e6ea;
  --wp-border-2:    #cbd0d8;

  --wp-text:        #1e2329;
  --wp-text-2:      #707a8a;
  --wp-text-3:      #a3aab5;

  --wp-accent-ink:  #14161a;
  --wp-accent-soft: rgba(247, 181, 0, .14);

  --wp-shadow:      0 8px 24px rgba(24, 26, 32, .12);
  --wp-shadow-sm:   0 2px 8px rgba(24, 26, 32, .08);
  --wp-overlay:     rgba(24, 26, 32, .45);
  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);
}

/* 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='%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 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(247,181,0,.16), 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 WasProvider,
   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, #ffdf7a 0%, #ffc933 30%, #f7b500 65%, #d99c00 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: #c98f00; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  [data-theme="light"] .au-title .au-mark {
    background: linear-gradient(100deg, #e0a200 0%, #cf9400 40%, #b07d00 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(247,181,0,.05);
}
.au-node.is-top {
  color: var(--wp-accent);
  border-color: var(--wp-accent-line);
  box-shadow: 0 0 0 7px rgba(247,181,0,.09);
}

/* 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(247,181,0,.08), 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(58, 139, 253, .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;
}

/* --- barra de ação fixa (só no celular) --------------------------------
   O total e o botão ficam colados no rodapé enquanto o cliente rola a
   página, como no fechamento de compra de aplicativo. Ela toma o lugar da
   barra de navegação nesta página — duas barras empilhadas comeriam
   metade da tela. */
.no-dock { display: none; }

@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; }

  .no-dock {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1025;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--wp-surface);
    border-top: 1px solid var(--wp-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .3);
  }
  [data-theme="light"] .no-dock { box-shadow: 0 -8px 24px rgba(24, 26, 32, .1); }

  .no-dock-val { flex-shrink: 0; line-height: 1.15; }
  .no-dock-val small { display: block; color: var(--wp-text-2); font-size: 11px; }
  .no-dock-val b {
    font-size: 18px; font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
  }

  .no-dock-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 42px;
    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;
  }
  .no-dock-btn:active { background: var(--wp-accent-press); }

  /* nesta página, a barra de ação substitui a de navegação */
  body.wp-neworder .wp-tabbar { display: none; }
  body.wp-neworder.wp-has-tabbar { padding-bottom: 76px; }

  /* o botão do passo 4 sai de cena — a ação passa a ser a da barra,
     senão ficariam dois botões de enviar na mesma tela */
  .no-b4 .btn-primary { display: none; }

  /* o total também já aparece na barra */
  .no-b4 .no-total { display: none; }
}


/* ==========================================================================
   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='%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;
}
.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='%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;
}

/* --- 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='%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;
}
.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(58, 139, 253, .45); }
  50%      { opacity: .5; box-shadow: 0 0 0 4px rgba(58, 139, 253, 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; }
}