/* ===============================================
   УНИФИЦИРОВАННАЯ СИСТЕМА КНОПОК
   Интегрирована с существующей дизайн-системой
   =============================================== */

/* ===============================================
   БАЗОВЫЕ СТИЛИ КНОПКИ
   =============================================== */

.btn {
	/* Сброс стилей */
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;

	/* Базовые параметры с использованием ваших переменных */
	padding: 0.75rem 1.75rem;
	font-family: var(--font-primary);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	letter-spacing: 0.02em;

	/* Визуальные стили */
	background: transparent;
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	color: var(--color-primary);

	/* Интерактивность */
	cursor: pointer;
	user-select: none;
	transition: all var(--transition-base);
	transform-style: preserve-3d;
	backface-visibility: hidden;

	/* Оптимизация для мобильных */
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	min-height: 44px;

	/* Предотвращение выхода текста за границы */
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Hover и фокус состояния */
@media (hover: hover) and (pointer: fine) {
	.btn:hover:not(:disabled):not(.btn--disabled) {
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	}
}

/* Touch состояния */
@media (hover: none) and (pointer: coarse) {
	.btn:active:not(:disabled):not(.btn--disabled) {
		transform: scale(0.97);
	}
}

/* Focus стили для доступности */
.btn:focus {
	outline: none;
}

.btn:focus-visible {
	outline: 3px solid var(--color-blue);
	outline-offset: 3px;
	z-index: 1;
}

/* Active состояние */
.btn:active:not(:disabled):not(.btn--disabled) {
	transform: translateY(0) scale(0.98);
	transition-duration: 0.1s;
}

/* Disabled состояние */
.btn:disabled,
.btn.btn--disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
	pointer-events: none;
}

/* ===============================================
   ОСНОВНЫЕ ВАРИАНТЫ КНОПОК
   =============================================== */

/* Primary - используем синий из вашей палитры */
.btn--primary {
	background: linear-gradient(
		135deg,
		var(--color-blue) 0%,
		var(--color-blue-dark) 100%
	);
	border-color: var(--color-blue);
	color: var(--color-white);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
	font-weight: var(--font-weight-semibold);
}

@media (hover: hover) and (pointer: fine) {
	.btn--primary:hover:not(:disabled) {
		background: linear-gradient(
			135deg,
			var(--color-blue-dark) 0%,
			#1440a3 100%
		);
		border-color: var(--color-blue-dark);
		box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
	}
}

