/* =========================================================
   HII donation modal
   ========================================================= */

html.hii-donation-modal-is-open,
body.hii-donation-modal-is-open {
  overflow: hidden;
}

.hii-donation-modal[hidden] {
  display: none;
}

.hii-donation-modal {
  position: fixed;
  inset: 0;
z-index: 2147483647;

  display: grid;
  place-items: center;

  padding: 24px;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.hii-donation-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.hii-donation-modal__backdrop {
  position: absolute;
  inset: 0;

  background: rgba(33, 27, 22, 0.68);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.hii-donation-modal__dialog {
  position: relative;
  z-index: 1;

  width: min(100%, 860px);
  max-height: calc(100vh - 48px);

  overflow-y: auto;
  overscroll-behavior: contain;

  padding: clamp(24px, 4vw, 48px);

  background: var(--paper);
  border: 1px solid rgba(33, 27, 22, 0.18);
  border-radius: 22px;

  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, 0.28);

  transform:
    translateY(18px)
    scale(0.985);

  transition:
    transform 220ms ease;

  outline: none;
}

.hii-donation-modal.is-open
.hii-donation-modal__dialog {
  transform:
    translateY(0)
    scale(1);
}


/* =========================================================
   Close button
   ========================================================= */

.hii-donation-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;

  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid rgba(33, 27, 22, 0.2);
  border-radius: 999px;

  background: transparent;
  color: var(--ink);

  font: inherit;
  font-size: 30px;
  line-height: 1;

  cursor: pointer;

  transition:
    background-color 150ms ease,
    transform 150ms ease;
}

.hii-donation-modal__close:hover {
  background: var(--brand-yellow);
  transform: rotate(3deg);
}

.hii-donation-modal__close:focus-visible,
.hii-donation-modal__method-button:focus-visible,
.hii-donation-modal__settings-button:focus-visible,
.hii-donation-modal__copy-button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}


/* =========================================================
   Header
   ========================================================= */

.hii-donation-modal__header {
  max-width: 680px;

  margin:
    0
    auto
    26px;

  padding-right: 48px;
}

