/* ==========================================
   SDL PORTAL - MEUS PAGAMENTOS V2
   ========================================== */

.sdl-pagamentos-page,
.sdl-pagamentos-page * {
	box-sizing: border-box;
}

.sdl-pagamentos-page {
	--sdl-navy: #0b1f3a;
	--sdl-navy-2: #15345f;
	--sdl-blue: #73c7eb;
	--sdl-blue-soft: #eaf7fd;
	--sdl-white: #ffffff;
	--sdl-text: #17324f;
	--sdl-muted: #65798d;
	--sdl-border: #d8e7f0;
	--sdl-success: #2f7d57;
	--sdl-success-soft: #eaf7ef;
	--sdl-warning: #9a6a00;
	--sdl-warning-soft: #fff7df;

	width: calc(100% - 40px);
	max-width: 1180px;
	margin: 0 auto;
	padding: 30px 0 55px;
	color: var(--sdl-text);
}

.sdl-pag-topo {
	margin-bottom: 18px;
}

.sdl-pag-voltar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 9px 15px;
	background: #fff;
	color: var(--sdl-navy) !important;
	border: 1px solid var(--sdl-border);
	border-radius: 10px;
	text-decoration: none !important;
	font-weight: 700;
}

.sdl-pag-voltar:hover {
	background: var(--sdl-blue-soft);
	border-color: #a9d8ed;
	color: var(--sdl-navy) !important;
}

.sdl-pag-cabecalho {
	margin-bottom: 22px;
	padding: 27px 28px;
	background: #fff;
	border: 1px solid var(--sdl-border);
	border-radius: 18px;
	box-shadow: 0 8px 26px rgba(11, 31, 58, .05);
}

.sdl-pag-kicker {
	display: inline-block;
	margin-bottom: 7px;
	color: var(--sdl-navy-2);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sdl-pag-cabecalho h1 {
	margin: 0 0 8px;
	color: var(--sdl-navy);
	font-size: 34px;
	line-height: 1.15;
}

.sdl-pag-cabecalho p {
	margin: 0;
	color: var(--sdl-muted);
	font-size: 15px;
}

.sdl-pag-resumo {
	margin-bottom: 22px;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid var(--sdl-border);
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(11, 31, 58, .04);
}

.sdl-pag-status-bloco,
.sdl-pag-progresso-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

.sdl-pag-label,
.sdl-pag-progresso-info span,
.sdl-pag-card span,
.sdl-pag-detalhes-grid span {
	color: var(--sdl-muted);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .035em;
}

.sdl-pag-status {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 14px;
}

.sdl-pag-status-pago {
	background: var(--sdl-success-soft);
	color: var(--sdl-success);
	border: 1px solid #bfe0cb;
}

.sdl-pag-status-pendente,
.sdl-pag-status-parcial {
	background: var(--sdl-warning-soft);
	color: var(--sdl-warning);
	border: 1px solid #ead49b;
}

.sdl-pag-progresso-info {
	margin-top: 18px;
	margin-bottom: 8px;
}

.sdl-pag-progresso-info strong {
	color: var(--sdl-navy);
}

.sdl-pag-progresso {
	width: 100%;
	height: 10px;
	overflow: hidden;
	background: #edf3f7;
	border-radius: 999px;
}

.sdl-pag-progresso span {
	display: block;
	height: 100%;
	background: var(--sdl-blue);
	border-radius: inherit;
}

.sdl-pag-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 22px;
}

.sdl-pag-card {
	padding: 22px;
	background: #fff;
	border: 1px solid var(--sdl-border);
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(11, 31, 58, .04);
}

.sdl-pag-card-destaque {
	background: var(--sdl-blue-soft);
	border-color: #c7e5f2;
}

.sdl-pag-card strong {
	display: block;
	margin: 9px 0 5px;
	color: var(--sdl-navy);
	font-size: 27px;
	line-height: 1.1;
}

.sdl-pag-card small {
	color: var(--sdl-muted);
	font-size: 13px;
}

.sdl-pag-detalhes {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--sdl-border);
	border-radius: 18px;
	box-shadow: 0 6px 20px rgba(11, 31, 58, .04);
}

.sdl-pag-detalhes-titulo {
	margin-bottom: 18px;
}

.sdl-pag-detalhes-titulo h2,
.sdl-pag-acoes h2,
.sdl-pag-vazio h2 {
	margin: 0 0 5px;
	color: var(--sdl-navy);
	font-size: 20px;
}

.sdl-pag-detalhes-titulo p,
.sdl-pag-acoes p,
.sdl-pag-vazio p {
	margin: 0;
	color: var(--sdl-muted);
	font-size: 14px;
}

.sdl-pag-detalhes-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 14px;
}

.sdl-pag-detalhes-grid > div {
	padding: 15px;
	background: #f8fbfd;
	border: 1px solid #e3edf3;
	border-radius: 11px;
}

.sdl-pag-detalhes-grid strong {
	display: block;
	margin-top: 5px;
	color: var(--sdl-navy);
	font-size: 15px;
}

.sdl-pag-acoes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	margin-top: 22px;
	padding: 23px 25px;
	background: #fff;
	border: 1px solid var(--sdl-border);
	border-radius: 18px;
	box-shadow: 0 6px 20px rgba(11, 31, 58, .04);
}

