/* ============================================================
 * Coachecom — Planos V3 (Marco 5.55)
 * ------------------------------------------------------------
 * Redesign C (cards verticais) da landing page /planos/index.
 * Substitui table-modules (tabela comparativa) por grid de cards
 * verticais — padrao SaaS pricing modern.
 *
 * Layout:
 *   .plans-page              wrapper full-width + padding responsivo
 *   .plans-hero              h1 + subtitle centralizados
 *   .plans-grid              grid 4-col, vira 2x2 em tablet, 1col mobile
 *   .plan-card               cada plano (article)
 *     .plan-card__head       eyebrow + title
 *     .plan-card__price      preco grande + "/ano"
 *     .plan-card__features   ul com checks/x
 *     .plan-card__cta        button assinar full-width
 *   .plan-card--popular      destaque visual (borda primary + badge)
 * ============================================================ */

/* ─── Page wrapper ───────────────────────────────────────────
 * Marco 5.55 — tema external_pages tem bg dark blue. Forcamos
 * o conteudo da pagina (fora do header) a ter bg branco/cinza
 * claro pra os cards + hero ficarem legiveis com cor fg-1.
 * Container full-width com bg + max-width interno via padding.
 *
 * Marco 5.66 — html bg tambem fixado. Sem isso, o JS legacy do
 * external_pages.php define body.style.height = doc.height + 200,
 * mas o conteudo (.plans-page) pode ultrapassar essa altura,
 * mostrando o <html> bg padrao (white + mybg.png pattern cinza
 * #EFF0F0) na faixa entre o fim do body e o fim do conteudo.
 *
 * Marco 5.67 — neutraliza o JS de external_pages.php:31
 * (body.style.height = doc.height + 200). Override !important
 * vence inline style. Antes essa altura forcada criava scrollbar
 * com 200px de espaco vazio no fim da pagina. */
html { background: var(--bg-soft) !important; background-image: none !important; }
body:has(.plans-page) {
  background: var(--bg-soft) !important;
  height: auto !important;
  min-height: 100vh;
  /* Marco 5.69 — vence "Inria Sans" legacy do body. tokens.css define
     --font-sans = Inter; sem este force-down, headings/cards herdam
     a fonte serif do body criando mistura visual. */
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}
body:has(.plans-page) .plans-page,
body:has(.plans-page) .plans-page h1,
body:has(.plans-page) .plans-page h2,
body:has(.plans-page) .plans-page h3,
body:has(.plans-page) .plans-page h4,
body:has(.plans-page) .plans-page p,
body:has(.plans-page) .plans-page span:not(.fa):not(.glyphicon):not([class*="icon"]),
body:has(.plans-page) .plans-page a,
body:has(.plans-page) .plans-page button,
body:has(.plans-page) .plans-page label,
body:has(.plans-page) .plans-page input,
body:has(.plans-page) .plans-page li,
body:has(.plans-page) .plans-external-header,
body:has(.plans-page) .plans-external-header span:not(.fa):not(.glyphicon):not([class*="icon"]),
body:has(.plans-page) .plans-external-header a {
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}
.plans-page {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 24px 80px;
  background: transparent;
}
.plans-hero {
  text-align: center;
  margin-bottom: 48px;
}
.plans-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--fg-1);
  margin: 0 0 12px;
}
.plans-hero p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-4);
  max-width: 56ch;
  margin: 0 auto;
}
/* Campanha do plano superior (helper upsell, Planos::index): pílula discreta
   entre o título e o subtítulo — "Condição especial até {data}: {condição}". */
