/**
 * Funnel steps — Wise look (único deste projeto)
 * Só UI. IDs / forms / JS do funil intactos.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --brand-accent: #9FE870;
  --brand-accent-dark: #163300;
  --brand-accent-light: #9FE870;
  --brand-accent-soft: #E8F9D8;
  --brand-orange: #9FE870;
  --brand-bg: #ffffff;
  --brand-text: #163300;
  --brand-text-mid: #3A4A30;
  --brand-text-light: #6B7A60;
  --brand-footer: #163300;
  --brand-radius: 999px;
  --green: var(--brand-accent) !important;
  --green-dark: var(--brand-accent-dark) !important;
  --green-light: var(--brand-accent-soft) !important;
  --green-subtle: var(--brand-accent-soft) !important;
  --accent: var(--brand-accent) !important;
  --accent-soft: var(--brand-accent-soft) !important;
  --bg: #ffffff !important;
  --text: var(--brand-text) !important;
  --text-mid: var(--brand-text-mid) !important;
  --text-light: var(--brand-text-light) !important;
  --radius: 999px !important;
  --card: #ffffff;
  --border: #e6ebd9;
  --shadow: none;
}

html body,
html body.funnel-ca {
  font-family: 'Inter', system-ui, sans-serif !important;
  background: #fff !important;
  color: var(--brand-text) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ── Header forest ── */
body .header,
body header.header,
body .topbar,
body.funnel-ca .topbar,
body .wrap > .topbar {
  background: #163300 !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}
body .header-content,
body .header .header-inner {
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
body .header img,
body .logo img,
body .brand img,
body .topbar img {
  height: 28px !important;
  width: auto !important;
  max-width: min(160px, 55vw) !important;
  object-fit: contain !important;
  object-position: left center !important;
  flex-shrink: 0 !important;
  display: block !important;
  filter: brightness(0) saturate(100%) invert(88%) sepia(38%) saturate(589%) hue-rotate(41deg) brightness(102%) contrast(92%) !important;
}
body .header-icon,
body .user-avatar,
body .notification-badge,
body .header-right {
  display: none !important;
}
body .header::after { content: none !important; }

body .menu-icon,
body.funnel-ca .menu-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1.5px solid rgba(159, 232, 112, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body .menu-icon svg {
  color: #9FE870 !important;
  stroke: #9FE870 !important;
  background: transparent !important;
}
body.funnel-ca .menu-btn span {
  width: 14px !important;
  height: 2px !important;
  background: #9FE870 !important;
}
body.funnel-ca .menu-btn span::before,
body.funnel-ca .menu-btn span::after {
  background: #9FE870 !important;
}
body.funnel-ca .topbar .name,
body.funnel-ca .topbar .nif,
body .user-info .name,
body .user-info .nif {
  color: #E8F9D8 !important;
}
body.funnel-ca .avatar {
  background: rgba(159, 232, 112, 0.15) !important;
  color: #9FE870 !important;
  border-color: rgba(159, 232, 112, 0.35) !important;
}

/* ── Layout: sem “card genérico” ── */
body .container {
  max-width: 440px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 28px 20px 48px !important;
  gap: 0 !important;
  justify-content: flex-start !important;
  flex: 1 !important;
}
body .card,
body.funnel-ca .card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative !important;
}
body .card::before {
  content: none !important;
  display: none !important;
}
body .card-divider {
  display: none !important;
}

/* ── Progresso minimalista (não parece Agibank/SuperSim) ── */
body .step-indicators {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 18px !important;
  margin: 0 0 8px !important;
}
body .step-dot {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}
body .step-dot .dot {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #d5e0c8 !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
body .step-dot .dot svg {
  display: none !important;
}
body .step-dot.active .dot,
body .step-dot.done .dot {
  background: #9FE870 !important;
  border: none !important;
  color: transparent !important;
  width: 10px !important;
  height: 10px !important;
  box-shadow: 0 0 0 4px rgba(159, 232, 112, 0.25) !important;
}
body .step-dot .dot-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #9aa891 !important;
}
body .step-dot.active .dot-label,
body .step-dot.done .dot-label {
  color: #163300 !important;
}
body .step-line {
  flex: 1 !important;
  height: 2px !important;
  background: #e6ebd9 !important;
  margin: 0 6px 16px !important;
  border-radius: 99px !important;
  align-self: flex-start !important;
  margin-top: 4px !important;
}
body .step-line.done {
  background: #9FE870 !important;
}

body .progress-bar {
  height: 3px !important;
  background: #eef2e6 !important;
  border-radius: 99px !important;
  margin: 4px 0 32px !important;
  overflow: hidden !important;
}
body .progress-fill {
  background: #163300 !important;
  border-radius: 99px !important;
}

/* ── Tipografia do passo ── */
body .step-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin-bottom: 10px !important;
}
body .step-header::before {
  content: none !important;
  display: none !important;
}
body .step-icon {
  display: none !important;
}
body .step-header h1,
body .step-header h2,
body h1 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(1.75rem, 5vw, 2.15rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.15 !important;
  color: #163300 !important;
  margin: 0 0 8px !important;
  text-align: left !important;
}
body .step-subtitle,
body .step-desc,
body .subtitle,
body .lead {
  color: #3A4A30 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  margin: 0 0 28px !important;
  text-align: left !important;
}

/* ── Form ── */
body .form-group {
  margin-bottom: 18px !important;
}
body .form-group label,
body label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #163300 !important;
  margin-bottom: 8px !important;
}
body input,
body select,
body textarea,
body .form-input,
body .pig-in {
  width: 100% !important;
  border-radius: 16px !important;
  border: 1.5px solid #d5e0c8 !important;
  background: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #163300 !important;
  padding: 16px 18px !important;
}
body input:focus,
body select:focus,
body textarea:focus,
body .form-input:focus {
  border-color: #163300 !important;
  box-shadow: 0 0 0 4px rgba(159, 232, 112, 0.4) !important;
  outline: none !important;
}
body input::placeholder {
  color: #9aa891 !important;
  font-weight: 500 !important;
}

