/* ========================================================================= */
/* =============== СЕКЦИЯ ПОЖЕРТВОВАНИЙ С ПОДДЕРЖКОЙ ТЕМ ================== */
/* ========================================================================= */

.donation-section {
	padding: 6rem 2rem;
	background: var(--gradient-hero);
	border-top: 1px solid var(--border-light);
	border-bottom: 1px solid var(--border-light);
	text-align: center;
	transition: all 0.3s ease;
}

.donation-content {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
}

.donation-content .section-subtitle {
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--text-secondary);
	transition: color 0.3s ease;
}

/* QR КОД ДЛЯ ДОНАТА */
.donation-qr-btn {
	display: inline-block;
	text-decoration: none;
	transition: all 0.3s ease;
	position: relative;
}

.donation-qr-text {
	color: var(--text-secondary);
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
	line-height: 1.5;
	font-weight: 500;
	transition: color 0.3s ease;
}

.donation-qr-content {
	padding: 2.5rem 2.5rem 2rem;
	background: var(--gradient-light);
	border: 1px solid var(--border-light);
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	box-shadow: var(--shadow-md);
	transition: all 0.3s ease;
	backdrop-filter: var(--blur-backdrop);
	-webkit-backdrop-filter: var(--blur-backdrop);
	position: relative;
	z-index: 2;
}

.donation-qr-btn:hover .donation-qr-content {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
	border-color: var(--border-medium);
}

.donation-qr-btn:active .donation-qr-content {
	transform: translateY(1px);
	box-shadow: var(--shadow-sm);
}

