/* ============================================================
   DONATE POPUP MODAL
============================================================ */

#gift-modal {
  margin: auto;
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--cream);
  max-width: 30rem;
  width: 90vw;
  max-height: 85svh;   /* payment steps make this tall — let it scroll */
  overflow-y: auto;
  padding: var(--space-3);
}

#gift-modal::backdrop {
  background: rgb(15 13 9 / 0.75);
  backdrop-filter: blur(4px);
}

#modal-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  transition: color var(--t-fast) var(--ease);
}
#modal-close:hover { color: var(--gold); }

.modal-gift-name { font-family: var(--font-display); color: var(--gold); font-size: var(--step-1); font-weight: 700; margin: 0; }
.modal-gift-price { color: var(--cream); font-weight: 600; margin-block-end: var(--space-2); }
.modal-instructions { color: var(--muted); font-size: var(--text-sm); margin-block-end: var(--space-2); }

#pledge-form { display: grid; gap: var(--space-1); }
#pledge-form label { font-size: var(--text-sm); color: var(--muted); }
#pledge-form input {
  background: var(--ink);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  color: var(--cream);
  margin-block-end: var(--space-1);
}
#pledge-form button { margin-block-start: var(--space-1); }

#modal-thankyou { text-align: center; }
#modal-thankyou p { margin-block-end: var(--space-2); }

/* ---------- Payment instructions inside the modal ---------- */
.modal-pay {
  border-block: 1px solid var(--surface-2);
  padding-block: var(--space-2);
  margin-block-end: var(--space-2);
}
.modal-pay h3 { margin-block: 0 var(--space-1); font-size: var(--step-0); }

.modal-steps {
  margin: 0;
  padding-inline-start: 1.2rem;
  display: grid;
  gap: 0.5rem;
  font-size: var(--text-sm);
}

.modal-field-label {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
}
.modal-field {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.modal-field strong {
  font-size: var(--step-1);
  color: var(--gold);
  letter-spacing: 0.04em;
}

#modal-pay-amount { color: var(--gold); }

.modal-bank { margin-block-start: var(--space-2); }
.modal-bank summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--text-sm);
}
.modal-bank summary:hover { color: var(--gold); }
.modal-bank .bank-details { margin-block-start: var(--space-1); font-size: var(--text-sm); }

/* copied-state feedback (skip if components.css already defines this) */
.btn-copy.copied { color: var(--ink); background: var(--gold); border-color: var(--gold); }

.modal-drag-handle { user-select: none; }

/* ---------- Mobile refinements ---------- */
@media (max-width: 40rem) {
  #gift-modal {
    width: 94vw;
    max-height: 92svh;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
  }

  /* the ✕ needs a real thumb target */
  #modal-close {
    font-size: 1.75rem;
    padding: 0.25rem 0.6rem;
  }

  /* paybill + copy button wrap instead of overflowing */
  .modal-field { flex-wrap: wrap; }
  .modal-field strong { font-size: var(--step-0); }
}

@media (pointer: fine) {
  .modal-drag-handle { cursor: grab; }
  .modal-drag-handle.dragging { cursor: grabbing; }
}