/*
 * Free Stripe Donations — форма.
 *
 * Всеки цвят, шрифт и радиус е променлива, която пада към променливата на
 * темата. На сайт, който дефинира --accent и --font, формата поема вида му,
 * без да се пише нито ред тук.
 *
 * Правила, които правят това вграждане безопасно: без reset, без !important,
 * без глобални селектори. Всичко е под .fsd и с префикс fsd-, така че
 * плъгинът не може да счупи темата, нито темата него.
 */

.fsd {
	--fsd-accent: var(--accent, #d8125b);
	--fsd-accent-dark: var(--maroon, #b01e4d);
	--fsd-secondary: var(--fsd-accent);
	--fsd-accent-fill: var(--fsd-accent);
	--fsd-secondary-fill: var(--fsd-accent-fill);
	--fsd-ink: var(--ink, #2c2e39);
	--fsd-text: var(--text, #3a3d47);
	--fsd-soft: var(--text-soft, #6b6e78);
	--fsd-panel: var(--panel, #f5f5f5);
	--fsd-white: var(--white, #fff);
	--fsd-line: color-mix(in srgb, var(--fsd-ink) 16%, transparent);
	--fsd-bad: #b8231c;

	--fsd-font: var(--font, inherit);
	--fsd-radius: 8px;
	--fsd-gap: 14px;

	font-family: var(--fsd-font);
	color: var(--fsd-text);
	max-width: 480px;
	text-align: left;
}

.fsd--page { max-width: 560px; margin-inline: auto; }
.fsd--compact { max-width: 100%; }

.fsd *,
.fsd *::before,
.fsd *::after { box-sizing: border-box; }

.fsd__title {
	font-size: 22px;
	font-weight: 800;
	color: var(--fsd-ink);
	margin: 0 0 16px;
}

/* ---------- табове ---------- */
.fsd__tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 16px;
}
.fsd__tab {
	flex: 1;
	border: 1px solid var(--fsd-line);
	background: transparent;
	color: var(--fsd-soft);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 12px;
	border-radius: var(--fsd-radius);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.fsd__tab:hover { color: var(--fsd-ink); }
.fsd__tab:focus-visible {
	outline: 2px solid var(--fsd-accent);
	outline-offset: 2px;
}
.fsd__tab.is-active {
	background: var(--fsd-secondary-fill, var(--fsd-secondary));
	border-color: var(--fsd-secondary);
	color: var(--fsd-white);
}

/*
 * Двата панела стоят в една клетка на решетката. Така превключването между
 * тях не променя височината на секцията и нищо под нея не подскача.
 */
.fsd__panels { display: grid; }
.fsd__panel {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}
.fsd__panel.is-active {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* ---------- полета ---------- */
.fsd__form { display: flex; flex-direction: column; gap: var(--fsd-gap); }
.fsd__group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.fsd__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--fsd-ink);
	padding: 0;
}

.fsd input[type="text"],
.fsd input[type="email"],
.fsd input[type="tel"],
.fsd textarea {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--fsd-text);
	background: var(--fsd-white);
	border: 1px solid var(--fsd-line);
	border-radius: var(--fsd-radius);
	padding: 12px 14px;
}
.fsd textarea { resize: vertical; min-height: 84px; }
.fsd input[type="text"]:focus,
.fsd input[type="email"]:focus,
.fsd input[type="tel"]:focus,
.fsd textarea:focus {
	outline: 2px solid var(--fsd-accent);
	outline-offset: 1px;
	border-color: transparent;
}
.fsd .is-invalid { border-color: var(--fsd-bad); }

.fsd__hint {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--fsd-soft);
	margin: 0;
}

/* ---------- суми и вид ---------- */
.fsd__amounts,
.fsd__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.fsd__amount,
.fsd__pill { flex: 1 1 auto; min-width: 88px; }

.fsd__amount input,
.fsd__pill input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.fsd__amount span,
.fsd__pill span {
	display: block;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--fsd-ink);
	background: var(--fsd-white);
	border: 1px solid var(--fsd-line);
	border-radius: var(--fsd-radius);
	padding: 11px 10px;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.fsd__amount input:hover + span,
.fsd__pill input:hover + span { border-color: var(--fsd-accent); }

.fsd__amount input:checked + span,
.fsd__pill input:checked + span {
	background: var(--fsd-accent-fill, var(--fsd-accent));
	border-color: var(--fsd-accent);
	color: var(--fsd-white);
}

/* Фокусът трябва да се вижда — полето е скрито, затова се рисува на етикета. */
.fsd__amount input:focus-visible + span,
.fsd__pill input:focus-visible + span {
	outline: 2px solid var(--fsd-accent);
	outline-offset: 2px;
}

.fsd__custom { margin-top: 2px; }

/* ---------- отметки ---------- */
.fsd__checks { gap: 10px; }
.fsd__check {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--fsd-soft);
	cursor: pointer;
}
.fsd__check input {
	margin: 2px 0 0;
	accent-color: var(--fsd-accent);
	flex: none;
}
.fsd__check a { color: inherit; }

/* ---------- бутон ---------- */
.fsd__submit {
	width: 100%;
	border: 0;
	border-radius: var(--fsd-radius);
	background: var(--fsd-accent-fill, var(--fsd-accent));
	color: var(--fsd-white);
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	padding: 14px 20px;
	cursor: pointer;
	transition: background .15s, opacity .15s;
}
.fsd__submit:hover { background: var(--fsd-accent-dark); }
.fsd__submit:focus-visible {
	outline: 2px solid var(--fsd-ink);
	outline-offset: 2px;
}
.fsd__submit[disabled] { opacity: .6; cursor: default; }



/* ---------- съобщения ---------- */
.fsd__error {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--fsd-bad);
	min-height: 0;
}
.fsd__error:empty { display: none; }

.fsd__notice {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--fsd-soft);
	background: var(--fsd-panel);
	border-radius: var(--fsd-radius);
	padding: 14px 16px;
}

/* ---------- банкови данни ---------- */
.fsd__bank { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.fsd__bank-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.fsd__bank-label {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--fsd-soft);
	margin: 0;
}
.fsd__bank-value {
	margin: 0;
	font-size: 15px;
	color: var(--fsd-ink);
	word-break: break-word;
}
.fsd__bank-value.is-accent {
	font-weight: 700;
	color: var(--fsd-accent);
	letter-spacing: .01em;
}

/* ---------- върху тъмен фон ---------- */
/*
 * Включва се с [donations_form tone="dark"].
 *
 * Темата дава едни и същи променливи навсякъде — тъмен текст върху светъл фон.
 * Сложена в тъмна секция, формата става нечетлива: етикетите, подсказките и
 * банковите данни изчезват. Тук се сменят само стойностите на променливите,
 * плюс няколкото места, където самият елемент е светъл и затова не бива да
 * побелява с тях.
 */
.fsd--on-dark {
	--fsd-ink: var(--white, #fff);
	--fsd-text: #e7e8ec;
	--fsd-soft: #cfd0d6;
	--fsd-line: rgba(255, 255, 255, .45);
	--fsd-panel: rgba(255, 255, 255, .08);
	--fsd-bad: #ff8a84;
}

/* Полетата остават светли — тъмен текст в бяло поле, както преди. */
.fsd--on-dark input[type="text"],
.fsd--on-dark input[type="email"] {
	color: var(--ink, #2c2e39);
	background: var(--fsd-white);
	border-color: var(--fsd-accent);
}

/*
 * Сумите и видът: прозрачни с бял кант, не бели правоъгълници. Избраното
 * остава в акцента и си върви само през променливите.
 */
.fsd--on-dark .fsd__amount span,
.fsd--on-dark .fsd__pill span {
	background: transparent;
	color: var(--white, #fff);
	border-color: rgba(255, 255, 255, .45);
}
.fsd--on-dark .fsd__amount input:hover + span,
.fsd--on-dark .fsd__pill input:hover + span {
	background: rgba(255, 255, 255, .12);
	border-color: var(--white, #fff);
}
.fsd--on-dark .fsd__amount input:checked + span,
.fsd--on-dark .fsd__pill input:checked + span {
	background: var(--fsd-accent-fill, var(--fsd-accent));
	border-color: var(--fsd-accent);
	color: var(--white, #fff);
}

/*
 * IBAN-ът е в акцента. Върху тъмното обаче акцентът дава контраст 2.7:1 —
 * под прага за четим текст (4.5:1). Избелява се толкова, колкото да мине,
 * и остава същият цвят, а не друг.
 */
.fsd--on-dark .fsd__bank-value.is-accent {
	color: color-mix(in srgb, var(--fsd-accent) 50%, #fff);
}

/* Фокусът се рисува с бяло: акцентът върху тъмно не се вижда достатъчно. */
.fsd--on-dark .fsd__amount input:focus-visible + span,
.fsd--on-dark .fsd__pill input:focus-visible + span,
.fsd--on-dark .fsd__tab:focus-visible,
.fsd--on-dark .fsd__submit:focus-visible {
	outline-color: var(--white, #fff);
}

/* ---------- honeypot ---------- */
.fsd__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fsd__captcha { min-height: 0; }

@media (prefers-reduced-motion: reduce) {
	.fsd * { transition: none; }
}

/* ---------- благодарствена страница ---------- */
.fsd-thanks {
	--fsd-accent: var(--accent, #d8125b);
	--fsd-ink: var(--ink, #2c2e39);
	--fsd-text: var(--text, #3a3d47);
	--fsd-soft: var(--text-soft, #6b6e78);
	--fsd-line: color-mix(in srgb, var(--fsd-ink) 16%, transparent);

	font-family: var(--font, inherit);
	color: var(--fsd-text);
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 560px;
}
.fsd-thanks p { margin: 0; }
.fsd-thanks__lead {
	font-size: 23px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--fsd-ink);
}
.fsd-thanks__amount { font-size: 17px; }
.fsd-thanks__note { font-size: 14.5px; line-height: 1.55; color: var(--fsd-soft); }

.fsd-thanks__bank {
	margin: 4px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 1px solid var(--fsd-line);
	border-radius: 10px;
	padding: 16px 18px;
}
.fsd-thanks__bank-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.fsd-thanks__bank-row dt {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--fsd-soft);
	margin: 0;
}
.fsd-thanks__bank-row dd { margin: 0; font-size: 15px; color: var(--fsd-ink); word-break: break-word; }
.fsd-thanks__bank-row dd.is-accent { font-weight: 700; color: var(--fsd-accent); }

/* Кодът за основание се преписва на ръка в банката — едроразмерен и моноширинен. */
.fsd-thanks__bank-row dd.is-reference {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--fsd-accent);
	user-select: all;
}

.fsd-thanks__receipt, .fsd-thanks__back { color: var(--fsd-accent); }

/* ---------- „Моето дарение“ ---------- */
.fsd-manage {
	--fsd-accent: var(--accent, #d8125b);
	--fsd-ink: var(--ink, #2c2e39);
	--fsd-text: var(--text, #3a3d47);
	--fsd-soft: var(--text-soft, #6b6e78);
	--fsd-line: color-mix(in srgb, var(--fsd-ink) 16%, transparent);
	--fsd-warn: #8a5d00;
	--fsd-bad: #b8231c;

	font-family: var(--font, inherit);
	color: var(--fsd-text);
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 560px;
}
.fsd-manage p { margin: 0; }
.fsd-manage__lead {
	font-size: 23px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--fsd-ink);
	margin: 0;
}
.fsd-manage__sub {
	font-size: 15px;
	font-weight: 700;
	color: var(--fsd-ink);
	margin: 8px 0 0;
}
.fsd-manage__note { font-size: 14.5px; line-height: 1.55; color: var(--fsd-soft); }
.fsd-manage__note--warn { color: var(--fsd-warn); }
.fsd-manage__note--off { color: var(--fsd-soft); font-style: italic; }

.fsd-manage__facts {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 1px solid var(--fsd-line);
	border-radius: 10px;
	padding: 16px 18px;
}
.fsd-manage__row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.fsd-manage__row dt {
	flex: 0 0 auto;
	min-width: 150px;
	font-size: 13px;
	font-weight: 700;
	color: var(--fsd-soft);
	margin: 0;
}
.fsd-manage__row dd { margin: 0; font-size: 15px; color: var(--fsd-ink); }
.fsd-manage__row dd.is-accent { font-weight: 700; color: var(--fsd-accent); }

.fsd-manage__history {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--fsd-line);
	border-radius: 10px;
	overflow: hidden;
}
.fsd-manage__history li {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: baseline;
	padding: 10px 16px;
	font-size: 14.5px;
}
.fsd-manage__history li + li { border-top: 1px solid var(--fsd-line); }
.fsd-manage__history li span:first-child { min-width: 92px; color: var(--fsd-soft); }
.fsd-manage__history li span:nth-child(2) { font-weight: 600; color: var(--fsd-ink); }
.fsd-manage__history a { margin-left: auto; color: var(--fsd-accent); font-size: 13.5px; }

/*
 * Спирането е рядко и необратимо действие, затова бутонът е сдържан — не
 * основният акцент на страницата, но и не скрит.
 */
.fsd-manage__cancel {
	align-self: flex-start;
	border: 1px solid var(--fsd-line);
	background: transparent;
	color: var(--fsd-soft);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 11px 18px;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.fsd-manage__cancel:hover { border-color: var(--fsd-bad); color: var(--fsd-bad); }
.fsd-manage__cancel:focus-visible { outline: 2px solid var(--fsd-accent); outline-offset: 2px; }
.fsd-manage__cancel[disabled] { opacity: .6; cursor: default; }

.fsd-manage__msg { font-size: 14.5px; line-height: 1.5; }
.fsd-manage__msg:empty { display: none; }
.fsd-manage__msg.is-error { color: var(--fsd-bad); }
.fsd-manage__msg.is-ok { color: var(--fsd-ink); font-weight: 600; }
