/* Duplicated from the Hear International theme donation panel, button atom,
   and donate/hero placement rules. Theme tokens are used when present. */

.donation-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-scale-13, 13px);
  width: 100%;
  max-width: 414px;
  margin-left: auto;
  margin-right: auto;
  padding: 42px var(--space-scale-18, 18px) 34px;
  background-color: var(--color-prussian-blue, #0C1C36);
  border-radius: var(--radius-block, 20px);
  box-sizing: border-box;
}

.donation-panel__heading {
  margin: 0;
  font-family: var(--type-panel-heading-family, "Inter", sans-serif);
  font-weight: var(--type-panel-heading-weight, 700);
  font-size: var(--type-panel-heading-size, 26px);
  line-height: var(--type-panel-heading-line-height, 1.2);
  letter-spacing: var(--type-panel-heading-letter-spacing, -0.26px);
  color: var(--color-parchment, #F2F2EE);
  text-align: center;
}

.donation-panel__frequency {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}

.donation-panel__freq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin: 0;
  padding: var(--space-scale-13, 13px) 27px;
  border: var(--space-border-regular, 1.5px) solid var(--color-inactive-gray, #bababa);
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  font-family: var(--type-amount-label-family, "Inter", sans-serif);
  font-weight: var(--type-amount-label-weight, 400);
  font-size: clamp(1rem, 2.5vw, var(--type-amount-label-size, 24px));
  line-height: var(--type-amount-label-line-height, 1);
  letter-spacing: var(--type-amount-label-letter-spacing, -0.48px);
  color: var(--color-inactive-gray, #bababa);
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.donation-panel__freq.is-active {
  border-color: var(--color-parchment, #F2F2EE);
  background-color: var(--color-parchment, #F2F2EE);
  color: var(--color-prussian-blue, #0C1C36);
}

.donation-panel__subcopy {
  margin: 0;
  font-family: var(--type-caption-xs-family, "Inter", sans-serif);
  font-weight: var(--type-caption-xs-weight, 400);
  font-size: var(--type-caption-xs-size, 12px);
  line-height: var(--type-caption-xs-line-height, 1.46);
  letter-spacing: var(--type-caption-xs-letter-spacing, -0.12px);
  text-align: center;
  color: var(--color-parchment, #F2F2EE);
}

.donation-panel__custom {
  display: flex;
  align-items: center;
  gap: var(--space-scale-8, 8px);
  min-height: 50px;
  padding: 11px var(--space-scale-18, 18px) 14px var(--space-scale-18, 18px);
  border: var(--space-border-thin, 1px) solid var(--color-parchment, #F2F2EE);
  border-radius: var(--radius-pill, 999px);
  box-sizing: border-box;
}

.donation-panel__custom-prefix {
  flex-shrink: 0;
  font-family: var(--type-amount-label-family, "Inter", sans-serif);
  font-weight: var(--type-amount-label-weight, 400);
  font-size: var(--type-amount-label-size, 24px);
  line-height: var(--type-amount-label-line-height, 1);
  letter-spacing: var(--type-amount-label-letter-spacing, -0.48px);
  color: var(--color-parchment, #F2F2EE);
}

.donation-panel__custom-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--type-amount-label-family, "Inter", sans-serif);
  font-weight: var(--type-amount-label-weight, 400);
  font-size: var(--type-amount-label-size, 24px);
  line-height: var(--type-amount-label-line-height, 1);
  letter-spacing: var(--type-amount-label-letter-spacing, -0.48px);
  color: var(--color-parchment, #F2F2EE);
  -webkit-appearance: none;
  appearance: none;
}

.donation-panel__custom-input:focus {
  outline: none;
}

.donation-panel__submit {
  margin-top: var(--space-scale-10, 10px);
}

.donation-panel__trust {
  margin: var(--space-scale-10, 10px) 0 0;
  font-family: var(--type-body-sm-family, "Inter", sans-serif);
  font-weight: var(--type-body-sm-weight, 400);
  font-size: var(--type-body-sm-size, 14px);
  line-height: var(--type-body-sm-line-height, 1.46);
  letter-spacing: var(--type-body-sm-letter-spacing, 0);
  text-align: center;
  color: var(--color-parchment, #F2F2EE);
}

.donation-panel .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 52px;
  padding: 16px var(--space-button-padding-x, 32px);
  border: none;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--type-button-family, "Inter", sans-serif);
  font-weight: var(--type-button-weight, 400);
  font-size: var(--type-button-size, 12px);
  line-height: var(--type-button-line-height, 1.2);
  letter-spacing: var(--type-button-letter-spacing, -0.24px);
  text-transform: var(--type-button-transform, uppercase);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.donation-panel .btn--full {
  display: flex;
  width: 100%;
}

.donation-panel .btn--powder-blue {
  background-color: var(--color-powder-blue, #ACBEDA);
}

.donation-panel .btn--powder-blue:hover,
.donation-panel .btn--powder-blue:focus-visible {
  background-color: #9BABC4;
  background-color: color-mix(in srgb, var(--color-powder-blue, #ACBEDA) 90%, #000);
}

.donation-panel .btn--text-parchment {
  color: var(--color-parchment, #F2F2EE);
}

.donation-panel .btn--powder-blue.btn--text-parchment {
  color: var(--color-prussian-blue, #0C1C36);
}

.hero .donation-panel {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.donate .donation-panel {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 768px) and (max-width: 1100px) {
  .donation-panel__heading {
    font-size: 22px;
  }

  .donation-panel__freq {
    font-size: 18px;
  }

  .hero .donation-panel {
    margin-left: 0;
    margin-right: 0;
    max-width: 360px;
  }
}

@media (min-width: 1101px) {
  .hero .donation-panel {
    margin-left: 0;
    margin-right: 0;
    max-width: 360px;
  }

  .donate .donation-panel {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 768px) {
  .donate .donation-panel {
    min-width: 340px;
  }
}