/* Donate page */
.donate-page {
	/* Ширина карточки формы. Все блоки колонки выравниваются по ней.
	   Тот же формат, что у страниц темы в одну колонку по центру
	   (docs/DESIGN_SYSTEM.md §9.30): ширину берём из токена темы, а свой
	   фоллбэк оставляем — плагин должен работать и без неё.
	   −100px от колонки сайта — просьба владельца: карточка формы донатов и
	   подписки уже стандартной колонки (осознанное исключение, §15 п. 15). */
	--donate-form-width: calc(var(--page-column-width, 600px) - 100px);

	padding-top: 40px;
	padding-bottom: 100px;

	/* Локальные цвета кнопок страницы донатов */
	--donate-green: #4C9A6B;
	--donate-green-hover: #3E8259;
	--donate-red: #C75450;
	--donate-red-hover: #A8443F;
	--donate-btn-width: 320px;
}

/* Ширину задаём внутренним блокам: тема перебивает max-width самого контейнера */
.donate-page__header,
.donate-card {
	width: 100%;
	max-width: var(--donate-form-width, 600px);
	margin-left: auto;
	margin-right: auto;
}

.donate-page__header {
	text-align: center;
	margin-top: 0;
	margin-bottom: var(--spacing-l, 24px);
}

.donate-page__title {
	font-family: var(--font-display, 'Amatic SC', cursive);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.1;
}

.donate-page__lead {
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: var(--font-size-large, 1.125rem);
	color: var(--color-foreground-muted, #5F5854);
	max-width: 480px;
	margin: var(--spacing-s, 8px) auto 0;
}

/* Form */
.donate-card {
	background-color: var(--color-background-muted, #EBE9E6);
	border-radius: var(--radius-l, 16px);
	padding: var(--spacing-xl, 32px);
	margin-top: 0;
	margin-bottom: 0;
}

.donate-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-m, 16px);
}

.donate-page__content:empty {
	display: none;
}

.donate-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s, 8px);
}

