/* Pagina: Donazioni (donazioni.html) */

.donation-wrap { max-width: 900px; margin-inline: auto; text-align: center; padding-top: var(--space-4); }

.donation-wrap p { max-width: 40ch; margin: 0 auto var(--space-6); font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + .6vw, 2rem); line-height: 1; }

.amount-row { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-8) 0; }

.amount-btn, .custom-amount { min-width: 110px; min-height: 82px; border-radius: var(--radius-lg); border: 0; background: #1f1f23; color: white; font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + .8vw, 2.2rem); padding: 0 1rem; box-shadow: var(--shadow-sm); }

.amount-btn { cursor: pointer; transition: transform var(--transition), background var(--transition); }

.amount-btn:hover, .amount-btn.active { background: var(--color-primary); transform: translateY(-2px); }

.custom-amount { width: 140px; text-align: center; appearance: textfield; }

.custom-amount::-webkit-outer-spin-button, .custom-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.donation-form { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: center; margin: var(--space-8) 0 var(--space-16); }

.donation-form input { min-height: 78px; border-radius: var(--radius-full); border: 4px solid var(--color-accent-soft); background: white; padding: 0 1.5rem; text-align: center; font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + .8vw, 2.2rem); }

.submit-btn { min-height: 78px; border: 0; border-radius: var(--radius-full); background: var(--color-primary); color: #111; font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + .8vw, 2.2rem); cursor: pointer; transition: background var(--transition), transform var(--transition); }

.submit-btn:hover, .submit-btn:focus-visible { background: var(--color-primary-hover); transform: translateY(-1px); outline: none; }

.payment-options { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }

.pay-link { display: inline-flex; align-items: center; justify-content: center; min-width: 180px; padding: 1rem 1.25rem; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-sm); letter-spacing: .05em; text-transform: uppercase; }

.donation-note { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 55ch; margin-inline: auto; font-family: var(--font-body) !important; line-height: 1.5 !important; }

@media (max-width: 680px) {
  .donation-wrap { text-align: left; }
  .donation-wrap p { text-align: center; }
}

/* Bottone DOWNLOAD sopra l'immagine dell'artwork */
.donation-art {
  position: relative;
  container-type: inline-size; /* permette di usare "cqw" = 1% della larghezza dell'immagine */
}
.download-btn {
  position: absolute;
  left: 10%;
  top: 86.44%;
  width: 14.72%;
  height: 3.97%;
  padding-top: 0.5cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  border: 0.4cqw solid currentColor;
  border-radius: 2.5cqw / 2cqw;
  font-family: var(--font-display);
  font-size: 2.6cqw;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.download-btn:hover,
.download-btn:focus-visible {
  background: rgba(255, 255, 255, 0.45);
  transform: scale(1.06);
  outline: none;
}

/* Testo PayPal sopra la fascia gialla dell'immagine */
.donation-wrap .paypal-text {
  max-width: none; /* annulla il limite di .donation-wrap p */
  position: absolute;
  left: 0;
  width: 100%;
  top: 46.17%;
  height: 8.67%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 3.84cqw;
  font-weight: normal;
  line-height: 1;
  color: #000;
  white-space: nowrap;
}

/* Contatori sotto "N° DONAZIONI" e "DENARO" */
.donation-wrap .donation-stat {
  position: absolute;
  top: 61.14%; /* stessa altezza per entrambi: i due "1" e "EURO" stanno sulla stessa linea */
  transform: translateX(-50%);
  height: 8%;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 6.23cqw;
  font-weight: normal;
  line-height: 1;
  color: #000;
  white-space: nowrap;
}
.donation-count { left: 33.54%; }
.donation-money { left: 74.44%; }
.donation-unit { font-size: 0.63em; margin-left: 0.4em; position: relative; top: -0.04em; }