/*
 * Modern field styling for public CiviCRM forms (subscription pages).
 *
 * - CSS only: no markup or behaviour changes, so CiviCRM validation, Select2 and price
 *   calculation keep working, and CiviCRM/WordPress upgrades do not touch this file.
 * - Scoped to #crm-container.crm-public (public forms only; CiviCRM admin is unaffected).
 *   The ID-level selectors win over the older class-level rules in the per-page custom CSS
 *   and the Contribution/Main.tpl style block, so only a few declarations need !important.
 *   Field rules also include .crm-section so they outrank per-page CSS written as
 *   "#crm-container.crm-public input[...]" (which loads after this file).
 * - Restyle by changing the tokens below.
 */
#crm-container.crm-public,
body:has(#crm-container.crm-public) .select2-drop {
  --hfn-accent: #c56c0e;            /* brand orange (headings) */
  --hfn-accent-strong: #9a520a;     /* hover / text on light tint, 5.9:1 on white */
  --hfn-accent-tint: #fdf3e8;       /* selected option background */
  --hfn-focus-ring: rgba(197, 108, 14, 0.28);
  --hfn-text: #1f2933;
  --hfn-muted: #52606d;
  --hfn-border: #cbd2d9;
  --hfn-border-hover: #9aa5b1;
  --hfn-field-bg: #ffffff;
  --hfn-error: #c81e1e;
  --hfn-radius: 10px;
  --hfn-field-height: 46px;
  --hfn-speed: 160ms;
}

/* ---------- Labels ---------- */

#crm-container.crm-public .crm-section > .label,
#crm-container.crm-public .crm-section > .label label {
  color: var(--hfn-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

#crm-container.crm-public .crm-section > .label {
  padding-bottom: 6px;
}

#crm-container.crm-public .crm-marker {
  color: var(--hfn-error) !important;
}

/* ---------- Text fields and native selects ---------- */

#crm-container.crm-public .crm-section input[type="text"],
#crm-container.crm-public .crm-section input[type="email"],
#crm-container.crm-public .crm-section input[type="tel"],
#crm-container.crm-public .crm-section input[type="number"],
#crm-container.crm-public .crm-section input[type="password"],
#crm-container.crm-public .crm-section textarea,
#crm-container.crm-public .crm-section select.crm-form-select {
  box-sizing: border-box;
  min-height: var(--hfn-field-height);
  padding: 10px 14px !important;
  border: 1px solid var(--hfn-border) !important;
  border-radius: var(--hfn-radius) !important;
  background: var(--hfn-field-bg) !important;
  color: var(--hfn-text);
  font-size: 16px; /* 16px stops iOS zooming into fields */
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color var(--hfn-speed) ease, box-shadow var(--hfn-speed) ease;
}

#crm-container.crm-public .crm-section textarea {
  min-height: 96px;
}

#crm-container.crm-public .crm-section input[type="text"]:hover,
#crm-container.crm-public .crm-section input[type="email"]:hover,
#crm-container.crm-public .crm-section input[type="tel"]:hover,
#crm-container.crm-public .crm-section input[type="number"]:hover,
#crm-container.crm-public .crm-section input[type="password"]:hover,
#crm-container.crm-public .crm-section textarea:hover,
#crm-container.crm-public .crm-section select.crm-form-select:hover {
  border-color: var(--hfn-border-hover) !important;
}

#crm-container.crm-public .crm-section input[type="text"]:focus,
#crm-container.crm-public .crm-section input[type="email"]:focus,
#crm-container.crm-public .crm-section input[type="tel"]:focus,
#crm-container.crm-public .crm-section input[type="number"]:focus,
#crm-container.crm-public .crm-section input[type="password"]:focus,
#crm-container.crm-public .crm-section textarea:focus,
#crm-container.crm-public .crm-section select.crm-form-select:focus {
  border-color: var(--hfn-accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--hfn-focus-ring);
}

#crm-container.crm-public .crm-section input::placeholder {
  color: #7b8794;
}

/* Fields CiviCRM / jQuery Validate mark as invalid. */
#crm-container.crm-public .crm-section input.error,
#crm-container.crm-public .crm-section input[aria-invalid="true"],
#crm-container.crm-public .crm-section select.error {
  border-color: var(--hfn-error) !important;
}

#crm-container.crm-public .crm-inline-error,
#crm-container.crm-public label.error,
#crm-container.crm-public span.crm-error {
  color: var(--hfn-error) !important;
  font-size: 13px;
  margin-top: 4px;
}