.plans-hero .plans-campaign-notice {
  display: inline-flex;
  align-items: center;
  max-width: none;
  margin: 0 auto 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brand-wash, var(--primary-soft, #eff6ff));
  color: var(--primary-fg);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

/* ─── Grid de cards ──────────────────────────────────────── */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .plans-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .plans-grid { grid-template-columns: 1fr; gap: 16px; }
  .plans-page { padding: 32px 16px 48px; }
}

/* ─── Card base ──────────────────────────────────────────── */
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 1px 2px rgba(11,18,32,.04);
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.plan-card:hover {
  border-color: var(--border-strong, #cbd5e1);
  box-shadow: 0 12px 24px -8px rgba(11,18,32,.12), 0 4px 8px -4px rgba(11,18,32,.06);
  transform: translateY(-2px);
}

/* Card popular (destaque) */
.plan-card--popular {
  border: 2px solid var(--brand-primary, #1d4ed8);
  box-shadow: 0 12px 28px -8px rgba(29,78,216,.20);
}
.plan-card--popular::before {
  content: 'Mais popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-primary, #1d4ed8);
  color: var(--on-accent, #fff);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ─── Card header (title + price) ────────────────────────── */
.plan-card__head {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-muted, #eef0f3);
}
/* Marco 5.70 — eyebrow opcional acima do nome (ex.: "Pacote de creditos"). */
.plan-card__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-fg);
  margin-bottom: 6px;
}
.plan-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0 0 4px;
}
.plan-card__tagline {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-4);
  margin: 0;
  line-height: 1.45;
}
.plan-card__price {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.plan-card__price-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  line-height: 1;
}
.plan-card__price-period {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--fg-4);
  font-weight: 500;
}
.plan-card__price-note {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-5);
}

