/* --- CSS Переменные --- */
:root {
	--font-primary: 'Poppins', sans-serif;
	--color-background: #1a1d21;
	--color-card-bg: #252a31;
	--color-text-primary: #f0f4f8;
	--color-text-secondary: #a0a8b4;
	--color-accent: #58a6ff;
	--color-accent-hover: #79b8ff;
	--color-warning-text: #ffcc80;
	--color-warning-bg: rgba(255, 204, 128, 0.1);
	--color-warning-border: #ffcc80;
	--color-border: #3a414a;
	--color-qr-pulse: rgba(88, 166, 255, 0.4);
	--color-qr-bg: #ffffff;
	--shadow-color: rgba(0, 0, 0, 0.3);
	--border-radius-medium: 12px;
	--border-radius-small: 8px;
	--transition-speed: 0.3s;
}

/* --- Базовые стили --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
	background-color: var(--color-background);
	color: var(--color-text-primary);
	font-family: var(--font-primary);
	line-height: 1.6;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: 1.5rem;
}

/* --- Карточка Оплаты --- */
.payment-card {
	background-color: var(--color-card-bg);
	border-radius: var(--border-radius-medium);
	padding: 2.5rem;
	width: 100%;
	max-width: 480px;
	box-shadow: 0 10px 30px var(--shadow-color);
	text-align: center;
	border: 1px solid var(--color-border);
}

/* --- Заголовок --- */
.payment-header { margin-bottom: 0.5rem; }
.item-name { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; }
.item-description { font-size: 0.9rem; color: var(--color-text-secondary); min-height: 1.6em; /* Резервируем место */}

/* --- Секция Цены --- */
.price-section { margin-bottom: 0.5rem; }
.amount-label { font-size: 0.8rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.price { font-size: 3rem; font-weight: 700; line-height: 1.1; color: var(--color-text-primary); display: inline-flex; align-items: baseline; }
.currency-symbol { font-size: 0.6em; font-weight: 500; margin-right: 0.2em; color: var(--color-text-secondary); align-self: center; min-width: 0.6em; /* Резервируем место */}
.amount { min-width: 1ch; /* Резервируем место */}

/* --- Методы Оплаты --- */
.payment-methods { margin-bottom: 0.5rem; }
.method-label { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: 1rem; }
/* QR */
.qr-payment { margin-bottom: 0.5rem; }
.qr-container { position: relative; display: inline-block; max-width: 200px; width: 60%; margin: 0 auto; }
#qr-code { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--border-radius-small); transition: transform var(--transition-speed) ease; position: relative; z-index: 2; background-color: var(--color-qr-bg); object-fit: contain; border: 4px solid var(--color-qr-bg); }
#qr-code:hover { transform: scale(1.1); cursor: none; }
/* Пульсация QR */
.qr-container::before, .qr-container::after { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border: 2px solid var(--color-qr-pulse); border-radius: var(--border-radius-medium); transform: translate(-50%, -50%) scale(1); opacity: 0; animation: softPulse 2.8s infinite cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 1; }
.qr-container::after { animation-delay: 1.4s; }
@keyframes softPulse { 0% { transform: translate(-50%, -50%) scale(0.98); opacity: 0.7; } 70% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } }
/* Разделитель "ИЛИ" */
.divider { display: flex; align-items: center; text-align: center; margin: 0.5rem 0; color: var(--color-text-secondary); font-size: 0.8rem; text-transform: uppercase; }
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--color-border); }
.divider span { padding: 0 1em; }

/* --- Кнопки и Ссылки --- */
.button { display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 1.5rem; border-radius: var(--border-radius-small); font-size: 0.9rem; font-weight: 500; text-decoration: none; border: none; cursor: pointer; transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, box-shadow var(--transition-speed) ease; gap: 0.5rem; }
.button-primary { background-color: var(--color-accent); color: var(--color-card-bg); }
.button-primary:hover { background-color: var(--color-accent-hover); color: var(--color-card-bg); box-shadow: 0 4px 15px rgba(88, 166, 255, 0.3); }
a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-speed) ease; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* --- Инструкции --- */
.instructions { margin-top: 1.0rem; font-size: 0.9rem; color: var(--color-text-secondary); border-top: 1px solid var(--color-border); padding-top: 0.5rem; }
.instructions-title { font-size: 1rem; font-weight: 500; color: var(--color-text-primary); margin-bottom: 0.4rem; }
.instructions p { margin-bottom: 0.2rem; }
.instructions p:last-child { margin-bottom: 0; }
.instructions a i { margin-right: 0.3em; }
.warning { background-color: var(--color-warning-bg); border: 1px solid var(--color-warning-border); color: var(--color-warning-text); padding: 0.8rem 1rem; border-radius: var(--border-radius-small); font-size: 0.85rem; display: flex; align-items: flex-start; text-align: left; gap: 0.75rem; }
.warning i { margin-top: 0.15em; flex-shrink: 0; }

/* --- Переключатель Языков (СТИЛИ УБРАНЫ) --- */
/* .lang-switch { ... } */
/* .lang-switch button { ... } */
/* .lang-switch button:hover { ... } */
/* .lang-switch button.active { ... } */

/* --- Адаптация (без изменений в структуре, только размеры/отступы) --- */
@media (max-width: 600px) {
	body { padding: 1rem; }
	.payment-card { padding: 2rem 1.5rem; }
	.item-name { font-size: 1.3rem; }
	.item-description { font-size: 0.85rem; }
	.price-section { margin-bottom: 2rem; }
	.price { font-size: 2.5rem; }
	.qr-container { max-width: 180px; }
	.instructions { margin-top: 2rem; padding-top: 1.2rem; }
	/* Адаптация кнопок языка УБРАНА */
}
@media (max-width: 400px) {
	html { font-size: 15px; }
	.payment-card { padding: 1.5rem 1rem; }
	.payment-header { text-align: center; }
	.price { font-size: 2.2rem; }
	.button { font-size: 0.85rem; padding: 0.7rem 1.2rem;}
	.warning { font-size: 0.8rem; }
	/* Адаптация кнопок языка УБРАНА */
}