/* ============================================================
   FORMULARIO DE DONACIONES — Estilos
   Contiene únicamente los estilos del formulario.
   ============================================================ */

.donation-wrapper{
  display:flex;
  align-items:flex-start;
  position:relative;
  min-height:780px;
}

.donation-card{
  max-width:430px;
  background:#fff;
  border-radius:40px;
  padding:7%;
  box-shadow:0 0 25px rgba(0,0,0,.08);
  position:absolute;
  opacity:0;
  pointer-events:none;
  transition:.4s;
}

.active-step{
  opacity:1;
  pointer-events:auto;
}

.donation-card h2{
  font-size:32px;
  text-align:center;
  color:#0E2A5A;
  margin-bottom:5px;
}

.donation-card h3{
  text-align:center;
  color:#00abec;
  font-weight:500;
      font-size:20px;
  margin-bottom:10px;
}

.steps{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}

.step-item{
  text-align:center;
}

.circle{
  width:30px;
  height:30px;
  border-radius:50%;
  border:2px solid #BEBEBE;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  color:#777;
  margin:auto;
}

.step-item.active .circle{
  background:#00abec;
  border-color:#00abec;
  color:#fff;
}

.step-item.completed .circle{
  background:#fff;
  border-color:#BEBEBE;
}

.step-item span{
  display:block;
  margin-top:12px;
  font-size:17px;
  color:#666;
}

.step-item.active span{
  color:#0E2A5A;
  font-weight:600;
}

.step-line{
  width:370px;
  height:2px;
  background:#BEBEBE;
  margin: -38px 15px 0px 15px;
}

.form-group{
  margin-bottom:10px;
}

.form-group label{
  display:block;
  color:#999;
}

.form-group input{
  width:100%;
  height:35px;
  border:2px solid #DADADA;
  border-radius:10px;
  padding:0 15px;
  font-size:16px;
}

.checkbox-group{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:10px;
}

.checkbox-group input{
  margin-top:4px;
}

.checkbox-group p{
  font-size:14px;
  color:#888;
  line-height:1.4em;
}

.checkbox-group a{
  color:#0E2A5A;
  font-weight:700;
}

.main-btn{
  width:100%;
  height:65px;
  border:none;
  border-radius:40px;
  background:#de5a6c;
  color:#fff;
  font-size:22px;
  font-weight:600;
  margin-top:15px;
  cursor:pointer;
}

.amounts{
  display:flex;
  gap:15px;
  margin:20px 0;
}

.amounts button{
  flex: 1;
  height: 40px;
  border: 2px solid #DADADA;
  background: #fff;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.amounts button.active{
  background:#0E2A5A;
  color:#fff;
}

.custom-amount{
  width:100%;
  height:40px;
  border:2px solid #DADADA;
  border-radius:10px;
  text-align:center;
  font-size:20px;
  margin-bottom:40px;
}

.info-box{
  margin-top:20px;
}

.info-item{
  display:flex;
  gap:15px;
  margin-bottom:10px;
  align-items:flex-start;
}

.info-item img{
  width:45px;
}

.info-item p{
  font-size:14px;
  color:#888;
  line-height:1.3em;
}

.summary{
  margin-top:40px;
}

.summary p{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    margin-bottom:15px;
}
.form-row{
  display:flex;
  gap:15px;
}

.form-row .form-group{
  flex:1;
}
.custom-donation{
  margin-top:20px;
}

.custom-donation input{
  width:100%;
  height:40px;
  border:2px solid #DADADA;
  border-radius:10px;
  padding:0 15px;
  font-size:18px;
  text-align:center;
}

.custom-donation small{
  display:block;
  margin-top:0px;
  color:#777;
  font-size:12px;
}
.step-actions{
  display:flex;
  gap:15px;
  margin-top:15px;
}

.secondary-btn{
  width:140px;
  height:65px;
  border:2px solid #00abec;
  border-radius:40px;
  background:#fff;
  color:#00abec;
  cursor:pointer;
  font-size:18px;
  font-weight:600;
}

.step-actions .main-btn{
  flex:1;
  margin-top:0;
}
.form-row.document-row .form-group:first-child{
    flex: 0 0 40%;
}

.form-row.document-row .form-group:last-child{
    flex: 0 0 calc(60% - 15px);
}
.form-group select{
    width:100%;
    height:35px;
    border:2px solid #DADADA;
    border-radius:10px;
    padding:0 10px;
    font-size:16px;
    background:#fff;
    color:#555;
}
.step-actions{
    display:flex;
    gap:12px;
    margin-top:20px;
}

.secondary-btn{
    width:120px;
    height:50px;
    border:2px solid #00abec;
    border-radius:30px;
    background:#fff;
    color:#00abec;
    font-size:18px;
    font-weight:600;
}

.step-actions .main-btn{
    flex:1;
    height:50px;
    margin-top:0;
    font-size:18px;
}
@media(max-width:767px){
.step-actions{
    flex-direction:column;
  }

  .secondary-btn{
    width:100%;
    height:55px;
  }
  .donation-wrapper{
    justify-content: center;
   /* min-height:950px;*/
  }

  .donation-card{
    width:90%;
    padding:30px;
    margin:auto;
  }

  .donation-card h2{
    font-size:30px;
  }

  .donation-card h3{
    font-size:20px;
  }

  .circle{
    width:30px;
    height:30px;
    font-size:16px;
  }

  .step-line{
    width:35px;
  }

  .amounts{
    flex-direction:column;
  }
  .main-btn{
    font-size:20px;
    height:55px;
  }
  .form-row.document-row{
    flex-direction:column;
    gap:0;
  }


}
.error-message{
  color:#E55672;
  font-size:14px;
  margin-top:8px;
}

.input-error{
  border:2px solid #E55672 !important;
}
.main-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.main-btn img{
  width:28px;
  height:auto;
}