/* ===========================================================
   Commlyncx CIC — Zeffy donation embed styling
   Brands the wrapper around the Zeffy iframe so it matches
   the site's form cards. NOTE: the form *inside* the iframe
   is served by zeffy.com and is styled from the Zeffy
   dashboard (form builder) — it cannot be restyled from here
   due to cross-origin browser security.
   =========================================================== */

.zeffy{
  margin-top: 4px;
}

/* The framed container that visually holds the Zeffy form,
   matching the site's input/card treatment. */
.zeffy__frame{
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--sh-1);
  overflow: hidden;
  min-height: 560px;            /* keeps a stable box before the form paints */
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.zeffy__frame:focus-within{
  border-color: var(--leaf);
  box-shadow: 0 0 0 4px rgba(124,181,24,.15);
}

/* Zeffy's script injects its own iframe here; let it size itself. */
.zeffy__embed{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100% !important;
}
.zeffy__embed iframe{
  display: block;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: var(--r-md);
}

/* Fallback iframe (only shown if the script fails). No black box. */
.zeffy__iframe{
  display: block;
  width: 100%;
  min-height: 720px;            /* tall enough for amount -> continue -> next steps */
  border: 0;
  background: transparent;
  border-radius: var(--r-md);
}

/* Branded loading state, sits under the form and is covered
   the moment Zeffy paints its iframe on top. */
.zeffy__loading{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background:#fff;
  color: var(--slate);
  text-align: center;
  padding: 24px;
}
.zeffy__loading p{
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--forest);
  letter-spacing: .01em;
}
.zeffy__spinner{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3.5px solid var(--mist-2);
  border-top-color: var(--leaf);
  animation: zeffy-spin .8s linear infinite;
}
.MuiBox-root .css-1fexnh6{
max-width: 100% !important;
}
@keyframes zeffy-spin{ to{ transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce){
  .zeffy__spinner{ animation-duration: 2s }
}

/* Reassurance line beneath the frame — mirrors .ff__note. */
.zeffy__note{
  font-size: .83rem;
  color: var(--slate);
  margin: 14px 0 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.55;
}
.zeffy__note svg{
  width: 15px;
  height: 15px;
  color: var(--leaf);
  flex: none;
  margin-top: 3px;
}

@media (max-width: 640px){
  .zeffy__frame{ min-height: 620px }
  .zeffy__iframe{ min-height: 760px }
}