/* Button Base Styles */
.btn {
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Primary Button */
.btn-primary {
  background-color: var(--primary-color);
  color: var(--bg-white);
  border-color: var(--primary-color);
  box-shadow: 0 2px 4px var(--primary-shadow);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--primary-shadow);
}

/* Danger Button */
.btn-danger {
  background-color: var(--danger-color);
  color: var(--bg-white);
  border-color: var(--danger-color);
  box-shadow: var(--shadow-sm);
}

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

/* Success Button */
.btn-success {
  background-color: var(--success-color);
  color: var(--bg-white);
  border-color: var(--success-color);
  box-shadow: var(--shadow-sm);
}

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

/* Outline Primary Button */
.btn-outline-primary {
  background-color: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.btn-outline-primary:hover {
  background-color: var(--primary-color);
  color: var(--bg-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-primary:hover i {
  color: var(--bg-white);
}

/* Outline Danger Button */
.btn-outline-danger {
  background-color: transparent;
  color: var(--danger-color);
  border-color: var(--danger-color);
  box-shadow: var(--shadow-sm);
}

.btn-outline-danger:hover {
  background-color: var(--danger-color);
  color: var(--bg-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-danger:hover i {
  color: var(--bg-white);
}

/* Button Sizes */
.btn-sm {
  padding: calc(var(--spacing-xs) / 2) var(--spacing-sm);
  font-size: var(--font-xs) !important;
}

.btn-lg {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-md) !important;
}

/* Button States */
.btn:disabled,
.btn.disabled {
  opacity: 0.65;
  pointer-events: none;
  cursor: not-allowed;
}

/* Button Icons */
.btn i {
  transition: transform var(--transition-fast);
}

.btn:hover i {
  transform: translateY(-1px);
}


.card-footer .btn i {
  font-size: var(--font-sm);
}

/* Button Back */
.btn-back {
  display: inline-block;
  margin-bottom: var(--spacing-md);
}

/* Button Groups */
.btn-group {
  display: inline-flex;
  gap: var(--spacing-sm);
}

/* Responsive Buttons */
@media (max-width: 768px) {
  .btn {
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }
  
  .btn-group {
    flex-direction: column;
  }
}

/* Button Icons */


.btn-sm .fa-solid {
  font-size: 0.85em;
}

/* Центрирование иконок в кнопках */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.btn .no-margin-icon {
  margin-right: 0;
}

/* Сброс всех margin для иконок в кнопках */
.btn .fa-solid,
.btn .fa-regular,
.btn .fa-brands,
.btn i {
  margin-left: 0;
  margin-right: 0;
}

/* Кнопки только с иконками */
.btn.icon-only {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn.icon-only .fa-solid {
  margin-right: 0;
}

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

/* Специфичные правила для разных типов кнопок */
.btn.btn-secondary .fa-solid,
.btn.btn-outline-primary .fa-solid,
.btn.position-relative .fa-solid {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: static;
  transform: none;
}

/* Правила для комбинаций классов кнопок */
.btn.btn-secondary.btn-sm.btn-outline-primary.position-relative .fa-solid,
.btn.btn-secondary.btn-sm .fa-solid,
.btn.btn-outline-primary.btn-sm .fa-solid,
.btn.position-relative.btn-sm .fa-solid {
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

/* Обеспечиваем правильное выравнивание текста и иконок */
.btn.btn-secondary.btn-sm.btn-outline-primary.position-relative,
.btn.btn-secondary.btn-sm,
.btn.btn-outline-primary.btn-sm,
.btn.position-relative.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;  /* Расстояние между иконкой и текстом */
}

/* Иконки и текст внутри кнопок */
.btn > span, 
.btn > i,
.btn > .fa-solid, 
.btn > .fa-regular, 
.btn > .fa-brands {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Специальный отступ между иконкой и текстом */
.btn > i ~ span,
.btn > .fa-solid ~ span,
.btn > .fa-regular ~ span,
.btn > .fa-brands ~ span,
.btn > span ~ i,
.btn > span ~ .fa-solid,
.btn > span ~ .fa-regular,
.btn > span ~ .fa-brands,
.btn > i + *,
.btn > .fa-solid + *,
.btn > .fa-regular + *,
.btn > .fa-brands + * {
  margin-left: 0.35rem;
}