/* ========== 1. OVERLAY DE LOADING ========== */
#redpay-thankyou-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0, 0, 0);
  display: none; /* ativado via JS */
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
#redpay-thankyou-loading-overlay .loading-box {
    background-color: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
}

#redpay-thankyou-loading-overlay .loading-box img {
    max-width: 120px; /* Ajuste o tamanho da sua logo */
    margin-bottom: 20px;
}
#redpay-thankyou-loading-overlay .progress-bar {
  width: 100px;
  height: 6px;
  background: #000000;
  border-radius: 3px;
  overflow: hidden;
  margin: 12px auto 20px;
}
#redpay-thankyou-loading-overlay .progress-fill {
  width: 0;
  height: 100%;
  background: #28a745;
  animation: fill-once 3s forwards;
}
@keyframes fill-once {
  to { width: 100%; }
}

/* ─── CAIXA GERAL DO THANK YOU ─── */
#redpay-thankyou-container {
  border: 2px solid #ffffff;       /* borda preta */
  background-color: #fff;       /* fundo branco */
  border-radius: 8px;           /* cantos arredondados */
  max-width: 800px;             /* largura máxima opcional */
  margin: 0 auto;               /* centraliza horizontalmente */
  box-sizing: border-box;       /* inclui padding na largura total */
  padding-top: 80px;    /* <–– aumente esse valor até encontrar a distância ideal */
  margin-top: 70px;     /* opcional: mais espaço entre o container e o que vier acima */
  padding-top: 80px !important;
}






/* ========== 2. CONTAINER PRINCIPAL ========== */
#redpay-thankyou-container {
  display: none; /* ativado via JS */
  max-width: 700px;
  margin: 40px auto;
  padding: 0 20px 40px;
  color: #333;
}

/* ========== 3. PASSOS ========== */
/* --- BARRA DE PROGRESSO (igual ao checkout) --- */
.redpay-progress-bar {
  display: flex;
  align-items: flex-start;      /* alinha círculos no topo */
  justify-content: space-between;
  margin-bottom: 40px;
}
.redpay-progress-bar .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #adb5bd;
  font-weight: 500;
  flex-basis: 0;
  flex-grow: 1;
}
.redpay-progress-bar .step .step-circle {
  width: 24px;
  height: 24px;
  border: 2px solid #adb5bd;
  border-radius: 50%;
  margin-bottom: 8px;
  background: transparent;
}
.redpay-progress-bar .step.done {               /* quando terminar */
  color: #28a745;
  font-weight: bold;
}
.redpay-progress-bar .step.done .step-circle {
  border-color: #28a745;
  background-color: #28a745;
}
.redpay-progress-bar .step-line {
  flex-grow: 1;
  height: 2px;
  background-color: #e9ecef;
  margin: 0 10px;
  transform: translateY(12px); /* centraliza na metade dos círculos */
}
.redpay-progress-bar .step-line.done {           /* as linhas “concluídas” */
  background-color: #28a745;
}


/*  ─── manter o texto dos passos sempre preto ─── */
.redpay-progress-bar .step span {
  color: #000 !important;
}

/*  ─── ainda assim, o círculo e as linhas concluídas seguem verdes ─── */
.redpay-progress-bar .step.done .step-circle {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}
.redpay-progress-bar .step-line.done {
  background-color: #28a745 !important;
}


/* ========== 4. CABEÇALHO E INSTRUÇÕES ========== */
.thank-you-header {
  text-align: center;
  margin-bottom: 24px;
}
.thank-you-header h2 {
  font-size: 28px;
  margin-bottom: 8px;
}
.thank-you-header p {
  color: #555;
}
.ty-instructions {
  max-width: 600px;
  margin: 0 auto 32px;
}
.ty-instructions h3 {
  font-size: 20px;
  margin-bottom: 12px;
}
.ty-instructions ol {
  padding-left: 20px;
  line-height: 1.6;
}
.ty-instructions li {
  margin-bottom: 8px;
  color: #333;
}

/* ========== 5. BOTÕES ========== */
.access-option { text-align: center; margin-bottom: 32px; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0088cc;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 6px;
  transition: background .2s;
}
.btn-primary:hover { background: #0077b3; }

/* permite ícones SVG inline com classe .btn-icon */
.btn-icon { width:20px; height:20px; flex-shrink:0; }

/* ========== 6. “Você não tem Telegram?” ========== */
.ty-no-telegram { text-align: center; margin-top: 40px; }
.ty-no-telegram p { font-weight: bold; margin-bottom: 16px; }
.ty-cta-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #0088cc;
  border: 2px solid #0088cc;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.btn-outline:hover { background: #0088cc; color: #fff; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #28a745;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background .2s;
}
.btn-secondary:hover { background: #218838; }

/*botão whats*/
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;             /* espaço entre ícone e texto */
  background: #28a745;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background .2s;
}

