/**
 * Mini-cards de clube (.pm-card / .planos-mini) reutilizados fora da home —
 * principalmente no checkout e cart.
 *
 * Auto-contido: as variáveis ficam escopadas ao próprio componente para não
 * vazar nem depender do CSS global do tema 2026.
 *
 * Origem: assets/css/home/components/consulta.css (seção .planos-mini).
 */

.planos-mini {
  --cvc-green:        #00A94F;
  --cvc-green-700:    #008F42;
  --cvc-green-hover:  #00933F;
  --cvc-ink:          #131912;
  --cvc-ink2:         #5B5F57;
  --cvc-line:         #E4E4DC;
  --cvc-rainbow-1:    #FFC400;
  --cvc-radius-lg:    14px;
  --cvc-radius-round: 999px;
  --cvc-shadow-lg:    0 30px 60px -20px rgba(0,60,30,.15);
  --cvc-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --cvc-font-body:    'Inter', system-ui, sans-serif;
  --cvc-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --cvc-transition:   0.25s ease;

  margin: 32px 0 24px;
  padding-top: 28px;
  border-top: 1px solid var(--cvc-line);
  font-family: var(--cvc-font-body);
}

.planos-mini .pm-titulo {
  font-family: var(--cvc-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--cvc-ink);
  margin: 0;
  line-height: 1.2;
}
.planos-mini .pm-desc {
  font-size: 13.5px;
  color: var(--cvc-ink2);
  margin: 6px 0 0;
  line-height: 1.5;
}

.pm-carousel {
  position: relative;
  margin-top: 18px;
}

.pm-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 4px 10px;
  margin: 0 -4px;
}
.pm-grid::-webkit-scrollbar { display: none; }
.pm-grid:focus-visible {
  outline: 2px solid var(--cvc-green);
  outline-offset: 4px;
  border-radius: var(--cvc-radius-lg);
}

.pm-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: var(--cvc-radius-round);
  background: white;
  color: var(--cvc-ink);
  border: 1.5px solid var(--cvc-line);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.15);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .12s, opacity .15s;
  padding: 0;
}
.pm-nav:hover { background: var(--cvc-green); color: white; border-color: var(--cvc-green-700); }
.pm-nav:active { transform: translateY(-50%) scale(.95); }
.pm-nav:disabled { opacity: 0; pointer-events: none; }
.pm-prev { left: -16px; }
.pm-next { right: -16px; }

