/* Donation layout */
.donation-width-limit {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.donation-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;

  @media (width >= 768px) {
    /* At desktop, size the row to its widest child so the amount grid and Custom
       Donation end up the same intrinsic width instead of Custom Donation
       stretching to viewport. */
    grid-template-columns: auto;
    justify-content: center;
    gap: 0.75rem;
  }
}

#donation-v2-amounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(9rem, 1fr));
  gap: 0.5rem;

  @media (width >= 768px) {
    /* Restore the desktop 3-col amount grid; .btn { min-width: 189px } below keeps
       buttons at their original ~189px width on >=768px viewports. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile only: override the global .btn { min-width: 189px } so the 9rem track
   floor above actually constrains the amount grid (otherwise tracks collapse
   below label content at <410px viewports and pills overlap). */
#donation-v2-amounts .btn {
  margin: 0 !important;
  min-width: 0;

  @media (width >= 768px) {
    min-width: 189px;
  }
}

.donation-row .custom-control-inline {
  display: block;
  width: 100%;
  margin-right: 0;
  margin-bottom: 0 !important;
  padding-left: 0;
}

.donation-row .custom-control-inline a.btn {
  display: block;
  width: 100%;
  padding: 1rem !important;
  text-align: center;
}

/* Centre text headers per candidate-page policy */
.donation .headline,
.donation h3.h4 {
  text-align: center;
}

/* Donation controls */
.donation-v2-amounts .custom-control,
.blog-filter .custom-control,
.donation-v2-electorate-amounts .custom-control {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
}

/* Hide the NationBuilder "Other" amount option; the Custom Donation link
   covers that path, so the pill is redundant. */
#donation-v2-amounts .custom-control:has([id^="donation_amount_other"]) {
  display: none;
}

#donation-v2-amounts .custom-control {
  width: auto;
  margin: 0;
  padding-left: 0;
}

@media (width >= 992px) {
  .donation-v2-amounts .custom-control,
  .blog-filter .custom-control,
  .donation-v2-electorate-amounts .custom-control {
    display: inline-block;
    width: 50%;
    margin-right: 0;
  }
}

.donation-v2-amounts label.btn,
.blog-filter label.btn,
.blog-filter a.btn,
.donation-v2-electorate-amounts label.btn {
  width: 100%;
  min-height: unset;
  margin-bottom: 0.5rem;
}

#donation-v2-amounts .custom-control-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  margin: 0;
  padding: 0.625rem 3.125rem;
  border: 0;
  border-radius: 2.5rem;
  background: var(--brand-purple);
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-align: center;
}

@media (width >= 992px) {
  .donation-v2-amounts label.btn,
  .blog-filter label.btn,
  .blog-filter a.btn,
  .donation-v2-electorate-amounts label.btn {
    width: calc(100% - 0.5rem);
  }
}

.donation-v2-amounts label::before,
.donation-v2-amounts label::after,
.blog-filter label::before,
.blog-filter label::after,
.blog-filter a::before,
.blog-filter a::after,
.donation-v2-electorate-amounts label::before,
.donation-v2-electorate-amounts label::after {
  display: none;
}

.donation-v2-amounts .custom-control-input:not(#donation_amount_other):checked ~ .custom-control-label,
.blog-filter .custom-control-input:not(#donation_amount_other):checked ~ .custom-control-label,
.donation-v2-electorate-amounts .custom-control-input:not(#donation_amount_other):checked ~ .custom-control-label {
  background-color: var(--color-1, var(--primary));
  color: var(--color-2, var(--secondary));
}