/* Buttons - La Remolatxa */

/* Botons tàctils optimitzats */
.btn {
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  touch-action: manipulation;
  transition: all 0.2s ease;
}

.btn-sm {
  min-height: 38px;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
}

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

.btn:hover:not(:active) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Primary Button */
.btn-primary {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 4px 12px rgba(154, 51, 108, 0.3);
}

/* Outline Primary */
.btn-outline-primary {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  font-weight: 600;
  background: transparent;
}

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

/* Success Button */
.btn-success {
  background: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  font-weight: 600;
}

.btn-success:hover {
  background: var(--secondary-hover);
  border-color: var(--secondary-hover);
  box-shadow: 0 4px 12px rgba(131, 183, 133, 0.3);
}

/* Outline Secondary */
.btn-outline-secondary {
  border: 1px solid #6c757d;
  color: #6c757d;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-outline-secondary:hover {
  background: #6c757d;
  border-color: #6c757d;
  color: white;
}