/* ========================================
   按钮系统
   4种核心按钮 + 尺寸变体 + 修饰类
   ======================================== */

/* ----------------------------------------
   基础按钮
   ---------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

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

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ----------------------------------------
   1. Primary - 金色背景 + 白字（主要操作）
   用途：购买、确认、添加购物车
   ---------------------------------------- */
.btn-primary {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  color: var(--color-white);
  border-color: var(--color-gold);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%);
  box-shadow: 0 4px 12px rgba(184, 150, 12, 0.25);
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

/* ----------------------------------------
   2. Outline - 金框 + 金字（次要操作）
   用途：取消、查看更多、返回
   ---------------------------------------- */
.btn-outline {
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}

.btn-outline:hover:not(:disabled) {
  background: var(--color-gold);
  color: var(--color-white);
}

/* ----------------------------------------
   3. Ghost - 透明背景（辅助操作）
   用途：图标按钮、数量选择器
   ---------------------------------------- */
.btn-ghost {
  background: transparent;
  color: var(--color-gray-600);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-gray-100);
  color: var(--color-black);
}

/* ----------------------------------------
   4. Danger - 红色（危险操作）
   用途：删除、取消订单
   ---------------------------------------- */
.btn-danger {
  background: var(--color-error);
  color: var(--color-white);
  border-color: var(--color-error);
}

.btn-danger:hover:not(:disabled) {
  background: #a33a2d;
  box-shadow: 0 4px 12px rgba(196, 69, 54, 0.25);
}

/* ----------------------------------------
   尺寸变体（3种）
   ---------------------------------------- */
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

/* ----------------------------------------
   修饰类
   ---------------------------------------- */
.btn-block {
  width: 100%;
}

.btn-icon {
  padding: var(--space-3);
  aspect-ratio: 1;
}

.btn-icon svg {
  width: 20px;
  height: 20px;
}

.btn-circle {
  border-radius: var(--radius-full);
}

/* ----------------------------------------
   加载状态
   ---------------------------------------- */
.btn-loading {
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

.btn-primary.btn-loading::after {
  border-color: var(--color-white);
  border-right-color: transparent;
}

.btn-outline.btn-loading::after {
  border-color: var(--color-gold);
  border-right-color: transparent;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ----------------------------------------
   按钮组
   ---------------------------------------- */
.btn-group {
  display: inline-flex;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.btn-group .btn:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.btn-group .btn:not(:last-child) {
  border-right: none;
}

/* ----------------------------------------
   深色背景变体
   ---------------------------------------- */
.btn-outline-light {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn-outline-light:hover:not(:disabled) {
  background: var(--color-white);
  color: var(--color-black);
}