/* ── CTA pill ── */
body .btn,
body .btn-primary,
body .btn-continue,
body .btn-submit,
body .cta-btn,
body .pay-btn,
body button.btn-solid {
  width: 100% !important;
  background: #9FE870 !important;
  color: #163300 !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 16px 24px !important;
  box-shadow: none !important;
  margin-top: 8px !important;
}
body .btn:hover,
body .btn-primary:hover,
body .btn-submit:hover {
  filter: brightness(1.04);
  background: #9FE870 !important;
  color: #163300 !important;
  transform: none !important;
}
body .btn-primary .spinner,
body .btn-primary.loading .spinner {
  border-top-color: #163300 !important;
}

/* ── Trust: texto discreto (acaba com a caixa verde horrorosa) ── */
body .trust-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-top: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body .trust-bar svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  color: #9FE870 !important;
  stroke: #9FE870 !important;
  flex-shrink: 0 !important;
}
body .trust-bar span {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #6B7A60 !important;
  line-height: 1.4 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* ── Info / options ── */
body .info-box {
  background: #F2F5ED !important;
  border: none !important;
  border-radius: 20px !important;
}
body .info-icon {
  background: #163300 !important;
  color: #9FE870 !important;
  border-radius: 14px !important;
}
body .check {
  background: #fff !important;
  color: #163300 !important;
}
body .btn-option {
  border-radius: 18px !important;
  border: 1.5px solid #e6ebd9 !important;
}
body .btn-option:active,
body .btn-option.selected {
  border-color: #9FE870 !important;
  background: #E8F9D8 !important;
}

/* ── Success ── */
body .success-icon {
  background: #9FE870 !important;
  color: #163300 !important;
  box-shadow: none !important;
}
body .success-redirect {
  background: #F2F5ED !important;
  border: none !important;
  border-radius: 999px !important;
  color: #163300 !important;
}

/* ── Footer forest (estilo Wise, não o cf-foot genérico) ── */
body .cf-foot,
body .site-footer,
body .footer {
  background: #163300 !important;
  color: #E8F9D8 !important;
  border: none !important;
  margin-top: auto !important;
  padding: 0 !important;
}
body .cf-foot-accent {
  display: none !important;
}
body .cf-foot-inner {
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 36px 24px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  text-align: left !important;
}
body .cf-foot-logo {
  height: 28px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  filter: brightness(0) saturate(100%) invert(88%) sepia(38%) saturate(589%) hue-rotate(41deg) brightness(102%) contrast(92%) !important;
}
body .cf-foot-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 20px !important;
}
body .cf-foot-nav a {
  color: #9FE870 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: none !important;
}
body .cf-foot-nav a:hover {
  text-decoration: underline !important;
}
body .cf-foot-copy {
  color: rgba(232, 249, 216, 0.55) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  border-top: 1px solid rgba(159, 232, 112, 0.18) !important;
  padding-top: 16px !important;
  margin: 0 !important;
  font-weight: 500 !important;
}
body .footer-org,
body .footer-company,
body .footer .l,
body .footer strong {
  display: none !important;
}
body .footer-inner {
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 36px 24px 28px !important;
  text-align: left !important;
}

/* ── Conta app (mantém coerência) ── */
body.funnel-ca .hero {
  background: linear-gradient(160deg, #0f2400 0%, #163300 45%, #1f3d0a 100%) !important;
}
body.funnel-ca .ph {
  background: #163300 !important;
}
body.funnel-ca .ph h2,
body.funnel-ca .ph-help {
  color: #fff !important;
}
body.funnel-ca .bn {
  border-top: 1px solid #e3e9dc !important;
  box-shadow: 0 -8px 28px rgba(22, 51, 0, 0.08) !important;
  background: #fff !important;
}
body.funnel-ca .ni.on {
  background: rgba(159, 232, 112, 0.18) !important;
}
body.funnel-ca .ni.on svg,
body.funnel-ca .ni.on span {
  color: #163300 !important;
}
body.funnel-ca .ni.on::before {
  background: #9FE870 !important;
}
body.funnel-ca .btn-sq,
body.funnel-ca .lc-btn {
  background: #9FE870 !important;
  color: #163300 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
body.funnel-ca .banner-slide.bs1,
body.funnel-ca .banner-slide.bs2,
body.funnel-ca .banner-slide.bs3 {
  background: linear-gradient(135deg, #163300, #1f3d0a) !important;
}
body.funnel-ca .sa-hero {
  background: linear-gradient(145deg, #163300, #1f3d0a) !important;
}
body.funnel-ca .method-ri.sel {
  border-color: #9FE870 !important;
  background: #E8F9D8 !important;
  box-shadow: 0 0 0 3px rgba(159, 232, 112, 0.25) !important;
}
body.funnel-ca .push-ico {
  background: #9FE870 !important;
  color: #163300 !important;
}