.donate-form__label {
	font-family: var(--font-heading, 'Yanone Kaffeesatz', sans-serif);
	font-size: var(--font-size-large, 1.125rem);
	font-weight: 400;
	color: var(--color-foreground, #1B242F);
}

/* Все поля формы — одного размера */
.donate-form__input,
.donate-form__select {
	width: 100%;
	height: 48px;
	padding: 0 var(--spacing-m, 16px);
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: 1.125rem;
	line-height: 46px;
	color: var(--color-foreground, #1B242F);
	background-color: var(--color-background, #FFFFFF);
	border: 1px solid var(--color-border, #B7C0D7);
	border-radius: var(--radius-m, 10px);
	outline: none;
	transition: border-color 0.2s ease;
}

.donate-form__input:focus,
.donate-form__select:focus {
	border-color: var(--color-accent, #4588A5);
}

/* Сумма */
.donate-form__amount-wrap {
	position: relative;
}

.donate-form__amount-wrap .donate-form__input {
	padding-right: var(--spacing-xl, 32px);
	-moz-appearance: textfield;
}

.donate-form__input::-webkit-outer-spin-button,
.donate-form__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.donate-form__currency {
	position: absolute;
	top: 50%;
	right: var(--spacing-m, 16px);
	transform: translateY(-50%);
	font-family: var(--font-heading, 'Yanone Kaffeesatz', sans-serif);
	font-size: 1.25rem;
	color: var(--color-foreground-muted, #5F5854);
	pointer-events: none;
}

.donate-form__select {
	padding-right: var(--spacing-l, 24px);
	cursor: pointer;
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235F5854' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right var(--spacing-m, 16px) center;
}

/* Recurring switch — общий тумблер §9.27 (.toggle в design-system.css).
   Локально остаётся только выравнивание внутри колонки полей. */
.donate-form__recurring {
	gap: 0;
}

.donate-form__switch {
	align-self: center;
}

/* Подполя, появляющиеся при повторяющемся платеже (анимация раскрытия) */
.donate-form__details {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	padding-top: 0;
	transition: grid-template-rows 0.3s ease, opacity 0.25s ease, padding-top 0.3s ease;
}

.donate-form__details.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
	padding-top: var(--spacing-l, 24px);
}

.donate-form__details-inner {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-l, 24px);
}

.donate-form__subfield {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s, 8px);
}

.donate-form__hint {
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: 0.875rem;
	color: var(--color-foreground-muted, #5F5854);
}

.donate-form__note {
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: 0.875rem;
	color: var(--color-accent, #4588A5);
}

/* Невалидное обязательное поле (почта при повторяющемся платеже) */
.donate-form__input.is-invalid,
.donate-form__input.is-invalid:focus {
	border-color: var(--donate-red, #C75450);
}

.donate-form__error {
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: 0.875rem;
	color: var(--donate-red, #C75450);
}

.donate-test-notice {
	max-width: var(--donate-form-width, 600px);
	margin: 0 auto var(--spacing-m, 16px);
}

.donate-form__message,
.donate-cancel__message {
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: 1rem;
	text-align: center;
	margin: 0;
}

.donate-form__message.is-error,
.donate-cancel__message.is-error {
	color: var(--donate-red);
}

.donate-form__message.is-success,
.donate-cancel__message.is-success {
	color: var(--donate-green);
}

.donate-cancel__message {
	margin-top: var(--spacing-m, 16px);
}

/* Отмена подписки */
.donate-cancel {
	margin-top: var(--spacing-l, 24px);
	text-align: center;
}

.donate-cancel__toggle {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: 1rem;
	color: var(--color-secondary, #245164);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.donate-cancel__toggle:hover,
.donate-cancel__toggle:focus-visible {
	color: var(--color-secondary-hover, #1E3844);
	text-decoration: none;
}

.donate-cancel__panel.is-open {
	text-align: left;
}

.donate-cancel__form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-m, 16px);
}

.donate-cancel__form .donate-form__subfield {
	width: 100%;
}

.donate-cancel__submit {
	width: var(--donate-btn-width);
	max-width: 100%;
	align-self: center;
	min-height: 48px;
	padding: var(--spacing-s, 8px) var(--spacing-l, 24px);
	font-size: 1.25rem;
	background-color: var(--donate-red);
	border-color: var(--donate-red);
	color: var(--color-foreground-light, #FFFFFF);
}

.donate-cancel__submit:hover,
.donate-cancel__submit:focus {
	background-color: var(--donate-red-hover);
	border-color: var(--donate-red-hover);
	color: var(--color-foreground-light, #FFFFFF);
}

/* Submit */
.donate-form__actions {
	display: flex;
	justify-content: center;
	margin-top: 15px;
}

.donate-form__submit {
	width: var(--donate-btn-width);
	max-width: 100%;
	min-height: 48px;
	font-size: 1.25rem;
	padding: var(--spacing-s, 8px) var(--spacing-l, 24px);
	background-color: var(--donate-green);
	color: var(--color-foreground-light, #FFFFFF);
}

.donate-form__submit:hover,
.donate-form__submit:focus {
	background-color: var(--donate-green-hover);
	color: var(--color-foreground-light, #FFFFFF);
}

/* Состояние оформленной подписки (вместо формы)
   Карточка §9.5: пары «подпись — значение» на тонких линиях — тот же рецепт,
   что у табов «Донаты»/«Подписки» в кабинете (profile.css .payment-status),
   только классами плагина: страница донатов грузит только свои стили. */
.donate-status__title {
	margin: 0 0 var(--spacing-m, 16px);
	font-family: var(--font-heading, 'Yanone Kaffeesatz', sans-serif);
	font-size: 25px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-foreground, #232027);
}

.donate-status__list {
	margin: 0;
	padding: 0;
}

.donate-status__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--spacing-xs, 4px) var(--spacing-m, 16px);
	padding: var(--spacing-s, 8px) 0;
	border-bottom: 1px solid var(--color-border-light, #EFEDEB);
}

.donate-status__row:first-child {
	padding-top: 0;
}

.donate-status__row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.donate-status__row dt {
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-foreground-muted, #7A7580);
}

.donate-status__row dd {
	margin: 0;
	font-family: var(--font-heading, 'Yanone Kaffeesatz', sans-serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	text-align: right;
	color: var(--color-foreground, #232027);
}

.donate-status__form {
	margin-top: var(--spacing-l, 24px);
}

/* «Это не я» (гость сбрасывает куку-подсказку): вторичная кнопка — мягкий
   переход, а не разрушительное действие (§9.12). Ссылка-кнопка, поэтому
   снимаем подчёркивание (рецепт ниже в .donate-page a.btn). */
.donate-status__forget {
	margin: var(--spacing-l, 24px) 0 0;
	text-align: center;
}

.donate-status__forget-link {
	min-height: 48px;
	padding: var(--spacing-s, 8px) var(--spacing-l, 24px);
	font-size: 20px;
}

/* Страница результата отмены /donate/cancel/ */
.donate-result {
	text-align: center;
}

.donate-result__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--spacing-m, 16px);
	border-radius: 50%;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--color-foreground-light, #FFFFFF);
	background-color: var(--donate-green);
}

.donate-result--invalid .donate-result__mark {
	background-color: var(--donate-red);
}

.donate-result__text {
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: var(--font-size-large, 1.125rem);
	color: var(--color-foreground, #1B242F);
	max-width: 460px;
	margin: 0 auto;
}

.donate-result__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--spacing-xl, 32px);
}

/* Ссылки-кнопки (браузерный стиль подчёркивает ссылки) */
.donate-page a.btn,
.donate-page a.donate-form__submit,
.donate-page a.donate-cancel__submit {
	text-decoration: none;
}

.donate-page a.btn:hover,
.donate-page a.btn:focus,
.donate-page a.donate-form__submit:hover,
.donate-page a.donate-form__submit:focus {
	text-decoration: none;
}

/* Страница благодарности /donate/success/ */
.donate-success__header .donate-result__mark {
	margin-bottom: var(--spacing-m, 16px);
}

.donate-success__details {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-m, 16px);
}

.donate-success__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--spacing-m, 16px);
	padding-bottom: var(--spacing-m, 16px);
	border-bottom: 1px solid var(--color-border-light, #E0E0E0);
}

.donate-success__row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.donate-success__row dt {
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: 1rem;
	color: var(--color-foreground-muted, #5F5854);
}

.donate-success__row dd {
	margin: 0;
	font-family: var(--font-heading, 'Yanone Kaffeesatz', sans-serif);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--color-foreground, #1B242F);
	text-align: right;
}

.donate-success__note {
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: 0.9375rem;
	color: var(--color-foreground-muted, #5F5854);
	text-align: center;
	margin: var(--spacing-l, 24px) 0 0;
}

.donate-success .donate-result__actions {
	margin-top: var(--spacing-l, 24px);
}


@media (max-width: 480px) {
	.donate-success__row {
		flex-direction: column;
		gap: var(--spacing-xs, 4px);
	}

	.donate-success__row dd {
		text-align: left;
	}
}

/* Responsive */
@media (max-width: 600px) {
	.donate-card {
		padding: var(--spacing-l, 24px) var(--spacing-m, 16px);
	}
}