/* ==========================================================================
   buttons.css — Buttons
   .btn, .btn-primary, .btn-outline, .btn-light, .btn-gold
   Self-contained: every value is written out (no CSS variables) and every
   selector has its own rule, so changing one block never touches another.
   ========================================================================== */

/* ── .btn ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 32px;
  border-radius: 50px;
  font-family: "Jost", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
  gap: 8px;
}

/* ── .btn-primary ── */
.btn-primary {
  background: #4a154b;
  color: #f9f0fa;
  border: 2px solid #4a154b;
}

.btn-primary:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #4a154b;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #4a154b38;
}

/* ── .btn-outline ── */
.btn-outline {
  background: #00000000;
  color: #4a154b;
  border: 2px solid #4a154b;
}

.btn-outline:hover {
  background: #4a154b;
  color: #f9f0fa;
  transform: translateY(-2px);
}

/* ── .btn-light ── */
.btn-light {
  background: #f9f0fa;
  color: #4a154b;
  border: 2px solid #f9f0fa;
}

.btn-light:hover {
  background: #00000000;
  color: #f9f0fa;
  transform: translateY(-2px);
}

/* ── .btn-gold ── */
.btn-gold {
  background: #ffffff;
  color: #4a154b;
  border: 2px solid #ffffff;
}

.btn-gold:hover {
  background: #00000000;
  color: #ffffff;
  border-color: #ffffff;
  transform: translateY(-2px);
}

/* ── button ── */
button.btn {
  font-family: inherit;
}

/* ── .btn ── */
.btn.is-loading {
  opacity: .75;
  cursor: progress;
}

.btn:disabled {
  cursor: not-allowed;
}

.btn {
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease, text-decoration-color .25s ease;
}

/* ── input ── */
input[type=submit] {
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease, text-decoration-color .25s ease;
}

/* ── .btn-primary ── */
.btn-primary:hover {
  background: #fff;
  color: #4a154b;
  border-color: #4a154b;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #4a154b38;
}

.btn-primary:focus-visible {
  background: #fff;
  color: #4a154b;
  border-color: #4a154b;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #4a154b38;
}

/* ── .btn-outline ── */
.btn-outline:hover {
  background: #4a154b;
  color: #fff;
  border-color: #4a154b;
  transform: translateY(-2px);
}

.btn-outline:focus-visible {
  background: #4a154b;
  color: #fff;
  border-color: #4a154b;
  transform: translateY(-2px);
}

/* ── .btn-light ── */
.btn-light {
  background: #fff;
  color: #4a154b;
  border-color: #fff;
}

.btn-light:hover {
  background: #f7d4e6;
  color: #4a154b;
  border-color: #f7d4e6;
  transform: translateY(-2px);
}

/* ── .btn-gold ── */
.btn-gold {
  background: #fff;
  color: #4a154b;
  border-color: #fff;
}

.btn-gold:hover {
  background: #f7d4e6;
  color: #4a154b;
  border-color: #f7d4e6;
  transform: translateY(-2px);
}