/* ---------- Select2 dropdowns (CiviCRM ships Select2 v3) ---------- */

#crm-container.crm-public .select2-container .select2-choice {
  height: var(--hfn-field-height) !important;
  padding: 0 44px 0 14px;
  border: 1px solid var(--hfn-border) !important;
  border-radius: var(--hfn-radius) !important;
  background: var(--hfn-field-bg) !important; /* removes Select2's gradient */
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  color: var(--hfn-text);
  line-height: calc(var(--hfn-field-height) - 2px);
  transition: border-color var(--hfn-speed) ease, box-shadow var(--hfn-speed) ease;
}

#crm-container.crm-public .select2-container .select2-choice:hover {
  border-color: var(--hfn-border-hover) !important;
}

#crm-container.crm-public .select2-container .select2-choice .select2-chosen {
  margin: 0 !important;
  color: var(--hfn-text) !important;
  font-size: 15px;
  line-height: calc(var(--hfn-field-height) - 2px);
}

#crm-container.crm-public .select2-container .select2-choice .select2-arrow {
  width: 40px;
  border: 0 !important;
  background: none !important;
}

/* Replace the sprite arrow with a CSS chevron. */
#crm-container.crm-public .select2-container .select2-choice .select2-arrow b {
  background: none !important;
  position: relative;
}

#crm-container.crm-public .select2-container .select2-choice .select2-arrow b::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--hfn-muted);
  border-bottom: 2px solid var(--hfn-muted);
  transform: translate(-50%, -70%) rotate(45deg);
  transition: transform var(--hfn-speed) ease;
}

#crm-container.crm-public .select2-dropdown-open .select2-choice .select2-arrow b::after {
  transform: translate(-50%, -30%) rotate(-135deg);
}

#crm-container.crm-public .select2-container-active .select2-choice,
#crm-container.crm-public .select2-dropdown-open .select2-choice {
  border-color: var(--hfn-accent) !important;
  box-shadow: 0 0 0 3px var(--hfn-focus-ring);
}

/* The open list is appended to <body>, outside #crm-container. */
body:has(#crm-container.crm-public) .select2-drop {
  margin-top: 4px;
  border: 1px solid var(--hfn-border) !important;
  border-radius: var(--hfn-radius);
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
  overflow: hidden;
}

body:has(#crm-container.crm-public) .select2-drop.select2-drop-above {
  margin-top: -4px;
}

body:has(#crm-container.crm-public) .select2-drop .select2-search input {
  min-height: 38px;
  border: 1px solid var(--hfn-border);
  border-radius: 8px;
  background: #fff;
}

body:has(#crm-container.crm-public) .select2-results {
  padding: 4px;
  margin: 0;
}

body:has(#crm-container.crm-public) .select2-results .select2-result-label {
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--hfn-text);
  font-size: 15px;
}

body:has(#crm-container.crm-public) .select2-results .select2-highlighted {
  background: var(--hfn-accent-tint);
}

body:has(#crm-container.crm-public) .select2-results .select2-highlighted .select2-result-label {
  color: var(--hfn-accent-strong);
}

/* ---------- Radios and checkboxes ---------- */

#crm-container.crm-public input[type="radio"],
#crm-container.crm-public input[type="checkbox"] {
  float: none !important;
  width: 18px;
  height: 18px;
  margin: 0 !important;
  accent-color: var(--hfn-accent);
  cursor: pointer;
  flex: 0 0 auto;
}

#crm-container.crm-public .crm-multiple-checkbox-radio-options .crm-option-label-pair {
  align-items: center;
  gap: 10px;
}

#crm-container.crm-public .crm-multiple-checkbox-radio-options .crm-option-label-pair label {
  color: var(--hfn-text) !important;
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
}

#crm-container.crm-public input[type="radio"]:focus-visible,
#crm-container.crm-public input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--hfn-accent);
  outline-offset: 2px;
}

/* Radio groups as selectable cards (Deliver At, Subscriptions). The whole card is the label's row;
   clicking the text still selects via the existing <label for>. */
#crm-container.crm-public .crm-multiple-checkbox-radio-options:has(input[type="radio"]) {
  display: grid !important;
  gap: 8px;
  border: 0 !important;
}

#crm-container.crm-public .crm-multiple-checkbox-radio-options:has(input[type="radio"]) .crm-option-label-pair {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--hfn-border);
  border-radius: var(--hfn-radius);
  background: var(--hfn-field-bg);
  transition: border-color var(--hfn-speed) ease, background-color var(--hfn-speed) ease;
}

