/* ================================================================
   COMPONENTS/BUTTONS.CSS
================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.75rem;
  font-family: var(--ff-body);
  font-size: .9rem;
  font-weight: var(--fw-semi);
  border-radius: var(--radius-full);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-gold {
  background: var(--gold); color: var(--g0);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover { background: var(--gld); box-shadow: 0 12px 40px rgba(200,147,10,.4); }

.btn-wa {
  background: var(--wa); color: #fff;
  box-shadow: 0 6px 24px rgba(37,211,102,.35);
}
.btn-wa:hover { background: var(--wad); }

.btn-dark {
  background: var(--g0); color: var(--cr);
  box-shadow: var(--shadow-md);
}
.btn-dark:hover { background: var(--g1); }

.btn-ghost {
  background: transparent;
  border: 2px solid var(--gm);
  color: var(--gm);
}
.btn-ghost:hover { background: var(--gm); color: #fff; }

.btn-ghost-light {
  background: transparent;
  border: 2px solid rgba(255,255,255,.5);
  color: #fff;
}
.btn-ghost-light:hover { background: rgba(255,255,255,.15); border-color: #fff; }