.xpag-box {
	max-width: 440px;
	margin: 20px auto;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
	text-align: center;
	background: #fff;
}

.xpag-qr img {
	max-width: 240px;
	height: auto;
	margin: 0 auto 12px;
	display: block;
}

.xpag-label {
	font-weight: 600;
	margin: 12px 0 6px;
	font-size: 14px;
}

.xpag-code {
	word-break: break-all;
	background: #f6f6f6;
	border: 1px dashed #bbb;
	border-radius: 6px;
	padding: 10px;
	font-size: 12px;
	font-family: monospace;
	margin-bottom: 12px;
}

.xpag-copy,
.xpag-pay-btn {
	cursor: pointer;
}

.xpag-pay-btn {
	display: inline-block;
	font-size: 16px;
	padding: 12px 24px;
}

.xpag-meta {
	font-size: 13px;
	margin: 4px 0;
	color: #333;
}

.xpag-aguardando {
	margin-top: 14px;
	font-size: 13px;
	color: #666;
}

.xpag-aviso {
	margin-top: 10px;
	font-size: 12px;
	color: #b26a00;
}

.xpag-confirmado {
	font-size: 18px;
	font-weight: 700;
	color: #28a745;
}

.xpag-conversao {
	margin: 8px 0 0;
	font-size: 14px;
}

/* Botao principal azul, grande e em largura total (estilo Facebook) */
.xpag-box .xpag-copy,
.xpag-box .xpag-pay-btn {
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 14px auto 0;
	padding: 18px 24px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.2px;
	text-align: center;
	text-decoration: none;
	color: #fff !important;
	background: #1877f2 !important;
	border: 0 !important;
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(24, 119, 242, 0.35);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.xpag-box .xpag-copy:hover,
.xpag-box .xpag-pay-btn:hover {
	background: #166fe5 !important;
	box-shadow: 0 8px 20px rgba(24, 119, 242, 0.45);
}

.xpag-box .xpag-copy:active,
.xpag-box .xpag-pay-btn:active {
	background: #1464cf !important;
	transform: translateY(1px);
	box-shadow: 0 3px 10px rgba(24, 119, 242, 0.35);
}

.xpag-box .xpag-copy:focus-visible,
.xpag-box .xpag-pay-btn:focus-visible {
	outline: 3px solid rgba(24, 119, 242, 0.4);
	outline-offset: 2px;
}

.xpag-box .xpag-copy::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-right: 10px;
	vertical-align: -4px;
	background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Depois de copiar: fica verde por 2 segundos */
.xpag-box .xpag-copy.is-copied {
	background: #31a24c !important;
	box-shadow: 0 6px 16px rgba(49, 162, 76, 0.35);
}

.xpag-box .xpag-copy.is-copied::before {
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

/* Icone do metodo ao lado do nome, na tela de pagamento */
[class*="payment_method_xpag_"] label img {
	float: none !important;
	display: inline-block !important;
	height: 28px !important;
	width: auto !important;
	max-height: 28px !important;
	margin: 0 0 0 8px !important;
	vertical-align: middle !important;
	border-radius: 6px;
}

/* ============ Tela completa do PIX (v2.3) ============ */
.xpag-box.xpag-rich {
	max-width: 520px;
	padding: 24px 20px;
	border: 1px solid #e5e9ef;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06);
	text-align: center;
	color: #1f2937;
}
.xpag-rich .xpag-head { margin-bottom: 16px; }
.xpag-rich .xpag-head-logo { height: 42px; width: auto; display: block; margin: 0 auto 6px; }
.xpag-rich .xpag-head-sub { margin: 0; font-size: 15px; color: #4b5563; }

.xpag-rich .xpag-status {
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	background: #ecfdf3;
	border: 1px solid #b7ebcd;
	border-radius: 12px;
	padding: 14px 14px;
	margin-bottom: 18px;
}
.xpag-rich .xpag-status-icon { color: #16a34a; flex: 0 0 auto; display: flex; font-size: 24px; font-weight: 700; }
.xpag-rich .xpag-status-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.xpag-rich .xpag-status-text strong { color: #15803d; font-size: 16px; }
.xpag-rich .xpag-status-msg { font-size: 13px; color: #374151; line-height: 1.4; }
.xpag-rich .xpag-timer {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 17px;
	color: #15803d;
	background: #fff;
	border: 1px solid #b7ebcd;
	border-radius: 999px;
	padding: 6px 12px;
}
.xpag-rich.is-expired .xpag-status { background: #fff7ed; border-color: #fed7aa; }
.xpag-rich.is-expired .xpag-status-icon,
.xpag-rich.is-expired .xpag-status-text strong,
.xpag-rich.is-expired .xpag-timer { color: #c2410c; }
.xpag-rich.is-expired .xpag-timer { border-color: #fed7aa; }
.xpag-rich .xpag-status-ok strong { color: #15803d; font-size: 17px; }

.xpag-rich .xpag-summary { margin-bottom: 16px; }
.xpag-rich .xpag-item {
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	padding: 10px 12px;
	border: 1px solid #eef1f5;
	border-radius: 10px;
	margin-bottom: 8px;
	background: #fafbfc;
}
.xpag-rich .xpag-item-img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.xpag-rich .xpag-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xpag-rich .xpag-item-name { font-weight: 600; font-size: 15px; color: #111827; }
.xpag-rich .xpag-item-name small { color: #6b7280; font-weight: 500; }
.xpag-rich .xpag-item-desc { font-size: 12.5px; color: #6b7280; line-height: 1.35; }
.xpag-rich .xpag-total-label {
	margin: 14px 0 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #6b7280;
}
.xpag-rich .xpag-total { margin: 2px 0 0; font-size: 34px; font-weight: 800; color: #111827; line-height: 1.15; }

.xpag-rich .xpag-qr-card {
	display: inline-block;
	padding: 10px;
	background: #fff;
	border: 1px solid #e5e9ef;
	border-radius: 12px;
}
.xpag-rich .xpag-qr-card img,
.xpag-rich .xpag-qr-card svg { display: block; width: 220px !important; max-width: 100%; height: auto; margin: 0 !important; }

.xpag-rich .xpag-steps {
	text-align: left;
	margin: 22px 0 0;
	padding: 16px 16px 12px;
	background: #f8fafc;
	border: 1px solid #eef1f5;
	border-radius: 12px;
}
.xpag-rich .xpag-steps-title { margin: 0 0 8px; font-weight: 700; font-size: 15px; color: #111827; }
.xpag-rich .xpag-steps ol { margin: 0; padding-left: 22px; }
.xpag-rich .xpag-steps li { margin: 0 0 6px; font-size: 14px; color: #374151; line-height: 1.4; }
.xpag-rich .xpag-qr-hint { margin: 10px 0 0; font-size: 12.5px; color: #6b7280; }

.xpag-rich .xpag-seals {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 18px;
	margin-top: 18px;
	font-size: 12.5px;
	color: #4b5563;
}
.xpag-rich .xpag-seal { display: inline-flex; align-items: center; gap: 6px; }
.xpag-rich .xpag-seal svg { color: #16a34a; }
.xpag-rich .xpag-support { margin: 14px 0 0; font-size: 13px; color: #4b5563; }

@media (max-width: 420px) {
	.xpag-box.xpag-rich { padding: 18px 14px; }
	.xpag-rich .xpag-total { font-size: 30px; }
	.xpag-rich .xpag-timer { font-size: 15px; padding: 5px 10px; }
}