#crm-container.crm-public .crm-multiple-checkbox-radio-options:has(input[type="radio"]) .crm-option-label-pair + .crm-option-label-pair {
  border-top: 1px solid var(--hfn-border);
}

#crm-container.crm-public .crm-multiple-checkbox-radio-options:has(input[type="radio"]) .crm-option-label-pair:hover {
  border-color: var(--hfn-border-hover);
}

#crm-container.crm-public .crm-multiple-checkbox-radio-options .crm-option-label-pair:has(input[type="radio"]:checked) {
  border-color: var(--hfn-accent);
  background: var(--hfn-accent-tint);
}

/* Checkbox lists (Terms & Conditions): plain rows with comfortable spacing. */
#crm-container.crm-public .crm-multiple-checkbox-radio-options:has(input[type="checkbox"]) .crm-option-label-pair {
  margin: 0 0 8px;
}

/* ---------- Help text and price set ---------- */

#crm-container.crm-public .messages.help {
  border-radius: 8px;
  padding: 10px 14px;
}

#crm-container.crm-public #pricesetTotal,
#crm-container.crm-public .total_amount-section {
  font-weight: 600;
}

/* ---------- Submit button ---------- */

#crm-container.crm-public .crm-submit-buttons button,
#crm-container.crm-public .crm-submit-buttons input[type="submit"] {
  min-height: var(--hfn-field-height);
  padding: 0 28px !important;
  border-radius: var(--hfn-radius) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: filter var(--hfn-speed) ease, box-shadow var(--hfn-speed) ease, transform var(--hfn-speed) ease;
}

#crm-container.crm-public .crm-submit-buttons button:hover,
#crm-container.crm-public .crm-submit-buttons input[type="submit"]:hover {
  filter: brightness(0.94);
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.16);
}

#crm-container.crm-public .crm-submit-buttons button:focus-visible,
#crm-container.crm-public .crm-submit-buttons input[type="submit"]:focus-visible {
  outline: 2px solid var(--hfn-accent);
  outline-offset: 3px;
}

#crm-container.crm-public .crm-submit-buttons button:active,
#crm-container.crm-public .crm-submit-buttons input[type="submit"]:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  #crm-container.crm-public *,
  body:has(#crm-container.crm-public) .select2-drop * {
    transition: none !important;
  }
}

/* Space between option groups and the next section heading. */
#crm-container.crm-public .crm-section:has(> .content > .crm-multiple-checkbox-radio-options) {
  margin-bottom: 18px;
}

/* ---------- Consistent field widths (subscriber details) ---------- */
/* Older per-page CSS gave text fields 90%, dropdowns 93%, help boxes an inline 92% and an 8px
   left offset, so controls in a column did not line up. Every control now fills its grid column
   (the gutter comes from the grid gap in the layout section below). */

#crm-container.crm-public .custom_pre_profile-group .crm-section > .content {
  margin-left: 0 !important;
  padding-right: 0;
  box-sizing: border-box;
}

#crm-container.crm-public .custom_pre_profile-group .crm-section > .content > input.crm-form-text,
#crm-container.crm-public .custom_pre_profile-group .crm-section > .content > select,
#crm-container.crm-public .custom_pre_profile-group .crm-section > .content > textarea,
#crm-container.crm-public .custom_pre_profile-group .crm-section > .content > .select2-container,
#crm-container.crm-public .custom_pre_profile-group .crm-section > .content > .crm-multiple-checkbox-radio-options,
#crm-container.crm-public .custom_pre_profile-group .crm-section > .content > .messages.help {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

#crm-container.crm-public .custom_pre_profile-group .crm-section > .content > .messages.help {
  margin-top: 8px;
}

/* ---------- Validation errors ---------- */
/* CiviCRM's validator puts "crm-inline-error alert-danger" on both the invalid field and its
   message <label>; alert-danger gave the messages a pink block. */

#crm-container.crm-public .crm-section .content input.crm-inline-error,
#crm-container.crm-public .crm-section .content textarea.crm-inline-error {
  border-color: var(--hfn-error) !important;
  background: var(--hfn-field-bg) !important;
}

#crm-container.crm-public .crm-section .content input.crm-inline-error:focus,
#crm-container.crm-public .crm-section .content textarea.crm-inline-error:focus {
  box-shadow: 0 0 0 3px rgba(200, 30, 30, 0.18);
}

