/* ================================================================
   DONATE MODAL — drop-in component
   ================================================================
   Styles specific to the donate modal in index.html — Anedot's
   donation form embedded via their official iframe embed mode
   (?embed=true), triggered from any Donate button site-wide via the
   Alpine.store('donateModal') defined in js/donate-modal.js. The
   modal shell itself (.modal, .modal__panel, .modal__close, etc.)
   lives in css/modal-base.css — link that file too, before this one.

   The panel uses modal-base.css's .modal__panel--frame variant: the
   panel's height is fixed and .modal__panel-header/-footer are
   pinned, so the iframe (filling 100% of the space left over) is the
   ONLY thing that scrolls — its own single, native scrollbar, not
   fought over with the panel's. See that class's comment for why.

   TO REUSE ON ANOTHER SITE:
     1. Copy this file, css/modal-base.css, js/donate-modal.js, and
        the donate modal markup block from index.html.
     2. Load Alpine.js, then js/donate-modal.js, then link
        modal-base.css followed by this file.
     3. Set DONATE_URL in js/donate-modal.js to your own Anedot (or
        other embeddable) donation page.
   ================================================================ */

.donate-modal__frame-wrap {
  flex: 1;
  min-height: 0; /* lets this flex child shrink below its content's
                     natural size — without it, the iframe would push
                     the panel taller instead of scrolling internally */
  width: 100%;
  overflow: hidden;
}

.donate-modal__frame-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}