/* КОШЕЛЁК С АНИМАЦИЕЙ МОНЕТЫ */
.donation-wallet-wrap {
	position: relative;
	width: 260px;
	height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Кошелёк закрытый / открытый — анимация при наведении */
.donation-wallet-closed,
.donation-wallet-open {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	height: auto;
	z-index: 2;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Закрытый: сдвигаем влево, т.к. кошелёк занимает правые 60% изображения */
.donation-wallet-closed {
	opacity: 1;
	transform: translate(calc(-50% - 32px), -50%) scale(1);
}

/* Открытый: изображение заполнено целиком — центрируем нормально */
.donation-wallet-open {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.92);
}

/* Hover-анимации только на устройствах с настоящим курсором — на touch первый тап не тратится на hover */
@media (hover: hover) {
	.donation-qr-btn:hover .donation-wallet-closed {
		opacity: 0;
		transform: translate(calc(-50% - 50px), -50%) scale(0.9);
	}

	.donation-qr-btn:hover .donation-wallet-open {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* СВЕЧЕНИЕ ЗА КОШЕЛЬКОМ */
.donation-wallet-glow {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 50%,
		rgba(255, 200, 0, 0.35) 0%,
		rgba(130, 80, 255, 0.25) 45%,
		transparent 70%);
	filter: blur(18px);
	transition: background 0.4s ease;
	z-index: 1;
}

@media (hover: hover) {
	.donation-qr-btn:hover .donation-wallet-glow {
		background: radial-gradient(circle at 40% 50%,
			rgba(255, 210, 0, 0.55) 0%,
			rgba(130, 80, 255, 0.4) 45%,
			transparent 70%);
	}
}

/* МОНЕТКИ — три штуки с разным разбегом */
.donation-coin {
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff0a0, #f0a500 55%, #b87400);
	box-shadow: 0 2px 6px rgba(200, 120, 0, 0.5), inset 0 1px 2px rgba(255,255,255,0.6);
	opacity: 0;
	pointer-events: none;
	z-index: 10;
	top: 8px;
}

/* Монетный отсек открытого кошелька — правая треть изображения */
.donation-coin-1 { left: calc(50% + 10px); top: 6px; }
.donation-coin-2 { left: calc(50% + 28px); width: 20px; height: 20px; top: 0; }
.donation-coin-3 { left: calc(50% + 44px); top: 8px; }

@media (hover: hover) {
	.donation-qr-btn:hover .donation-coin-1 {
		animation: coinDrop 0.6s cubic-bezier(0.5, 0, 0.7, 1) 0.15s forwards;
	}
	.donation-qr-btn:hover .donation-coin-2 {
		animation: coinDrop 0.65s cubic-bezier(0.5, 0, 0.7, 1) 0.35s forwards;
	}
	.donation-qr-btn:hover .donation-coin-3 {
		animation: coinDrop 0.6s cubic-bezier(0.5, 0, 0.7, 1) 0.55s forwards;
	}
}

@keyframes coinDrop {
	0%   { opacity: 1; transform: translateY(0) scale(1); }
	55%  { opacity: 1; transform: translateY(90px) scale(0.92); }
	80%  { opacity: 0.3; transform: translateY(118px) scale(0.75); }
	100% { opacity: 0; transform: translateY(130px) scale(0.6); }
}

/* БЕЙДЖИ МЕТОДОВ ОПЛАТЫ */
.donation-methods {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	justify-content: center;
}

.donation-method-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.75rem;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.donation-method-badge.paypal {
	background: rgba(0, 100, 192, 0.12);
	color: #0064C0;
	border: 1px solid rgba(0, 100, 192, 0.25);
}

.donation-method-badge.crypto {
	background: rgba(242, 169, 0, 0.12);
	color: #c87800;
	border: 1px solid rgba(242, 169, 0, 0.3);
}

.donation-method-badge.card {
	background: rgba(52, 168, 83, 0.12);
	color: #2a8a44;
	border: 1px solid rgba(52, 168, 83, 0.25);
}

:root[data-theme="dark"] .donation-method-badge.paypal {
	background: rgba(0, 140, 255, 0.15);
	color: #5ab4ff;
	border-color: rgba(0, 140, 255, 0.3);
}

:root[data-theme="dark"] .donation-method-badge.crypto {
	background: rgba(255, 185, 0, 0.15);
	color: #ffc840;
	border-color: rgba(255, 185, 0, 0.3);
}

:root[data-theme="dark"] .donation-method-badge.card {
	background: rgba(80, 220, 120, 0.12);
	color: #4dcc7a;
	border-color: rgba(80, 220, 120, 0.25);
}

/* ЭФФЕКТ ПУЛЬСИРУЮЩЕГО КРУГА */
.donation-qr-btn::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(var(--brand-blue-rgb), 0.1) 0%, transparent 70%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.6s ease;
	pointer-events: none;
	z-index: 1;
}

.donation-qr-btn:hover::after {
	width: 300px;
	height: 300px;
}

/* ТЕМНАЯ ТЕМА - СПЕЦИАЛЬНЫЕ СТИЛИ */
:root[data-theme="dark"] .donation-section {
	background: var(--gradient-hero);
	border-color: var(--border-light);
}

:root[data-theme="dark"] .donation-qr-content {
	background: var(--gradient-light);
	border-color: var(--border-light);
	backdrop-filter: var(--blur-backdrop);
	-webkit-backdrop-filter: var(--blur-backdrop);
}

:root[data-theme="dark"] .donation-qr-btn:hover .donation-qr-content {
	border-color: var(--border-medium);
}

:root[data-theme="dark"] .donation-service-logo {
	filter: brightness(0.8) contrast(1.1) hue-rotate(180deg);
}

:root[data-theme="dark"] .donation-qr-btn:hover .donation-service-logo {
	filter: brightness(1) contrast(1.1) hue-rotate(180deg);
}

:root[data-theme="dark"] .donation-qr-btn::after {
	background: radial-gradient(circle, rgba(10, 132, 255, 0.15) 0%, transparent 70%);
}

/* ГЛАСМОРФИЗМ ЭФФЕКТЫ */
@supports (backdrop-filter: blur(10px)) {
	.donation-qr-content {
		background: var(--glassmorphism);
		border: 1px solid var(--glassmorphism-border);
		backdrop-filter: var(--blur-backdrop);
		-webkit-backdrop-filter: var(--blur-backdrop);
	}
}

/* АДАПТИВНОСТЬ */
@media (max-width: 768px) {
	.donation-section {
		padding: 4rem 1.5rem;
	}

	.donation-content {
		gap: 2rem;
	}

	.donation-qr-content {
		padding: 2rem;
		gap: 1.5rem;
		border-radius: 20px;
	}

	.donation-qr-image {
		width: 200px;
		height: 200px;
		border-radius: 14px;
	}

	.donation-service-logo {
		height: 28px;
	}

	.donation-content .section-subtitle {
		font-size: 1.15rem;
	}

	.donation-qr-text {
		font-size: 1rem;
	}
}

@media (max-width: 480px) {
	.donation-section {
		padding: 3rem 1rem;
	}

	.donation-content {
		gap: 1.5rem;
	}

	.donation-qr-content {
		padding: 1.5rem;
		gap: 1.25rem;
		border-radius: 18px;
	}

	.donation-qr-image {
		width: 180px;
		height: 180px;
		border-radius: 12px;
	}

	.donation-service-logo {
		height: 24px;
	}

	.donation-content .section-subtitle {
		font-size: 1.1rem;
	}

	.donation-qr-text {
		font-size: 0.95rem;
	}
}

/* АНИМАЦИЯ ПУЛЬСА */
@keyframes donationPulse {

	0%,
	100% {
		transform: scale(1);
		box-shadow: var(--shadow-md);
	}

	50% {
		transform: scale(1.02);
		box-shadow: var(--shadow-lg);
	}
}

.donation-qr-btn:focus-visible .donation-qr-content {
	animation: donationPulse 2s ease-in-out infinite;
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
	.donation-qr-btn:hover .donation-qr-content {
		transform: none;
	}

	.donation-qr-btn:active .donation-qr-content {
		transform: none;
	}

	.donation-qr-btn::after {
		transition: none;
	}

	.donation-qr-btn:focus-visible .donation-qr-content {
		animation: none;
	}
}

/* HIGH CONTRAST MODE */
@media (prefers-contrast: high) {
	.donation-section {
		background: var(--bg-primary);
		border-color: var(--border-dark);
	}

	.donation-qr-content {
		background: var(--bg-primary);
		border: 2px solid var(--border-dark);
	}

	.donation-qr-btn:hover .donation-qr-content {
		border-color: var(--color-primary);
	}

	.donation-service-logo {
		filter: contrast(2);
	}
}

/* FOCUS STYLES */
.donation-qr-btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: 28px;
}

