/* ============================================
   DPG Contribution Individual Page
   Minimal styling — fonts, colours, button only.
   No layout restructuring.
   ============================================ */


/* ============================================
   PAGE — top rule
   ============================================ */

.tn-contribution-individual-page {
  padding: 3rem 0 4rem !important;
}


/* ============================================
   PAGE TITLE
   ============================================ */

.tn-contribution-individual-page .tn-header-component__heading {
  margin: 0 0 2rem;
}


/* ============================================
   BENEFITS (sub-text)
   ============================================ */

.tn-contribution-individual-page .tn-header-component__sub-text h4 {
  font-size: var(--dpg-font-size-sm);
  letter-spacing: 0.18em;

}

.tn-contribution-individual-page .tn-header-component__sub-text ul {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tn-contribution-individual-page .tn-header-component__sub-text li {
  font-size: var(--dpg-font-size-base);
  color: var(--dpg-neutral-3);
  padding-left: 1rem;
  border-left: 2px solid var(--dpg-teal);
  line-height: 1.4;
}


/* ============================================
   CONTRIBUTION COMPONENT — remove card styling
   ============================================ */

.tn-contribution-individual-page .tn-contribution-component {
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tn-contribution-individual-page .tn-contribution-type-text {
  display: none !important;
}


/* ============================================
   INPUT GROUP
   ============================================ */

.tn-contribution-individual-page .input-group {
  display: table !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  background: none !important;
}

.tn-contribution-individual-page input.tn-amount {
  display: table-cell !important;
  font-size: var(--dpg-font-size-lg) !important;
  font-weight: 700 !important;
  color: var(--dpg-purple) !important;
  border: 1.5px solid var(--dpg-neutral-2) !important;
  border-left: none !important;
  border-radius: 0 4px 4px 0 !important;
  box-shadow: none !important;
  padding: 0.5rem 0.75rem !important;
  background: transparent !important;
  width: 140px !important;
}

.tn-contribution-individual-page input.tn-amount:focus {
  outline: none !important;
  box-shadow: none !important;
}


/* ============================================
   CTA BUTTON
   ============================================ */

.tn-contribution-individual-page #tn-contribution-submit {
  background-color: var(--dpg-teal) !important;
  color: var(--dpg-purple) !important;
  border: none !important;
  border-radius: 999px;
  padding: 0.75rem 2.5rem;
  font-weight: 700;
  font-size: var(--dpg-font-size-base);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
  display: inline-block;
  margin-top: 1.5rem;
}

.tn-contribution-individual-page #tn-contribution-submit:hover,
.tn-contribution-individual-page #tn-contribution-submit:focus,
.tn-contribution-individual-page #tn-contribution-submit:active {
  background-color: var(--dpg-purple) !important;
  color: var(--dpg-teal) !important;
  outline: none !important;
}

/* ============================================
   ONE-PAGE GIVING — Donate page
   Page class: .tn-one-page-giving-page
   ============================================ */


.tn-one-page-giving-page .tn-opg-form__container,
.tn-one-page-giving-page .tn-header-component {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Amount selection panel — remove all card/fieldset chrome ───────────────── */

/* The amount section is a <fieldset class="form-control"> — Bootstrap adds border + height */
.tn-one-page-giving-page .tn-has-button-selected.form-control {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  padding: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* Inner Bootstrap panel card */
.tn-one-page-giving-page .tn-opg-form__amount-input-panel {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide the verbose heading ("Select a donation amount or enter a custom amount") */
.tn-one-page-giving-page .tn-opg-form__amount-input-panel .panel-heading {
  display: none !important;
}

.tn-one-page-giving-page .tn-opg-form__amount-input-panel .panel-body {
  padding: 0 !important;
}

/* ── Two-column field pairing (desktop only) ─────────────────────────────────── */

@media (min-width: 768px) {
  /* Both contact and billing fieldsets become 2-col grids */
  .tn-one-page-giving-page .tn-fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }

  /* Legend + subtext always span full width */
  .tn-one-page-giving-page .tn-fieldset .tn-legend,
  .tn-one-page-giving-page .tn-fieldset .tn-legend-subtext {
    grid-column: 1 / -1;
  }

  /* Contact: email full width; first + last auto-place into cols 1 and 2 */
  .tn-one-page-giving-page [data-control-group-for="GivingPageContact.EmailAddress"] {
    grid-column: 1 / -1;
  }

  /* Billing: Line 1 + Line 2 auto-place side by side.
     City + Postcode: DOM order is City → Country → Postcode, so use `order`
     to pull Postcode up next to City, then Country sits below full-width. */
  .tn-one-page-giving-page [data-control-group-for="GivingPageBillingAddress.City"] {
    order: 4;
  }
  .tn-one-page-giving-page [data-control-group-for="GivingPageBillingAddress.PostalCode"] {
    order: 5;
  }
  .tn-one-page-giving-page [data-control-group-for="GivingPageBillingAddress.CountryId"] {
    order: 6;
    grid-column: 1 / -1;
  }
  .tn-one-page-giving-page [data-control-group-for="GivingPageBillingAddress.StateId"] {
    order: 7;
    grid-column: 1 / -1;
  }
}