/* ═══════════════════════════════════════
   BUTTONS — All button variants
   ═══════════════════════════════════════ */

.y-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--y-space-s);
  padding: var(--y-space-m) var(--y-space-3xl);
  border-radius: var(--y-radius-xl);
  font-weight: var(--y-weight-semibold);
  transition: all var(--y-transition-smooth);
  cursor: pointer;
  text-align: center;
  font-size: var(--y-font-m);
  border: none;
  background: none;
  line-height: 1.5;
}

/* ── Primary (Gold) ───────── */
.y-btn-main,
.btn-gold {
  background: linear-gradient(to left, var(--y-color-primary), var(--y-color-primary-subtle));
  color: var(--y-color-white);
}

.y-btn-main:hover,
.btn-gold:hover {
  box-shadow: var(--y-shadow-gold);
  color: var(--y-color-white);
  transform: scale(1.01);
}

.y-btn-main:active,
.btn-gold:active {
  transform: scale(0.99);
}

.y-btn-main:disabled,
.btn-gold:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── Outline Gold ─────────── */
.y-btn-outline,
.btn-outline-gold {
  border: 2px solid var(--y-color-primary);
  color: var(--y-color-primary);
  background: transparent;
}

.y-btn-outline:hover,
.btn-outline-gold:hover {
  background: var(--y-color-primary);
  color: var(--y-color-white);
}

/* ── Outline White ────────── */
.btn-outline-white {
  border: 2px solid var(--y-color-secondary);
  color: var(--y-color-secondary);
  background: transparent;
}

.btn-outline-white:hover {
  background: var(--y-color-secondary);
  color: var(--y-color-white);
}

/* ── Success ──────────────── */
.y-btn-suc {
  background: var(--y-color-success);
  color: var(--y-color-white);
}

.y-btn-suc:hover {
  opacity: 0.9;
  transform: scale(1.01);
}

/* ── Danger ───────────────── */
.y-btn-danger {
  background: var(--y-color-danger);
  color: var(--y-color-white);
}

.y-btn-danger:hover {
  opacity: 0.9;
  transform: scale(1.01);
}

/* ── Ghost ────────────────── */
.y-btn-ghost {
  background: transparent;
  color: var(--y-color-text);
}

.y-btn-ghost:hover {
  background: var(--y-color-bg-subtle);
}

/* ── Link ─────────────────── */
.y-btn-link {
  background: none;
  color: var(--y-color-primary);
  padding: 0;
  text-decoration: underline;
}

.y-btn-link:hover {
  color: var(--y-color-primary-subtle);
}

/* ── Size Variants ────────── */
.y-btn-sm {
  padding: var(--y-space-s) var(--y-space-l);
  font-size: var(--y-font-s);
}

.y-btn-lg {
  padding: var(--y-space-l) var(--y-space-5xl);
  font-size: var(--y-font-l);
}

/* ── Icon Button ──────────── */
.y-btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Focus Visible ────────── */
.y-btn:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--y-color-primary);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════ */

@media (max-width: 1200px) {

  .y-btn,
  .btn {
    padding: var(--y-space-m) var(--y-space-xxl);
  }
}

@media (max-width: 768px) {

  .y-btn,
  .btn {
    padding: var(--y-space-s) var(--y-space-xxl);
    font-size: var(--y-font-s);
  }

  .y-btn-lg {
    padding: var(--y-space-m) var(--y-space-3xl);
    font-size: var(--y-font-m);
  }
}

@media (max-width: 480px) {

  .y-btn,
  .btn {
    padding: var(--y-space-xs) var(--y-space-l);
    min-height: 38px;
    font-size: var(--y-font-s);
  }
}