/* Select2 v3 places its box before the hidden <select>, which is what gets the error class. */
#crm-container.crm-public .select2-container:has(~ select.crm-inline-error) .select2-choice {
  border-color: var(--hfn-error) !important;
}

#crm-container.crm-public .crm-section label.crm-inline-error,
#crm-container.crm-public .crm-section .content > span.crm-error {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--hfn-error) !important;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.4;
}

/* ======================================================================
 * Page layout for the contribution form (Main page only).
 * The old two-column layout used floats, which staggered as soon as fields
 * had different heights (e.g. with validation messages). This uses a grid
 * and groups the form into cards. Hidden/conditional sections (display:none,
 * toggled by the page scripts) simply drop out of the grid.
 * ====================================================================== */

body:has(#crm-container.crm-public .crm-contribution-main-form-block) .jupiterx-main-content {
  background: #f6f7f9;
}

#crm-container.crm-public .crm-contribution-main-form-block {
  --hfn-card-border: #e4e7eb;
  --hfn-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.05);
  --hfn-card-radius: 16px;
  --hfn-card-padding: 28px;
  max-width: 880px;
  margin: 0 auto;
}

/* Cards */
#crm-container.crm-public .crm-contribution-main-form-block #intro_text,
#crm-container.crm-public .crm-contribution-main-form-block .custom_pre_profile-group > fieldset.crm-profile,
#crm-container.crm-public .crm-contribution-main-form-block #priceset-div,
#crm-container.crm-public .crm-contribution-main-form-block #paypalExpress > fieldset {
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 0 24px !important;
  padding: var(--hfn-card-padding) !important;
  border: 1px solid var(--hfn-card-border) !important;
  border-radius: var(--hfn-card-radius);
  background: #fff;
  box-shadow: var(--hfn-card-shadow);
  float: none !important;
}

/* Card titles: "Subscriber Details" legend and the price set heading. A floated legend sits
   inside the card (no border notch) and spans the grid. */
#crm-container.crm-public .crm-contribution-main-form-block .custom_pre_profile-group > fieldset.crm-profile > legend {
  float: left;
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 20px !important;
  font-weight: 600;
  line-height: 1.3;
}

/* Subscriber details grid */
#crm-container.crm-public .crm-contribution-main-form-block .custom_pre_profile-group > fieldset.crm-profile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 18px;
  align-items: start;
}

#crm-container.crm-public .crm-contribution-main-form-block .custom_pre_profile-group > fieldset.crm-profile > .crm-section {
  float: none !important;
  clear: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#crm-container.crm-public .crm-contribution-main-form-block .custom_pre_profile-group > fieldset.crm-profile > .crm-section > .label {
  float: none !important;
  width: auto !important;
  padding: 0 0 6px !important;
}

/* Price set: one row per language, input on the right, then the total. */
#crm-container.crm-public .crm-contribution-main-form-block #priceset-div #priceset {
  width: 100% !important;
  margin: 0;
  padding: 0 !important;
}

#crm-container.crm-public .crm-contribution-main-form-block #priceset > .messages.help {
  width: auto !important;
  margin: 0 0 8px;
}

#crm-container.crm-public .crm-contribution-main-form-block #priceset > .crm-section:not(#pricesetTotal) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #eef0f2;
}

#crm-container.crm-public .crm-contribution-main-form-block #priceset > .crm-section[style*="display: none"],
#crm-container.crm-public .crm-contribution-main-form-block #priceset > .crm-section[style*="display:none"] {
  display: none;
}

#crm-container.crm-public .crm-contribution-main-form-block #priceset > .crm-section:not(#pricesetTotal) > .label {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  font-weight: 500;
}

#crm-container.crm-public .crm-contribution-main-form-block #priceset > .crm-section:not(#pricesetTotal) > .label .price-field-amount {
  color: var(--hfn-muted);
  font-weight: 400;
}

#crm-container.crm-public .crm-contribution-main-form-block #priceset > .crm-section:not(#pricesetTotal) > .content {
  flex: 0 0 180px;
  width: 180px !important;
  margin: 0 !important;
}

#crm-container.crm-public .crm-contribution-main-form-block #priceset > .crm-section:not(#pricesetTotal) > .content input.crm-form-text {
  width: 100% !important;
  text-align: center;
}

#crm-container.crm-public .crm-contribution-main-form-block #priceset > .crm-section:not(#pricesetTotal) > .content .select2-container {
  width: 100% !important;
}

