/* buttons.css — Clean Trendyol-like buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--ease);
  border-radius: var(--r-sm);
  white-space: nowrap;
  position: relative;
  outline-offset: 2px;
  min-height: 2.75rem;
  max-width: 100%;
}
.btn:focus-visible { outline: 2px solid var(--primary); }

/* Sizes */
.btn-xs  { padding: 6px 12px;  font-size: 11px; }
.btn-sm  { padding: 8px 16px;  font-size: var(--text-xs); }
.btn     { padding: 10px 20px; }
.btn-lg  { padding: 0.8125rem 1.625rem; font-size: var(--text-base); min-height: 3rem; }
.btn-xl  { padding: 0.9375rem 2rem; font-size: var(--text-md); min-height: 3.25rem; }
.btn-block { width: 100%; }

/* Primary — orange */
.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 2px 8px rgba(242,122,26,0.25);
}
.btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 4px 16px rgba(242,122,26,0.35);
  transform: translateY(-1px);
  color: white;
}
.btn-primary:active { transform: translateY(0); }

/* Secondary */
.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-800);
}
.btn-secondary:hover { background: var(--gray-200); color: var(--black); }

/* Outline */
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
}
.btn-outline:hover { background: var(--primary); color: white; }

/* Dark */
.btn-dark {
  background: var(--black);
  color: white;
}
.btn-dark:hover { background: var(--dark); color: white; }

/* Outline dark */
.btn-outline-dark {
  background: transparent;
  border: 1.5px solid var(--black);
  color: var(--black);
}
.btn-outline-dark:hover { background: var(--black); color: white; }

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--gray-700);
}
.btn-ghost:hover { background: var(--gray-100); }

/* White */
.btn-white {
  background: white;
  color: var(--black);
}
.btn-white:hover { background: var(--gray-50); }

/* Hero / dark backgrounds — outline white */
.btn-outline-white {
  background: transparent;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: none;
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: white;
  color: white;
  transform: translateY(-1px);
}

/* WhatsApp */
.btn-whatsapp {
  background: #25D366;
  color: white;
}
.btn-whatsapp:hover { background: #1ebe5b; color: white; }

/* Loading state */
.btn.loading {
  pointer-events: none;
  opacity: .7;
}
.btn.loading::after {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-left: 4px;
}
.btn-secondary.loading::after,
.btn-ghost.loading::after {
  border-color: rgba(0,0,0,0.2);
  border-top-color: var(--gray-700);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Arrow */
.btn .arrow { transition: transform var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Product add button */
.product-add-btn {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 2.875rem;
}
.product-add-btn:hover { background: var(--primary-dark); }
.product-add-btn.added { background: var(--success); }