/* ============================================================
   ZERO DRIVER — Button System
   Primary = gold fill. Ghost = bordered. Outline = gold border.
   ============================================================ */

.zd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: none;
  border-radius: var(--radius-default);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition-colors),
    box-shadow var(--transition-colors),
    transform var(--duration-fast) var(--ease-standard),
    border-color var(--transition-colors),
    color var(--transition-colors);
}

.zd-btn:active { transform: scale(0.95); }

/* ── PRIMARY — Gold fill ─────────────────────────────────── */
.zd-btn--primary {
  background: var(--color-gold);
  color: var(--color-on-gold);
  padding: 1rem 2.5rem;
}

.zd-btn--primary:hover {
  background: var(--color-gold-dim);
  color: var(--color-on-gold);
  box-shadow: 0 0 20px var(--color-gold-30);
}

/* ── GHOST — Transparent + white border ──────────────────── */
.zd-btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-text);
  border: 1px solid var(--color-white-20);
  padding: 1rem 2.5rem;
}

.zd-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-text);
  border-color: var(--color-gold-30);
}

/* ── OUTLINE — Gold bordered ─────────────────────────────── */
.zd-btn--outline {
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  padding: 0.75rem 2rem;
}

.zd-btn--outline:hover {
  background: var(--color-gold-10);
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* ── SIZES ───────────────────────────────────────────────── */
.zd-btn--sm  { padding: 0.5rem 1.5rem;  font-size: var(--text-body-sm); }
.zd-btn--lg  { padding: 1.25rem 3rem; font-size: var(--text-body-lg); }

/* ── BUTTON GROUP ────────────────────────────────────────── */
.zd-btn-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── ELEMENTOR BUTTON OVERRIDE ───────────────────────────── */
.elementor-button.elementor-button-link {
  font-family: var(--font-body);
}

@media (max-width: 767px) {
  .zd-btn--primary,
  .zd-btn--ghost {
    width: 100%;
    justify-content: center;
  }

  .zd-btn-group {
    flex-direction: column;
    width: 100%;
  }
}