/* ==========================================================================
   Modern styling for ALL CiviCRM contribution / donate pages.
   Scoped to .crm-contribution-main-form-block (the wrapper on every
   contribution page's main form) so every current + future donate page gets
   the look, and nothing else on CiviCRM is touched.
   The orange hero band is opt-in per page: it renders only where the page's
   Intro Text field contains the .donate-hero HTML (see intro_text rules below).
   Brand palette: orange #e47b02 / #ed8f0c, slate #1f2933, greys.
   ========================================================================== */

.crm-contribution-main-form-block {
  --brand:        #e47b02;
  --brand-hover:  #c96a00;
  --brand-soft:   #fff4e6;
  --ink:          #1f2933;
  --muted:        #52606d;
  --line:         #e4e7eb;
  --field-bg:     #ffffff;
  --card-bg:      #ffffff;
  --page-bg:      #f5f6f8;
  --radius:       12px;
  --shadow:       0 1px 2px rgba(31,41,51,.06), 0 8px 24px rgba(31,41,51,.06);

  max-width: 680px;
  margin: 0 auto;
  padding: 8px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- Force the light palette (fix black blocks in device dark mode) ----
   RiverLea ships an OS dark mode via `@media (prefers-color-scheme: dark)`
   that flips its --crm-* variables to dark. In dark mode --crm-page-bg-color
   goes near-black (fieldsets), and --crm-paper => --crm-table-bg-color goes
   near-black (public TABLES), so the payment/billing fieldsets AND the reCAPTCHA
   cell (it lives in a .form-layout-compressed table) rendered as black boxes on
   phones set to dark mode, hiding our dark --ink text.

   We PIN these on the outer CiviCRM container (.crm-container.crm-public), not
   the form block, because CiviCRM's JS relocates the .recaptcha-section to just
   before the submit button — which sits OUTSIDE .crm-contribution-main-form-block
   (the <form> wraps the block; the captcha ends up after the block). The
   container is an ancestor of everything CiviCRM renders, so the pins reach the
   captcha table wherever it lands. Gated with :has(.crm-contribution-main-form-block)
   so only contribution/donate pages are forced light, not the rest of CiviCRM.
   The design is fixed-light by intent, so this is correct in OS light + dark.
   Safe for the USAePay + reCAPTCHA iframes: they render their own documents, so
   these variables don't reach inside them. */
.crm-container.crm-public:has(.crm-contribution-main-form-block) {
  color-scheme: light;
  --crm-page-bg-color: #ffffff;
  --crm-f-fieldset-bg-color: transparent;
  --crm-container-bg-color: #ffffff;
  --crm-form-block-bg-color: #ffffff;
  --crm-paper: #ffffff;
  --crm-table-bg-color: #ffffff;
  --crm-table-header-bg-color: #ffffff;
  --crm-table-row-bg-color: #ffffff;
  --crm-layer1-bg-color: #f5f6f8;
  --crm-layer2-bg-color: #eef0f2;
  --crm-ink: #1f2933;
  --crm-text-color: #1f2933;
  --crm-heading-color: #1f2933;
}

/* Belt-and-suspenders: force the reCAPTCHA cell light directly (not via the
   RiverLea table variables), since CiviCRM's JS can relocate .recaptcha-section
   outside the styled form wrapper. The checkbox is a Google iframe with its own
   background, so this only affects the table cell behind it. */
.crm-container.crm-public .recaptcha-section,
.crm-container.crm-public .recaptcha-section table,
.crm-container.crm-public .recaptcha-section tr,
.crm-container.crm-public .recaptcha-section td {
  background: #ffffff !important;
}

/* ---- Card container ---------------------------------------------------- */
.crm-contribution-main-form-block {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 30px 32px;
  overflow: hidden; /* let the hero's rounded top corners clip cleanly */
}

/* ---- Hero header (HTML lives in the page's Intro Text field) -----------
   Opt-in per page: these strip the intro framing so the hero band can go
   full-bleed. Gated on :has(.donate-hero) so contribution pages WITHOUT the
   hero markup keep their normal intro text (label + spacing) intact. */
.crm-contribution-main-form-block .intro_text-section:has(.donate-hero) { margin: 0 !important; padding: 0 !important; }
.crm-contribution-main-form-block .intro_text-section:has(.donate-hero) > .label { display: none; }
.crm-contribution-main-form-block .intro_text-section:has(.donate-hero) > .content { margin: 0 !important; }

.crm-contribution-main-form-block .donate-hero {
  background: linear-gradient(135deg, #ed8f0c 0%, #e47b02 100%);
  color: #fff;
  text-align: center;
  /* break out of the card padding (top 28px, sides 30px) for a full-bleed band */
  margin: -28px -30px 26px;
  padding: 34px 28px 30px;
  border-radius: 12px 12px 0 0;
}
.crm-contribution-main-form-block .donate-hero-icon { font-size: 2rem; line-height: 1; }
.crm-contribution-main-form-block .donate-hero-title {
  color: #fff !important;
  background: none !important;
  border: 0 !important;
  margin: 10px 0 6px !important;
  padding: 0 !important;
  font-size: 1.7rem;
  font-weight: 800;
}
.crm-contribution-main-form-block .donate-hero-sub {
  color: #fff;
  opacity: .95;
  margin: 0 auto;
  max-width: 42ch;
  font-size: 1rem;
}
@media (max-width: 560px) {
  .crm-contribution-main-form-block .donate-hero { margin: -20px -16px 20px; padding: 26px 20px 24px; }
  .crm-contribution-main-form-block .donate-hero-title { font-size: 1.45rem; }
}

/* ---- Section rows: stack label above field ---------------------------- */
.crm-contribution-main-form-block .crm-section {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  display: block;
  float: none;
}
.crm-contribution-main-form-block .crm-section .label,
.crm-contribution-main-form-block .crm-section .content {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}
.crm-contribution-main-form-block .crm-section .label {
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  margin-bottom: 6px;
  display: block;
}
.crm-contribution-main-form-block .crm-section .label label { font-weight: 600; }
.crm-contribution-main-form-block .crm-section .description,
.crm-contribution-main-form-block .description {
  color: var(--muted);
  font-size: .85rem;
  margin-top: 4px;
}
.crm-contribution-main-form-block .clear { clear: both; }

/* ---- Form fields ------------------------------------------------------- */
.crm-contribution-main-form-block input[type="text"],
.crm-contribution-main-form-block input[type="email"],
.crm-contribution-main-form-block input[type="number"],
.crm-contribution-main-form-block input[type="password"],
.crm-contribution-main-form-block input[type="tel"],
.crm-contribution-main-form-block select,
.crm-contribution-main-form-block textarea,
.crm-contribution-main-form-block .crm-form-text,
.crm-contribution-main-form-block .select2-container .select2-choice {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font-size: 1rem;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.crm-contribution-main-form-block input[type="text"]:focus,
.crm-contribution-main-form-block input[type="email"]:focus,
.crm-contribution-main-form-block select:focus,
.crm-contribution-main-form-block textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(228,123,2,.15);
}
/* keep small inline fields (e.g. recur interval) from stretching full width */
.crm-contribution-main-form-block input.four,
.crm-contribution-main-form-block input.six,
.crm-contribution-main-form-block select.four { width: auto; max-width: 160px; }

/* ---- Amount options as a clean button grid ----------------------------
   Real markup: #priceset .contribution_amount-content > .price-set-row
     > .price-set-option-content > .crm-option-label-pair > input[radio] + label
   CiviCRM JS toggles .highlight on .crm-option-label-pair for the selection. */
.crm-contribution-main-form-block #priceset { margin-top: 6px; }
.crm-contribution-main-form-block #priceset > .label,
.crm-contribution-main-form-block .contribution_amount-section > .label { margin-bottom: 10px; }

.crm-contribution-main-form-block .contribution_amount-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.crm-contribution-main-form-block .contribution_amount-content .price-set-row {
  margin: 0 !important;
  flex: 1 1 140px;
  max-width: 220px;
}
.crm-contribution-main-form-block .price-set-option-content { display: block; }

.crm-contribution-main-form-block .contribution_amount-content .crm-option-label-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 66px;
  padding: 18px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
  font-size: 1.15rem;
  transition: all .15s ease;
}
.crm-contribution-main-form-block .contribution_amount-content .crm-option-label-pair:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
/* Hide the radio dot – the whole pill is the control */
.crm-contribution-main-form-block .contribution_amount-content .crm-option-label-pair input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.crm-contribution-main-form-block .contribution_amount-content .crm-option-label-pair label,
.crm-contribution-main-form-block .contribution_amount-content .crm-option-label-pair .crm-price-amount-label,
.crm-contribution-main-form-block .contribution_amount-content .crm-option-label-pair .crm-price-amount-amount {
  margin: 0 !important;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
}
/* Selected amount = solid brand fill (beat core's bold-black rule) */
.crm-contribution-main-form-block .contribution_amount-content .crm-option-label-pair.highlight {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(228,123,2,.28);
}
.crm-contribution-main-form-block .contribution_amount-content .crm-option-label-pair.highlight label,
.crm-contribution-main-form-block .contribution_amount-content .crm-option-label-pair.highlight .crm-price-amount-label,
.crm-contribution-main-form-block .contribution_amount-content .crm-option-label-pair.highlight .crm-price-amount-amount {
  color: #fff !important;
}

/* Other amount: its own row below the pills */
.crm-contribution-main-form-block .other_amount-section { clear: both; margin-top: 16px !important; }
.crm-contribution-main-form-block .other_amount-content input[type="text"],
.crm-contribution-main-form-block #price_7 { max-width: 220px; }

/* ---- Recurring ("give monthly") box ----------------------------------- */
.crm-contribution-main-form-block .is_recur-section {
  background: var(--brand-soft);
  border: 1px solid #f3d3a8;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* the empty label div forces desktop indentation – drop it */
.crm-contribution-main-form-block .is_recur-section > .label { display: none; }
.crm-contribution-main-form-block .is_recur-section > .content { margin: 0 !important; }
.crm-contribution-main-form-block .is_recur-section label { font-weight: 600; margin: 0; }
.crm-contribution-main-form-block .is_recur-section input.crm-form-text { max-width: 70px; }
.crm-contribution-main-form-block input[type="checkbox"],
.crm-contribution-main-form-block input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--brand);
  vertical-align: middle;
}

