/* fixes.css — подключать после основного */
button, 
.btn-primary, 
.variant-outline,
[class*="gradient"],
[class*="from-"][class*="to-"] {
	/* background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; */
	padding: 4px 12px 4px 12px !important;
	cursor: pointer;
	border-radius: 12px;
}

/* Для градиента из вашего CSS: from-indigo-500 via-purple-500 to-pink-500 */
.bg-gradient-to-r.from-indigo-500.via-purple-500.to-pink-500 {
	background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899) !important;
	padding: 4px 18px 4px 18px !important;
	cursor: pointer;
	border-radius: 12px;
}

/* ===== OPTIMIZATIONS FIXES ===== */
*{
	will-change: transform !important;
}
/* 1. Отключаем тяжёлые анимации на малых экранах */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* 2. Оптимизируем кнопки — убираем фильтры */
.btn-primary,
.btn-secondary,
button {
	will-change: transform;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.btn-primary:hover {
	filter: none !important;  /* ✅ убираем filter */
	transform: translateY(-0.1rem) translateZ(0);  /* ✅ лёгкий сдвиг */
	/* box-shadow: 0 10px 15px -3px #4f46e54d; */
}

/* 3. Блобы — отключаем или делаем легче */
.animate-blob {
	animation: none !important;  /* ✅ отключаем совсем */
	opacity: 0.4;  /* ✅ статичные вместо анимированных */
}

/* Или более легкая версия (раскомментировать если блобы нужны) */
/*
.animate-blob {
	animation: blob-optimized 15s infinite ease-in-out;
}
@keyframes blob-optimized {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}
*/

/* 4. Градиенты — фиксируем вместо анимации */
.animate-gradient,
.text-gradient {
	background-size: 100% !important;  /* ✅ фиксированный размер */
	animation: none !important;        /* ✅ отключаем анимацию */
}

/* 5. Blur — убираем или заменяем */
.blur-3xl,
.blur-xl,
.blur-lg,
.backdrop-blur-md,
.backdrop-blur-sm {
	backdrop-filter: none !important;  /* ✅ отключаем blur */
	/* background: rgba(0, 0, 0, 0.7) !important;  ✅ замена на простой фон */
}

/* 6. Убираем лишние transition на всех элементах */
* {
	transition-duration: 0.15s !important;  /* ✅ ограничиваем время */
}

/* 7. Оптимизация тяжёлых теней */
.shadow-2xl,
.shadow-xl,
.shadow-lg {
	/* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;  ✅ легче */
}

/* 8. Снижаем нагрузку на скроллбар */
::-webkit-scrollbar {
	width: 6px;  /* ✅ уже */
}
::-webkit-scrollbar-thumb {
	/* background: #4f46e5; */
	border-radius: 3px;
}

/* 9. Для мобильных устройств — максимальное упрощение */
@media (max-width: 768px) {
	.btn-primary,
	.btn-secondary,
	.card {
		transform: translateZ(0) !important;
		transition: all 0.1s ease !important;
	}
	
	[class*="gradient"],
	[class*="animate-"] {
		animation: none !important;
		transition: none !important;
	}
	
	.backdrop-blur-sm,
	.backdrop-blur-md {
		backdrop-filter: none !important;
		/* background: rgba(0, 0, 0, 0.8) !important; */
	}
}

#headlessui-listbox-options-v-13{
	position: relative !important;
}
.payment-modal-overlay{
	backdrop-filter: none !important;
}