@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* ===========================
   Vars (cores/tons)
   =========================== */
:root{
  --green-600:#2e8b57;
  --green-700:#276a45;
  --green-800:#194a2f;
  --green-100:#d2f0d6;
  --green-50:#f5fff8;
  --gray-900:#222;
  --gray-700:#444;
  --gray-600:#666;
  --gray-300:#ccc;
  --gray-200:#e9e9e9;
  --danger-500:#d9534f;
  --white:#fff;
  --shadow-lg:0 12px 24px rgba(0,0,0,.12);
  --shadow-xl:0 16px 34px rgba(0,0,0,.18);
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
}

/* ===========================
   Reset / Base
   =========================== */
*{ box-sizing:border-box; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button, input, textarea{ font:inherit; }
a{ color:inherit; text-decoration:none; }
html, body{ height:100%; }

body {
  font-family: 'Poppins', sans-serif;
  color: var(--gray-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  line-height: 1.5;
  background: linear-gradient(
    45deg,
    #5ec068,
    #7abf99,  
    #4fb893,  
    #5ec068,
    #7abf99,
    #4fb889
  );
  background-size: 300% 300%; /* necessário para o movimento */
  animation: moveGradientHorizontal 15s ease-in-out infinite;
}

@keyframes moveGradientHorizontal {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}

footer {
  text-align: center;
  padding-bottom: 2rem;
  font-size: 0.9rem;
  color: #555;
  margin: 2rem auto 1rem;
}

/* ===========================
   Container
   =========================== */
.container{
  background:var(--white);
  width:100%;
  max-width:420px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:2rem 2rem 3rem;
  text-align:center;
  animation:fadeIn .6s ease-in-out;
}

.offer-bar {
  background-color: #d62828;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 18px;
  gap: 10px;
  border-radius: 8px;
  font-weight: bold;
  margin-bottom: 12px;
  text-align: center;
  flex-wrap: nowrap;
}

/* Timer fixo para não empurrar */
.offer-bar .time {
  font-size: clamp(1.2rem, 6vw, 1.6rem);
  font-weight: 900;
  line-height: 1;
  width: 70px;   
  text-align: center;
  flex-shrink: 0; 
}

/* Ícone */
.offer-bar i {
  font-size: clamp(1rem, 5vw, 1.3rem);
  flex-shrink: 0;
}

/* Texto */
.offer-bar .label {
  font-size: clamp(0.75rem, 4vw, 0.9rem);
  font-weight: 500;
  white-space: nowrap;
}

/* ===========================
   Banner
   =========================== */
.banner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.85rem;
  margin-bottom:1.5rem;
}
.banner h1{
  color:var(--green-600);
  font-size:1.7rem;
  font-weight:700;
  line-height:1.4;
}
.banner .subtitle{
  font-size:1rem;
  color:var(--gray-700);
}
.banner img{
  border-radius:var(--radius-md);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}

/* destaque inline no título */
.highlight{
  color:var(--green-600);
  background:var(--green-100);
  border-radius:10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 28px;
}

/* ===========================
   Prova social
   =========================== */
.social-proof{
  background:var(--green-100);
  border:1px solid var(--green-100);
  padding:.85rem 1rem;
  border-radius:var(--radius-md);
  font-size:.95rem;
  color:var(--green-600);
  font-weight:600;
  margin:0 0 1.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
}

/* ===========================
   Títulos / textos
   =========================== */
h2{
  color:var(--green-600);
  font-size:1.4rem;
  margin-bottom:1rem;
}
.trust-text{
  color:var(--gray-700);
  font-size:.95rem;
  margin-bottom:1.2rem;
}

/* ===========================
   Formulário
   =========================== */
form{ 
  margin-top:1rem; 
  text-align:center;
}

input[type="text"],
input[type="email"]{
  width:100%;
  padding:.8rem 1rem;
  margin:.5rem 0 1.1rem;
  border-radius:10px;
  border:1.5px solid var(--gray-300);
  font-size:1rem;
  transition:border-color .25s, box-shadow .25s, background-color .25s;
  background:#fff;
}
input::placeholder{ color:#9aa3a5; }
input[type="text"]:focus,
input[type="email"]:focus{
  outline:none;
  border-color:var(--green-600);
  box-shadow:0 0 0 4px rgba(46,139,87,.18);
}

.anti-spam,
.safe-pay,
.small-text,
.microtext{
  font-size: 0.8rem;
  color: #666;
  margin: -5px 0 20px;
  text-align: center;   /* antes estava left */
  display: block;
}

.method-payment-txt{color: #666;}

.small-text{ 
  color:var(--danger-500);
  font-weight:500;
  margin-top:.8rem; 
}
.microtext{ margin-top:.35rem;}

/* link de pagamento (quando existir) */
.payment-link{
  display:inline-block;
  margin-top:1rem;
  color:var(--green-600);
  font-weight:600;
  word-break:break-word;
  font-size:1rem;
  border:2px solid var(--green-600);
  padding:.7rem 1rem;
  border-radius:var(--radius-sm);
  transition:background-color .25s, color .25s, transform .15s;
}
.payment-link:hover{
  background:var(--green-600);
  color:#fff;
  transform:translateY(-1px);
}

/* ===========================
   Métodos de pagamento
   =========================== */
.payment-methods{
  display:flex;
  justify-content:center;
  margin: .25rem 0 1rem;
  gap:.75rem;
}
.payment-method{
  flex:1;
  cursor:pointer;
  border:2px solid var(--gray-300);
  border-radius:var(--radius-md);
  padding:1rem .6rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  transition: all .25s ease;
  background:#fafafa;
  user-select:none;
  outline:none;
}
.payment-method:hover{ border-color:var(--green-600); }
.payment-method:focus-visible{
  box-shadow:0 0 0 4px rgba(46,139,87,.18);
}
.payment-method span{
  font-weight:600;
  color:var(--green-600);
  font-size:.9rem;
  white-space:nowrap;
  text-align:center;
}
.payment-method.selected{
  border-color:var(--green-600);
  background:var(--green-100);
  box-shadow:0 4px 8px rgba(46,139,87,.3);
  transform:translateY(-3px);
}

/* ===========================
   Botão principal (CTA)
   =========================== */
button[type="submit"]{
  width:100%;
  padding:1rem 1.1rem;
  margin-bottom: 0.3rem;
  font-size:1.1rem;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg, var(--green-600), var(--green-800));
  border:none;
  border-radius:12px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.5px;
  transition: transform .15s, box-shadow .2s, filter .2s, background .2s;
  box-shadow:0 8px 16px rgba(46,139,87,.28);
}
button[type="submit"]:hover:not(:disabled){
  background:linear-gradient(135deg, var(--green-700), var(--green-800));
  box-shadow:0 10px 22px rgba(46,139,87,.36);
  transform:translateY(-2px);
}
button[type="submit"]:active:not(:disabled){
  transform:translateY(0);
  filter:saturate(1.05);
}
button[type="submit"]:disabled{
  background-color:#94c29e;
  box-shadow:none;
  cursor:not-allowed;
}

/* oferta limitada */
.limited-offer{
  background:var(--danger-500);
  color:#fff;
  padding:.7rem 1rem;
  border-radius:var(--radius-sm);
  margin-top:1rem;
  font-weight:700;
  font-size:.9rem;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
}

/* ===========================
   Etapas / utilitários
   =========================== */
.step{ margin-top:1.5rem; text-align:center; }
.hidden{ display:none; }
.text-center{ text-align:center; }

/* ===========================
   QR Code (placeholder visual)
   =========================== */
.qr-code{
  margin:1.5rem auto;
  width:200px;
  height:200px;
  background:var(--green-100);
  border:3px solid var(--green-600);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:var(--green-600);
  font-size:1.2rem;
  user-select:none;
  border-radius:var(--radius-md);
}

/* PIX copia e cola */
textarea.pix-copia{
  width:100%;
  padding:.75rem;
  font-size:1rem;
  border:2px solid #4caf50;
  border-radius:var(--radius-sm);
  resize:none;
  background:#f8fff8;
  color:#333;
  font-family:monospace;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  margin-top:.5rem;
}

/* ===========================
   Loader / feedback
   =========================== */
.loader-container{
  margin-top:2rem;
  text-align:center;
}
.loader-container p{
  font-size:1rem;
  color:#333;
  margin-bottom:1rem;
}
.loader{
  border:6px solid #e0f7e9;
  border-top:6px solid #2ecc71;
  border-radius:50%;
  width:40px;
  height:40px;
  animation:spin 1s linear infinite;
  margin:1rem auto;
}
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ===========================
   Botões secundários / grupo
   =========================== */
.btn-secondary{
  margin-top:1rem;
  padding:.85rem 1.6rem;
  font-size:1rem;
  border-radius:var(--radius-sm);
  border:2px solid var(--green-600);
  background:#fff;
  color:var(--green-600);
  cursor:pointer;
  transition: all .2s ease;
  font-weight:600;
}
.btn-secondary:hover{
  background:var(--green-600);
  color:#fff;
  box-shadow:0 6px 12px rgba(46,139,87,.22);
}

.btn-group{
  margin-top:1.5rem;
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

/* ===========================
   Modal
   =========================== */
.modal{
  position:fixed;
  z-index:1000;
  inset:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.modal.hidden{ display:none; }

.modal-content{
  background:#fff;
  padding:2rem;
  border-radius:var(--radius-md);
  max-width:600px;
  width:90%;
  text-align:left;
  position:relative;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.modal-content h2{
  margin-bottom:1rem;
  font-size:1.5rem;
}
.close{
  position:absolute;
  top:10px;
  right:15px;
  font-size:1.5rem;
  cursor:pointer;
  color:#333;
  line-height:1;
}
.close:hover{ color:#000; }

/* botão "ver detalhes" */
#btnSaibaMais{
  padding:.6rem 1.2rem;
  background:var(--green-600);
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:1rem;
  transition:filter .2s ease, transform .15s;
}
#btnSaibaMais:hover{
  background:#297d4d;
  filter:saturate(1.05);
  transform:translateY(-1px);
}
#btnSaibaMais:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(46,139,87,.2);
}

/* ===========================
   Acessibilidade / focos
   =========================== */
a:focus-visible,
button:focus-visible,
.payment-method:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(46,139,87,.22);
  border-color:var(--green-600);
}

/* ===========================
   Responsivo
   =========================== */
@media (max-width:480px){
  .container{ padding:1.5rem 1rem 2rem; }
  .banner h1{ font-size:1.45rem; }
  .banner img{ max-height:250px; object-fit:cover; }
  .payment-methods{ flex-direction:column; gap:1rem; }
  .payment-method{ width:100%; padding:1rem; }
  .btn-group{ flex-direction:column; gap:1rem; }

  .qr-code{
    width:100%;
    max-width:220px;
    aspect-ratio:1/1;
  }
  .payment-link{
    font-size:.95rem;
    padding:.6rem .9rem;
  }

  .offer-bar {
    gap: 8px;
    padding: 15px 12px;
  }
  .offer-bar .time {
    width: 60px;
  }
}

/* ===========================
   Animações
   =========================== */
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}