/* Стили кнопки */
.btn {
	padding: 10px; /* Внутренний отступ кнопки */
	border: none; /* Убираем рамку */
	border-radius: 0px; /* Закругляем углы кнопки 4px */
	font-size: 16px; /* Размер шрифта текста на кнопке */
	cursor: pointer; /* Изменяем курсор на указатель при наведении */
	transition: background-color 0.3s ease; /* Плавный переход цвета фона */
}

.btn-w {
	width: 100%; /* Ширина кнопки 100% от родительского контейнера */
}

/* Стили для микроскопической кнопки */
.btn-mc, 
.btn-micro {
	padding: 2px 5px; /* Очень маленькие отступы */
	font-size: 10px; /* Очень маленький размер шрифта */
}

/* Стили для малой кнопки */
.btn-sm, 
.btn-small {
	padding: 5px 10px; /* Меньшие отступы */
	font-size: 14px; /* Меньший размер шрифта */
}

/* Стили для средней кнопки */
.btn-md, 
.btn-medium {
	padding: 10px 20px; /* Стандартные отступы */
	font-size: 16px; /* Стандартный размер шрифта */
}

/* Стили для большой кнопки */
.btn-lg, 
.btn-large {
	padding: 15px 30px; /* Большие отступы */
	font-size: 18px; /* Больший размер шрифта */
}

/* Стили для огромной кнопки */
.btn-hg,
.btn-huge {
	padding: 20px 40px; /* Очень большие отступы */
	font-size: 22px; /* Очень большой размер шрифта */
}


/* 
 * Primary (синий) - Основная кнопка
 * Стили для основной/первичной кнопки (главное действие)
 * Использует переменную --btn-primary, fallback #007bff
 */
