/* ==========================================================================
   Petrekivka2 — Button System
   Warm Workshop aesthetic: organic shapes, tactile feedback
   ========================================================================== */

/* -----------------------------------------------------------------------
   Base Button
   ----------------------------------------------------------------------- */

.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-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
}

/* Disabled state */
.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* -----------------------------------------------------------------------
   Button Variants
   ----------------------------------------------------------------------- */

/* Primary — Петриківський червоний */
.btn-primary {
  background-color: var(--color-accent-red);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-red);
}

.btn-primary:hover {
  background-color: var(--color-accent-red-hover);
  border-color: var(--color-accent-red-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-sm);
}

/* Secondary — Outlined */
.btn-secondary {
  background-color: transparent;
  color: var(--color-accent-red);
  border-color: var(--color-accent-red);
}

.btn-secondary:hover {
  background-color: var(--color-accent-red);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Gold — для акцентних дій (кошик, замовлення) */
.btn-gold {
  background-color: var(--color-accent-gold);
  color: var(--color-text-primary);
  border-color: var(--color-accent-gold);
}

.btn-gold:hover {
  background-color: var(--color-accent-gold-hover);
  border-color: var(--color-accent-gold-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Ghost — мінімальний, для навігації */
.btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover {
  background-color: var(--color-surface-muted);
  color: var(--color-text-primary);
}

/* Dark — для темних фонів */
.btn-dark {
  background-color: var(--color-text-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-text-primary);
}

.btn-dark:hover {
  background-color: #1A1610;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* -----------------------------------------------------------------------
   Button Sizes
   ----------------------------------------------------------------------- */

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

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

.btn-xl {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-lg);
  border-radius: var(--radius-lg);
}

/* Full width */
.btn-block {
  display: flex;
  width: 100%;
}

/* -----------------------------------------------------------------------
   Button with Icon
   ----------------------------------------------------------------------- */

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-full);
}

.btn-icon-sm {
  width: 36px;
  height: 36px;
}

.btn-icon-lg {
  width: 52px;
  height: 52px;
}

.btn svg,
.btn img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Cart Button (special — "Додати у кошик")
   ----------------------------------------------------------------------- */

.btn-cart {
  background-color: var(--color-accent-red);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-red);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  gap: var(--space-2);
}

.btn-cart:hover {
  background-color: var(--color-accent-red-hover);
  border-color: var(--color-accent-red-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.btn-cart.is-added {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

/* -----------------------------------------------------------------------
   Link-style Button
   ----------------------------------------------------------------------- */

.btn-link {
  background: none;
  border: none;
  color: var(--color-text-link);
  font-weight: var(--weight-medium);
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--color-accent-red-light);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.btn-link:hover {
  color: var(--color-text-link-hover);
  text-decoration-color: var(--color-accent-red);
  transform: none;
}

/* -----------------------------------------------------------------------
   Button Group
   ----------------------------------------------------------------------- */

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.btn-group-center {
  justify-content: center;
}