.btn--primary:active:not(:disabled) {
	background: var(--color-blue-dark);
	border-color: var(--color-blue-dark);
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

/* Secondary - минималистичный светлый стиль */
.btn--secondary {
	background: var(--color-white);
	border-color: var(--color-light);
	color: var(--color-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

@media (hover: hover) and (pointer: fine) {
	.btn--secondary:hover:not(:disabled) {
		background: linear-gradient(135deg, #fafafa 0%, var(--color-light) 100%);
		border-color: var(--color-secondary);
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	}
}

.btn--secondary:active:not(:disabled) {
	background: var(--color-light);
	border-color: var(--color-secondary);
}

/* Success */
.btn--success {
	background: linear-gradient(135deg, var(--color-success) 0%, #16a34a 100%);
	border-color: var(--color-success);
	color: var(--color-white);
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}

@media (hover: hover) and (pointer: fine) {
	.btn--success:hover:not(:disabled) {
		background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
		border-color: #16a34a;
		box-shadow: 0 8px 24px rgba(34, 197, 94, 0.35);
	}
}

.btn--success:active:not(:disabled) {
	background: #16a34a;
	border-color: #16a34a;
}

/* Warning */
.btn--warning {
	background: linear-gradient(135deg, var(--color-warning) 0%, #d97706 100%);
	border-color: var(--color-warning);
	color: var(--color-white);
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

@media (hover: hover) and (pointer: fine) {
	.btn--warning:hover:not(:disabled) {
		background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
		border-color: #d97706;
		box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
	}
}

.btn--warning:active:not(:disabled) {
	background: #d97706;
	border-color: #d97706;
}

/* Danger */
.btn--danger {
	background: linear-gradient(
		135deg,
		var(--color-error) 0%,
		var(--color-red-dark) 100%
	);
	border-color: var(--color-error);
	color: var(--color-white);
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

@media (hover: hover) and (pointer: fine) {
	.btn--danger:hover:not(:disabled) {
		background: linear-gradient(135deg, var(--color-red-dark) 0%, #991b1b 100%);
		border-color: var(--color-red-dark);
		box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
	}
}

.btn--danger:active:not(:disabled) {
	background: var(--color-red-dark);
	border-color: var(--color-red-dark);
}

/* Info - новый тип */
.btn--info {
	background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
	border-color: #60a5fa;
	color: var(--color-white);
	box-shadow: 0 4px 12px rgba(96, 165, 250, 0.25);
}

@media (hover: hover) and (pointer: fine) {
	.btn--info:hover:not(:disabled) {
		background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
		border-color: #3b82f6;
		box-shadow: 0 8px 24px rgba(96, 165, 250, 0.35);
	}
}

.btn--info:active:not(:disabled) {
	background: #3b82f6;
	border-color: #3b82f6;
}

/* ===============================================
   OUTLINE ВАРИАНТЫ
   =============================================== */

.btn--outline {
	background: transparent;
	border-width: 2px;
	border-style: solid;
	position: relative;
	overflow: hidden;
}

.btn--outline::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	transition: width var(--transition-base);
	z-index: -1;
}

/* Outline Primary */
.btn--outline-primary {
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.btn--outline-primary::before {
	background: var(--color-blue);
}

@media (hover: hover) and (pointer: fine) {
	.btn--outline-primary:hover:not(:disabled)::before {
		width: 100%;
	}

	.btn--outline-primary:hover:not(:disabled) {
		color: var(--color-white);
		border-color: var(--color-blue);
		box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25);
	}
}

/* Outline Secondary */
.btn--outline-secondary {
	border-color: var(--color-secondary);
	color: var(--color-secondary);
}

.btn--outline-secondary::before {
	background: var(--color-secondary);
}

@media (hover: hover) and (pointer: fine) {
	.btn--outline-secondary:hover:not(:disabled)::before {
		width: 100%;
	}

	.btn--outline-secondary:hover:not(:disabled) {
		color: var(--color-white);
		box-shadow: 0 6px 20px rgba(107, 114, 128, 0.25);
	}
}

/* Outline Success */
.btn--outline-success {
	border-color: var(--color-success);
	color: var(--color-success);
}

.btn--outline-success::before {
	background: var(--color-success);
}

@media (hover: hover) and (pointer: fine) {
	.btn--outline-success:hover:not(:disabled)::before {
		width: 100%;
	}

	.btn--outline-success:hover:not(:disabled) {
		color: var(--color-white);
		box-shadow: 0 6px 20px rgba(34, 197, 94, 0.25);
	}
}

/* Outline Warning */
.btn--outline-warning {
	border-color: var(--color-warning);
	color: var(--color-warning);
}

.btn--outline-warning::before {
	background: var(--color-warning);
}

@media (hover: hover) and (pointer: fine) {
	.btn--outline-warning:hover:not(:disabled)::before {
		width: 100%;
	}

	.btn--outline-warning:hover:not(:disabled) {
		color: var(--color-white);
		box-shadow: 0 6px 20px rgba(245, 158, 11, 0.25);
	}
}

/* Outline Danger */
.btn--outline-danger {
	border-color: var(--color-error);
	color: var(--color-error);
}

.btn--outline-danger::before {
	background: var(--color-error);
}

@media (hover: hover) and (pointer: fine) {
	.btn--outline-danger:hover:not(:disabled)::before {
		width: 100%;
	}

	.btn--outline-danger:hover:not(:disabled) {
		color: var(--color-white);
		box-shadow: 0 6px 20px rgba(239, 68, 68, 0.25);
	}
}

/* Outline Info */
.btn--outline-info {
	border-color: #60a5fa;
	color: #60a5fa;
}

.btn--outline-info::before {
	background: #60a5fa;
}

@media (hover: hover) and (pointer: fine) {
	.btn--outline-info:hover:not(:disabled)::before {
		width: 100%;
	}

	.btn--outline-info:hover:not(:disabled) {
		color: var(--color-white);
		box-shadow: 0 6px 20px rgba(96, 165, 250, 0.25);
	}
}

/* ===============================================
   GHOST КНОПКИ
   =============================================== */

.btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--color-secondary);
	box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
	.btn--ghost:hover:not(:disabled) {
		background: rgba(0, 0, 0, 0.05);
		color: var(--color-primary);
		transform: translateY(0);
		box-shadow: none;
	}
}

.btn--ghost:active:not(:disabled) {
	background: rgba(0, 0, 0, 0.08);
}

/* Ghost варианты */
.btn--ghost-primary {
	color: var(--color-blue);
}

@media (hover: hover) and (pointer: fine) {
	.btn--ghost-primary:hover:not(:disabled) {
		background: rgba(59, 130, 246, 0.1);
		color: var(--color-blue-dark);
	}
}

.btn--ghost-danger {
	color: var(--color-error);
}

@media (hover: hover) and (pointer: fine) {
	.btn--ghost-danger:hover:not(:disabled) {
		background: rgba(239, 68, 68, 0.1);
		color: var(--color-red-dark);
	}
}

/* ===============================================
   LINK КНОПКИ
   =============================================== */

.btn--link {
	background: transparent;
	border: none;
	color: var(--color-blue);
	padding: 0.25rem 0.5rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	min-height: auto;
	box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
	.btn--link:hover:not(:disabled) {
		color: var(--color-blue-dark);
		text-decoration-thickness: 2px;
		transform: none;
		box-shadow: none;
	}
}

.btn--link:active:not(:disabled) {
	color: var(--color-blue-dark);
	transform: none;
}

/* ===============================================
   РАЗМЕРЫ КНОПОК
   =============================================== */

/* Small */
.btn--sm {
	padding: 0.5rem 1rem;
	font-size: var(--font-size-sm);
	border-radius: var(--radius-sm);
	min-height: 36px;
	gap: 0.375rem;
}

/* Medium (базовый) - уже определен в .btn */

/* Large */
.btn--lg {
	padding: 1rem 2.5rem;
	font-size: var(--font-size-lg);
	border-radius: var(--radius-lg);
	min-height: 52px;
	gap: 0.625rem;
}

/* Extra Large */
.btn--xl {
	padding: 1.25rem 3rem;
	font-size: var(--font-size-xl);
	border-radius: var(--radius-lg);
	min-height: 60px;
	gap: 0.75rem;
	font-weight: var(--font-weight-semibold);
}

/* ===============================================
   СПЕЦИАЛЬНЫЕ МОДИФИКАТОРЫ
   =============================================== */

/* Полная ширина */
.btn--block {
	display: flex;
	width: 100%;
}

/* Круглая кнопка */
.btn--rounded {
	border-radius: var(--radius-full);
}

/* Квадратная кнопка (для иконок) */
.btn--square {
	padding: 0.75rem;
	aspect-ratio: 1;
}

.btn--square.btn--sm {
	padding: 0.5rem;
}

.btn--square.btn--lg {
	padding: 1rem;
}

.btn--square.btn--xl {
	padding: 1.25rem;
}

/* ===============================================
   ICON КНОПКИ
   =============================================== */

.btn--icon-only {
	padding: 0.75rem;
	gap: 0;
}

.btn--icon-only.btn--sm {
	padding: 0.5rem;
	min-height: 36px;
	min-width: 36px;
}

.btn--icon-only.btn--lg {
	padding: 1rem;
	min-height: 52px;
	min-width: 52px;
}

.btn--icon-only.btn--xl {
	padding: 1.25rem;
	min-height: 60px;
	min-width: 60px;
}

/* Icon circle */
.btn--icon-circle {
	border-radius: var(--radius-full);
	padding: 0.75rem;
	aspect-ratio: 1;
}

/* ===============================================
   СОСТОЯНИЕ ЗАГРУЗКИ
   =============================================== */

.btn--loading {
	color: transparent !important;
	pointer-events: none;
	position: relative;
}

.btn--loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid transparent;
	border-radius: 50%;
	border-top-color: currentColor;
	animation: btnSpinner 0.8s linear infinite;
}

/* Цвет спиннера для цветных кнопок */
.btn--primary.btn--loading::after,
.btn--success.btn--loading::after,
.btn--warning.btn--loading::after,
.btn--danger.btn--loading::after,
.btn--info.btn--loading::after {
	border-top-color: var(--color-white);
}

/* Цвет спиннера для outline кнопок */
.btn--outline-primary.btn--loading::after {
	border-top-color: var(--color-blue);
}

.btn--outline-success.btn--loading::after {
	border-top-color: var(--color-success);
}

.btn--outline-warning.btn--loading::after {
	border-top-color: var(--color-warning);
}

.btn--outline-danger.btn--loading::after {
	border-top-color: var(--color-error);
}

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

/* Альтернативная анимация загрузки с точками */
.btn--loading-dots::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	gap: 4px;
}

.btn--loading-dots::after {
	content: "• • •";
	animation: loadingDots 1.4s infinite;
	letter-spacing: 4px;
	color: currentColor;
}

@keyframes loadingDots {
	0%,
	60%,
	100% {
		opacity: 0.3;
	}
	30% {
		opacity: 1;
	}
}

/* ===============================================
   АКТИВНОЕ СОСТОЯНИЕ
   =============================================== */

.btn--active,
.btn.active {
	background: var(--color-blue);
	border-color: var(--color-blue);
	color: var(--color-white);
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/* ===============================================
   ГРУППА КНОПОК
   =============================================== */

.btn-group {
	display: inline-flex;
	vertical-align: middle;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-group > .btn {
	position: relative;
	flex: 0 1 auto;
	border-radius: 0;
	margin: 0;
}

.btn-group > .btn:not(:first-child) {
	margin-left: -2px;
}

.btn-group > .btn:first-child {
	border-top-left-radius: var(--radius-md);
	border-bottom-left-radius: var(--radius-md);
}

.btn-group > .btn:last-child {
	border-top-right-radius: var(--radius-md);
	border-bottom-right-radius: var(--radius-md);
}

.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
	z-index: 1;
}

/* Вертикальная группа */
.btn-group--vertical {
	flex-direction: column;
	align-items: stretch;
}

.btn-group--vertical > .btn {
	width: 100%;
}

.btn-group--vertical > .btn:not(:first-child) {
	margin-left: 0;
	margin-top: -2px;
}

.btn-group--vertical > .btn:first-child {
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.btn-group--vertical > .btn:last-child {
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ===============================================
   ИКОНКИ В КНОПКАХ
   =============================================== */

.btn svg {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
	vertical-align: middle;
	fill: currentColor;
	stroke: currentColor;
	transition: transform var(--transition-base);
}

.btn--sm svg {
	width: 1em;
	height: 1em;
}

.btn--lg svg {
	width: 1.5em;
	height: 1.5em;
}

.btn--xl svg {
	width: 1.75em;
	height: 1.75em;
}

/* Позиция иконки */
.btn--icon-left {
	flex-direction: row;
}

.btn--icon-right {
	flex-direction: row-reverse;
}

/* Анимация иконки при hover */
@media (hover: hover) and (pointer: fine) {
	.btn--icon-animate:hover svg {
		transform: translateX(4px);
	}

	.btn--icon-right.btn--icon-animate:hover svg {
		transform: translateX(-4px);
	}
}

/* ===============================================
   ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ
   =============================================== */

/* Ripple эффект */
.btn--ripple {
	position: relative;
	overflow: hidden;
}

.btn--ripple::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.btn--ripple:active::before {
	width: 300px;
	height: 300px;
}

/* Glow эффект */
.btn--glow {
	box-shadow: 0 0 20px rgba(59, 130, 246, 0);
	transition: all var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
	.btn--glow:hover {
		box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
	}
}

/* ===============================================
   АДАПТИВНОСТЬ
   =============================================== */

@media (max-width: 768px) {
	.btn {
		font-size: var(--font-size-sm);
		padding: 0.625rem 1.5rem;
	}

	.btn--sm {
		font-size: var(--font-size-xs);
		padding: 0.5rem 0.875rem;
	}

	.btn--lg {
		font-size: var(--font-size-base);
		padding: 0.875rem 2rem;
	}

	.btn--xl {
		font-size: var(--font-size-lg);
		padding: 1rem 2.5rem;
	}

	/* Увеличенная область касания на мобильных */
	.btn {
		min-height: 48px;
	}

	.btn--sm {
		min-height: 40px;
	}

	.btn--lg {
		min-height: 56px;
	}

	.btn--xl {
		min-height: 64px;
	}

	/* Мобильные группы кнопок */
	.btn-group--mobile-vertical {
		flex-direction: column;
	}

	.btn-group--mobile-vertical > .btn {
		width: 100%;
		border-radius: 0;
	}

	.btn-group--mobile-vertical > .btn:first-child {
		border-radius: var(--radius-md) var(--radius-md) 0 0;
	}

	.btn-group--mobile-vertical > .btn:last-child {
		border-radius: 0 0 var(--radius-md) var(--radius-md);
	}
}

@media (max-width: 480px) {
	/* На маленьких экранах кнопки могут быть полной ширины */
	.btn--mobile-block {
		display: flex;
		width: 100%;
	}

	/* Стекинг кнопок на маленьких экранах */
	.btn-stack {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.btn-stack > .btn {
		width: 100%;
	}
}

/* ===============================================
   ДОСТУПНОСТЬ
   =============================================== */

/* Высокая контрастность */
@media (prefers-contrast: high) {
	.btn {
		border-width: 3px;
		font-weight: var(--font-weight-semibold);
	}

	.btn:focus-visible {
		outline-width: 4px;
		outline-offset: 4px;
	}
}

/* Уменьшенная анимация */
@media (prefers-reduced-motion: reduce) {
	.btn {
		transition: none;
	}

	.btn--loading::after {
		animation-duration: 2s;
	}

	.btn--ripple::before {
		display: none;
	}
}

/* ===============================================
   УТИЛИТЫ
   =============================================== */

/* Текст */
.btn--uppercase {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.btn--capitalize {
	text-transform: capitalize;
}

/* Тени */
.btn--no-shadow {
	box-shadow: none !important;
}

.btn--shadow-sm {
	box-shadow: var(--shadow-sm) !important;
}

.btn--shadow-lg {
	box-shadow: var(--shadow-lg) !important;
}

/* Прозрачность */
.btn--opacity-75 {
	opacity: 0.75;
}

.btn--opacity-50 {
	opacity: 0.5;
}

/* ===============================================
   ПЕРЕОПРЕДЕЛЕНИЕ ДЛЯ ССЫЛОК И BUTTON
   =============================================== */

a.btn {
	text-decoration: none;
}

a.btn:hover {
	text-decoration: none;
}

button.btn {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	overflow: visible;
	text-transform: none;
	-webkit-appearance: button;
}

/* ===============================================
   ПЕЧАТЬ
   =============================================== */

@media print {
	.btn {
		border: 1px solid #000 !important;
		background: white !important;
		color: #000 !important;
		box-shadow: none !important;
	}

	.btn--primary,
	.btn--success,
	.btn--warning,
	.btn--danger,
	.btn--info {
		background: #000 !important;
		color: #fff !important;
	}
}