#crm-container.crm-public .crm-contribution-main-form-block #pricesetTotal {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 16px 0 0 !important;
  border-top: 2px solid var(--hfn-card-border);
}

#crm-container.crm-public .crm-contribution-main-form-block #pricesetTotal > .label,
#crm-container.crm-public .crm-contribution-main-form-block #pricesetTotal > .content {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--hfn-text) !important;
  font-size: 18px !important;
  font-weight: 700;
}

/* Checkout card: the note and the existing gateway button, centred. */
#crm-container.crm-public .crm-contribution-main-form-block #paypalExpress {
  float: none !important;
  width: 100% !important;
}

#crm-container.crm-public .crm-contribution-main-form-block #paypalExpress .crm-section {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center;
}

#crm-container.crm-public .crm-contribution-main-form-block #paypalExpress .crm-section > .content {
  margin: 0 !important;
}

#crm-container.crm-public .crm-contribution-main-form-block #paypalExpress .description {
  display: block;
  margin-bottom: 14px;
  color: var(--hfn-muted);
  font-size: 14px;
}

#crm-container.crm-public .crm-contribution-main-form-block #paypalExpress input[type="image"] {
  max-width: 220px;
  cursor: pointer;
  transition: filter var(--hfn-speed) ease, transform var(--hfn-speed) ease;
}

#crm-container.crm-public .crm-contribution-main-form-block #paypalExpress input[type="image"]:hover {
  filter: brightness(0.95);
}

#crm-container.crm-public .crm-contribution-main-form-block #paypalExpress input[type="image"]:focus-visible {
  outline: 2px solid var(--hfn-accent);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  #crm-container.crm-public .crm-contribution-main-form-block {
    --hfn-card-padding: 18px;
  }

  #crm-container.crm-public .crm-contribution-main-form-block .custom_pre_profile-group > fieldset.crm-profile {
    grid-template-columns: minmax(0, 1fr);
  }

  #crm-container.crm-public .crm-contribution-main-form-block #priceset > .crm-section:not(#pricesetTotal) > .content {
    flex-basis: 130px;
    width: 130px !important;
  }
}

/* Field rows size to their content. The US page's Main.tpl reserved a fixed 90px per field
   (to stop the old float layout staggering when errors appear); the grid makes that unnecessary. */
#crm-container.crm-public .crm-contribution-main-form-block .custom_pre_profile-group > fieldset.crm-profile > .crm-section > .content {
  height: auto !important;
  padding-top: 0 !important;
}

/* Price rows: the trailing .clear div was a third flex item, so inputs drifted to the middle. */
#crm-container.crm-public .crm-contribution-main-form-block #priceset > .crm-section > .clear {
  display: none;
}

#crm-container.crm-public .crm-contribution-main-form-block #priceset > .crm-section:not(#pricesetTotal) > .content {
  margin-left: auto !important;
}

/* US page: Terms & Conditions and the submit button are separate siblings after the price
   set; stack them as one card (top half + bottom half). */
#crm-container.crm-public .crm-contribution-main-form-block > #editrow-custom_43 {
  float: none !important;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: var(--hfn-card-padding) var(--hfn-card-padding) 8px !important;
  border: 1px solid var(--hfn-card-border);
  border-bottom: 0;
  border-radius: var(--hfn-card-radius) var(--hfn-card-radius) 0 0;
  background: #fff;
}

#crm-container.crm-public .crm-contribution-main-form-block > #editrow-custom_43 > .content {
  height: auto !important;
}

#crm-container.crm-public .crm-contribution-main-form-block > #editrow-custom_43 + #crm-submit-buttons {
  float: none !important;
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 0 24px !important;
  padding: 12px var(--hfn-card-padding) var(--hfn-card-padding) !important;
  border: 1px solid var(--hfn-card-border);
  border-top: 0;
  border-radius: 0 0 var(--hfn-card-radius) var(--hfn-card-radius);
  background: #fff;
}

#crm-container.crm-public .crm-contribution-main-form-block #priceset > .crm-section:not(#pricesetTotal) > .label label {
  margin: 0 !important;
}

/* Banner image in the intro card (contribution page intro text). */
#crm-container.crm-public .crm-contribution-main-form-block #intro_text img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
}

#crm-container.crm-public .crm-contribution-main-form-block #intro_text p:has(> img:only-child) {
  margin: 0 0 20px;
}

#crm-container.crm-public .crm-contribution-main-form-block #intro_text p:last-child:has(> img:only-child) {
  margin-bottom: 0;
}