/* Modern Modals CSS - 2025 Edition */
:root {
  /* Основные цвета */
  --modal-primary: #2563EB;
  --modal-primary-hover: #1E40AF;
  --modal-secondary: white;
  --modal-secondary-hover: white;
  --modal-success: #10B981;
  --modal-danger: #EF4444;
  --modal-warning: #F59E0B;
  --modal-info: #3B82F6;
  
  /* Структурные переменные */
  --modal-border-radius: 16px;
  --modal-content-padding: 24px;
  --modal-header-padding: 20px 24px;
  --modal-footer-padding: 16px 24px;
  --modal-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  --modal-backdrop-opacity: 0.5;
  
  /* Текстовые переменные */
  --modal-title-size: 1.5rem;
  --modal-title-weight: 600;
  
  /* Анимационные переменные */
  --modal-transition: all 0.3s ease;
}

/* Основной контейнер модального окна */
.modal-content {
  border: none;
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-box-shadow);
  overflow: hidden; /* скрываем все, что выходит за пределы скругленных углов */
  animation: modalFadeIn 0.3s ease;
}

/* Затемнение фона */
.modal-backdrop.show {
  opacity: var(--modal-backdrop-opacity);
}

/* Заголовок модального окна */
.modal-header {
  background: linear-gradient(135deg, var(--modal-primary), var(--modal-primary-hover));
  color: white;
  border-bottom: none;
  padding: var(--modal-header-padding);
  align-items: center;
}

.modal-header .modal-title {
  font-size: var(--modal-title-size);
  font-weight: var(--modal-title-weight);
  letter-spacing: 0.5px;
}

/* Кнопка закрытия в заголовке */
.modal-header .btn-close {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0.8;
  padding: 0.75rem;
  transition: var(--modal-transition);
}

.modal-header .btn-close:hover {
  opacity: 1;
  transform: rotate(90deg);
  background-color: rgba(255, 255, 255, 0.8);
}

/* Тело модального окна */
.modal-body {
  padding: var(--modal-content-padding);
  background-color: white;
}

/* Подвал модального окна */
.modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: var(--modal-footer-padding);
  justify-content: flex-end;
  background-color: #f9fafb;
}

/* Стили для кнопок в модальном окне */
.modal .btn {
  padding: 10px 20px;
  font-weight: 500;
  border-radius: 8px;
  transition: var(--modal-transition);
  position: relative;
  overflow: hidden;
}

.modal .btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.modal .btn:focus:not(:active)::after {
  animation: ripple 0.6s ease-out;
}

/* Основные цвета кнопок */
.modal .btn-primary {
  background-color: var(--modal-primary);
  border-color: var(--modal-primary);
}

.modal .btn-primary:hover {
  background-color: var(--modal-primary-hover);
  border-color: var(--modal-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.25);
}

.modal .btn-secondary {
  background-color: white;
  border: 1px solid #e5e7eb;
  color: var(--modal-secondary);
}

.modal .btn-secondary:hover {
  background-color: #f9fafb;
  color: var(--modal-secondary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(107, 114, 128, 0.15);
}

/* Стили для полей ввода внутри модального окна */
.modal .form-control, 
.modal .form-select {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 16px;
  transition: var(--modal-transition);
  font-size: 1rem;
}

.modal .form-control:focus,
.modal .form-select:focus {
  border-color: var(--modal-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

/* Стили для меток полей */
.modal label {
  font-weight: 500;
  margin-bottom: 6px;
  color: #374151;
}

/* Группы форм */
.modal .form-group {
  margin-bottom: 20px;
}

/* Анимация для модального окна */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Анимация эффекта нажатия кнопки */
@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(25, 25);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

/* Стили для уведомлений */
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  max-width: 400px;
}

.notification {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px;
  margin-bottom: 10px;
  transform: translateX(100%);
  opacity: 0;
  display: flex;
  align-items: center;
  border-left: 4px solid var(--modal-primary);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Класс для отображения уведомления */
.notification.notification-show {
  transform: translateX(0);
  opacity: 1;
}

/* Класс для скрытия уведомления */
.notification.notification-fadeout {
  transform: translateX(100%);
  opacity: 0;
}

.notification.success {
  border-left-color: var(--modal-success);
}

.notification.error {
  border-left-color: var(--modal-danger);
}

.notification.warning {
  border-left-color: var(--modal-warning);
}

.notification.info {
  border-left-color: var(--modal-info);
}

.notification-icon {
  margin-right: 12px;
  font-size: 1.5rem;
}

.success .notification-icon {
  color: var(--modal-success);
}

.error .notification-icon {
  color: var(--modal-danger);
}

.warning .notification-icon {
  color: var(--modal-warning);
}

.info .notification-icon {
  color: var(--modal-info);
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.notification-message {
  color: #6B7280;
  font-size: 0.9rem;
}

.notification-close {
  background: none;
  border: none;
  color: #9CA3AF;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  margin-left: 10px;
  transition: var(--modal-transition);
}

@keyframes slideIn {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Специальные стили для mobile */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 10px;
  }
  
  .modal-content {
    border-radius: 12px;
  }
  
  .modal .btn {
    padding: 8px 16px;
  }
}