.hii-donation-modal__eyebrow {
  margin:
    0
    0
    8px;

  color: #6f6f6f;

  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hii-donation-modal__title {
  margin:
    0
    0
    14px;

  color: var(--ink);

  font-size:
    clamp(
      2rem,
      5vw,
      3.4rem
    );

  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.045em;
}

.hii-donation-modal__intro {
  margin: 0;

  color: #3f3f3f;

  font-size: 1rem;
  line-height: 1.65;
}


/* =========================================================
   Donation-method switch
   ========================================================= */

.hii-donation-modal__method-switch {
  width: min(100%, 680px);

  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 4px;

  margin:
    0
    auto
    28px;

  padding: 4px;

  border:
    1px solid
    rgba(33, 27, 22, 0.18);

  border-radius: 999px;

  background:
    rgba(33, 27, 22, 0.055);
}

.hii-donation-modal__method-button {
  min-width: 0;

  padding:
    12px
    18px;

  border: 0;
  border-radius: 999px;

  background: transparent;
  color: var(--ink);

  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.2;

  cursor: pointer;

  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.hii-donation-modal__method-button:hover {
  background:
    rgba(255, 255, 255, 0.66);
}

.hii-donation-modal__method-button.is-active {
  background: var(--brand-yellow);

  box-shadow:
    0 2px 8px
    rgba(33, 27, 22, 0.12);
}

.hii-donation-modal__method-button:active {
  transform: scale(0.985);
}


/* =========================================================
   Donation panels
   ========================================================= */

.hii-donation-modal__panel {
  width: 100%;
}

.hii-donation-modal__panel[hidden] {
  display: none;
}

.hii-donation-modal__panel.is-active {
  animation:
    hii-donation-panel-in
    180ms ease;
}

@keyframes hii-donation-panel-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   Online donation status
   ========================================================= */

.hii-donation-modal__status {
  max-width: 680px;

  margin:
    0
    auto
    24px;

  padding: 22px;

  border:
    1px solid
    rgba(33, 27, 22, 0.18);

  border-radius: 14px;

  background: #ffffff;
  color: var(--ink);
}

.hii-donation-modal__status[hidden] {
  display: none;
}

.hii-donation-modal__status p {
  margin: 0;
  line-height: 1.55;
}

.hii-donation-modal__settings-button {
  margin-top: 16px;

  padding:
    12px
    18px;

  border: 1px solid var(--ink);
  border-radius: 999px;

  background: var(--brand-yellow);
  color: var(--ink);

  font: inherit;
  font-weight: 650;

  cursor: pointer;

  transition:
    background-color 150ms ease,
    transform 150ms ease;
}

.hii-donation-modal__settings-button:hover {
  background: #ffe56c;
  transform: translateY(-1px);
}

.hii-donation-modal__widget {
  width: 100%;
  min-height: 120px;
}

.hii-donation-modal__widget[hidden] {
  display: none;
}


/* =========================================================
   Bank-transfer panel
   ========================================================= */

.hii-donation-modal__panel--bank {
  width: min(100%, 680px);
  margin: 0 auto;
}

.hii-donation-modal__bank-intro {
  margin:
    0
    0
    22px;
}

.hii-donation-modal__panel-title {
  margin:
    0
    0
    10px;

  color: var(--ink);

  font-size:
    clamp(
      1.4rem,
      3vw,
      1.9rem
    );

  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.hii-donation-modal__bank-intro p {
  margin: 0;

  color: #4b4b4b;

  font-size: 0.98rem;
  line-height: 1.6;
}

.hii-donation-modal__bank-details {
  display: grid;
  gap: 0;

  margin: 0;

  border:
    1px solid
    rgba(33, 27, 22, 0.16);

  border-radius: 16px;

  overflow: hidden;

  background: #ffffff;
}

.hii-donation-modal__bank-row {
  display: grid;

  grid-template-columns:
    minmax(130px, 0.8fr)
    minmax(0, 1.8fr);

  gap: 20px;

  align-items: center;

  padding:
    16px
    18px;

  border-bottom:
    1px solid
    rgba(33, 27, 22, 0.11);
}

.hii-donation-modal__bank-row:last-child {
  border-bottom: 0;
}

.hii-donation-modal__bank-row dt {
  margin: 0;

  color: #6f6f6f;

  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hii-donation-modal__bank-row dd {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin: 0;

  color: var(--ink);

  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.35;
}

.hii-donation-modal__bank-row
[data-hii-bank-value] {
  min-width: 0;

  overflow-wrap: anywhere;
  word-break: break-word;
}

.hii-donation-modal__copy-button {
  flex: 0 0 auto;

  padding:
    8px
    13px;

  border:
    1px solid
    rgba(33, 27, 22, 0.24);

  border-radius: 999px;

  background: transparent;
  color: var(--ink);

  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;

  cursor: pointer;

  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.hii-donation-modal__copy-button:hover {
  background:
    rgba(255, 217, 46, 0.38);

  border-color:
    var(--brand-yellow);
}

.hii-donation-modal__copy-button:active {
  transform: scale(0.97);
}

.hii-donation-modal__copy-button.is-copied {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
}

.hii-donation-modal__copy-button:disabled {
  cursor: default;
  opacity: 0.8;
}

.hii-donation-modal__bank-note {
  margin-top: 20px;

  padding:
    16px
    18px;

  border-left:
    4px solid
    var(--brand-yellow);

  background:
    rgba(255, 217, 46, 0.12);

  color: #4b4b4b;

  font-size: 0.88rem;
  line-height: 1.55;
}

.hii-donation-modal__bank-note p {
  margin: 0;
}

.hii-donation-modal__bank-note p + p {
  margin-top: 8px;
}


/* =========================================================
   Footer
   ========================================================= */

.hii-donation-modal__footer {
  max-width: 680px;

  margin:
    28px
    auto
    0;

  padding-top: 18px;

  border-top:
    1px solid
    rgba(33, 27, 22, 0.14);

  color: #6f6f6f;

  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}

.hii-donation-modal__footer p {
  margin: 0;
}


/* =========================================================
   Tamaro visual integration
   These rules alter presentation only, not widget content.
   ========================================================= */

.hii-donation-modal {
  --tamaro-primary-bg-color:
    var(--paper);

  --tamaro-primary-color:
    var(--ink);

  --tamaro-button-border-color:
    var(--ink);

  --tamaro-text-color:
    var(--ink);

  --tamaro-link-color:
    var(--ink);

  --tamaro-checkable-color__checked:
    var(--brand-yellow);

  --tamaro-block-header-position-bg-color:
    var(--paper);

  --tamaro-block-header-position-color:
    var(--ink);

  --tamaro-button-primary-bg-color:
    var(--brand-yellow);

  --tamaro-button-primary-bg-color__hover:
    #ffe56c;

  --tamaro-button-primary-color:
    var(--ink);

  --tamaro-button-primary-color__hover:
    var(--ink);

  --tamaro-input-bg-color:
    #ffffff;
}

.hii-donation-modal
#tamaro-widget.tamaro-widget
.label-radio-block,
.hii-donation-modal
#tamaro-widget.tamaro-widget
.label-checkbox-block {
  background: transparent;

  border-color:
    rgba(33, 27, 22, 0.18);
}

.hii-donation-modal
#tamaro-widget.tamaro-widget
.label-radio-block:hover:not(.input-disabled),
.hii-donation-modal
#tamaro-widget.tamaro-widget
.label-checkbox-block:hover:not(.input-disabled) {
  background:
    rgba(33, 27, 22, 0.035);
}

.hii-donation-modal
#tamaro-widget.tamaro-widget
.selected.label-radio-block,
.hii-donation-modal
#tamaro-widget.tamaro-widget
.selected.label-checkbox-block {
  background: transparent;

  border-color:
    var(--brand-yellow)
    !important;

  box-shadow:
    none
    !important;
}

.hii-donation-modal
#tamaro-widget.tamaro-widget
.selected
.md-checkable-icon-wrapper
.md-outer-circle {
  fill:
    var(--paper)
    !important;

  stroke:
    var(--brand-yellow)
    !important;

  stroke-width:
    2px
    !important;
}

.hii-donation-modal
#tamaro-widget.tamaro-widget
.selected
.md-checkable-icon-wrapper
.md-inner-circle {
  fill:
    var(--brand-yellow)
    !important;
}

.hii-donation-modal
#tamaro-widget.tamaro-widget
.selected
.md-checkable-icon-wrapper
.md-check {
  fill:
    var(--brand-yellow)
    !important;

  stroke:
    var(--brand-yellow)
    !important;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {

  .hii-donation-modal {
    align-items: end;
    padding: 0;
  }

  .hii-donation-modal__dialog {
    width: 100%;
    max-height: 94dvh;

    padding:
      28px
      16px
      24px;

    border-right: 0;
    border-bottom: 0;
    border-left: 0;

    border-radius:
      22px
      22px
      0
      0;
  }

  .hii-donation-modal__header {
    margin-bottom: 22px;
    padding-right: 46px;
  }

  .hii-donation-modal__title {
    font-size: 2.35rem;
  }

  .hii-donation-modal__method-switch {
    margin-bottom: 22px;
  }

  .hii-donation-modal__method-button {
    padding:
      11px
      10px;

    font-size: 0.84rem;
  }

  .hii-donation-modal__bank-row {
    grid-template-columns: 1fr;
    gap: 7px;

    align-items: start;

    padding:
      15px
      16px;
  }

  .hii-donation-modal__bank-row dd {
    width: 100%;
  }

  .hii-donation-modal__copy-button {
    margin-left: auto;
  }

}

@media (max-width: 430px) {

  .hii-donation-modal__title {
    font-size: 2rem;
  }

  .hii-donation-modal__intro {
    font-size: 0.94rem;
  }

  .hii-donation-modal__bank-row dd {
    align-items: flex-start;
  }

}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .hii-donation-modal,
  .hii-donation-modal__dialog,
  .hii-donation-modal__close,
  .hii-donation-modal__method-button,
  .hii-donation-modal__settings-button,
  .hii-donation-modal__copy-button {
    transition: none;
  }

  .hii-donation-modal__panel.is-active {
    animation: none;
  }

}
/* =========================================================
   Floating donation button
   ========================================================= */

.support-floating-donation-button {
  position: fixed;
right: clamp(18px, 3vw, 34px);

bottom: calc(
  clamp(18px, 3vw, 30px) +
  var(--hii-footer-overlap, 0px)
);

z-index: 2147483646;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 54px;

  margin: 0;
  padding: 14px 21px;

  border: 1px solid var(--ink, #211b16);
  border-radius: 999px;

  appearance: none;
  -webkit-appearance: none;

  background: var(--brand-yellow, #ffd92e);
  color: var(--ink, #211b16);

  box-shadow:
    0 12px 28px
    rgba(33, 27, 22, 0.2);

  font: inherit;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1;

  text-decoration: none;

  cursor: pointer;

  transition:
    bottom 120ms ease,
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.support-floating-donation-button:hover {
  background: #ffe56c;

  box-shadow:
    0 16px 34px
    rgba(33, 27, 22, 0.24);

  transform: translateY(-2px);
}

.support-floating-donation-button:active {
  transform:
    translateY(0)
    scale(0.985);
}

.support-floating-donation-button:focus-visible {
  outline: 3px solid var(--ink, #211b16);
  outline-offset: 4px;
}

.support-floating-donation-button__label {
  display: block;
}

.support-floating-donation-button__arrow {
  display: block;

  font-size: 1.15rem;
  line-height: 1;

  transition: transform 160ms ease;
}

.support-floating-donation-button:hover
.support-floating-donation-button__arrow {
  transform: translateX(3px);
}

body.hii-donation-modal-is-open
.support-floating-donation-button {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 700px) {

  .support-floating-donation-button {
    right: 14px;
    bottom: 14px;

    min-height: 50px;

    padding: 12px 17px;
  }

}

@media (prefers-reduced-motion: reduce) {

  .support-floating-donation-button,
  .support-floating-donation-button__arrow {
    transition: none;
  }

}

/* Keep the donation modal above the sticky site header. */
html.hii-donation-modal-is-open header,
body.hii-donation-modal-is-open header,
html.hii-donation-modal-is-open .site-header,
body.hii-donation-modal-is-open .site-header {
  z-index: 0 !important;
}

.hii-donation-modal {
  position: fixed;
  inset: 0;
  z-index: 100000 !important;
}