/* VxDonations — formulário de doação. Prefixo .vxd pra não vazar no tema. */
.vxd {
	--vxd-green: #1f3d2b;
	--vxd-green-2: #2f7d49;
	--vxd-accent: #7fc36b;
	--vxd-border: #dce3d7;
	--vxd-ease: cubic-bezier(.2, .8, .2, 1);
	max-width: 620px;
	margin: 0 auto;
	color: var(--vxd-green);
	font-family: inherit;
}

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

.vxd__notice {
	max-width: 620px;
	margin: 0 auto 16px;
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 15px;
}
.vxd__notice--ok { background: #e6f6ea; color: #1f5b32; }
.vxd__notice--warn { background: #fff6e0; color: #7a5b1f; }

.vxd__card {
	position: relative;
	background: #fff;
	border: 1px solid #eef2ec;
	border-radius: 22px;
	padding: 36px 40px;
	box-shadow: 0 1px 2px rgba(31, 56, 35, .04), 0 14px 40px rgba(31, 56, 35, .07);
}

.vxd__eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--vxd-green-2); opacity: .9; }
.vxd__title { font-size: 38px; line-height: 1.06; margin: 8px 0 26px; font-weight: 700; letter-spacing: -.015em; }
.vxd__label { font-size: 14px; margin: 0 0 12px; font-weight: 600; color: var(--vxd-green); }

/* cabeçalho: eyebrow + voltar alinhados */
.vxd__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }

/* voltar ao seletor de país */
.vxd__back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 6px 12px 6px 8px;
	border: 1px solid var(--vxd-border);
	border-radius: 999px;
	background: #fff;
	color: #6f7a6c;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color .18s var(--vxd-ease), color .18s var(--vxd-ease), background-color .18s var(--vxd-ease);
}
.vxd__back:hover { border-color: var(--vxd-green-2); color: var(--vxd-green); background: #f5f8f3; }

/* seletor de país (doação internacional) */
.vxd__country { margin-top: 6px; }
.vxd__country-q { font-size: 15px; font-weight: 600; color: var(--vxd-green); margin: 0 0 16px; line-height: 1.35; }
.vxd__country-q-en { display: block; font-size: 13px; font-weight: 400; color: #8a9486; }
.vxd__country-btn-t { line-height: 1.2; }
.vxd__country-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vxd__country-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 22px 12px;
	border: 1.5px solid var(--vxd-border);
	border-radius: 16px;
	background: #fff;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	color: var(--vxd-green);
	transition: border-color .2s var(--vxd-ease), background-color .2s var(--vxd-ease), transform .12s var(--vxd-ease), box-shadow .2s var(--vxd-ease);
}
.vxd__country-btn:hover { border-color: var(--vxd-green-2); box-shadow: 0 8px 22px rgba(31, 61, 43, .1); }
.vxd__country-btn:active { transform: translateY(1px); }
.vxd__flag { font-size: 30px; line-height: 1; }
@media (max-width: 560px) {
	.vxd__country-btn { padding: 18px 10px; }
}

.vxd__amounts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 14px;
}
.vxd__amounts button {
	padding: 14px 4px;
	border: 1.5px solid var(--vxd-border);
	background: #fff;
	border-radius: 16px;
	cursor: pointer;
	color: var(--vxd-green);
	line-height: 1.2;
	text-align: center;
	transition: border-color .2s var(--vxd-ease), background-color .2s var(--vxd-ease), color .2s var(--vxd-ease), transform .12s var(--vxd-ease);
}
.vxd__amounts button:hover { border-color: var(--vxd-green-2); }
.vxd__amounts button:active { transform: translateY(1px); }
.vxd__amounts button strong { display: block; font-size: 17px; font-weight: 700; }
.vxd__amounts button small { display: block; font-size: 11px; opacity: .75; margin-top: 2px; }
.vxd__amounts button.is-active { background: var(--vxd-green); border-color: var(--vxd-green); color: #fff; box-shadow: 0 4px 14px rgba(31, 61, 43, .18); }

.vxd__other, .vxd__input {
	width: 100%;
	padding: 13px 18px;
	border: 1.5px solid var(--vxd-border);
	border-radius: 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--vxd-green);
	transition: border-color .18s var(--vxd-ease), box-shadow .18s var(--vxd-ease);
}
.vxd__other:focus, .vxd__input:focus { outline: none; border-color: var(--vxd-green-2); box-shadow: 0 0 0 3px rgba(47, 125, 73, .12); }
.vxd__other-wrap, .vxd__field { margin-bottom: 14px; }
.vxd--hidden { display: none !important; }

