/* Appmax Pagamentos — Nutrigenes
 * Cores ajustáveis pelo tema: --nga-accent, --nga-border, --nga-muted, --nga-radius.
 */
:root {
	--nga-accent: #2e7d32;
	--nga-accent-soft: #e8f5e9;
	--nga-border: #d9dde3;
	--nga-muted: #5f6b7a;
	--nga-radius: 8px;
	--nga-danger: #b3261e;
}

/* ---------------- Formulário de cartão ---------------- */

.nga-card-form {
	margin: 0;
	padding: 0;
	border: 0;
}

.nga-card-form .form-row {
	margin-bottom: 12px;
}

.nga-input-wrap {
	position: relative;
	display: block;
}

.nga-input-wrap input {
	padding-right: 96px !important;
}

.nga-card-brand-label {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--nga-muted);
	pointer-events: none;
}

.nga-card-form input.input-text,
.nga-card-form select,
.nga-block-fields .nga-input,
.nga-document-row input {
	width: 100%;
	box-sizing: border-box;
}

.nga-card-form select.nga-installments,
.nga-block-fields select.nga-input {
	width: 100% !important;
	max-width: 100%;
	min-height: 42px;
}

.nga-card-errors:empty {
	display: none;
}

.nga-secure-note {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--nga-muted);
}

.nga-secure-note::before {
	content: "\1F512";
	margin-right: 6px;
}

.nga-discount-badge {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--nga-accent-soft);
	color: var(--nga-accent);
	font-size: 13px;
	font-weight: 600;
}

/* ---------------- Checkout em blocos ---------------- */

.nga-block-fields .nga-field {
	margin-bottom: 12px;
}

.nga-block-fields label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
}

.nga-block-fields .nga-input {
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--nga-border);
	border-radius: 4px;
	font-size: 16px;
	background: #fff;
	color: inherit;
}

.nga-block-fields .nga-input:focus {
	outline: 2px solid var(--nga-accent);
	outline-offset: 0;
	border-color: var(--nga-accent);
}

.nga-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 480px) {
	.nga-field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ---------------- Instruções (obrigado / minha conta) ---------------- */

.nga-instructions {
	margin: 0 0 32px;
	padding: 20px;
	border: 1px solid var(--nga-border);
	border-radius: var(--nga-radius);
	background: #fff;
}

.nga-instructions .nga-title {
	margin-top: 0;
}

.nga-state[hidden] {
	display: none !important;
}

.nga-state--paid {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	border-radius: var(--nga-radius);
	background: var(--nga-accent-soft);
	color: #1b5e20;
}

.nga-state--paid p {
	margin: 4px 0 0;
}

.nga-state-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--nga-accent);
	color: #fff;
	font-weight: 700;
}

.nga-state--cancelled {
	padding: 14px 16px;
	border-radius: var(--nga-radius);
	background: #fdecea;
	color: var(--nga-danger);
}

.nga-state--cancelled p {
	margin: 4px 0 0;
}

.nga-waiting {
	display: flex;
	gap: 10px;
	align-items: center;
	color: var(--nga-muted);
}

.nga-spinner {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border: 2px solid var(--nga-border);
	border-top-color: var(--nga-accent);
	border-radius: 50%;
	animation: nga-spin 0.8s linear infinite;
}

@keyframes nga-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nga-spinner {
		animation: none;
	}
}

.nga-pix-grid {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 24px;
	align-items: start;
	margin-top: 12px;
}

@media (max-width: 640px) {
	.nga-pix-grid {
		grid-template-columns: 1fr;
	}
}

.nga-pix-qr {
	padding: 10px;
	border: 1px solid var(--nga-border);
	border-radius: var(--nga-radius);
	background: #fff;
	text-align: center;
}

.nga-pix-qr img {
	display: block;
	width: 100%;
	max-width: 220px;
	height: auto;
	margin: 0 auto;
	image-rendering: pixelated;
}

.nga-steps {
	margin: 0 0 16px 1.2em;
	padding: 0;
}

.nga-steps li {
	margin-bottom: 4px;
}

.nga-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.nga-copy-group {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.nga-copy-group .nga-copy-source {
	flex: 1 1 auto;
	min-width: 0;
	font-family: monospace;
	font-size: 13px;
	text-overflow: ellipsis;
}

.nga-copy-group .button {
	flex: 0 0 auto;
	white-space: nowrap;
}

.nga-copy-button.nga-copied {
	background: var(--nga-accent) !important;
	color: #fff !important;
}

@media (max-width: 480px) {
	.nga-copy-group {
		flex-direction: column;
	}
}

.nga-countdown strong {
	font-variant-numeric: tabular-nums;
}

.nga-total,
.nga-due {
	color: var(--nga-muted);
}