/* ==========================================================
   WLP – Formulaire de don (Stripe Embedded Checkout)
   Style aligné sur whatslifeproject.com (Archivo / Jost, rose WLP).
   Tout est préfixé .wlp-don pour ne pas toucher au reste du site.
   ========================================================== */
.wlp-don {
  --don-pink: var(--pink, #D53E81);
  --don-pink-soft: var(--pink-soft, #FBEAF2);
  --don-ink: var(--ink, #141114);
  --don-line: var(--line, #E7E1E4);
  --don-muted: var(--muted, #625B60);
  --don-dim: var(--dim, #8C858A);
  --don-field: #F5F4F5;
  font-family: var(--body, "Jost", "Helvetica Neue", Arial, system-ui, sans-serif);
  color: var(--don-ink);
  background: #fff;
  border-radius: var(--r, 14px);
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 56px 40px 44px;
  box-sizing: border-box;
  text-align: left;
}
.wlp-don *, .wlp-don *::before, .wlp-don *::after { box-sizing: border-box; }
.wlp-don [hidden] { display: none !important; }

/* Étapes numérotées */
.wlp-don__step + .wlp-don__step { margin-top: 44px; }
.wlp-don__step-title {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px;
  font-size: 17px; line-height: 1.3; font-weight: 400; color: var(--don-ink);
}
.wlp-don__num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--don-pink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}

/* Grille d'options (tuiles) */
.wlp-don__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wlp-don__opt {
  appearance: none;
  display: flex; align-items: center; gap: 14px;
  min-height: 50px; padding: 12px 16px;
  background: #fff; color: var(--don-muted);
  border: 1px solid var(--don-line);
  margin: 0 -1px -1px 0;
  font: inherit; font-size: 16px; text-align: left;
  cursor: pointer; position: relative;
  transition: background .15s, color .15s, border-color .15s;
}
.wlp-don__opt:hover { color: var(--don-ink); }
.wlp-don__opt[aria-pressed="true"] {
  background: var(--don-pink-soft); color: var(--don-pink);
  border-color: var(--don-pink); z-index: 1;
}
.wlp-don__opt:focus-visible { outline: 2px solid var(--don-pink); outline-offset: 2px; z-index: 2; }

.wlp-don__radio {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid #cfc8cc; position: relative;
}
.wlp-don__opt[aria-pressed="true"] .wlp-don__radio { border-color: var(--don-pink); }
.wlp-don__opt[aria-pressed="true"] .wlp-don__radio::after {
  content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px;
  border: solid var(--don-pink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}

/* Montants */
.wlp-don__opt--amount { min-height: 56px; }
.wlp-don__cur { font-size: 12px; letter-spacing: .02em; }
.wlp-don__val { font-size: 24px; font-weight: 500; color: var(--don-ink); line-height: 1; }
.wlp-don__opt[aria-pressed="true"] .wlp-don__val { color: var(--don-pink); }
.wlp-don__opt--custom input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 15px; color: var(--don-ink); padding: 0;
}
.wlp-don__opt--custom input::placeholder { color: var(--don-muted); }
.wlp-don__opt[aria-pressed="true"] input { font-size: 22px; font-weight: 500; color: var(--don-pink); }
.wlp-don__opt--custom input::-webkit-outer-spin-button,
.wlp-don__opt--custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wlp-don__opt--custom input[type=number] { -moz-appearance: textfield; }

.wlp-don__hint { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--don-dim); min-height: 1.5em; }

.wlp-don__val,
.wlp-don__opt[aria-pressed="true"] input,
.wlp-don__recap strong {
  font-family: var(--display, "Archivo", "Archivo Black", "Helvetica Neue", Arial, sans-serif);
  font-weight: 900; letter-spacing: -.01em;
}

/* Champs donateur */
.wlp-don__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wlp-don__field--full { grid-column: 1 / -1; }
.wlp-don__field input {
  width: 100%; height: 52px; padding: 0 16px;
  background: var(--don-field); border: 0; border-bottom: 1px solid var(--don-line);
  border-radius: 0; font: inherit; font-size: 16px; color: var(--don-ink);
  transition: border-color .15s, background .15s;
}
.wlp-don__field input::placeholder { color: var(--don-dim); }
.wlp-don__field input:focus { outline: none; background: #fff; border-bottom: 2px solid var(--don-pink); }
.wlp-don__field input[aria-invalid="true"] { border-bottom: 2px solid #c0262d; }

/* Bouton */
.wlp-don__submit {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 40px; padding: 18px 24px;
  border: 0; border-radius: 999px;
  background: var(--don-pink); color: #fff;
  font: inherit; font-size: 17px; font-weight: 500;
  cursor: pointer; transition: background .15s;
}
.wlp-don__submit:hover { background: var(--pink-deep, #B42B69); }
.wlp-don__submit:focus-visible { outline: 2px solid var(--don-ink); outline-offset: 3px; }
.wlp-don__submit[disabled] { opacity: .6; cursor: wait; }

.wlp-don__error { color: #c0262d; font-size: 14px; margin: 12px 0 0; min-height: 1em; }
.wlp-don__secure {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 12px 0 0; font-size: 13px; color: var(--don-dim); text-align: center;
}

/* Étape paiement */
.wlp-don__recap {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 18px; margin-bottom: 24px;
  background: var(--don-pink-soft); border: 1px solid var(--don-pink);
  color: var(--don-pink); font-size: 16px;
}
.wlp-don__recap strong { font-size: 20px; font-weight: 500; }
.wlp-don__back {
  appearance: none; border: 0; background: none; padding: 0;
  font: inherit; font-size: 14px; color: var(--don-ink); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}

@media (max-width: 560px) {
  .wlp-don { padding: 36px 20px 32px; border-radius: var(--rs, 8px); }
  .wlp-don__step + .wlp-don__step { margin-top: 36px; }
  .wlp-don__opt { padding: 12px; gap: 10px; font-size: 15px; }
  .wlp-don__val { font-size: 21px; }
  .wlp-don__fields { grid-template-columns: 1fr; }
}

/* Priorité sur les styles du site (ex. « .sp p { color: blanc } ») */
.wlp-don .wlp-don__step-title { color: var(--don-ink); }
.wlp-don .wlp-don__hint,
.wlp-don .wlp-don__secure { color: var(--don-dim); }
.wlp-don .wlp-don__error { color: #c0262d; }
.wlp-don .wlp-don__recap { color: var(--don-pink); }
.wlp-don p { text-align: left; }
.wlp-don .wlp-don__secure { justify-content: center; text-align: center; }

/* Mobile : 3 montants sur une ligne, montant libre sur toute la largeur */
@media (max-width: 560px) {
  .wlp-don [data-amounts] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wlp-don .wlp-don__opt--amount { justify-content: center; gap: 6px; padding: 12px 6px; }
  .wlp-don .wlp-don__opt--amount .wlp-don__radio { display: none; }
  .wlp-don .wlp-don__opt--custom { grid-column: 1 / -1; }
}