/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 30 2026 | 20:08:12 */
/* ==========================================================================
   cp-pages-conta.css — prefixo cp-ct-
   Area da conta em /conta/ (PageContaHelper + cp-mod-conta.js): visao geral e
   plano e cobranca, fora da pagina de venda (30/10/2026). Prototipo aprovado:
   src-web/dev/demos/demo-conta.html; doc area-da-conta-estrutura.md.

   !important nas propriedades que o BuddyBoss disputa (color, margin, padding,
   line-height, font-weight, font-size, text-decoration). Respiro entre blocos
   sempre por classe: style="margin..." inline perde para o !important.
   ========================================================================== */

/* ── topo ── */
.cp-ct-hero {
  width: 100vw; margin-left: calc(-50vw + 50%) !important; box-sizing: border-box;
  background: linear-gradient(180deg, #1a1a1a 0%, #262626 100%);
  padding: 26px 24px 24px !important;
}
.cp-ct-hero-in { max-width: 1080px; margin: 0 auto !important; display: flex; align-items: center; gap: 16px; }
.cp-ct-hero-av {
  width: 56px; height: 56px; border-radius: 50%; background: #3a3a44; color: #fff !important; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 19px !important; font-weight: 700 !important; line-height: 1 !important;
}
.cp-ct-hero-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-ds .cp-ct-eyebrow {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: 3px; text-transform: uppercase;
  color: #F7D44A !important; margin: 0 0 4px !important; line-height: 1.3 !important;
}
.cp-ds h1.cp-ct-hero-nm { color: #fff !important; font-size: 24px !important; font-weight: 700 !important; margin: 0 !important; line-height: 1.2 !important; }
.cp-ds .cp-ct-hero-em { color: #cfcfd4 !important; font-size: 13px !important; margin: 3px 0 0 !important; line-height: 1.4 !important; }

/* ── moldura ── */
.cp-ct-wrap { max-width: 1080px; margin: 0 auto !important; padding: 22px 24px 60px !important; box-sizing: border-box; }
.cp-ct-grade { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.cp-ct-nav {
  background: #fff; border: 1px solid #e4e4e8; border-radius: 14px; padding: 8px !important;
  position: sticky; top: 12px; box-sizing: border-box;
}
.cp-ds .cp-ct-nav-g {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.5px; text-transform: uppercase;
  color: #8b8b94 !important; padding: 12px 12px 4px !important; margin: 0 !important; line-height: 1.3 !important;
}
.cp-ds a.cp-ct-nav-a, .cp-ds a.cp-ct-nav-a:visited {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px !important; margin: 0 !important; border-radius: 9px;
  font-size: 14px !important; font-weight: 400 !important; line-height: 1.35 !important;
  color: #2a2a32 !important; text-decoration: none !important;
}
.cp-ds a.cp-ct-nav-a:hover { background: #f5f5f7; }
.cp-ds a.cp-ct-nav-a.on, .cp-ds a.cp-ct-nav-a.on:visited { background: #1a1a1a; color: #fff !important; font-weight: 600 !important; }
.cp-ds .cp-ct-nav-a i.cp-ct-ni { width: 18px; text-align: center; color: #6b6b73 !important; font-size: 14px !important; }
.cp-ds .cp-ct-nav-a.on i.cp-ct-ni { color: #F7D44A !important; }
.cp-ct-pt { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #b3261e; flex: 0 0 auto; }
.cp-ds .cp-ct-nav-a i.cp-ct-seta { margin-left: auto; color: #b0b0b8 !important; font-size: 13px !important; display: none; }
.cp-ds a.cp-ct-voltar, .cp-ds a.cp-ct-voltar:visited {
  display: none; align-items: center; gap: 8px; margin: 0 0 14px !important;
  font-size: 14px !important; font-weight: 600 !important; color: #1a1a1a !important; text-decoration: none !important;
}

/* ── conteudo ── */
.cp-ds h2.cp-ct-tit { font-size: 21px !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 0 14px !important; line-height: 1.25 !important; }
.cp-ct-bloco {
  background: #fff; border: 1px solid #e4e4e8; border-radius: 14px; padding: 20px 22px !important;
  margin: 0 0 16px !important; box-sizing: border-box;
}
.cp-ds h2.cp-ct-h2 {
  font-size: 16px !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 0 14px !important;
  line-height: 1.3 !important; display: flex; align-items: center; gap: 10px;
}
/* ⚠️ O .fa define display e line-height e vence por ordem: sem o !important o
   glifo fica no canto do quadrado (mesma licao do cp-pages-conta-acesso). */
.cp-ds i.cp-ct-ic {
  width: 32px; height: 32px; border-radius: 9px; background: #f1f1f4; color: #44444c !important; flex: 0 0 auto;
  display: inline-flex !important; align-items: center; justify-content: center; font-size: 14px !important; line-height: 1 !important;
}
.cp-ds .cp-ct-txt { font-size: 14px !important; color: #44444c !important; margin: 0 !important; line-height: 1.55 !important; }
.cp-ds .cp-ct-txt-sep { margin: 14px 0 0 !important; }

.cp-ct-plano { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 14px !important; }
.cp-ds .cp-ct-plano-k { font-size: 12px !important; color: #6b6b73 !important; margin: 0 0 2px !important; line-height: 1.3 !important; }
.cp-ds .cp-ct-plano-v { font-size: 20px !important; font-weight: 800 !important; color: #1a1a1a !important; line-height: 1.25 !important; }
.cp-ds .cp-ct-sit {
  font-size: 12px !important; font-weight: 700 !important; border-radius: 999px; padding: 4px 10px !important;
  white-space: nowrap; line-height: 1.3 !important; flex: 0 0 auto;
}
.cp-ds .cp-ct-sit-ok { background: #e9f5ee; color: #2e7d4f !important; }
.cp-ds .cp-ct-sit-av { background: #fff3d6; color: #8a5a00 !important; }
.cp-ds .cp-ct-sit-er { background: #fdecea; color: #b3261e !important; }
.cp-ds .cp-ct-sit-ne { background: #efeff2; color: #55555e !important; }

.cp-ct-linhas { display: grid; gap: 8px; }
.cp-ct-li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #f7f7f9; border-radius: 10px; padding: 11px 14px !important;
}
.cp-ds .cp-ct-li .cp-ct-k { font-size: 13px !important; color: #6b6b73 !important; line-height: 1.4 !important; }
.cp-ds .cp-ct-li .cp-ct-v { font-size: 14px !important; font-weight: 600 !important; color: #1a1a1a !important; text-align: right; line-height: 1.4 !important; }
.cp-ds .cp-ct-li .cp-ct-v small { font-size: 12px !important; font-weight: 400 !important; color: #6b6b73 !important; }

.cp-ct-perks { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 0 !important; }
.cp-ds .cp-ct-perk {
  display: flex; align-items: center; gap: 8px; background: #fffbea; border: 1px solid #f3e6a8; border-radius: 10px;
  padding: 8px 12px !important; font-size: 13px !important; color: #33333a !important; line-height: 1.35 !important;
}
.cp-ds .cp-ct-perk i { color: #a37b00 !important; }

/* ── botoes ── */
.cp-ct-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0 0 !important; }
.cp-ds a.cp-ct-bt, .cp-ds a.cp-ct-bt:visited, .cp-ds button.cp-ct-bt {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  padding: 9px 15px !important; margin: 0 !important; font-family: inherit;
  font-size: 14px !important; font-weight: 700 !important; line-height: 1.3 !important; text-decoration: none !important; white-space: nowrap;
}
.cp-ds a.cp-ct-bt-am, .cp-ds a.cp-ct-bt-am:visited { background: #F7D44A; color: #1a1a1a !important; }
.cp-ds a.cp-ct-bt-pr, .cp-ds a.cp-ct-bt-pr:visited { background: #1a1a1a; color: #fff !important; }
.cp-ds a.cp-ct-bt-br, .cp-ds a.cp-ct-bt-br:visited { background: #fff; border-color: #e4e4e8; color: #1a1a1a !important; }
.cp-ds a.cp-ct-bt-br .fa-whatsapp { color: #1f9e57 !important; }
.cp-ds a.cp-ct-bt-lk, .cp-ds a.cp-ct-bt-lk:visited, .cp-ds button.cp-ct-bt-lk {
  background: none; border: 0; color: #1a1a1a !important; text-decoration: underline !important; padding: 9px 4px !important; font-weight: 600 !important;
}
.cp-ds a.cp-ct-bt-dis, .cp-ds a.cp-ct-bt-dis:visited {
  background: none; border: 0; color: #6b6b73 !important; text-decoration: underline !important;
  padding: 9px 4px !important; font-weight: 500 !important; font-size: 13px !important;
}
.cp-ds .cp-ct-cancela { margin: 0 !important; }

/* ── aviso no topo ── */
.cp-ct-alerta { border-radius: 14px; padding: 16px 18px !important; margin: 0 0 16px !important; display: flex; gap: 14px; align-items: flex-start; }
.cp-ds .cp-ct-alerta > i { font-size: 20px !important; margin: 2px 0 0 !important; }
.cp-ds .cp-ct-alerta-t { font-size: 15px !important; font-weight: 700 !important; margin: 0 0 3px !important; line-height: 1.35 !important; }
.cp-ds .cp-ct-alerta-d { font-size: 14px !important; line-height: 1.5 !important; }
.cp-ds .cp-ct-alerta .cp-ct-acoes { margin: 10px 0 0 !important; }
.cp-ds .cp-ct-alerta-er { background: #fdecea; border: 1px solid #f6c9c4; color: #6b1a14 !important; }
.cp-ds .cp-ct-alerta-er .cp-ct-alerta-t, .cp-ds .cp-ct-alerta-er .cp-ct-alerta-d { color: #6b1a14 !important; }
.cp-ds .cp-ct-alerta-er > i { color: #b3261e !important; }
.cp-ds .cp-ct-alerta-av { background: #fff7e0; border: 1px solid #f1dfa3; }
.cp-ds .cp-ct-alerta-av .cp-ct-alerta-t, .cp-ds .cp-ct-alerta-av .cp-ct-alerta-d { color: #5c4300 !important; }
.cp-ds .cp-ct-alerta-av > i { color: #b07d00 !important; }

/* ── atalhos da visao geral ── */
.cp-ct-atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-ds a.cp-ct-at, .cp-ds a.cp-ct-at:visited {
  display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #e4e4e8; border-radius: 14px;
  padding: 16px !important; margin: 0 !important; color: #1a1a1a !important; text-decoration: none !important;
}
.cp-ds a.cp-ct-at:hover { border-color: #c9c9d1; }
.cp-ct-at-b { display: flex; flex-direction: column; min-width: 0; }
.cp-ds .cp-ct-at-t { font-size: 14px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.35 !important; }
.cp-ds .cp-ct-at-d { font-size: 13px !important; color: #6b6b73 !important; margin: 2px 0 0 !important; line-height: 1.4 !important; overflow-wrap: anywhere; }

/* ── forma de pagamento ── */
.cp-ct-cartao { display: flex; align-items: center; gap: 14px; border: 1px solid #e4e4e8; border-radius: 12px; padding: 14px 16px !important; }
.cp-ds .cp-ct-cartao-ic {
  min-width: 46px; height: 32px; border-radius: 6px; background: #1a1f71; color: #fff !important; padding: 0 6px !important;
  font-size: 11px !important; font-weight: 800 !important; letter-spacing: .5px; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 auto;
}
.cp-ct-cartao-sit { margin-left: auto !important; }

/* ── pagamentos e compras ── */
.cp-ct-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px !important; }
.cp-ds button.cp-ct-filtro {
  font-family: inherit; border: 1px solid #e4e4e8; background: #fff; border-radius: 999px; cursor: pointer;
  padding: 5px 12px !important; margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: #33333a !important; line-height: 1.4 !important;
}
.cp-ds button.cp-ct-filtro.on { background: #1a1a1a; border-color: #1a1a1a; color: #fff !important; }
.cp-ds ul.cp-ct-hist { list-style: none; margin: 0 !important; padding: 0 !important; }
.cp-ds li.cp-ct-hi { display: flex; align-items: center; gap: 12px; padding: 12px 0 !important; margin: 0 !important; border-top: 1px solid #f0f0f3; }
.cp-ds li.cp-ct-hi:first-child { border-top: 0; }
.cp-ds li.cp-ct-hi[hidden] { display: none !important; }
.cp-ct-hi-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-ds .cp-ct-hi-t { font-size: 14px !important; font-weight: 600 !important; color: #1a1a1a !important; line-height: 1.35 !important; }
.cp-ds .cp-ct-hi-d { font-size: 12px !important; color: #6b6b73 !important; margin: 2px 0 0 !important; line-height: 1.4 !important; }
.cp-ct-hi-s { text-align: right; flex: 0 0 auto; max-width: 45%; display: flex; flex-direction: column; align-items: flex-end; }
.cp-ds .cp-ct-hi-v { font-size: 14px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.35 !important; }
.cp-ds .cp-ct-hi-v.cp-ct-hi-rev { text-decoration: line-through !important; color: #8b8b94 !important; }
.cp-ds .cp-ct-hi-st { font-size: 12px !important; font-weight: 600 !important; margin: 2px 0 0 !important; line-height: 1.35 !important; color: #2e7d4f !important; }
.cp-ds .cp-ct-hi-st-estornado, .cp-ds .cp-ct-hi-st-contestado, .cp-ds .cp-ct-hi-st-em_contestacao { color: #b3261e !important; }
.cp-ds .cp-ct-vazio { text-align: center; color: #6b6b73 !important; font-size: 14px !important; padding: 18px 0 !important; margin: 0 !important; }

/* ── sem sessao ── */
.cp-ct-login { background: #fff; border: 1px solid #e4e4e8; border-radius: 14px; padding: 24px !important; text-align: center; }
.cp-ds .cp-ct-login p { font-size: 15px !important; color: #33333a !important; margin: 0 0 14px !important; line-height: 1.5 !important; }

/* ── celular: a navegacao vira lista abaixo da visao geral; a secao ganha "voltar" ── */
@media (max-width: 768px) {
  .cp-ct-hero { padding: 20px 16px !important; }
  .cp-ds h1.cp-ct-hero-nm { font-size: 20px !important; }
  .cp-ct-hero-av { width: 46px; height: 46px; font-size: 16px !important; }
  .cp-ct-wrap { padding: 16px 16px 50px !important; }
  .cp-ct-grade { grid-template-columns: 1fr; gap: 16px; }
  .cp-ct-nav { position: static; order: 2; }
  .cp-ct-conteudo { order: 1; min-width: 0; }
  .cp-ds a.cp-ct-nav-a, .cp-ds a.cp-ct-nav-a:visited { padding: 13px 12px !important; border-radius: 0; border-bottom: 1px solid #f2f2f4; }
  .cp-ds a.cp-ct-nav-a.on, .cp-ds a.cp-ct-nav-a.on:visited { background: none; color: #2a2a32 !important; font-weight: 400 !important; }
  .cp-ds .cp-ct-nav-a.on i.cp-ct-ni { color: #6b6b73 !important; }
  .cp-ds .cp-ct-nav-a i.cp-ct-seta { display: inline-block; }
  .cp-ct-pt + .cp-ct-seta { margin-left: 8px !important; }
  /* a propria visao geral ja esta na tela: o item dela sai da lista */
  .cp-ct-nav a.cp-ct-nav-a:first-child { display: none; }
  .cp-ct-grade.cp-ct-emsecao .cp-ct-nav { display: none; }
  .cp-ds .cp-ct-grade.cp-ct-emsecao a.cp-ct-voltar { display: inline-flex; }
  .cp-ct-atalhos { display: none; }
  .cp-ct-bloco { padding: 16px !important; }
  .cp-ct-li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cp-ct-cartao { flex-wrap: wrap; }
  .cp-ct-cartao-sit { margin-left: 60px !important; }
  .cp-ds .cp-ct-li .cp-ct-v { text-align: left; }
  .cp-ds li.cp-ct-hi i.cp-ct-hi-ic { display: none !important; }
  .cp-ds .cp-ct-plano-v { font-size: 18px !important; }
  .cp-ds a.cp-ct-bt, .cp-ds a.cp-ct-bt:visited { white-space: normal; }
}