/*
Этот CSS-файл включает в себя:

Стильные градиентные кнопки для всех вариантов Bootstrap
Улучшенные кнопки с контуром (outline)
Современные эффекты при наведении и нажатии
Две трендовые разновидности дизайна:

Неоморфические кнопки (с объемным эффектом)
Стеклянные (glass-morphism) кнопки


Дополнительные состояния:

Кнопки с иконками
Состояние загрузки с анимацией

Чтобы использовать эти стили, просто подключите файл CSS после подключения Bootstrap.
Классы кнопок останутся те же самые (btn-primary, btn-secondary и т.д.),
но их внешний вид будет полностью обновлен.
Для специальных стилей используйте классы
.btn-neomorphic,
.btn-glass,
.btn-glass-dark или .btn-icon
в сочетании с обычными классами Bootstrap.
 */

/* Modern Button Styles 2025 - Bootstrap 5.3 Override */

:root {
  --btn-primary-bg: linear-gradient(135deg, #3a6cff, #6a49f2);
  --btn-secondary-bg: linear-gradient(135deg, #6c757d, #495057);
  --btn-success-bg: linear-gradient(135deg, #28a745, #20c997);
  --btn-danger-bg: linear-gradient(135deg, #ffc107, #fd7e14);
  /*--btn-danger-bg: linear-gradient(135deg, #dc3545, #e83e8c);*/
  --btn-warning-bg: linear-gradient(135deg, #ffc107, #fd7e14);
  --btn-info-bg: linear-gradient(135deg, #17a2b8, #4cc9f0);
  --btn-light-bg: linear-gradient(135deg, #f8f9fa, #e9ecef);
  --btn-dark-bg: linear-gradient(135deg, #343a40, #212529);
}

/* Base Button Styles */
.btn {
  position: relative;
  border: none;
  font-weight: 500;
  letter-spacing: 0.03em;
  overflow: hidden;
  border-radius: 50px;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

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

/* Button styles by variant */
.btn-primary {
  background-image: var(--btn-primary-bg);
  color: white;
}

.btn-secondary {
  background-image: var(--btn-secondary-bg);
  color: white;
}

.btn-success {
  background-image: var(--btn-success-bg);
  color: white;
}

.btn-danger {
  background-image: var(--btn-danger-bg);
  color: white;
}

.btn-warning {
  background-image: var(--btn-warning-bg);
  color: #212529;
}

.btn-info {
  background-image: var(--btn-info-bg);
  color: white;
}

.btn-light {
  background-image: var(--btn-light-bg);
  color: #212529;
}

.btn-dark {
  background-image: var(--btn-dark-bg);
  color: white;
}

/* Outline Button Styles */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
  background: transparent;
  position: relative;
  z-index: 1;
  border-width: 1px;
  border-style: solid;
  overflow: hidden;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover {
  color: white;
}

.btn-outline-primary {
  border-color: #3a6cff;
  color: #3a6cff;
}

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

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

.btn-outline-secondary:hover {
  background-image: var(--btn-secondary-bg);
  border-color: transparent;
}

.btn-outline-success {
  border-color: #28a745;
  color: #28a745;
}

.btn-outline-success:hover {
  background-image: var(--btn-success-bg);
  border-color: transparent;
}

/*.btn-outline-danger {*/
/*  border-color: #dc3545;*/
/*  color: #dc3545;*/
/*}*/
.btn-outline-danger {
  border-color: #ffc107;
  color: #ffc107;
}

.btn-outline-danger:hover {
  background-image: var(--btn-danger-bg);
  border-color: transparent;
}

.btn-outline-warning {
  border-color: #ffc107;
  color: #ffc107;
}

.btn-outline-warning:hover {
  background-image: var(--btn-warning-bg);
  border-color: transparent;
  color: #212529;
}

.btn-outline-info {
  border-color: #17a2b8;
  color: #17a2b8;
}

.btn-outline-info:hover {
  background-image: var(--btn-info-bg);
  border-color: transparent;
}

.btn-outline-light {
  border-color: #f8f9fa;
  color: #f8f9fa;
}

.btn-outline-light:hover {
  background-image: var(--btn-light-bg);
  border-color: transparent;
  color: #212529;
}

.btn-outline-dark {
  border-color: #343a40;
  color: #343a40;
}

.btn-outline-dark:hover {
  background-image: var(--btn-dark-bg);
  border-color: transparent;
}

/* Button Sizes */
.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  border-radius: 50px;
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
  border-radius: 30px;
}

/* Button with icon (assuming you have icons) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-icon i,
.btn-icon svg {
  transition: transform 0.2s ease;
}

.btn-icon:hover i,
.btn-icon:hover svg {
  transform: translateX(3px);
}

/* Neomorphic effect buttons (optional modern style) */
.btn-neomorphic {
  background: #f0f4f8;
  color: #2d3748;
  box-shadow:
    8px 8px 16px rgba(174, 174, 192, 0.4),
    -8px -8px 16px rgba(255, 255, 255, 0.8);
  border: none;
}

.btn-neomorphic:hover {
  box-shadow:
    6px 6px 12px rgba(174, 174, 192, 0.4),
    -6px -6px 12px rgba(255, 255, 255, 0.8);
}

.btn-neomorphic:active {
  box-shadow:
    inset 2px 2px 5px rgba(174, 174, 192, 0.4),
    inset -2px -2px 5px rgba(255, 255, 255, 0.8);
}

/* Glass-morphism buttons (trending in 2025) */
.btn-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}

.btn-glass-dark {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* Disabled state */
.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Loading state with animation */
.btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}

.btn.is-loading:after {
  content: '';
  position: absolute;
  width: 1.25em;
  height: 1.25em;
  top: calc(50% - 0.625em);
  left: calc(50% - 0.625em);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  border-top-color: white;
  animation: spinner .6s linear infinite;
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}