/* ---- Section headings -------------------------------------------------- */
.crm-contribution-main-form-block .header-dark,
.crm-contribution-main-form-block h2,
.crm-contribution-main-form-block h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 26px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
  background: none;
}

/* ---- Payment method chooser (Credit Card vs Check) --------------------
   Uses .crm-option-label-pair too, but never gets .highlight, so keep the
   real radio dot visible and lay the options out as simple pills. */
.crm-contribution-main-form-block .payment_processor-section > .label { margin-bottom: 8px; }
.crm-contribution-main-form-block .payment_processor-section > .content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.crm-contribution-main-form-block .payment_processor-section .crm-option-label-pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 18px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: all .15s ease;
}
.crm-contribution-main-form-block .payment_processor-section .crm-option-label-pair:hover {
  border-color: var(--brand);
}
.crm-contribution-main-form-block .payment_processor-section .crm-option-label-pair label {
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}
.crm-contribution-main-form-block .payment_processor-section input[type="radio"] {
  position: static;
  opacity: 1;
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

/* ---- Billing NAME & ADDRESS fields ONLY -------------------------------
   Scope strictly to the billing name/address group. Do NOT style
   #payment_information or the credit-card container (#usaepayjs-payment-container),
   which the RiverLea theme already handles and which was fine as-is. */

/* full-width text inputs inside billing name/address */
.crm-contribution-main-form-block .billing_name_address-section input[type="text"],
.crm-contribution-main-form-block .billing_name_address-section input[type="email"],
.crm-contribution-main-form-block .billing_name_address-section input[type="tel"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* the billing name/address fieldset: no border/box, tidy legend */
.crm-contribution-main-form-block .billing_name_address-group {
  margin: 0;
  padding: 0;
  border: 0;
}
.crm-contribution-main-form-block .billing_name_address-group > legend {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
}

/* 2-column grid for the name/address fields */
.crm-contribution-main-form-block .billing_name_address-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 0 !important;
  padding: 0 !important;
}
.crm-contribution-main-form-block .billing_name_address-section > .crm-section {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}
.crm-contribution-main-form-block .billing_name_address-section .label { margin-bottom: 4px; }
.crm-contribution-main-form-block .billing_name_address-section .clear { display: none; }
/* long fields span both columns */
.crm-contribution-main-form-block .billing_name_address-section [class*="billing_street_address"],
.crm-contribution-main-form-block .billing_name_address-section [class*="billing_email"] {
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .crm-contribution-main-form-block .billing_name_address-section {
    grid-template-columns: 1fr;
  }
}

/* ---- Submit / CTA button ---------------------------------------------- */
.crm-contribution-main-form-block .crm-submit-buttons {
  margin-top: 26px;
  display: flex;
  justify-content: center;
}
.crm-contribution-main-form-block .crm-submit-buttons .crm-button,
.crm-contribution-main-form-block .crm-submit-buttons input[type="submit"],
.crm-contribution-main-form-block .crm-submit-buttons button {
  background: var(--brand);
  background-image: linear-gradient(180deg, var(--brand-hover) 0%, var(--brand) 100%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: 14px 40px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(228,123,2,.32);
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  width: 100%;
  max-width: 360px;
}
.crm-contribution-main-form-block .crm-submit-buttons .crm-button:hover,
.crm-contribution-main-form-block .crm-submit-buttons input[type="submit"]:hover {
  background: var(--brand-hover);
  box-shadow: 0 8px 22px rgba(228,123,2,.40);
}
.crm-contribution-main-form-block .crm-submit-buttons .crm-button:active { transform: translateY(1px); }
/* CiviCRM wraps the label in a span with an icon – hide the default icon */
.crm-contribution-main-form-block .crm-submit-buttons .crm-i { display: none; }

/* ---- Misc cleanup ------------------------------------------------------ */
.crm-contribution-main-form-block .crm-marker { color: var(--brand); }
.crm-contribution-main-form-block .messages.status { border-radius: 10px; }
.crm-contribution-main-form-block fieldset { border: 0; padding: 0; margin: 0; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 560px) {
  .crm-contribution-main-form-block { padding: 20px 16px 24px; }
  .crm-contribution-main-form-block .price-set-row label { flex: 1 1 40%; }
}