/* Cambia estos 3 colores para adaptarlo a la identidad del ministerio */
.bolddon {
  --bd-primary: #b91f24;      /* color principal (botones / selección) */
  --bd-dark: #111111;         /* textos */
  --bd-soft: #f4f4f4;         /* fondos suaves */

  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 36px 32px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
  font-family: inherit;
  color: var(--bd-dark);
  text-align: center;
  box-sizing: border-box;
}
.bolddon *, .bolddon *::before, .bolddon *::after { box-sizing: border-box; }

/* !important para que el tema / Nicepage no cambie los colores del formulario */
.bolddon .bolddon__title { margin: 0 0 8px; font-size: 28px; line-height: 1.2; font-weight: 800; color: var(--bd-dark) !important; }
.bolddon .bolddon__sub { margin: 0 0 26px; font-size: 16px; line-height: 1.5; font-weight: 400; color: #555 !important; }

.bolddon__amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.bolddon__chip {
  appearance: none; cursor: pointer;
  padding: 16px 8px; border-radius: 14px;
  border: 2px solid #e2e2e2; background: var(--bd-soft);
  font: inherit; font-size: 18px; font-weight: 700; color: var(--bd-dark);
  transition: transform .15s, border-color .15s, background .15s, color .15s;
}
.bolddon__chip:hover { transform: translateY(-2px); border-color: var(--bd-primary); }
.bolddon__chip.is-active { background: var(--bd-primary); border-color: var(--bd-primary); color: #fff; box-shadow: 0 8px 20px var(--bd-shadow, rgba(185, 31, 36, .35)); }
.bolddon__chip--other { font-size: 15px; }

.bolddon__custom { margin-bottom: 18px; text-align: left; }
.bolddon__custom label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: #444; }
.bolddon__input { display: flex; align-items: center; gap: 8px; padding: 0 16px; border: 2px solid var(--bd-primary); border-radius: 14px; background: #fff; }
.bolddon__input span { font-weight: 700; color: #777; }
.bolddon__input input { flex: 1; min-width: 0; border: 0 !important; outline: 0; box-shadow: none !important; padding: 16px 0 !important; font: inherit; font-size: 22px; font-weight: 700; background: transparent; color: var(--bd-dark); }

.bolddon__cta {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  width: 100%; padding: 18px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bd-primary); color: #fff !important; text-decoration: none !important;
  font: inherit; font-size: 19px; font-weight: 800; letter-spacing: .3px;
  box-shadow: 0 12px 28px var(--bd-shadow, rgba(185, 31, 36, .35));
  transition: transform .15s, filter .15s;
}
.bolddon__cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.bolddon__cta[disabled] { opacity: .7; cursor: wait; }
.bolddon__cta.is-loading::after { content: ""; width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: bolddon-spin .8s linear infinite; }
.bolddon__cta[hidden] { display: none; }
@keyframes bolddon-spin { to { transform: rotate(360deg); } }

.bolddon__msg { min-height: 20px; margin: 10px 0 0; font-size: 14px; color: #c0392b; }
.bolddon__bold { display: flex; flex-direction: column; align-items: center; }
.bolddon__bold:empty { display: none; }
.bolddon__hint { margin: 0 0 10px; font-size: 14px; color: #555; }

.bolddon__trust { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid #eee; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 13px; color: #666; }
.bolddon__trust li { margin: 0; }

/* Página de gracias */
.bolddon--thanks { max-width: 600px; padding: 44px 36px; border-top: 6px solid var(--bd-primary); }
/* el logo trae mucho espacio en blanco: se recorta al centro */
.bolddon__logo { display: block; width: 360px; max-width: 90%; height: auto; aspect-ratio: 2000 / 520; object-fit: cover; margin: 0 auto 22px; }
.bolddon__icon { font-size: 48px; margin-bottom: 10px; }
.bolddon--thanks .bolddon__title { font-size: 44px; font-weight: 900; letter-spacing: 1px; color: var(--bd-primary) !important; margin-bottom: 14px; }
.bolddon--thanks .bolddon__sub { font-size: 18px; line-height: 1.65; color: #333 !important; margin-bottom: 30px; }
.bolddon__sub strong { color: var(--bd-dark); font-weight: 800; }
.bolddon__ref { font-size: 13px; color: #8a8a8a !important; margin: -14px 0 24px; }

@media (max-width: 480px) {
  .bolddon { padding: 28px 18px; border-radius: 18px; }
  .bolddon__title { font-size: 24px; }
  .bolddon__amounts { grid-template-columns: repeat(2, 1fr); }
  .bolddon__chip { font-size: 17px; padding: 14px 6px; }
}

/* =========================================================
   Blindaje: el tema o Nicepage no pueden cambiar el color
   de los montos ni del botón (antes se veía gris).
   ========================================================= */
.bolddon button.bolddon__chip,
.bolddon button.bolddon__chip:focus { background: var(--bd-soft) !important; color: var(--bd-dark) !important; border: 2px solid #e2e2e2 !important; background-image: none !important; text-shadow: none !important; }
.bolddon button.bolddon__chip:hover { border-color: var(--bd-primary) !important; }
.bolddon button.bolddon__chip.is-active,
.bolddon button.bolddon__chip.is-active:hover,
.bolddon button.bolddon__chip.is-active:focus { background: var(--bd-primary) !important; border-color: var(--bd-primary) !important; color: #fff !important; }
.bolddon .bolddon__cta,
.bolddon .bolddon__cta:hover,
.bolddon .bolddon__cta:focus,
.bolddon .bolddon__cta:active,
.bolddon .bolddon__cta[disabled] { background: var(--bd-primary) !important; background-image: none !important; color: #fff !important; border: 0 !important; text-shadow: none !important; }
.bolddon .bolddon__cta[disabled] { opacity: .85; }

/* El botón oficial de Bold (gris) queda oculto: el botón rojo lo abre automáticamente */
.bolddon .bolddon__bold { position: absolute !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.bolddon .bolddon__bold.is-visible { position: static !important; width: auto; height: auto; overflow: visible; opacity: 1; pointer-events: auto; margin-top: 12px; }

.bolddon .bolddon__link { color: var(--bd-primary) !important; font-weight: 800; text-decoration: underline !important; white-space: nowrap; }