.sdl-pag-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 18px;
	background: var(--sdl-navy);
	color: #fff !important;
	border: 1px solid var(--sdl-navy);
	border-radius: 10px;
	text-decoration: none !important;
	font-weight: 800;
}

.sdl-pag-btn:hover {
	background: var(--sdl-navy-2);
	color: #fff !important;
}

.sdl-pag-vazio {
	padding: 48px 28px;
	background: var(--sdl-blue-soft);
	border: 1px solid #c7e5f2;
	border-radius: 18px;
	text-align: center;
}

@media (max-width: 900px) {
	.sdl-pag-grid {
		grid-template-columns: 1fr;
	}

	.sdl-pag-detalhes-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.sdl-pagamentos-page {
		width: calc(100% - 28px);
		padding: 20px 0 40px;
	}

	.sdl-pag-cabecalho {
		padding: 22px;
	}

	.sdl-pag-cabecalho h1 {
		font-size: 28px;
	}

	.sdl-pag-acoes {
		flex-direction: column;
		align-items: flex-start;
	}

	.sdl-pag-btn {
		width: 100%;
	}
}


/* ==========================================
   SUMUP + COMPROVANTE
   ========================================== */

.sdl-pag-alerta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 20px;
	padding: 16px 18px;
	border-radius: 12px;
	border: 1px solid var(--sdl-border, #d8e7f0);
	font-size: 14px;
	line-height: 1.55;
}

.sdl-pag-alerta strong {
	font-size: 15px;
}

.sdl-pag-alerta-sucesso {
	background: #eef9f2;
	border-color: #b9dec7;
	color: #245f3d;
}

.sdl-pag-alerta-espera {
	background: #eef8fd;
	border-color: #b9deef;
	color: #174d68;
}

.sdl-pag-alerta-erro {
	background: #fff2f1;
	border-color: #efc6c2;
	color: #8b2e27;
}

.sdl-pag-sumup,
.sdl-pag-comprovante {
	margin-top: 24px;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--sdl-border, #d8e7f0);
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(11,31,58,.045);
}

.sdl-pag-sumup-head,
.sdl-pag-comprovante-head {
	margin-bottom: 20px;
}

.sdl-pag-sumup-head h2,
.sdl-pag-comprovante-head h2 {
	margin: 5px 0 8px;
	color: var(--sdl-navy, #0b1f3a);
}

.sdl-pag-sumup-head p,
.sdl-pag-comprovante-head p {
	margin: 0;
	color: var(--sdl-muted, #65798d);
	line-height: 1.65;
}

.sdl-pag-sumup-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.sdl-pag-sumup-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	background: #f8fbfd;
	border: 1px solid #dfeaf1;
	border-radius: 14px;
}

.sdl-pag-sumup-card-principal {
	background: linear-gradient(135deg, #eaf7fd, #fff);
	border-color: #acd9eb;
}

.sdl-pag-sumup-card > span {
	color: var(--sdl-muted, #65798d);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sdl-pag-sumup-card h3 {
	margin: 0;
	color: var(--sdl-navy, #0b1f3a);
	font-size: 21px;
}

.sdl-pag-sumup-card p {
	margin: 0 0 8px;
	color: var(--sdl-muted, #65798d);
	line-height: 1.55;
}

.sdl-pag-sumup-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin-top: auto;
	padding: 11px 16px;
	background: var(--sdl-navy, #0b1f3a);
	color: #fff !important;
	border-radius: 9px;
	text-decoration: none !important;
	font-weight: 800;
}

.sdl-pag-sumup-btn-light {
	background: #fff;
	color: var(--sdl-navy, #0b1f3a) !important;
	border: 1px solid #bdd8e6;
}

.sdl-pag-sumup-complementos {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid #e3edf3;
}

.sdl-pag-sumup-complementos h3 {
	margin: 0 0 6px;
	color: var(--sdl-navy, #0b1f3a);
}

.sdl-pag-sumup-complementos > p {
	margin: 0 0 16px;
	color: var(--sdl-muted, #65798d);
}

.sdl-pag-comprovante-atual {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	padding: 16px 18px;
	background: #f7fbfd;
	border: 1px solid #dceaf1;
	border-radius: 12px;
}

.sdl-pag-comprovante-atual span,
.sdl-pag-comprovante-atual strong {
	display: block;
}

.sdl-pag-comprovante-atual span {
	margin-bottom: 3px;
	color: var(--sdl-muted, #65798d);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

.sdl-pag-comprovante-atual a {
	color: var(--sdl-navy, #0b1f3a);
	font-weight: 800;
}

.sdl-pag-comprovante-form {
	display: grid;
	gap: 12px;
}

.sdl-pag-comprovante-form label {
	color: var(--sdl-navy, #0b1f3a);
	font-weight: 800;
}

.sdl-pag-comprovante-form input[type="file"] {
	width: 100%;
	padding: 13px;
	background: #f8fbfd;
	border: 1px dashed #b7d3e1;
	border-radius: 10px;
}

.sdl-pag-comprovante-form small {
	color: var(--sdl-muted, #65798d);
}

@media (max-width: 720px) {
	.sdl-pag-sumup-grid {
		grid-template-columns: 1fr;
	}

	.sdl-pag-sumup,
	.sdl-pag-comprovante {
		padding: 20px;
	}

	.sdl-pag-comprovante-atual {
		align-items: flex-start;
		flex-direction: column;
	}
}