body{
  background:#f5f7fa;
  font-family:'Segoe UI',sans-serif;
}

.pay-method-box{
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pay-img-custom{
  width: 100%;
  max-width: 140px;
  height: auto;
}


/* ------------------ HEADER ------------------ */
.top-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}
.top-header h3{
  font-size:1.8rem;
  font-weight:800;
  color:#002a6e;
}
.total-top{
  font-size:1.3rem;
  font-weight:700;
  color:#1d2d50;
}

/* ---------------- PIX / BOLETO ---------------- */
.pay-method-box{
  border:2px solid #999;
  border-radius:12px;
  padding:15px;
  transition:.25s;
  background:#fff;
  cursor:pointer;
  text-align:center;
}
.pay-method-box:hover{
  border-color:#0057d9;
  box-shadow:0 6px 15px rgba(0,87,217,0.20);
  transform:translateY(-3px);
}

.pay-img-custom{
  max-width:180px;
  height:auto;
  display:block;
  margin:auto;
}

/* FORM */
.card-box{
  background:#ffffff;
  border-radius:16px;
  padding:20px 25px;
  border:2px solid #e1e6ef;
}
.label-clean{
  font-weight:600;
  color:#2b3e67;
}
.input-clean{
  height:52px;
  border-radius:10px;
  border:2px solid #cfd7e6;
  font-size:1.05rem;
}
.input-clean:focus{
  border-color:#0057d9;
  box-shadow:0 0 0 .15rem rgba(0,87,217,.15);
}

/* -------- MINI CARD ------- */
.mini-card{
  background: linear-gradient(135deg,#3759e5,#4a88ff);
  border-radius: 14px;
  padding: 18px 20px;
  color: #fff;
  width: 100%;
  max-width: 300px;
  min-height: 160px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

.mini-card-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: .9;
  font-size: .85rem;
}

.mini-number{
  letter-spacing: 3px;
  margin-top: 20px;
  font-size: 1.1rem;
}

.mini-footer{
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}

.mini-label{
  font-size: .65rem;
  opacity: .8;
  text-transform: uppercase;
}

.mini-value{
  font-size: .9rem;
  font-weight: 600;
}

.card-flag {
  width: 60px;
  height: auto;
  filter: brightness(1.1);
}

/* Botão */
.btn-finalizar{
  width:100%;
  padding:16px;
  font-size:1.2rem;
  background:#6fc24a;
  color:#fff;
  border:none;
  border-radius:12px;
  transition:.25s;
  font-weight:700;
}
.btn-finalizar:hover{
  background:#5bab3f;
  transform:translateY(-2px);
}
.btn-finalizar:disabled{
  opacity:.7;
  cursor:not-allowed;
}

.error-msg {
  color: #dc3545;
  font-size: .82rem;
  margin-top: 3px;
  display: none;
}
.error-msg.show {
  display: block;
}

.input-clean.is-invalid { border-color:#dc3545!important;background:#ffeaea; }
.input-clean.is-valid { border-color:#28a745!important;background:#eaffea; }
/* ===== AJUSTES DO NOME E VALOR ===== */
.header-user-info {
  text-align: center;
  margin-bottom: 20px;
}

.header-user-info h3 {
  font-size: 1.7rem;
  font-weight: 800;
  color: #003d80;
  margin-bottom: 5px;
}

.header-user-info .total-top {
  font-size: 1.4rem !important;
  font-weight: 700;
  color: #1d2d50;
  text-align: center;
  background: #eef3ff;
  padding: 8px 0;
  border-radius: 10px;
  margin-top: 5px;
}

/* ===== PIX / BOLETO — MENOR NO MOBILE ===== */
@media (max-width: 768px) {
  .pay-method-box {
    padding: 10px;
  }

  .pay-img-custom {
    max-width: 130px !important;
  }
}



/* ====== VALOR — CAIXA SUAVE E ELEGANTE ====== */
.valor-box {
  position: relative;
  width: 100%;             /* AGORA PEGA TODA A LARGURA */
  padding: 18px 25px 30px; /* espaço inferior p/ o rótulo */
  margin: 25px 0 32px 0;   /* margem vertical ajustada */
  background: #ffffff;
  border-radius: 12px;

  border: 1px solid #dac89c; /* dourado suave */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);

  font-size: 1.35rem;
  font-weight: 700;
  color: #3a3a3a;
  text-align: center;

  /* animação */
  opacity: 0;
  transform: translateY(6px);
  animation: valorFade 0.35s ease forwards;
}

@keyframes valorFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Rótulo REALMENTE colado na borda inferior esquerda */
.valor-label {
  position: absolute;
  bottom: -13px;
  left: 14px;   /* pequeno afastamento para ficar elegante */

  background: #ffffff;
  padding: 2px 12px;
  font-size: 0.90rem;
  font-weight: 700;
  color: #7e652b;

  border: 1px solid #e5d7b6;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* mobile */
@media (max-width: 768px) {
  .valor-box {
    font-size: 1.18rem;
    padding: 13px 14px 20px 14px;
  }
  .valor-label {
    font-size: 0.67rem;
  }
}