.btn {
  border-radius: 10px; /* Скругленные края */
  font-weight: bold;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Мягкая тень для текста */
  gap: 10px;

  /* Рамка для всех кнопок */
  border: 3px solid rgba(200, 200, 200, 0.8); /* Стандартная рамка для всех кнопок */
  
  /* Внешняя тень для выпуклости */
  box-shadow:
    5px 5px 15px rgba(0, 0, 0, 0.3),    /* Сильная тень справа и снизу */
    -5px -5px 8px rgba(255, 255, 255, 0.6), /* Блик сверху слева */
    inset -2px -2px 6px rgba(0, 0, 0, 0.2),  /* Темная внутренняя тень для объема */
    inset 2px 2px 6px rgba(255, 255, 255, 0.4); /* Легкий свет внутри кнопки */
}

/* Иконки */
.btn i {
  font-size: 26px;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Уменьшена тень для иконок */
}

/* Размер кнопок */
.btn-lg {
  font-size: 18px;
  padding: 12px 25px;
}

/* Градиенты для кнопок — с яркими переходами */
.btn-primary {
  background: linear-gradient(to bottom, #00b5e2, #007bb5); /* Градиент с ярким переходом */
  border-color: #007bb5; /* Рамка для .btn-primary будет синей */
}

.btn-info {
  background: linear-gradient(to bottom, #4db8ff, #006fa6); 
  border-color: #006fa6; /* Рамка для .btn-info будет синей */
}

.btn-success {
  background: linear-gradient(to bottom, #6abf47, #007b2d);
  border-color: #007b2d; /* Рамка для .btn-success будет зеленой */
}

.btn-secondary {
  background: linear-gradient(to bottom, #8acbdf, #4899c3);
  border-color: #4899c3; /* Рамка для .btn-secondary будет сине-серой */
}

/* Все кнопки с эффектом нажатия как у .btn-warning */
.btn-warning {
  background: linear-gradient(to bottom, #fafafa, #e0e0e0); /* Светлый фон */
  color: #555555;
  border: 3px solid #e0e0e0; /* Светлая рамка для .btn-warning */
  box-shadow:
    5px 5px 15px rgba(0, 0, 0, 0.3),    /* Сильная тень справа и снизу */
    -5px -5px 8px rgba(255, 255, 255, 0.6), /* Блик сверху слева */
    inset -2px -2px 6px rgba(0, 0, 0, 0.2),  /* Темная внутренняя тень для объема */
    inset 2px 2px 6px rgba(255, 255, 255, 0.4); /* Светлый свет внутри */
}

/* Hover эффект — добавление яркости */
.btn:hover {
  transform: translateY(-3px);
  box-shadow:
    5px 5px 15px rgba(0, 0, 0, 0.5), /* Яркая тень */
    -4px -4px 8px rgba(255, 255, 255, 0.7); /* Яркий блик */
  border-color: rgba(100, 100, 100, 1); /* Темнее рамка на наведение */
}

/* Нажатие — глубже тень и темная рамка */
.btn:active {
  transform: translateY(1px);
  box-shadow:
    inset -3px -3px 8px rgba(0, 0, 0, 0.4),  /* Меньше впуклости */
    inset 3px 3px 8px rgba(255, 255, 255, 0.5); /* Мягкая светлая тень */
  border-color: rgba(50, 50, 50, 1); /* Еще темнее рамка при нажатии */
}

/* Hover эффект для всех кнопок */
.btn-primary:hover, .btn-info:hover, .btn-success:hover, .btn-secondary:hover, .btn-warning:hover {
  background: #e1e1e1; /* Легкая светлая заливка при наведении */
  color: #555555;
  box-shadow:
    7px 7px 15px rgba(0, 0, 0, 0.5),
    -5px -5px 8px rgba(255, 255, 255, 0.8);
  border-color: rgba(230, 230, 230, 1); /* Ярче бордер на hover */
}

/* Нажатие для всех кнопок */
.btn-primary:active, .btn-info:active, .btn-success:active, .btn-secondary:active, .btn-warning:active {
  background: #dcdcdc; /* Еще более светлый фон при нажатии */
  border-color: rgba(180, 180, 180, 1); /* Темная рамка при нажатии */
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.5),
    inset -3px -3px 6px rgba(255, 255, 255, 0.5);
}
/* Все кнопки с эффектом нажатия как у .btn-warning */
.btn-danger {
  background: linear-gradient(to bottom, #f44336, #d32f2f); /* Красный градиент для .btn-danger */
  color: white; /* Цвет текста */
  border: 3px solid #d32f2f; /* Красная рамка для .btn-danger */
  box-shadow:
    5px 5px 15px rgba(0, 0, 0, 0.3),    /* Сильная тень справа и снизу */
    -5px -5px 8px rgba(255, 255, 255, 0.6), /* Блик сверху слева */
    inset -2px -2px 6px rgba(0, 0, 0, 0.2),  /* Темная внутренняя тень для объема */
    inset 2px 2px 6px rgba(255, 255, 255, 0.4); /* Светлый свет внутри */
}

/* Hover эффект — добавление яркости */
.btn-danger:hover {
  transform: translateY(-3px);
  box-shadow:
    5px 5px 15px rgba(0, 0, 0, 0.5), /* Яркая тень */
    -4px -4px 8px rgba(255, 255, 255, 0.7); /* Яркий блик */
  border-color: rgba(150, 50, 50, 1); /* Темнее рамка на наведение */
  background: linear-gradient(to bottom, #d32f2f, #b71c1c); /* Углубление красного на hover */
}

/* Нажатие — глубже тень и темная рамка */
.btn-danger:active {
  transform: translateY(1px);
  box-shadow:
    inset -3px -3px 8px rgba(0, 0, 0, 0.4),  /* Меньше впуклости */
    inset 3px 3px 8px rgba(255, 255, 255, 0.5); /* Мягкая светлая тень */
  border-color: rgba(100, 0, 0, 1); /* Еще темнее рамка при нажатии */
  background: #b71c1c; /* Еще более темный красный фон при нажатии */
}