.btn-p, .btn-prim, .btn-primary {
    background-color: var(--btn-primary, #007bff) !important;
    color: #ffffff !important;
    border-color: var(--btn-primary, #007bff) !important;
}
.btn-p:hover, .btn-prim:hover, .btn-primary:hover {
    background-color: var(--btn-primary-hover, #0056b3) !important;
    color: #ffffff !important;
    border-color: var(--btn-primary-hover, #0056b3) !important;
}
.btn-p-o, .btn-prim-o, .btn-primary-o, .btn-outline-primary {
    background-color: transparent !important;
    color: var(--btn-primary, #007bff) !important;
    border: 1px solid var(--btn-primary, #007bff) !important;
}
.btn-p-o:hover, .btn-prim-o:hover, .btn-primary-o:hover, .btn-outline-primary:hover {
    background-color: var(--btn-primary, #007bff) !important;
    color: #ffffff !important;
}

/* 
 * Secondary (серый) - Вторичная кнопка
 * Стили для второстепенных действий (менее важные операции)
 * Альтернатива основной кнопке, нейтральный серый цвет
 */
.btn-scd, .btn-sec, .btn-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
}
.btn-scd:hover, .btn-sec:hover, .btn-secondary:hover {
    background-color: #5a6268 !important;
    color: #ffffff !important;
    border-color: #5a6268 !important;
}
.btn-scd-o, .btn-sec-o, .btn-secondary-o, .btn-outline-secondary {
    background-color: transparent !important;
    color: #6c757d !important;
    border: 1px solid #6c757d !important;
}
.btn-scd-o:hover, .btn-sec-o:hover, .btn-secondary-o:hover, .btn-outline-secondary:hover {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

/* 
 * Success (зеленый) - Кнопка успеха
 * Используется для позитивных действий (сохранение, подтверждение)
 * Визуально указывает на успешное выполнение операции
 */
.btn-s, .btn-suc, .btn-succ, .btn-success {
    background-color: #28a745 !important;
    color: #ffffff !important;
    border-color: #28a745 !important;
}
.btn-s:hover, .btn-suc:hover, .btn-succ:hover, .btn-success:hover {
    background-color: #218838 !important;
    color: #ffffff !important;
    border-color: #218838 !important;
}
.btn-s-o, .btn-suc-o, .btn-succ-o, .btn-success-o, .btn-outline-success {
    background-color: transparent !important;
    color: #28a745 !important;
    border: 1px solid #28a745 !important;
}
.btn-s-o:hover, .btn-suc-o:hover, .btn-succ-o:hover, .btn-success-o:hover, .btn-outline-success:hover {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

/* 
 * Danger (красный) - Кнопка опасности
 * Для деструктивных или необратимых действий (удаление, отмена)
 * Визуально предупреждает о возможных последствиях
 */
.btn-d, .btn-dng, .btn-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border-color: #dc3545 !important;
}
.btn-d:hover, .btn-dng:hover, .btn-danger:hover {
    background-color: #c82333 !important;
    color: #ffffff !important;
    border-color: #c82333 !important;
}
.btn-d-o, .btn-dng-o, .btn-danger-o, .btn-outline-danger {
    background-color: transparent !important;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
}
.btn-d-o:hover, .btn-dng-o:hover, .btn-danger-o:hover, .btn-outline-danger:hover {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

/* 
 * Warning (желтый) - Кнопка предупреждения
 * Для действий, требующих внимания (предупреждения, важные сообщения)
 * Темный текст для лучшей читаемости на желтом фоне
 */
.btn-w, .btn-wrn, .btn-warn, .btn-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
    border-color: #ffc107 !important;
}
.btn-w:hover, .btn-wrn:hover, .btn-warn:hover, .btn-warning:hover {
    background-color: #e0a800 !important;
    color: #212529 !important;
    border-color: #e0a800 !important;
}
.btn-w-o, .btn-wrn-o, .btn-warn-o, .btn-warning-o, .btn-outline-warning {
    background-color: transparent !important;
    color: #ffc107 !important;
    border: 1px solid #ffc107 !important;
}
.btn-w-o:hover, .btn-wrn-o:hover, .btn-warn-o:hover, .btn-warning-o:hover, .btn-outline-warning:hover {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

/* 
 * Info (голубой) - Информационная кнопка
 * Для информационных сообщений и подсказок
 * Альтернатива основной кнопке в информационном контексте
 */
.btn-i, .btn-inf, .btn-info {
    background-color: #17a2b8 !important;
    color: #ffffff !important;
    border-color: #17a2b8 !important;
}
.btn-i:hover, .btn-inf:hover, .btn-info:hover {
    background-color: #138496 !important;
    color: #ffffff !important;
    border-color: #138496 !important;
}
.btn-i-o, .btn-inf-o, .btn-info-o, .btn-outline-info {
    background-color: transparent !important;
    color: #17a2b8 !important;
    border: 1px solid #17a2b8 !important;
}
.btn-i-o:hover, .btn-inf-o:hover, .btn-info-o:hover, .btn-outline-info:hover {
    background-color: #17a2b8 !important;
    color: #ffffff !important;
}

/* 
 * Light (светлый) - Светлая кнопка
 * Для второстепенных действий на темном фоне
 * Темный текст для контраста на светлом фоне
 */
.btn-l, .btn-lgt, .btn-light {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-color: #f8f9fa !important;
}
.btn-l:hover, .btn-lgt:hover, .btn-light:hover {
    background-color: #e2e6ea !important;
    color: #212529 !important;
    border-color: #e2e6ea !important;
}
.btn-l-o, .btn-lgt-o, .btn-light-o, .btn-outline-light {
    background-color: transparent !important;
    color: #f8f9fa !important;
    border: 1px solid #f8f9fa !important;
}
.btn-l-o:hover, .btn-lgt-o:hover, .btn-light-o:hover, .btn-outline-light:hover {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* 
 * Dark (темный) - Темная кнопка
 * Альтернативный стиль для кнопок на светлом фоне
 * Создает сильный визуальный контраст
 */
.btn-dk, .btn-drk, .btn-dark {
    background-color: #343a40 !important;
    color: #ffffff !important;
    border-color: #343a40 !important;
}
.btn-dk:hover, .btn-drk:hover, .btn-dark:hover {
    background-color: #23272b !important;
    color: #ffffff !important;
    border-color: #23272b !important;
}
.btn-dk-o, .btn-drk-o, .btn-dark-o, .btn-outline-dark {
    background-color: transparent !important;
    color: #343a40 !important;
    border: 1px solid #343a40 !important;
}
.btn-dk-o:hover, .btn-drk-o:hover, .btn-dark-o:hover, .btn-outline-dark:hover {
    background-color: #343a40 !important;
    color: #ffffff !important;
}

/* 
 * Purple (фиолетовый) - Фиолетовая кнопка
 * Дополнительный цвет для специальных действий
 * Может использоваться для премиум-функций или акцентов
 */
.btn-v, .btn-prp, .btn-purple {
    background-color: #6f42c1 !important;
    color: #ffffff !important;
    border-color: #6f42c1 !important;
}
.btn-v:hover, .btn-prp:hover, .btn-purple:hover {
    background-color: #5a32a3 !important;
    color: #ffffff !important;
    border-color: #5a32a3 !important;
}
.btn-v-o, .btn-prp-o, .btn-purple-o, .btn-outline-purple {
    background-color: transparent !important;
    color: #6f42c1 !important;
    border: 1px solid #6f42c1 !important;
}
.btn-v-o:hover, .btn-prp-o:hover, .btn-purple-o:hover, .btn-outline-purple:hover {
    background-color: #6f42c1 !important;
    color: #ffffff !important;
}

/* 
 * Orange (оранжевый) - Акцентная кнопка
 * Для специальных акций, выделяющихся действий
 */
.btn-o, .btn-orng, .btn-orange {
    background-color: #fd7e14 !important;
    color: #212529 !important;
    border-color: #fd7e14 !important;
}
.btn-o:hover, .btn-orng:hover, .btn-orange:hover {
    background-color: #dc6e10 !important;
    color: #212529 !important;
    border-color: #dc6e10 !important;
}
.btn-o-o, .btn-orng-o, .btn-orange-o, .btn-outline-orange {
    background-color: transparent !important;
    color: #fd7e14 !important;
    border: 1px solid #fd7e14 !important;
}
.btn-o-o:hover, .btn-orng-o:hover, .btn-orange-o:hover, .btn-outline-orange:hover {
    background-color: #fd7e14 !important;
    color: #212529 !important;
}

/* 
 * Pink (розовый) - Кнопка для маркетинга
 * Для женственной аудитории, специальных промо-акций
 */
.btn-pnk, .btn-pink {
    background-color: #e83e8c !important;
    color: #ffffff !important;
    border-color: #e83e8c !important;
}
.btn-pnk:hover, .btn-pink:hover {
    background-color: #d01d6b !important;
    color: #ffffff !important;
    border-color: #d01d6b !important;
}
.btn-pnk-o, .btn-pink-o, .btn-outline-pink {
    background-color: transparent !important;
    color: #e83e8c !important;
    border: 1px solid #e83e8c !important;
}
.btn-pnk-o:hover, .btn-pink-o:hover, .btn-outline-pink:hover {
    background-color: #e83e8c !important;
    color: #ffffff !important;
}

/* 
 * Teal (бирюзовый) - Свежая альтернатива
 * Современный цвет для второстепенных действий
 */
.btn-t, .btn-teal {
    background-color: #20c997 !important;
    color: #ffffff !important;
    border-color: #20c997 !important;
}
.btn-t:hover, .btn-teal:hover {
    background-color: #199d76 !important;
    color: #ffffff !important;
    border-color: #199d76 !important;
}
.btn-t-o, .btn-teal-o, .btn-outline-teal {
    background-color: transparent !important;
    color: #20c997 !important;
    border: 1px solid #20c997 !important;
}
.btn-t-o:hover, .btn-teal-o:hover, .btn-outline-teal:hover {
    background-color: #20c997 !important;
    color: #ffffff !important;
}

/* 
 * Indigo (индиго) - Профессиональный акцент
 * Для премиальных функций и профессиональных интерфейсов
 */
.btn-idg, .btn-indigo {
    background-color: #6610f2 !important;
    color: #ffffff !important;
    border-color: #6610f2 !important;
}
.btn-idg:hover, .btn-indigo:hover {
    background-color: #520dc2 !important;
    color: #ffffff !important;
    border-color: #520dc2 !important;
}
.btn-idg-o, .btn-indigo-o, .btn-outline-indigo {
    background-color: transparent !important;
    color: #6610f2 !important;
    border: 1px solid #6610f2 !important;
}
.btn-idg-o:hover, .btn-indigo-o:hover, .btn-outline-indigo:hover {
    background-color: #6610f2 !important;
    color: #ffffff !important;
}

/* 
 * Lime (лаймовый) - Яркий акцент
 * Для выделения новых или свежих функций
 */
.btn-lm, .btn-lime {
    background-color: #d4ed12 !important;
    color: #212529 !important;
    border-color: #d4ed12 !important;
}
.btn-lm:hover, .btn-lime:hover {
    background-color: #b8d00b !important;
    color: #212529 !important;
    border-color: #b8d00b !important;
}
.btn-lm-o, .btn-lime-o, .btn-outline-lime {
    background-color: transparent !important;
    color: #d4ed12 !important;
    border: 1px solid #d4ed12 !important;
}
.btn-lm-o:hover, .btn-lime-o:hover, .btn-outline-lime:hover {
    background-color: #d4ed12 !important;
    color: #212529 !important;
}

/* 
 * Maroon (бордовый) - Премиальный акцент
 * Для эксклюзивных или VIP функций
 */
.btn-mrn, .btn-maroon {
    background-color: #7b0a1a !important;
    color: #ffffff !important;
    border-color: #7b0a1a !important;
}
.btn-mrn:hover, .btn-maroon:hover {
    background-color: #5c0713 !important;
    color: #ffffff !important;
    border-color: #5c0713 !important;
}
.btn-mrn-o, .btn-maroon-o, .btn-outline-maroon {
    background-color: transparent !important;
    color: #7b0a1a !important;
    border: 1px solid #7b0a1a !important;
}
.btn-mrn-o:hover, .btn-maroon-o:hover, .btn-outline-maroon:hover {
    background-color: #7b0a1a !important;
    color: #ffffff !important;
}




/* Эффект нажатия кнопки */
.btn:active {
	transform: scale(0.95);
	background-color: var(--btn-primary, rgba(111, 66, 193, 0.8)) !important;
	color: #ffffff;
}

/* Стили для отключенной кнопки */
.btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* Удаление обводки при фокусе */
.btn:focus {
	outline: none;
}

/* Дополнительные стили для кнопок с обводкой */
.btn-outline {
	background-color: transparent;
}

/* Стили для кнопок с обводкой при наведении */
.btn-outline:hover {
	background-color: rgba(0, 0, 0, 0.1);
}