/* =====================================================
   FAÇA SUA DOAÇÃO — PRÊMIO MANIA
===================================================== */

/* =====================================================
   BACKGROUND DA SEÇÃO
===================================================== */

.donation-section {
  position: relative;

  background:
    radial-gradient(circle at 30% 20%, rgba(169, 229, 3, 0.293), transparent 45%),
    radial-gradient(circle at 80% 40%, rgba(0, 255, 170, 0.10), transparent 50%),
    linear-gradient(
      180deg,
      #070d09 0%,
      #0b160f 45%,
      #050807 100%
    );

  overflow: hidden;
}

/* =====================================================
   CONTAINER
===================================================== */

.donation-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

/* =====================================================
   FORMULÁRIO (CARD)
===================================================== */

.donation-form-wrapper {
  position: relative;
  background: rgba(225, 255, 55, 0.06);
  backdrop-filter: blur(12px);
  border-radius: 26px;

  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.55);
}

/* moldura premium */
.donation-form-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  padding: 2.5px;

  background: linear-gradient(
    135deg,
    rgba(202, 255, 42, 0.65),
    rgba(0, 255, 170, 0.55),
    rgba(202, 255, 42, 0.65)
  );

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;

  pointer-events: none;
  z-index: 1;
}

/* =====================================================
   CABEÇALHO
===================================================== */

.donation-header h2 {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #e5f968;
}

.donation-header p {
  margin-top: 12px;
  font-size: 1.05rem;
  color: #cfd8a8;
  opacity: 0.95;
}

/* =====================================================
   FORMULÁRIO
===================================================== */

.donation-form {
  margin-top: 24px;
  display: grid;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.85rem;
  color: #cfd8a8;
  opacity: 0.9;
  text-align: left;
}

.form-group input {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 0.95rem;
  color: #ffffff;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.form-group input::placeholder {
  color: rgba(255,255,255,0.45);
}

.form-group input:focus {
  border-color: rgba(202,255,42,0.8);
  box-shadow: 0 0 0 2px rgba(202,255,42,0.15);
}

/* =====================================================
   BOTÃO PRINCIPAL
===================================================== */

.donation-button {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  border: none;
  cursor: pointer;

  font-size: 1rem;
  font-weight: 700;
  color: #0b120e;

  background: linear-gradient(
    135deg,
    #caff2a,
    #00ffab
  );

  box-shadow: 0 14px 35px rgba(0, 255, 170, 0.35);
  transition: transform .25s ease, box-shadow .25s ease;
}

.donation-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 45px rgba(0, 255, 170, 0.5);
}

/* =====================================================
   MENSAGENS
===================================================== */

.mensagem {
  margin-top: 16px;
  font-size: 0.9rem;
}

.mensagem.erro {
  color: #ff9a9a;
}

.mensagem.sucesso {
  color: #caff2a;
}

/* =====================================================
   CONTADOR DE COTAS
===================================================== */

.quota-box {
  margin-top: 24px;
  padding: 22px 20px;
  border-radius: 18px;

  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);

  display: grid;
  gap: 18px;
  text-align: center;
}

.quota-info strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: #e5f968;
}

.quota-info span {
  display: block;
  margin-top: 6px;
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
}

.quota-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.quota-btn {
  width: 46px;
  height: 46px;
  border-radius: 14px;

  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(202,255,42,0.6);

  color: #caff2a;
  font-size: 1.6rem;
  font-weight: 700;

  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.quota-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(202,255,42,0.25);
}

.quota-count {
  min-width: 40px;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
}

.quota-label {
  font-size: 0.9rem;
  color: #cfd8a8;
  opacity: 0.9;
  margin-top: -6px;
  font-weight: 600;
}

.campaign-info {
  margin-top: 4px;
  font-size: 0.8rem;
  color: #cfd8a8;
  opacity: 0.9;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 900px) {

  .donation-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .donation-form-wrapper {
    padding: 40px 18px 38px;
  }

  .donation-header h2 {
    font-size: 2.1rem;
  }

  .quota-btn {
    width: 42px;
    height: 42px;
    font-size: 1.4rem;
  }

  .quota-info span {
    font-size: 1.5rem;
  }
}

/* =====================================================
   AJUSTES EXCLUSIVOS — CARD DOAÇÃO (WEB)
===================================================== */

@media (min-width: 901px) {

  /* Padding interno mais confortável no card */
  .donation-form-wrapper {
    padding: 48px 42px 44px;
  }

  /* Centraliza apenas o cabeçalho */
  .donation-header {
    text-align: center;
  }

  .donation-header h2 {
    margin-left: auto;
    margin-right: auto;
  }

  .donation-header p {
    margin-left: auto;
    margin-right: auto;
    max-width: 420px; /* evita texto muito largo */
  }

    /* container vira 1 coluna e centraliza o card */
  .donation-container {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  /* limita largura do card para ficar elegante */
  .donation-form-wrapper {
    width: 100%;
    max-width: 520px;
  }

}