.btn-secondary:hover {
  background: #218838;
}

.btn-secondary .btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: currentColor;  /* herda o branco do botão */
}



/* ========== 7. POP-UP “Link copiado” ========== */
#redpay-copy-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
.copy-popup-box {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  text-align: center;
  max-width: 320px;
}
.copy-popup-box img {
  max-width: 80px;
  margin: 0 auto 12px;
  display: block;
}
.copy-progress-bar {
  width: 100px;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
  margin: 12px auto 16px;
}
.copy-progress-fill {
  width: 0;
  height: 100%;
  background: #28a745;
  transition: width 5s linear;
}

/* ========== 8. RESPONSIVO ========== */
@media (max-width: 600px) {
  .ty-steps { flex-direction: column; gap: 8px; }
  .ty-no-telegram .ty-cta-group { flex-direction: column; }
}

.ty-cta-group .btn-outline,
.ty-cta-group .btn-secondary {
  min-width: 240px;
}

/* --- Centraliza topo da Thank You Page --- */
/* 1) Garante que as etapas fiquem centralizadas */
.ty-steps {
  display: flex !important;
  justify-content: center !important;
  gap: 20px;
  margin-bottom: 30px;
}

/* 2) Cada passo tem o texto abaixo do círculo centralizado */
.ty-steps .step {
  text-align: center !important;
}

/* 3) Centraliza o header (🎉 Acesso Liberado) */
.thank-you-header {
  text-align: center !important;
}

/* 4) Centraliza as instruções */
.ty-instructions {
  text-align: center !important;
  margin: 0 auto 40px; /* opcional: ajusta espaçamento abaixo */
  max-width: 600px;    /* opcional: limita largura para não esticar demais */
}

/* 5) Faz o botão principal ficar centralizado (caso não esteja) */
.access-option {
  text-align: center !important;
}


/* ─── Caixa preta destacada em INSTRUÇÕES ─── */
.ty-instructions,
.thank-you-instructions {
  border: 2px solid #000;      /* borda preta */
  padding: 20px;               /* espaçamento interno */
  border-radius: 8px;          /* cantos arredondados */
  margin-bottom: 30px;         /* distância abaixo do bloco */
  background-color: #fff;      /* fundo branco (se preferir) */
}

/* opcional: força o texto dentro da caixa também preto */
.ty-instructions,
.thank-you-instructions {
  color: #000 !important;
}

/* PAINEL DE ERRO PERSONALIZADO */
.system-error-panel {
  text-align: center;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 40px 20px;
  max-width: 600px;
  margin: 40px auto;
}
.system-error-panel h3 {
  color: #212529;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 24px;
}
.system-error-panel p {
  color: #070808;
  line-height: 1;
  font-size: 12px;
}
.system-error-panel .error-actions .btn-primary {
    margin-top: 15px;
    background-color: #25d366; /* Cor do WhatsApp */
    border-color: #25d366;
}
.system-error-panel .error-actions .btn-primary:hover {
    background-color: #128c7e;
    border-color: #128c7e;
}
.ty-error-box {
  text-align: center;
  background: #fff;
  border-radius: 8px;
  padding: 32px;
  max-width: 600px;
  margin: 40px auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.37);
}
/* Ajuste do título de erro na Thank You Page */
.ty-error-box h2 {
  font-size: 2rem;    /* experimente 1.5rem, 1.25rem… ou em px, ex: 24px */
  line-height: 1.2;     /* controla o espaçamento vertical */
  margin-bottom: 0.75rem; /* afasta do parágrafo de baixo */
}

/* --- Responsivo para telas menores que 600px --- */
@media (max-width: 600px) {
  /* Container principal (tanto erro quanto sucesso) */
  #redpay-thankyou-container,
  .ty-error-box {
    max-width: 90% !important;
    margin: 20px auto !important;
    padding: 20px !important;
    box-shadow: none; /* opcional, para ficar mais leve */
  }

  /* Títulos menores */
  .thank-you-header h2,
  .ty-error-box h2 {
    font-size: 1.5rem !important;
    line-height: 1.3;
  }

  /* Texto de suporte/descrição */
  .thank-you-header p,
  .ty-error-box p {
    font-size: 1rem !important;
  }

  /* Botões em full-width */
  .access-option .btn-primary,
  .ty-error-box .btn-secondary,
  .ty-no-telegram .btn-outline,
  .ty-no-telegram .btn-secondary {
    display: block;
    width: 100% !important;
    margin: 10px 0 !important;
  }

  /* Ajusta as instruções */
  .ty-instructions {
    padding: 0 10px !important;
    font-size: 0.95rem;
  }

  
}