.pm-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: white;
  border: 1px solid var(--cvc-line);
  border-radius: var(--cvc-radius-lg);
  padding: 22px 18px 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  text-align: left;
  transition: transform var(--cvc-transition), box-shadow var(--cvc-transition);
}
.pm-card:hover { transform: translateY(-3px); box-shadow: var(--cvc-shadow-lg); }
.pm-card > .rainbow {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  display: flex;
  pointer-events: none;
}
.pm-card > .rainbow i {
  flex: 1;
  display: block;
  height: 100%;
}
.pm-card > .rainbow i:nth-child(1) { background: #FFC400; }
.pm-card > .rainbow i:nth-child(2) { background: #FF5A15; }
.pm-card > .rainbow i:nth-child(3) { background: #FF140A; }
.pm-card > .rainbow i:nth-child(4) { background: #FF5369; }
.pm-card > .rainbow i:nth-child(5) { background: #684B9E; }
.pm-card > .rainbow i:nth-child(6) { background: #034A9F; }
.pm-card > .rainbow i:nth-child(7) { background: #00BFD9; }
.pm-card > .rainbow i:nth-child(8) { background: #00B40E; }

.pm-card.hl { border-color: rgba(0,169,79,.5); }
.pm-card.dark { background: var(--cvc-ink); border-color: var(--cvc-ink); color: white; }
.pm-card.dark .pm-name,
.pm-card.dark .pm-tagline,
.pm-card.dark .pm-rs,
.pm-card.dark .pm-v,
.pm-card.dark .pm-s,
.pm-card.dark .pm-note { color: white; }
.pm-card.dark .pm-eyebrow { color: var(--cvc-rainbow-1); }

.pm-body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.pm-eyebrow {
  font-family: var(--cvc-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cvc-green);
}
.pm-tag {
  display: inline-block;
  background: var(--cvc-green);
  color: white;
  font-family: var(--cvc-font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--cvc-radius-round);
  align-self: flex-start;
}

.pm-name {
  font-family: var(--cvc-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--cvc-ink);
  margin-top: 8px;
  line-height: 1.2;
}
.pm-tagline {
  font-size: 12.5px;
  color: var(--cvc-ink2);
  margin-top: 4px;
  line-height: 1.45;
  min-height: 36px;
}

.pm-price {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.pm-rs {
  font-family: var(--cvc-font-mono);
  font-size: 11px;
  color: var(--cvc-ink2);
  font-weight: 700;
}
.pm-v {
  font-family: var(--cvc-font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--cvc-ink);
  letter-spacing: -1px;
  line-height: 1;
}
.pm-s {
  font-size: 11px;
  color: var(--cvc-ink2);
  margin-left: 2px;
}

.pm-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
  padding: 11px 16px;
  background: var(--cvc-green);
  color: white;
  border: 2px solid var(--cvc-green-700);
  border-radius: var(--cvc-radius-round);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 0 0 var(--cvc-green-700);
  transition: background .15s, transform .12s, box-shadow .12s;
}
.pm-cta:hover {
  background: var(--cvc-green-hover);
  box-shadow: 0 2px 0 0 var(--cvc-green-700);
  transform: translateY(2px);
  color: white;
  text-decoration: none;
}
.pm-cta:active {
  box-shadow: 0 0 0 0 var(--cvc-green-700);
  transform: translateY(4px);
}
.pm-card.dark .pm-cta {
  background: var(--cvc-rainbow-1);
  color: var(--cvc-ink);
  border-color: #b88a00;
  box-shadow: 0 4px 0 0 #b88a00;
}
.pm-card.dark .pm-cta:hover {
  background: #ffd333;
  box-shadow: 0 2px 0 0 #b88a00;
  color: var(--cvc-ink);
}

.pm-note {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--cvc-ink2);
  text-align: center;
}

/* ─────────────────────────────────────────────
 * Resumo do plano selecionado em #headerCheckout
 * (substitui o markup legado .textSuper / .textClube)
 *
 * O CSS legado em assets/less/pages/checkout.less posicionava o h4 como
 * absolute com font-size:40px / width:150px — pensado para o texto curto
 * "Plano Anual". Com os labels do ACF ("Plano anual Insiderclube" etc.) o
 * texto estoura. Aqui resetamos o legado e usamos flex linear com fontes
 * compactas que cabem em col-md-4 no desktop e em col-12 no mobile.
 * ───────────────────────────────────────────── */
/* Cor única para todos os clubes. A substituição global de #674A9A → #00b87a
   no LESS/dist já cobre o background herdado; este bloco mantém o fallback
   explícito e ajusta layout. */
#styleCheckout #headerCheckout .plano,
#headerCheckout .plano {
  background: #00b87a;
  font-size: 13px;
  line-height: 1.35;
  padding: 12px 16px;
  text-align: left;
}
#headerCheckout .plano .plano-resumo { display: none; }

#styleCheckout.clube        #headerCheckout .plano .text-clube,
#styleCheckout.superclube   #headerCheckout .plano .text-superclube,
#styleCheckout.clubemax     #headerCheckout .plano .text-clubemax,
#styleCheckout.eliteclube   #headerCheckout .plano .text-eliteclube,
#styleCheckout.insiderclube #headerCheckout .plano .text-insiderclube {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Desfaz o h4 absoluto do legado: especificidade maior (`.plano .plano-resumo h4`
   vs `.plano h4`) evita ter que usar !important. */
#headerCheckout .plano .plano-resumo h4 {
  position: static;
  width: auto;
  top: auto;
  left: auto;
  margin: 0;
  padding: 0;
  font-family: var(--cvc-font-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.2px;
  text-transform: none;
  flex: 1 1 auto;
  min-width: 0;
}
#headerCheckout .plano .plano-resumo p {
  margin: 0;
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
  flex: 0 0 auto;
}
#headerCheckout .plano .plano-resumo p b {
  font-family: var(--cvc-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 15px;
  font-weight: 800;
  display: inline-block;
}
#headerCheckout .plano .plano-resumo .woocommerce-Price-amount {
  font-size: 15px;
  font-weight: 800;
}
#headerCheckout .plano .plano-resumo .woocommerce-Price-currencySymbol {
  font-size: 10px;
  font-weight: 700;
  opacity: .85;
  margin-right: 2px;
}

/* Mobile: empilha em uma linha só, centralizado. col-md-4 vira col-12. */
@media (max-width: 767px) {
  #headerCheckout .plano { padding: 10px 14px; }
  #headerCheckout .plano .plano-resumo {
    justify-content: space-between;
    gap: 10px;
  }
  #headerCheckout .plano .plano-resumo h4 { font-size: 13px; }
  #headerCheckout .plano .plano-resumo p  { font-size: 11px; }
  #headerCheckout .plano .plano-resumo p b,
  #headerCheckout .plano .plano-resumo .woocommerce-Price-amount { font-size: 14px; }
}

/* Benefícios (.pm-benefits / .pm-bi) — espelham consulta.css (linhas 416–436).
   Adicionado em 2026-05-18 quando o carrossel do cart/checkout passou a
   exibir bullets vindos do Config API (clubevc_render_mini_card). */
.pm-benefits {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.pm-bi {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--cvc-ink2);
}
.pm-bi svg {
  color: var(--cvc-green);
  flex-shrink: 0;
  margin-top: 2px;
}
.pm-bi span { color: var(--cvc-ink2); }

.pm-card.dark .pm-bi span { color: white; }
.pm-card.dark .pm-bi svg  { color: #FFC400; }