.donation-qr-btn:focus-visible .donation-qr-content {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-lg);
}

/* МОБИЛЬНЫЕ: при появлении секции — открытый кошелёк + падающие монетки */
@keyframes coinDropLoop {
	0%   { opacity: 0;   transform: translateY(-4px)  scale(1);    }
	7%   { opacity: 1;   transform: translateY(0px)   scale(1);    }
	18%  { opacity: 1;   transform: translateY(18px)  scale(0.99); }
	35%  { opacity: 1;   transform: translateY(44px)  scale(0.97); }
	52%  { opacity: 1;   transform: translateY(72px)  scale(0.94); }
	66%  { opacity: 1;   transform: translateY(90px)  scale(0.91); }
	76%  { opacity: 0.8; transform: translateY(104px) scale(0.82); }
	88%  { opacity: 0.2; transform: translateY(120px) scale(0.70); }
	96%  { opacity: 0;   transform: translateY(128px) scale(0.62); }
	100% { opacity: 0;   transform: translateY(130px) scale(0.60); }
}

@media (hover: none) and (pointer: coarse) {
	/* Сразу показываем открытый кошелёк */
	.donation-wallet-wrap.donation-active .donation-wallet-closed {
		opacity: 0;
		transform: translate(calc(-50% - 50px), -50%) scale(0.9);
	}
	.donation-wallet-wrap.donation-active .donation-wallet-open {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	/* Монетки сыпятся в цикле — 0.9s чтобы скорость совпадала с десктопным coinDrop (0.6s) */
	.donation-wallet-wrap.donation-active .donation-coin-1 {
		animation: coinDropLoop 0.9s linear 0s infinite;
	}
	.donation-wallet-wrap.donation-active .donation-coin-2 {
		animation: coinDropLoop 0.9s linear 0.3s infinite;
	}
	.donation-wallet-wrap.donation-active .donation-coin-3 {
		animation: coinDropLoop 0.9s linear 0.6s infinite;
	}
}

/* HOVER ЭФФЕКТЫ ДЛЯ СЕНСОРНЫХ УСТРОЙСТВ */
@media (hover: none) and (pointer: coarse) {
	.donation-qr-btn:hover .donation-qr-content {
		transform: none;
		box-shadow: var(--shadow-md);
	}

	.donation-qr-btn:active .donation-qr-content {
		transform: scale(0.98);
		transition: transform 0.1s ease;
	}

	.donation-qr-btn::after {
		display: none;
	}
}

/* ПЕЧАТЬ */
@media print {
	.donation-section {
		background: var(--bg-primary);
		border: 1px solid var(--border-dark);
		page-break-inside: avoid;
	}

	.donation-qr-content {
		background: var(--bg-primary);
		box-shadow: none;
		border: 1px solid var(--border-dark);
	}

	.donation-qr-btn::after {
		display: none;
	}
}

/* ПОДДЕРЖКА СТАРЫХ БРАУЗЕРОВ */
.donation-qr-content {
	/* Fallback для браузеров без поддержки backdrop-filter */
	background: var(--bg-surface);
}

@supports (backdrop-filter: blur(10px)) {
	.donation-qr-content {
		background: var(--glassmorphism);
		backdrop-filter: var(--blur-backdrop);
		-webkit-backdrop-filter: var(--blur-backdrop);
	}
}