/* ─── Features list ──────────────────────────────────────── */
.plan-card__features {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fg-2);
}
.plan-card__features li .feature-ico {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.plan-card__features li.feature--check .feature-ico { color: var(--success, #047857); }
.plan-card__features li.feature--x { color: var(--fg-5); }
.plan-card__features li.feature--x .feature-ico { color: var(--fg-5); }
.plan-card__features li.feature--x .feature-text { text-decoration: line-through; opacity: 0.7; }
.plan-card__features li strong {
  font-weight: 700;
  color: var(--fg-1);
}

/* ─── CTA ────────────────────────────────────────────────── */
.plan-card__cta {
  margin-top: auto;
}
.plan-card__cta .btn-comprar,
.plan-card__cta .btn-comprar:link,
.plan-card__cta .btn-comprar:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
  white-space: nowrap;
  text-align: center;
}
/* Marco 5.56 — !important crucial: style.css legacy define
   `.btn-primary { background-color: #337AB7 !important; border-color:
   #2e6da4 !important }` (azul BS3 antigo). Sem !important aqui o
   botao fica com a cor errada. Mesmo problema com danger/success
   por consistencia (style.css forca BS3 colors). */
.plan-card__cta .btn-primary {
  background: var(--brand-primary, #1d4ed8) !important;
  color: var(--on-accent, #fff) !important;
  border-color: transparent !important;
}
.plan-card__cta .btn-primary:hover,
.plan-card__cta .btn-primary:focus {
  background: var(--brand-hover, #1e40af) !important;
  color: var(--on-accent, #fff) !important;
  border-color: transparent !important;
}
.plan-card__cta .btn-danger {
  background: var(--danger, #dc2626) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.plan-card__cta .btn-danger:hover {
  background: #b91c1c !important;
  color: #fff !important;
  border-color: transparent !important;
}
.plan-card__cta .btn-success {
  background: var(--success, #047857) !important;
  color: #fff !important;
  border-color: transparent !important;
  cursor: default;
}
.plan-card__cta .btn-success:hover {
  background: var(--success, #047857) !important;
  color: #fff !important;
}

/* ─── Header external page ───────────────────────────────── */
/* Marco 5.56 — header branco (era dark blue gradient). Adiciona
   border-bottom sutil pra separacao do conteudo abaixo.
   Marco 5.69 — wrapper __inner com max-width 1240px (1100px em
   .checkout-page) pra alinhar logo+user pill com o conteudo. */
.plans-external-header {
  width: 100%;
  background: var(--bg);
  border-bottom: 1px solid var(--border-default, #e2e8f0);
  padding: 0;
}
.plans-external-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
body:has(.checkout-page) .plans-external-header__inner {
  max-width: 1100px;
}
.plans-external-header .logo {
  max-height: 40px;
  width: auto;
}
.plans-external-header .plans-external-auth {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fg-2, #1f2937);
}
.plans-external-header .plans-external-auth > span,
.plans-external-header .plans-external-auth a:not(.btn) {
  color: var(--fg-3, #475569);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.plans-external-header .plans-external-auth .btn {
  background: var(--brand-primary, #1d4ed8) !important;
  color: var(--on-accent, #fff) !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
}
.plans-external-header .plans-external-auth .btn:hover {
  background: var(--brand-hover, #1e40af) !important;
  color: var(--on-accent, #fff) !important;
}

/* Marco 5.67 — user pill (avatar + nome + chevron), inspirado em Tailwind UI. */
.plans-external-header .plans-external-user {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px !important;
  border-radius: 999px;
  background: transparent;
  transition: background-color .15s ease;
  text-decoration: none !important;
}
.plans-external-header .plans-external-user:hover,
.plans-external-header .plans-external-user:focus {
  background: rgba(15, 23, 42, .04);
  outline: none;
}
.plans-external-header .plans-external-user .avatar-v3 {
  flex-shrink: 0;
}
.plans-external-header .plans-external-user__name {
  color: var(--fg-2, #1f2937) !important;
  font-family: var(--font-sans);
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.plans-external-header .plans-external-user__chevron {
  width: 16px;
  height: 16px;
  color: var(--fg-3, #64748b);
  flex-shrink: 0;
}
.plans-external-header .plans-external-auth.dropdown.open .plans-external-user__chevron {
  transform: rotate(180deg);
}

/* Marco 5.68 — Dropdown V3 (vence BS3 .dropdown-menu legacy).
 * Visual moderno: rounded-lg, shadow profunda, padding 6px,
 * itens com SVG + texto e hover slate-50. */
.plans-external-header .plans-external-auth .dropdown-menu.plans-external-dropdown {
  min-width: 220px !important;
  margin-top: 8px !important;
  padding: 6px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 12px !important;
  background: var(--bg) !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, .12), 0 8px 10px -6px rgba(15, 23, 42, .08) !important;
  text-align: left !important;
  font-family: var(--font-sans) !important;
}
.plans-external-header .plans-external-auth .plans-external-dropdown > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  color: var(--fg-2, #1f2937) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
.plans-external-header .plans-external-auth .plans-external-dropdown > li > a:hover,
.plans-external-header .plans-external-auth .plans-external-dropdown > li > a:focus {
  background: rgba(15, 23, 42, .04) !important;
  color: var(--fg-1, #0f172a) !important;
  outline: none;
}
.plans-external-header .plans-external-auth .plans-external-dropdown__ico {
  width: 18px;
  height: 18px;
  color: var(--fg-3, #64748b);
  flex-shrink: 0;
}
.plans-external-header .plans-external-auth .plans-external-dropdown__sep {
  height: 1px !important;
  margin: 4px 6px !important;
  background: rgba(15, 23, 42, .08) !important;
  list-style: none;
}

@media (max-width: 480px) {
  .plans-external-header .plans-external-user__name {
    display: none;
  }
  .plans-external-header .plans-external-user {
    padding: 2px !important;
  }
}

@media (max-width: 640px) {
  .plans-external-header {
    padding: 16px 20px;
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ─── Checkout (Marco 5.58 -> 5.62) ────────────────────────
 * Tela /buy/plans/<modulo>/<gateway>. Layout invertido pos-5.62:
 * form esquerda 62% + resumo sticky direita 38% (padrao e-com).
 * Stepper no topo + resumo compacto (primeiras 3 features + details). */
.checkout-page {
  max-width: 1100px;
}

/* Stepper (Marco 5.62) */
.checkout-stepper {
  margin: 0 auto 24px;
  display: flex;
  justify-content: center;
}
.checkout-stepper ol {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.checkout-stepper .step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-4);
}
.checkout-stepper .step.is-active { color: var(--primary-fg); }
.checkout-stepper .step.is-complete { color: var(--fg-2); }
/* --fg-3 (alias de --ink-2), nao --fg-4: sobre --surface-muted o --fg-4
   da 4.34:1 — a divida conhecida registrada no CONTRATO-DS. So aparecia
   em stepper com passo INATIVO, que ate agora nenhuma tela renderizava
   (as outras tem apenas "concluido + ativo"). --fg-3 da 6.8:1. */
.checkout-stepper .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-muted, #f1f5f9);
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.checkout-stepper .step.is-active .step-num {
  background: var(--brand-primary, #1d4ed8);
  color: var(--on-accent, #fff);
}
.checkout-stepper .step.is-complete .step-num {
  background: var(--success, #047857);
  color: #fff;
}
.checkout-stepper .step.is-complete .step-num svg { width: 14px; height: 14px; }
.checkout-stepper .step-connector {
  width: 36px;
  height: 2px;
  background: var(--border-default, #e2e8f0);
  border-radius: 999px;
}
@media (max-width: 640px) {
  .checkout-stepper .step-label { display: none; }
  .checkout-stepper ol { gap: 8px; }
}

.checkout-hero {
  text-align: center;
  margin-bottom: 28px;
}
.checkout-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--fg-1);
  margin: 0 0 8px;
}
.checkout-hero p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--fg-4);
  margin: 0;
  line-height: 1.5;
}

/* Marco 5.62/5.63 — grid invertido: form fluid esquerda + resumo fixo
   direita (320px). Sticky comportava estranho com fr units +
   minmax — resumo ficava 220 e card overflow 260. Largura fixa
   resolve. */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; gap: 20px; }
  /* No mobile: resumo no topo (collapse) + form abaixo */
  .checkout-grid .checkout-summary { order: -1; }
}

/* Resumo aside sticky no desktop.
   Marco 5.63 — overrides necessarios pra vencer 2 regras legacy do
   smartadmin pra tag <aside>:
     `#header > :first-child, aside { width: 220px }`
     `aside { display:block; overflow:hidden; min-height:100%;
              background: linear-gradient(dark gray) }`
   Sem esses overrides, o card fica:
     - 220px largura (em vez de 320 alocado pelo grid)
     - 1145px altura (esticando junto com form + min-height 100%)
     - Cinza escuro embaixo do card (gradient legacy aparecendo
       atras do .plan-card branco) */
aside.checkout-summary {
  position: sticky;
  top: 24px;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  align-self: start;
  height: fit-content;
}
@media (max-width: 900px) {
  aside.checkout-summary { position: static; }
}
.checkout-summary .plan-card--summary {
  margin: 0;
}
.checkout-summary .plan-card--summary:hover {
  transform: none;
  border-color: var(--border-default, #e2e8f0);
  box-shadow: 0 1px 2px rgba(11,18,32,.04);
}

/* Marco 5.62 — Card compact (resumo enxuto + details + selo seguro) */
.plan-card--compact .plan-card__head {
  margin-bottom: 16px;
  padding-bottom: 16px;
}
.plan-card--compact .plan-card__name { font-size: 18px; }
.plan-card--compact .plan-card__price-amount { font-size: 26px; }
/* Marco 5.63 — overrides do .plan-card que faziam o card esticar
   no checkout (height excessiva com vazio embaixo):
   - flex: initial em .plan-card__features (era 1 pra alinhar CTAs
     nos 4 cards da /planos; aqui nao tem CTA pra alinhar)
   - height auto no card pra respeitar conteudo
   - min-width 260px pra evitar comprimido no grid 38% */
.plan-card--compact .plan-card__features {
  flex: initial;
  gap: 8px;
  margin-bottom: 12px;
}
.plan-card--compact .plan-card__features li { font-size: 13px; }
.plan-card--compact {
  height: auto;
  width: 100%;
}
.plan-card__more-details {
  margin-bottom: 16px;
}
.plan-card__more-details > summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-fg);
  padding: 6px 0;
  list-style: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.plan-card__more-details > summary::-webkit-details-marker { display: none; }
.plan-card__more-details > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms;
  margin-left: 4px;
  margin-bottom: 3px;
}
.plan-card__more-details[open] > summary::after { transform: rotate(225deg); margin-bottom: 0; margin-top: 3px; }
.plan-card__more-details > summary:hover { color: var(--brand-hover, #1e40af); }
.plan-card__features--rest {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-muted, #eef0f3);
}
.plan-card__trust {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border-muted, #eef0f3);
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--fg-4);
  line-height: 1.4;
}
.plan-card__trust .trust-ico {
  width: 16px;
  height: 16px;
  color: var(--success, #047857);
  flex-shrink: 0;
}

/* Form de pagamento — card branco V3 */
.checkout-form {
  background: var(--bg);
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 1px 2px rgba(11,18,32,.04);
}
.checkout-form h2,
.checkout-form .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0 0 20px;
}

/* Form gateway (panel BS3 antigo) */
.checkout-form .panel-default,
.checkout-form .panel {
  border: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
}
.checkout-form .panel-heading,
.checkout-form .panel-title {
  background: transparent !important;
  border: 0;
  padding: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--fg-1);
}
.checkout-form .panel-body { padding: 0; }

/* Tabs cartao/PIX dentro do form */
.checkout-form .nav-tabs,
.checkout-form [role="tablist"] {
  border-bottom: 1px solid var(--border-muted, #eef0f3);
  margin-bottom: 20px;
}

/* Inputs */
.checkout-form .form-control,
.checkout-form input[type="text"]:not(.cs-radio),
.checkout-form input[type="email"]:not(.cs-radio),
.checkout-form input[type="tel"]:not(.cs-radio),
.checkout-form select {
  border: 1px solid var(--border-default, var(--border-field)) !important;
  border-radius: 10px !important;
  height: 40px !important;
  padding: 0 12px !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
}
.checkout-form label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  margin-bottom: 6px;
}

/* Botao primary do form (Pagar / Finalizar) */
.checkout-form .btn-primary {
  background: var(--brand-primary, #1d4ed8) !important;
  color: var(--on-accent, #fff) !important;
  border-color: transparent !important;
  height: 44px !important;
  padding: 0 20px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.checkout-form .btn-primary:hover {
  background: var(--brand-hover, #1e40af) !important;
}


/* ─── Form MercadoPago — overrides V3 (Marco 5.60) ──────────
 * O form_mercadopago.php (e form_pagseguro.php) tem CSS inline
 * proprio (cores, sizes, border-radius). Vamos sobrescrever pra
 * alinhar ao design system V3 — cores brand, font-display nos
 * titulos, height 44px nos inputs, btn-primary radius 10px. */

/* Header secao "Forma de Pagamento" */
.checkout-form h4,
.checkout-form #payment-methods h4 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  letter-spacing: -0.015em !important;
  color: var(--fg-1) !important;
  margin: 0 0 16px !important;
}

/* "Preencha seus dados" (checkout-form-title) */
.checkout-form .checkout-form-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--fg-1) !important;
  margin: 24px 0 12px !important;
  letter-spacing: -0.01em !important;
}

/* Tab buttons legacy (caso ainda usados em pagseguro form) */
.checkout-form .checkout-method-btn {
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--fg-2) !important;
  background: var(--bg) !important;
  border: 1px solid var(--border-default, #e2e8f0) !important;
  transition: border-color 150ms, background 150ms, color 150ms !important;
}
.checkout-form .checkout-method-btn:hover {
  border-color: var(--border-strong, #cbd5e1) !important;
  background: var(--surface-muted, #f1f5f9) !important;
  color: var(--fg-1) !important;
}
.checkout-form .checkout-method-btn.active {
  border-color: var(--brand-primary, #1d4ed8) !important;
  background: var(--brand-wash, var(--primary-soft, #eff6ff)) !important;
  color: var(--primary-fg) !important;
}


/* ─── Radio cards de pagamento (Marco 5.64) ───────────────
 * Substitui pill buttons simples por cards verticais maiores
 * com radio dot + icone + titulo + descricao + bandeiras.
 * Padrao Stripe/Shopify checkout. */
.payment-methods-radios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
  width: 100%;
  /* Marco 5.64 — display grid sem width explicit ficava com 0 dentro
     do .row do BS3 (parent block). 100% expande pra preencher. */
}
@media (max-width: 540px) {
  .payment-methods-radios { grid-template-columns: 1fr; }
}

.checkout-form .payment-method-radio {
  /* override BS3 button reset */
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  padding: 16px;
  background: var(--bg);
  border: 1.5px solid var(--border-default, #e2e8f0);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
  width: 100%;
  min-height: 96px;
}
.checkout-form .payment-method-radio:hover {
  border-color: var(--border-strong, #cbd5e1);
  background: var(--surface-muted, #f8fafc);
}
.checkout-form .payment-method-radio.active {
  border-color: var(--brand-primary, #1d4ed8) !important;
  background: var(--brand-wash, #eff6ff) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .08);
}

/* Dot radio indicator (canto sup direito) */
.payment-method-radio__dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong, #cbd5e1);
  background: var(--bg);
  flex-shrink: 0;
  transition: border-color 150ms, background 150ms;
}
.payment-method-radio.active .payment-method-radio__dot {
  border-color: var(--brand-primary, #1d4ed8);
  background: var(--brand-primary, #1d4ed8);
  box-shadow: inset 0 0 0 4px #fff;
}

/* Icone grande do metodo */
.payment-method-radio__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface-muted, #f1f5f9);
  color: var(--fg-2);
  flex-shrink: 0;
  transition: background 150ms, color 150ms;
}
.payment-method-radio__icon svg {
  width: 22px;
  height: 22px;
}
.payment-method-radio.active .payment-method-radio__icon {
  background: var(--brand-primary, #1d4ed8);
  color: var(--on-accent, #fff);
}

/* Body: titulo + descricao + brands/badge */
.payment-method-radio__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  padding-right: 28px; /* espaco pro radio dot no canto */
}
.payment-method-radio__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--fg-1);
  line-height: 1.3;
}
.payment-method-radio.active .payment-method-radio__title {
  color: var(--primary-fg);
}
/* --fg-3 (alias de --ink-2), nao --fg-4: no cartao ATIVO o fundo vira
   --brand-wash, que deriva do accent do owner. Em owner de accent neutro
   (Evo, #2e2e2e) o wash resolve para um cinza #ececec, onde o --fg-4
   (#64748b) caia para 4.03:1 no tema claro — abaixo do AA para 12.5px.
   Medido nos 4 estados com --fg-3: claro ativo 6.0:1, claro inativo 7.5:1,
   escuro ativo 7.2:1, escuro inativo 8.4:1. */
.payment-method-radio__desc {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--fg-3);
  line-height: 1.35;
}

/* Bandeiras (Cartao) */
.payment-method-radio__brands {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.payment-method-radio__brands .pm-brand {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--surface-muted, #f1f5f9);
  color: var(--fg-3);
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--border-muted, #eef0f3);
}
.payment-method-radio.active .payment-method-radio__brands .pm-brand {
  background: rgba(255,255,255,.7);
  border-color: rgba(29,78,216,.15);
  color: var(--fg-2);
}

/* Badge (PIX) */
.payment-method-radio__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--success-soft, #ecfdf5);
  color: var(--success, #047857);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  align-self: flex-start;
}

/* Labels do form CC/Pix */
.checkout-form label,
.checkout-form #payment-method-panels label {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--fg-2) !important;
  margin-bottom: 6px !important;
}

/* Inputs (incluindo os <div class="form-control"> do SDK MP que viram iframe) */
.checkout-form .form-control,
.checkout-form input[type="text"]:not(.cs-radio),
.checkout-form input[type="email"]:not(.cs-radio),
.checkout-form input[type="tel"]:not(.cs-radio),
.checkout-form select,
.checkout-form #payment-method-panels .form-control,
.checkout-form #payment-method-panels input.form-control,
.checkout-form #payment-method-panels select.form-control,
.checkout-form #payment-method-panels div.form-control {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-default, var(--border-field)) !important;
  background: var(--bg) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  color: var(--fg-1) !important;
  box-shadow: none !important;
  transition: border-color 150ms, box-shadow 150ms !important;
}
.checkout-form .form-control:focus,
.checkout-form input:focus:not(.cs-radio),
.checkout-form select:focus,
.checkout-form #payment-method-panels .form-control:focus {
  outline: none !important;
  border-color: var(--brand-primary, #1d4ed8) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .12) !important;
}
.checkout-form input::placeholder,
.checkout-form #payment-method-panels input::placeholder {
  color: var(--fg-5, #64748b) !important;
  font-weight: 400 !important;
}

/* Botao principal "Finalizar Compra"
   Nota: SEM !important no display pra preservar style="display:none"
   inline (3 buttons submit-credit-card/boleto/pix, so 1 visivel por vez). */
.checkout-form .checkout-submit-main,
.checkout-form button[type="submit"].btn-primary,
.checkout-form .btn-primary {
  background: var(--brand-primary, #1d4ed8) !important;
  color: var(--on-accent, #fff) !important;
  border: 1px solid transparent !important;
  height: 52px !important;
  padding: 0 24px !important;
  border-radius: 10px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 150ms !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* Botao ativo (display!=none): flex layout pra label + amount */
.checkout-form .checkout-submit-main:not([style*="display:none"]):not([style*="display: none"]) {
  display: inline-flex;
}
.checkout-form .checkout-submit-main:hover,
.checkout-form button[type="submit"].btn-primary:hover,
.checkout-form .btn-primary:hover {
  background: var(--brand-hover, #1e40af) !important;
  color: var(--on-accent, #fff) !important;
}
/* Marco 5.62 — preco embutido no botao (transparency) */
.checkout-form .checkout-submit-main .checkout-submit-label {
  font-size: 15px;
  font-weight: 600;
}
.checkout-form .checkout-submit-main .checkout-submit-amount {
  font-size: 16px;
  font-weight: 700;
  background: rgba(255,255,255,.16);
  padding: 4px 12px;
  border-radius: 8px;
  letter-spacing: -0.01em;
}

/* Container do form (#payment-methods .well) — zera bg cinza BS3 */
.checkout-form #payment-methods .well {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Alert info dentro do form (PIX msg etc) */
.checkout-form .alert.alert-info,
.checkout-form #payment-method-panels .alert.alert-info {
  background: var(--primary-soft, #eff6ff) !important;
  border: 0 !important;
  border-left: 4px solid var(--brand-primary, #1d4ed8) !important;
  border-radius: 8px !important;
  color: var(--fg-2) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
}

/* Asterisco de campo obrigatorio.
   Substitui o <span style="color:red"> que os partials de gateway traziam
   inline (25x em cada um). O vermelho puro dava 4.14:1 no escuro e 4.00:1
   no claro, abaixo do AA de 4.5:1 para 13px; --danger da 6.5:1 no claro
   (#b91c1c) e 8:1 no escuro (#fca5a5).

   Regra NAO escopada em .checkout-form de proposito: os partials sao
   incluidos por 4 views (buy_plan_evo, buy_credits, buy_plans,
   buy_research_strengths_map) e nem todas envolvem o formulario nesse
   wrapper. Como planos-v3.css e carregado nos 4 fluxos — via
   Buy::initBaseAssetsViewsBuy e via owners/evoassessments/Planos —
   a regra sem escopo cobre todos. */
.campo-obrigatorio {
  color: var(--danger, #b91c1c);
}

/* Validation error message */
.checkout-form em.invalid,
.checkout-form #payment-method-panels em.invalid {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--danger, #dc2626);
  font-style: normal;
  margin-top: 4px;
  display: block;
}

/* Logo + "Compra 100% segura" no rodape */
.checkout-form .checkout-logo,
.checkout-form .checkout-secure {
  text-align: center;
  margin: 12px 0;
  font-family: var(--font-sans);
  color: var(--fg-4);
}
.checkout-form .checkout-logo img {
  width: 200px !important;
  max-width: 100% !important;
}


/* ===== DARK MODE — tint overrides (cauda) =====
 * Regras APENAS-acréscimo, escopadas em [data-theme="dark"]. Não
 * alteram nenhuma regra acima; só escurecem washes CLAROS hardcoded
 * (softs semânticos e literais brancos) que não seguem o tema.
 * Neutros já em var(...) e brand/accent sólidos ficam de fora. */

/* Pílula branca translúcida das bandeiras dentro do radio-card ativo
   (linha ~948). rgba(255,255,255,.7) vira um chip berrante no escuro. */
[data-theme="dark"] .checkout-form .payment-method-radio.active .payment-method-radio__brands .pm-brand {
  background: color-mix(in oklab, #ffffff 8%, var(--bg));
  border-color: color-mix(in oklab, rgba(29,78,216,.15) 45%, var(--bg));
}

/* Badge PIX — success-soft (fallback #ecfdf5) sobre texto verde escuro
   (#047857). Escurece o wash e clareia o texto pra manter contraste. */
[data-theme="dark"] .payment-method-radio__badge {
  background: color-mix(in oklab, #ecfdf5 8%, var(--bg));
  color: color-mix(in oklab, #047857 50%, #eef2f7);
}

/* Alert info dentro do form — primary-soft (fallback #eff6ff) light wash.
   Escurece; texto já é neutro tokenizado (var(--fg-2)), não mexe. */
[data-theme="dark"] .checkout-form .alert.alert-info,
[data-theme="dark"] .checkout-form #payment-method-panels .alert.alert-info {
  background: color-mix(in oklab, #eff6ff 8%, var(--bg)) !important;
}

/* Método de pagamento ativo — brand-wash (fallback #eff6ff) light wash.
   Texto já é var(--brand-primary), fica ok; só escurece a superfície. */
[data-theme="dark"] .checkout-form .checkout-method-btn.active {
  background: color-mix(in oklab, #eff6ff 8%, var(--bg)) !important;
}
[data-theme="dark"] .checkout-form .payment-method-radio.active {
  background: color-mix(in oklab, #eff6ff 8%, var(--bg)) !important;
}