/* ============================================================
   COMPONENTS.CSS — Botoes, cards, badges, icones, tags
   ============================================================ */

/* ── BOTOES ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;          /* acessibilidade: touch target >= 44px */
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color     var(--transition-fast),
    color            var(--transition-fast),
    transform        var(--transition-fast),
    box-shadow       var(--transition-fast);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Ripple effect */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  opacity: 0;
  transition: opacity var(--transition-fast);
  border-radius: inherit;
}

.btn:active::after { opacity: 1; }

.btn:active {
  transform: scale(0.98);
}

/* --- Botao Primario (CTA principal - Stitch) */
.btn-primary {
  background: linear-gradient(135deg, #E67E22 0%, #D35400 100%);
  color: var(--color-text-inverse);
  box-shadow: 0 8px 24px rgba(230, 126, 34, 0.3);
  border: none;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: linear-gradient(135deg, #D35400 0%, #BA4A00 100%);
  color: var(--color-text-inverse);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 40px rgba(230, 126, 34, 0.45);
}

/* Accent gradient utility */
.accent-gradient {
  background: linear-gradient(135deg, #E67E22 0%, #D35400 100%);
}

/* --- Botao Secundario */
.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
}

/* --- Botao Outline Branco (sobre fundos escuros) */
.btn-outline-white {
  background-color: transparent;
  color: var(--color-text-inverse);
  border-color: rgba(255,255,255,0.6);
}

.btn-outline-white:hover,
.btn-outline-white:focus-visible {
  background-color: rgba(255,255,255,0.15);
  border-color: #fff;
  color: #fff;
}

/* --- Botao WhatsApp */
.btn-whatsapp {
  background-color: #25D366;
  color: #fff;
  gap: var(--space-3);
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
  background-color: #20B858;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
}

/* --- Tamanhos */
.btn-sm  { min-height: 44px; padding: var(--space-2) var(--space-5); font-size: var(--text-sm); } /* 44px = minimo acessivel */
.btn-lg  { min-height: 56px; padding: var(--space-4) var(--space-10); font-size: var(--text-lg); }
.btn-xl  { min-height: 64px; padding: var(--space-5) var(--space-12); font-size: var(--text-xl); }

/* --- Botao com largura total */
.btn-full { width: 100%; }

/* --- Botao com icone */
.btn-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* ── CARDS ──────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.card--bordered {
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.card--accent {
  border-top: 4px solid var(--color-accent);
}

.card--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ── BADGES / SELOS ─────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-primary { background: var(--color-primary-bg); color: var(--color-primary); }
.badge-accent  { background: rgba(230,126,34,0.12);   color: var(--color-accent-dark); }
.badge-white   { background: rgba(255,255,255,0.2);   color: var(--color-text-inverse); }

/* ── ICONES SVG ──────────────────────────────────────────────── */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}

.icon-sm  { width: 16px; height: 16px; }
.icon-md  { width: 24px; height: 24px; }
.icon-lg  { width: 32px; height: 32px; }
.icon-xl  { width: 48px; height: 48px; }
.icon-2xl { width: 64px; height: 64px; }

/* Container circular para icone */
.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.icon-circle--sm  { width: 40px; height: 40px; }
.icon-circle--md  { width: 56px; height: 56px; }
.icon-circle--lg  { width: 72px; height: 72px; }
.icon-circle--xl  { width: 96px; height: 96px; }

.icon-circle--primary { background: var(--color-primary-bg); color: var(--color-primary); }
.icon-circle--accent  { background: rgba(230,126,34,0.12);   color: var(--color-accent); }
.icon-circle--success { background: var(--color-success-bg); color: var(--color-success); }
.icon-circle--white   { background: rgba(255,255,255,0.15);  color: #fff; }

/* ── DIVIDER / SEPARADOR ─────────────────────────────────────── */
.divider {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  border-radius: var(--radius-full);
  margin-block: var(--space-4);
}

.divider--center { margin-inline: auto; }

/* ── TOOLTIP ─────────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: var(--z-dropdown);
}

[data-tooltip]:hover::before { opacity: 1; }

/* ── NUMERO DESTACADO (estatisticas) ─────────────────────────── */
.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--font-weight-extrabold);
  color: var(--color-accent);
  line-height: 1;
  display: block;
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  display: block;
}

/* ── TAG DE CHECK (lista de beneficios) ──────────────────────── */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.check-item__icon {
  width: 22px;
  height: 22px;
  background: var(--color-success);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.check-item__icon svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}