/* ═══════════════════════════════════════════════════════════════
   DIGIBROOD DESIGN SYSTEM — buttons.css
   All button variants. Used across CTAs, forms, cards, nav.
   ═══════════════════════════════════════════════════════════════ */

/* ── Button base ──────────────────────────────────────────── */
.db-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--db-sp-2);
  border-radius: var(--db-radius-pill);
  font-family: var(--db-font);
  font-size: var(--db-fs-base);
  font-weight: 700;
  color: var(--db-text-primary);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform var(--db-ease-out), box-shadow var(--db-ease-out);
}

.db-btn:hover {
  transform: translateY(-2px);
}

.db-btn svg,
.db-btn span {
  position: relative;
  z-index: 2;
}

/* ── Primary (orange gradient) ────────────────────────────── */
.db-btn--primary {
  padding: 15px 28px;
  background: linear-gradient(135deg, var(--db-orange) 0%, var(--db-orange-deep) 100%);
  box-shadow: var(--db-shadow-orange);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.db-btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--db-orange-light), var(--db-orange));
  opacity: 0;
  transition: opacity var(--db-ease-smooth);
  z-index: -1;
}

.db-btn--primary:hover {
  box-shadow: var(--db-shadow-orange-hi);
}

.db-btn--primary:hover::after {
  opacity: 1;
}

/* ── WhatsApp ─────────────────────────────────────────────── */
.db-btn--whatsapp {
  padding: 14px 24px;
  gap: 9px;
  font-weight: 600;
  background: linear-gradient(135deg, #25d366 0%, var(--db-green-dark) 100%);
  box-shadow: var(--db-shadow-green);
}

.db-btn--whatsapp:hover {
  box-shadow: var(--db-shadow-green-hi);
}

/* ── Ghost / outline (for secondary actions) ──────────────── */
.db-btn--ghost {
  padding: 14px 24px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--db-border);
  transition: background var(--db-ease-smooth), transform var(--db-ease-out);
}

.db-btn--ghost:hover {
  background: var(--db-bg-elevated);
}

/* ── Button group ─────────────────────────────────────────── */
.db-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: center;
}

/* ── Icon circle (small send / action buttons) ────────────── */
.db-btn-icon {
  width: 20px;
  height: 20px;
  border-radius: var(--db-radius-circle);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.db-btn-icon--green {
  background: var(--db-green);
}