/* --- 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); /* Цвет для пульсации QR-кода */
	--color-qr-bg: #ffffff;                /* Фон самого QR-кода (обычно белый) */
	--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: 580px; /* Раньше было 480px, немного расширил, чтобы два QR-кода влезли рядом */
	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; /* И тут тоже, для суммы */}

/* --- Методы Оплаты (здесь QR-коды и кнопка) --- */
.payment-methods { margin-bottom: 0.5rem; }

/* Стили для секции с QR-кодами */
.qr-payment {
	display: flex;                 /* Включил флекс, чтобы QR-ки встали в ряд */
	justify-content: space-around; /* Распределил место между блоками QR */
	align-items: flex-start;       /* Прижал их к верху, чтобы выглядело аккуратно */
	gap: 1rem;                     /* Небольшой отступ между двумя блоками QR */
	margin-bottom: 1.5rem;         /* Отступ снизу для всей этой qr-секции */
}

/* Каждый отдельный блок с QR-кодом и его подписью */
.qr-code-item {
	flex: 1;                       /* Позволил элементам делить место поровну */
	text-align: center;            /* Текст и QR по центру в каждом блоке */
	max-width: calc(50% - 0.5rem); /* Ограничил ширину каждого блока QR, чтоб не слипались (учитывая отступ в gap) */
}

/* Подпись над QR-кодом */
.method-label {
	font-size: 0.85rem;
	color: var(--color-text-secondary);
	margin-bottom: 0.75rem; /* Чуть уменьшил отступ снизу, для компактности */
}

/* Контейнер для самой картинки QR-кода */
.qr-container {
	position: relative; /* Нужно для анимации пульсации */
	display: inline-block; /* Чтобы margin: auto по горизонтали работал, если понадобится */
	max-width: 180px;      /* Максимальная ширина для картинки QR, чтобы не была гигантской */
	width: 100%;           /* Сделал его резиновым внутри родительского блока (.qr-code-item) */
	margin: 0 auto 0.5rem auto; /* Отцентровал и добавил немного отступа снизу */
}

/* Стили для обеих QR-картинок */
#qr-code, #qr-payment-link {
	display: block; /* Чтобы занимала всю ширину контейнера .qr-container */
	width: 100%;
	height: auto; /* Высота автоматически подстроится */
	aspect-ratio: 1 / 1; /* Чтобы QR-код всегда был квадратным */
	border-radius: var(--border-radius-small); /* Немного скруглим углы */
	transition: transform var(--transition-speed) ease; /* Плавное увеличение при наведении */
	position: relative; /* Для z-index, чтобы был поверх анимации пульса */
	z-index: 2;
	background-color: var(--color-qr-bg); /* Белый фон для самой QR-картинки */
	object-fit: contain; /* Чтобы картинка QR вписывалась, а не обрезалась */
	border: 4px solid var(--color-qr-bg); /* Маленькая белая рамка вокруг QR */
}

/* Эффект при наведении на QR-код */
#qr-code:hover, #qr-payment-link:hover {
	transform: scale(1.1); /* Чуть увеличиваем */
	cursor: none; /* Курсор убираем, как было в оригинале (необычно, но ладно) */
}

/* Пульсация для QR (сработает на обоих .qr-container) */
.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); /* Скругление чуть больше, чем у QR */
	transform: translate(-50%, -50%) scale(1);
	opacity: 0;
	animation: softPulse 2.8s infinite cubic-bezier(0.4, 0, 0.2, 1); /* Сама анимация */
	pointer-events: none; /* Чтобы не мешала кликать по QR (хотя тут клика нет) */
	z-index: 1; /* Чтобы была под QR-кодом */
}
.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: 1.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;
    margin-top: 1rem; /* Добавил верхний отступ для предупреждения, чтобы не прилипало к тексту выше */
}
.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; /* Уменьшаем внутренние отступы в карточке */
		max-width: 95%;       /* Карточка теперь более гибкая по ширине, почти на весь экран */
	}
	.item-name { font-size: 1.3rem; }
	.item-description { font-size: 0.85rem; }
	.price-section { margin-bottom: 1.5rem; } /* Привел к исходному значению по умолчанию, как было */
	.price { font-size: 2.5rem; }

	/* Адаптация для QR-кодов на маленьких экранах */
	.qr-payment {
		flex-direction: column;     /* QR-ки теперь друг под другом (столбиком) */
		align-items: center;        /* Выровнял по центру, когда они столбиком */
		gap: 1.5rem;                /* Подправил отступ для вертикального расположения */
	}
	.qr-code-item { /* Каждый блок с QR */
		max-width: 220px;           /* Блоки QR могут быть чуть шире, когда друг под другом */
		width: 100%;                /* Занимают всю доступную ширину в этой колонке */
	}
	.qr-container { /* Сама картинка QR */
		max-width: 180px;           /* Оставил как было в оригинальном медиа-запросе для контейнера QR-картинки */
	}

	.instructions { margin-top: 1.5rem; padding-top: 1rem; } /* Немного поправил отступы для инструкций */
}

@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; } /* Текст предупреждения тоже */

	/* QR-коды: еще небольшие правки, если надо */
	.qr-code-item { /* Блок с QR */
		max-width: 200px; /* Можно еще чуть сузить */
	}
	.qr-container { /* Картинка QR */
		max-width: 160px; /* И саму картинку тоже */
	}
}