/* The give/support overlay. Slides up from the bottom over whatever page opened it. */

body.has-sheet { overflow: hidden; }

.support { position: fixed; inset: 0; z-index: 50; }

.support__scrim {
  position: absolute;
  inset: 0;
  background: rgba(27, 42, 65, 0.72);
  opacity: 0;
  transition: opacity 200ms ease;
}
.support.is-open .support__scrim { opacity: 1; }

.support__panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(430px, 100%);
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--pwr-white);
  padding: 0 24px 32px;
  transform: translate(-50%, 100%);
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.support.is-open .support__panel { transform: translate(-50%, 0); }

.support__bar {
  height: var(--bar-edge);
  background: var(--pwr-hot-pink);
  margin: 0 -24px 20px;
}

.support__close {
  position: absolute;
  top: 20px;
  right: 18px;
  width: 36px;
  height: 36px;
  padding: 9px;
  background: var(--pwr-grey-100);
  color: var(--pwr-navy);
}
.support__close:hover { background: var(--pwr-grey-300); }
.support__close svg { width: 100%; height: 100%; }

.support__head { padding-right: 44px; }
.support__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-accent-on-light);
}
.support__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--type-headline);
  line-height: var(--leading-headline);
  color: var(--pwr-navy);
  text-transform: uppercase;
  margin: 12px 0 0;
}
.support__blurb {
  margin: 8px 0 0;
  font-size: var(--type-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

/* --- Zelle block --- */
.support__zelle {
  position: relative;
  margin-top: 22px;
  border: 2px solid var(--pwr-hot-pink);
  padding: 26px 20px 20px;
  text-align: center;
}
.support__preferred {
  position: absolute;
  top: -11px;
  left: 16px;
  background: var(--pwr-hot-pink);
  color: var(--pwr-white);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  padding: 4px 10px;
  text-transform: uppercase;
}
.support__qr {
  width: min(230px, 68%);
  height: auto;
  margin: 0 auto;
}
.support__scanhint {
  margin: 10px 0 18px;
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
  text-transform: uppercase;
}

.support__copy {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--pwr-navy);
  color: var(--pwr-white);
  text-align: left;
}
.support__copy:hover { background: var(--pwr-navy-800); }
.support__copy.is-copied { background: var(--state-do); }
.support__copy-label {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--pwr-soft-pink);
  flex: 0 0 auto;
}
.support__copy.is-copied .support__copy-label { color: var(--pwr-white); }
.support__copy-value {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}
.support__copy-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.support__copy-icon svg { width: 100%; height: 100%; }

.support__note {
  margin: 10px 0 0;
  font-size: var(--type-caption);
  color: var(--text-secondary);
  line-height: var(--leading-tight);
}

/* --- membership --- */
.support__member {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
  background: var(--pwr-grey-100);
  color: var(--pwr-navy);
}
.support__member:hover { background: var(--pwr-pink-050); color: var(--pwr-navy); }
.support__member-icon { width: 24px; height: 24px; flex: 0 0 auto; color: var(--pwr-hot-pink); }
.support__member-icon svg { width: 100%; height: 100%; }
.support__member-label {
  display: block;
  font-size: var(--type-body-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}
.support__member-note {
  display: block;
  margin-top: 3px;
  font-size: var(--type-caption);
  color: var(--text-secondary);
}

.support__legal {
  margin: 20px 0 0;
  text-align: center;
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--pwr-grey-500);
  text-transform: uppercase;
}