.vxd__other.is-invalid, .vxd__input.is-invalid { border-color: #d63a3a; box-shadow: 0 0 0 3px rgba(214, 58, 58, .12); }
.vxd__error { margin-top: 8px; }
.vxd__error {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: -2px 0 14px;
	font-size: 13.5px;
	font-weight: 500;
	color: #c0392b;
	animation: vxd-err .25s var(--vxd-ease);
}
.vxd__error::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #d63a3a;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@keyframes vxd-err { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.vxd__hr { border: none; border-top: 1px solid var(--vxd-border); margin: 22px 0; }

.vxd__types { display: flex; gap: 36px; margin-bottom: 6px; }
.vxd__types label { display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: 16px; }
.vxd__types input { width: 18px; height: 18px; accent-color: var(--vxd-green); }

.vxd__cover {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 16px 0 0;
	font-size: 14px;
	cursor: pointer;
}
/* toggle switch (cobrir taxa) — padrão off */
.vxd__switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.vxd__switch {
	flex-shrink: 0;
	position: relative;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: #c8d2c4;
	transition: background-color .2s ease;
}
.vxd__switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform .2s ease;
}
.vxd__switch-input:checked + .vxd__switch { background: var(--vxd-green); }
.vxd__switch-input:checked + .vxd__switch::after { transform: translateX(18px); }
.vxd__switch-input:focus-visible + .vxd__switch { outline: 2px solid var(--vxd-green); outline-offset: 2px; }
.vxd__cover-text { line-height: 1.3; }

