/*
 * BB – Preço Habitual (Badge Woo) – Design Plus (editável)
 * Cores, fontes, posição e responsivo.
 */

:root{
  /* Paleta */
  --bb-bg: #eefaf4;
  --bb-border: #c9efe0;
  --bb-accent: #0ea271;
  --bb-accent-700:#0b7e57;
  --bb-headline: #064e3b;
  --bb-sub: #0f766e;
  --bb-muted:#47635a;
  --bb-shadow: 0 10px 24px rgba(4,120,87,.18);

  /* Tipos e dimensões */
  --bb-font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --bb-font-size: 15px;
  --bb-headline-size: 14px;
  --bb-now-size: 20px;
  --bb-radius: 14px;
  --bb-gap: 12px;
  --bb-width: 320px;

  /* Posição float (desktop) */
  --bb-bottom: 130px;
  --bb-right: 24px;
  --bb-left: auto;
  --bb-z: 9999;
}

/* ===== Base ===== */
.bb-pt-badge{
  position: relative;
  margin: 0;
  padding: 14px 16px 16px 18px;
  border: 1px solid var(--bb-border);
  background: linear-gradient(180deg, #f3fdf8 0%, var(--bb-bg) 100%);
  border-radius: var(--bb-radius);
  display: inline-block;
  width: var(--bb-width);
  box-shadow: var(--bb-shadow);
  font: 500 var(--bb-font-size)/1.35 var(--bb-font);
  color: var(--bb-muted);
  backdrop-filter: saturate(1.05);
}

/* flutuante fixo */
.bb-pt-float{
  position: fixed !important;
  bottom: calc(var(--bb-bottom) + env(safe-area-inset-bottom, 0px)) !important;
  right: var(--bb-right);
  left: var(--bb-left);
  z-index: var(--bb-z);
}

/* faixa de acento lateral */
.bb-pt-badge::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width:5px; border-radius: var(--bb-radius) 0 0 var(--bb-radius);
  background: linear-gradient(180deg, var(--bb-accent) 0%, var(--bb-accent-700) 100%);
  opacity:.9;
}

/* botão fechar corrigido */
.bb-pt-close{
  position: absolute;
  top: 8px;
  right: 8px;           /* garante que fica no canto direito */
  background: none;     /* sem fundo branco */
  border: none;         /* remove borda */
  color: #666;          /* cor inicial */
  font-size: 30px;      /* tamanho do X */
  font-weight: 700;
  line-height: 0;
  cursor: pointer;
  padding: 0;
  margin: 0;
  z-index: 10;          /* garante que fica sobre o conteúdo */
}

/* ===== Topo ===== */
.bb-pt-headline{
  display:flex;
  align-items:center;
  justify-content:center; /* centraliza */
  gap: 8px;
  text-align:center;
  font-weight: 800;
  font-size: var(--bb-headline-size);
  color: var(--bb-headline);
  margin: 0 auto 6px;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ícone decorativo */
.bb-pt-headline::before{
  content:"";
  width:18px; height:18px; flex:0 0 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%230ea271'><path d='M12 2l7 3v6c0 5-3.8 9.4-7 11-3.2-1.6-7-6-7-11V5l7-3z'/><path fill='%23fff' d='M10.5 14.5l-2.5-2.5 1.4-1.4 1.1 1.1 3.6-3.6 1.4 1.4z'/></svg>") no-repeat center/contain;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}

/* chip de poupança centralizado */
.bb-pt-sub{
  display:block;
  width:max-content;
  margin: 0 auto 10px;
  font-weight:700;
  color: var(--bb-accent-700);
  background: rgba(14,162,113,.14);
  border: 1px solid rgba(14,162,113,.28);
  padding: 6px 12px;
  border-radius: 999px;
}

/* ===== Área de preços ===== */
.bb-pt-prices{
  display:grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--bb-gap);
  row-gap: 6px;
  align-items: end;
}
.bb-pt-prices .bb-pt-market{
  grid-column: 1 / 2;
  color: red;
  font-weight:600;
}
.bb-pt-prices .bb-pt-market s{
  opacity:.75;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(34,197,94,.85);
}
.bb-pt-prices .bb-pt-now{
  grid-column: 2 / 3;
  text-align:right;
  color:#0b1320;
}
.bb-pt-prices .bb-pt-now strong{
  font-weight: 900;
  font-size: var(--bb-now-size);
  letter-spacing:.2px;
}

/* interação */
.bb-pt-badge:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(4,120,87,.22);
  transition: .25s ease;
}

/* modo inline quando fechar (deixa de flutuar) */
.bb-pt-inline{
  position: static !important;
  width: 100% !important;
  margin: 10px 0;
  box-shadow: none;
}

/* mobile */
@media (max-width: 768px){
  :root{
    --bb-width: 92%;
    --bb-right: 4%;
    --bb-left: 4%;
    --bb-bottom: 120px;      /* ajusta a altura no mobile aqui */
    --bb-now-size: 19px;
  }
  .bb-pt-prices{ grid-template-columns: 1fr 1fr; }
}
.bb-pt-close:hover{
  color: #000;
}
/* --- HOTFIX MOBILE/GERAL: força posição e estilo do X --- */
.bb-pt-badge .bb-pt-close{
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  display: inline-block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #666 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  z-index: 10 !important;
}
.bb-pt-badge .bb-pt-close:hover{ color:#000 !important; }

/* Remove espaço em cima do título */
.bb-pt-badge .bb-pt-headline{
  margin-top: 0 !important;
  padding-top: 0 !important;
}