/* Основные стили для модального окна */
.mode-modal {
	display: none; /* Скрыто по умолчанию */
	position: fixed; /* Фиксированное позиционирование */
	z-index: 2000; /* Задний план для модального окна */
	left: 0; /* Выравнивание по левому краю */
	top: 0; /* Выравнивание по верхнему краю */
	width: 100%; /* Ширина на 100% */
	height: 100%; /* Высота на 100% */
	overflow: auto; /* Прокрутка, если содержимое превышает размеры */
	background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
	backdrop-filter: blur(5px); /* Размытие фона */
}

/* Стили для содержимого модального окна */
.mode-modal-content {
	background-color: var(--bg-secondary); /* Используем переменную фона */
	margin: 5% auto; /* Отступ сверху и центрирование по горизонтали */
	padding: 20px; /* Внутренние отступы */
	border: 1px solid var(--border-color); /* Используем переменную бордера */
	max-width: calc(100vw * 0.7); /* Максимальная ширина 70% от ширины окна */
	max-height: calc(100vh * 0.7); /* Максимальная высота 70% от высоты окна */
	overflow: auto; /* Прокрутка, если содержимое превышает размеры */
	border-radius: 5px; /* Скругление углов */
	color: var(--text-primary); /* Основной цвет текста */
	box-shadow: var(--shadow); /* Тень из темы */
}

/* Кнопка закрытия модального окна */
.mode-modal-close {
	color: var(--text-secondary); /* Цвет кнопки закрытия из темы */
	float: right; /* Выравнивание по правому краю */
	font-size: 16px; /* Размер шрифта */
	font-weight: bold; /* Жирное начертание */
}

/* Эффекты при наведении на кнопку закрытия */
.mode-modal-close:hover,
.mode-modal-close:focus {
	color: var(--text-primary); /* Цвет при наведении */
	text-decoration: none; /* Убираем подчеркивание */
	cursor: pointer; /* Курсор в виде указателя */
}

/* Заголовок модального окна */
.mode-modal-title {
	text-align: left; /* Выравнивание по левому краю */
	margin: 0; /* Убираем отступы */
	color: var(--text-primary); /* Цвет текста заголовка */
}

/* Основное сообщение в модальном окне */
.mode-modal-message {
	text-align: left; /* Выравнивание по левому краю */
	margin-top: 10px; /* Отступ сверху */
	margin-bottom: 0; /* Убираем нижний отступ */
	color: var(--text-primary); /* Цвет текста сообщения */
}

/* Дополнительная информация в модальном окне */
.mode-modal-note {
	text-align: left; /* Выравнивание по левому краю */
	margin-top: 10px; /* Отступ сверху */
	color: var(--text-secondary); /* Цвет текста из темы */
	font-size: 12px; /* Размер шрифта */
}

/* Контейнер для кнопок модального окна */
.mode-modal-buttons {
	display: flex; /* Используем flexbox для расположения кнопок */
	justify-content: flex-end; /* Выравнивание кнопок по правому краю */
	margin-top: 20px; /* Отступ сверху */
}

/* Общие стили для кнопок модального окна */
.mode-modal-button {
	padding: 10px 15px; /* Внутренние отступы */
	margin-left: 10px; /* Отступ слева */
	cursor: pointer; /* Курсор в виде указателя */
	border: none; /* Убираем рамку */
	border-radius: 5px; /* Скругление углов */
	color: white; /* Цвет текста */
}

/* Стили для кнопки "OK" */
.mode-modal-ok-button {
	background-color: #4CAF50; /* Цвет фона кнопки "OK" */
}

/* Эффекты при наведении на кнопку "OK" */
.mode-modal-ok-button:hover {
	background-color: #45a049; /* Цвет при наведении */
}

/* Стили для кнопки "NO" */
.mode-modal-no-button {
	background-color: #f44336; /* Цвет фона кнопки "NO" */
}

/* Эффекты при наведении на кнопку "NO" */
.mode-modal-no-button:hover {
	background-color: #e53935; /* Цвет при наведении */
}

/* Прогресс-бар */
.mode-modal-progress-bar {
	display: none; /* Скрываем прогресс-бар по умолчанию */
	width: 100%; /* Ширина на 100% */
	background-color: var(--bg-primary); /* Фон прогресс-бара из темы */
	border-radius: 5px; /* Скругление углов */
	margin-top: 10px; /* Отступ сверху */
	overflow: hidden; /* Скрыть переполнение */
	border: 1px solid var(--border-color); /* Бордер из темы */
}

/* Полоса прогресса */
.mode-modal-progress {
	height: 100%; /* Высота прогресса */
	background-color: var(--btn-primary); /* Цвет прогресса из темы */
	width: 0; /* Начальная ширина */
	transition: width 0.1s linear; /* Плавный переход ширины */
}