.vxd__pays { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.vxd__pays .vxd__pay { flex: 1 1 0; min-width: 120px; }
.vxd__pay {
	padding: 14px 6px;
	border-radius: 14px;
	border: 1.5px solid var(--vxd-border);
	background: #fff;
	font-weight: 600;
	cursor: pointer;
	font-size: 15px;
	color: var(--vxd-green);
	transition: border-color .2s var(--vxd-ease), background-color .2s var(--vxd-ease), color .2s var(--vxd-ease), transform .12s var(--vxd-ease), box-shadow .2s var(--vxd-ease);
}
.vxd__pay:hover { border-color: var(--vxd-green); background: var(--vxd-green); color: #fff; box-shadow: 0 6px 18px rgba(31, 61, 43, .18); }
.vxd__pay:active { transform: translateY(1px); }
.vxd__pay--pix { color: var(--vxd-green-2); }
.vxd__pay--pix:hover { background: var(--vxd-green-2); border-color: var(--vxd-green-2); }

.vxd__hint { font-size: 12px; color: #7c857a; margin-top: 12px; text-align: center; }

.vxd__recent { width: 100%; margin-top: 30px; border-collapse: collapse; font-size: 13px; }
.vxd__recent th, .vxd__recent td { padding: 8px 6px; border-bottom: 1px solid #eee; text-align: left; }

/* Modal Pix */
.vxd__modal {
	position: fixed;
	inset: 0;
	background: rgba(15, 33, 21, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 99999;
}
.vxd__modal.is-open { display: flex; animation: vxd-overlay .25s var(--vxd-ease); }
@keyframes vxd-overlay { from { opacity: 0; } to { opacity: 1; } }

.vxd__sheet {
	position: relative;
	background: #fff;
	border-radius: 24px;
	padding: 30px 28px 26px;
	max-width: 372px;
	width: 100%;
	text-align: center;
	box-shadow: 0 24px 60px rgba(15, 33, 21, .28);
	animation: vxd-sheet .34s var(--vxd-ease);
}
@keyframes vxd-sheet { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.vxd__sheet-x {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: #f0f4ee;
	color: var(--vxd-green);
	cursor: pointer;
	transition: background-color .18s var(--vxd-ease), transform .18s var(--vxd-ease);
}
.vxd__sheet-x:hover { background: #e2ebdf; transform: rotate(90deg); }

.vxd__sheet-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vxd-green-2);
}
.vxd__sheet-amount { margin: 4px 0 18px; }
.vxd__sheet-amount strong { font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--vxd-green); line-height: 1; }

.vxd__qr-frame {
	position: relative;
	width: 232px;
	aspect-ratio: 1;               /* reserva o quadrado — não colapsa quando o QR está oculto */
	margin: 0 auto;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fbfdfa;
	border: 1px solid #e7ede4;
	border-radius: 18px;
	box-shadow: inset 0 0 0 4px #fff, 0 6px 20px rgba(15, 33, 21, .07);
}
/* Placeholder discreto atrás: some assim que o QR carrega ou um overlay cobre. */
.vxd__qr-frame::before {
	content: "";
	position: absolute; inset: 16px;
	border-radius: 10px;
	background: repeating-linear-gradient(45deg, #eef3ea 0 8px, #f6f9f4 8px 16px);
	opacity: .5;
}
.vxd__qr { position: relative; width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.vxd__qr-loading, .vxd__qr-done {
	position: absolute; inset: 8px; display: flex; flex-direction: column; gap: 12px;
	align-items: center; justify-content: center; background: #fbfdfa; border-radius: 12px;
	animation: vxd-fade-in .2s var(--vxd-ease, ease-out);
}
.vxd__qr-done { color: var(--vxd-green-2); text-align: center; }
.vxd__qr-done strong { font-size: 15px; color: var(--vxd-green); }
.vxd__qr-loading-cap { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--vxd-green-2); }
.vxd__spinner {
	flex: none;                    /* impede o flex de achatar o círculo */
	width: 40px; height: 40px; border-radius: 50%;
	border: 3px solid #e2ebdf; border-top-color: var(--vxd-green-2);
	animation: vxd-spin .8s linear infinite;
}
@keyframes vxd-spin { to { transform: rotate(360deg); } }
@keyframes vxd-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media ( prefers-reduced-motion: reduce ) {
	.vxd__spinner { animation-duration: 1.6s; }
	.vxd__qr-loading, .vxd__qr-done { animation: none; }
}
.vxd__qr-hint { margin: 14px 0 0; font-size: 13px; color: #6f7a6c; }
.vxd__pix-none {
	margin: 12px 0 0; padding: 10px 14px; font-size: 12.5px; line-height: 1.45;
	color: #8a5a1f; background: #fdf6e9; border: 1px solid #f2e2c4; border-radius: 10px;
}

.vxd__pix-key {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 18px 0 0;
	padding: 11px 8px 11px 16px;
	background: #f5f8f3;
	border: 1px solid #e7ede4;
	border-radius: 14px;
	cursor: pointer;
	text-align: left;
	transition: border-color .18s var(--vxd-ease), background-color .18s var(--vxd-ease);
}
.vxd__pix-key:hover { background: #eef3eb; border-color: #d6e2d2; }
.vxd__pix-key-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vxd__pix-key-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a948695; color: #8a9486; }
.vxd__pix-key-val { font-size: 14px; font-weight: 500; color: var(--vxd-green); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vxd__pix-key-copy {
	flex-shrink: 0;
	padding: 7px 14px;
	border-radius: 9px;
	background: #fff;
	border: 1px solid #dce3d7;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--vxd-green);
}

/* copia e cola: input fixo com o código + ícone copiar */
.vxd__cola { margin: 18px 0 0; text-align: left; }
.vxd__cola-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8a9486;
	margin: 0 0 6px 2px;
}
.vxd__cola-field {
	display: flex;
	align-items: stretch;
	border: 1px solid #e7ede4;
	border-radius: 14px;
	overflow: hidden;
	background: #f5f8f3;
}
.vxd__cola-input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 0 14px;
	height: 46px;
	font-size: 13px;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	color: #4a544a;
	text-overflow: ellipsis;
}
.vxd__cola-input:focus { outline: none; }
.vxd__cola-copy {
	flex-shrink: 0;
	width: 50px;
	border: none;
	border-left: 1px solid #e7ede4;
	background: var(--vxd-green);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .18s var(--vxd-ease);
}
.vxd__cola-copy:hover { background: #173024; }
.vxd__cola-copy .vxd__ico-done { display: none; }
.vxd__cola-copy.is-copied { background: #2f7d49; }
.vxd__cola-copy.is-copied .vxd__ico-copy { display: none; }
.vxd__cola-copy.is-copied .vxd__ico-done { display: block; }

@media (max-width: 560px) {
	.vxd__card { padding: 28px 22px; }
	.vxd__title { font-size: 30px; }
	.vxd__amounts { grid-template-columns: repeat(2, 1fr); }
	.vxd__types { gap: 20px; }
	.vxd__sheet { padding: 26px 20px 22px; }
}