/**
 * Checkout Prime — Campo de Cartão de Crédito
 * Estilos das bandeiras aceitas (pequenas) + inputs (Stripe Elements)
 */

.cu-pagamento-cartao {
	--cu-ink: #12172B;
	--cu-azul: #4C6FFF;
	--cu-sucesso: #16C79A;
	--cu-erro: #FF5A5F;
	--cu-texto-mudo: #6B7280;
	--cu-borda: #E3E6ED;
	--cu-branco: #FFFFFF;

	max-width: 440px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
	color: var(--cu-ink);
}

.cu-pagamento-cartao *, .cu-pagamento-cartao *::before, .cu-pagamento-cartao *::after {
	box-sizing: border-box;
}

/* ===== Apple Pay / Google Pay — botão oficial visível ===== */
.cu-express-divisor {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0 0;
	color: var(--cu-texto-mudo);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: lowercase;
}
.cu-express-divisor::before,
.cu-express-divisor::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--cu-borda);
}

/* ===== Bandeiras aceitas — pequenas, no lugar do preview 3D grande ===== */
.cu-bandeiras-aceitas {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.cu-bandeira-mini {
	height: 16px;
	width: auto;
	opacity: .55;
}

/* ===== Formulário ===== */
.cu-campo {
	margin-bottom: 16px;
}

.cu-campo label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--cu-texto-mudo);
	margin-bottom: 6px;
	letter-spacing: .02em;
}

.cu-input-shell {
	display: flex;
	align-items: center;
	border: 1.5px solid var(--cu-borda);
	border-radius: 12px;
	background: #FCFCFD;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
	padding: 0 14px;
	height: 48px;
}

.cu-input-shell.cu-focado {
	border-color: var(--cu-azul);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(76,111,255,.12);
}

.cu-input-shell.cu-valido {
	border-color: var(--cu-sucesso);
}

.cu-input-shell.cu-invalido {
	border-color: var(--cu-erro);
}

/* Container onde o Stripe Element é montado (iframe interno) */
.cu-input-stripe {
	flex: 1;
	min-width: 0;
}

.cu-input-shell input[type="text"] {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 16px;
	color: var(--cu-ink);
	padding: 0;
	min-width: 0;
	font-family: inherit;
}

.cu-input-shell input::placeholder {
	color: #B7BCC8;
}

.cu-icone-bandeira-input {
	height: 20px;
	width: auto;
	margin-left: 8px;
	flex-shrink: 0;
	color: var(--cu-ink);
}

.cu-linha-dupla {
	display: flex;
	gap: 14px;
}

.cu-linha-dupla .cu-campo {
	flex: 1;
	min-width: 0;
}

.cu-erro-msg {
	display: block;
	font-size: 12px;
	color: var(--cu-erro);
	margin-top: 6px;
	min-height: 14px;
}

.cu-erro-msg.cu-erro-geral:not(:empty) {
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: center;
}

.cu-selo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px dashed var(--cu-borda);
	color: var(--cu-texto-mudo);
	font-size: 12px;
}

.cu-selo svg {
	flex-shrink: 0;
}

.cu-btn {
	width: 100%;
	margin-top: 18px;
	padding: 15px;
	border: 0;
	border-radius: 12px;
	background: var(--cu-ink);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, opacity .15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.cu-btn:hover {
	background: #232A45;
	transform: translateY(-1px);
}

.cu-btn:disabled {
	opacity: .7;
	cursor: default;
	transform: none;
}

.cu-btn-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.35);
	border-top-color: #fff;
	animation: cu-girar .7s linear infinite;
}

.cu-btn.cu-carregando .cu-btn-spinner {
	display: inline-block;
}

.cu-btn.cu-carregando .cu-btn-texto {
	opacity: .85;
}

@keyframes cu-girar {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.cu-input-shell, .cu-btn {
		transition: none;
	}
	.cu-btn-spinner {
		animation-duration: 1.4s;
	}
}

@media (max-width: 380px) {
	.cu-linha-dupla { gap: 10px; }
}

@media (max-width: 480px) {
	.cu-pagamento-cartao .cu-bandeiras-aceitas {
		gap: 12px;
		margin-bottom: 14px;
	}

	.cu-pagamento-cartao .cu-campo {
		margin-bottom: 12px;
	}

	.cu-pagamento-cartao .cu-campo label {
		margin-bottom: 6px;
	}

	.cu-pagamento-cartao .cu-linha-dupla {
		gap: 12px;
	}

	.cu-pagamento-cartao .cu-erro-msg {
		margin-top: 4px;
		min-height: 0;
	}

	.cu-pagamento-cartao .cu-erro-msg:empty {
		display: none;
	}

	.cu-pagamento-cartao .cu-selo {
		margin-top: 12px;
		padding-top: 12px;
		gap: 8px;
	}

	.cu-pagamento-cartao .cu-btn {
		margin-top: 16px;
	}
}