/* ============================================================
   BUTTONS
   All button variants used across the app.
   ============================================================ */

/* ---- Base button ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: var(--font-family);
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}

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

/* ---- Primary: orange-to-yellow gradient CTA ---- */
.btn-primary {
  background: var(--gradient-primary);
  color: var(--color-dark);
  box-shadow: var(--shadow-btn-primary);
}
.btn-primary:hover { box-shadow: var(--shadow-btn-primary-hover); }

/* ---- Secondary: white with soft shadow ---- */
.btn-secondary {
  background: var(--color-white);
  color: var(--color-dark);
  box-shadow: var(--shadow-btn-secondary);
}
.btn-secondary:hover { box-shadow: 0 6px 18px rgba(26,26,46,0.15); }

/* ---- Danger: light red for destructive actions ---- */
.btn-danger {
  background: var(--color-error-bg);
  color: var(--color-error);
  box-shadow: 0 2px 10px rgba(220,38,38,0.1);
}
.btn-danger:hover { box-shadow: 0 6px 18px rgba(220,38,38,0.2); }

/* ---- Ghost: glassmorphic, for use on dark/hero backgrounds ---- */
.btn-ghost {
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.38);
  color: var(--color-white);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.22); }

/* ---- Size modifier ---- */
.btn-xl { padding: 1.1rem 2.6rem; font-size: 1.1rem; }

/* ---- New spot button (link styled as primary, used in header) ---- */
.btn-new-spot {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.75rem;
  background: var(--gradient-primary);
  color: var(--color-dark);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 18px rgba(255,107,53,0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-new-spot:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(255,107,53,0.55);
}

/* ---- Keep button_to form inline (for danger delete) ---- */
.btn-danger-form { display: inline; }
.btn-danger-form .btn-danger { font-family: var(--font-family); }