/* ============================================================
   STYLE-OVERRIDES BASE — universal SBX-conflict rules.

   This file is the starting point for every new template's
   style-overrides.css. Copy it as-is into
   Generated/<slug>/css/style-overrides.css, then APPEND any
   site-specific rules below the "(B) SITE-SPECIFIC RULES"
   section.

   Every rule below has been observed to be necessary on at
   least one prior template build. The catalog grew across:
     - US Ski & Snowboard (Drupal)
     - Melanoma Research Alliance (Webflow)
     - Think Together (WordPress)

   When a new universal bug is caught in a build, add it HERE
   so the next template inherits it for free. Site-specific
   rules don't belong in this file — they go in the per-template
   section (B).
   ============================================================ */

/* ====================  (A) UNIVERSAL SBX RULES  ==================== */

/* 1. SBX bullet-PNGs on nav menus.
      soapboxTypography.min.css applies:
        ul li { padding: 0.3em 0 0.5em 30px;
                background: url(bullet-default.png) 18px 0.8em no-repeat; }
      CRITICAL: only set `background-image: none`, NOT `background: none`
      — the shorthand wipes background-color and makes button-style
      nav items (e.g. .btn-donate orange buttons) invisible. */
header ul li,
.header ul li,
.header-wrapper ul li,
.header-navigation ul li,
.navbar ul li,
.navbar-nav li,
nav ul li,
footer ul li,
.footer ul li,
.footer-wrapper ul li,
.footer-menu li {
  background-image: none !important;
  padding-left: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
  line-height: inherit;
}

/* 2. Soapbox Secure Payment area: blend with page background. */
#donate-billing,
.section-billing,
.item-paymentsection {
  background: transparent !important;
  background-color: transparent !important;
}
.billing-list li.border-top,
.compList-payment li.border-top,
.section-billing .billing-list li,
.section-billing .compList-payment li,
.item-paymentsection li {
  border-top: 0 none !important;
  border-bottom: 0 none !important;
}

/* 3. Soapbox reCAPTCHA wrapper: remove the 1px solid border + padding. */
#contactCaptcha-wrap,
.compCaptcha-wrap,
.contactCaptcha {
  border: 0 none !important;
  padding: 0 !important;
}

/* 4. Soapbox outline sections (tribute/dedication, etc.) — drop dotted borders. */
.item-outlinesection,
#donate-dedication,
.section-dedication {
  border-top: 0 none !important;
  border-bottom: 0 none !important;
}

/* 4b. SBX bootstrap.min.css adds
        a:hover, a:focus { color: #005580; text-decoration: underline }
      to EVERY anchor on hover. Source themes don't expect this on nav
      links. Suppress for header/footer scopes. */
.header a:hover, .header a:focus,
.header-wrapper a:hover, .header-wrapper a:focus,
.header-navigation a:hover, .header-navigation a:focus,
.footer a:hover, .footer a:focus,
.footer-wrapper a:hover, .footer-wrapper a:focus,
header a:hover, header a:focus,
footer a:hover, footer a:focus,
nav a:hover, nav a:focus,
.navbar-nav a:hover, .navbar-nav a:focus,
.footer-link:hover, .footer-link:focus {
  text-decoration: none !important;
}

/* 5. SBX core sets @media (max-width: 767px) { body { padding: 0 20px } }
      on mobile via bootstrap-responsive.min.css. This 20px horizontal
      padding constrains the body content-box, so footers can't extend
      edge-to-edge (visible white strips on each side of full-bleed
      backgrounds), and mobile menu items get pushed in or overflow. */
@media (max-width: 767px) {
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 6. SBX bootstrap.min.css applies `.dropdown-menu > li > a:hover,
      .dropdown-menu > li > a:focus { background-color: #0081c2;
      background-image: linear-gradient(...) }` — Bootstrap 2's classic
      blue gradient on dropdown-item highlight. On the footer those
      <a>s are just plain footer links — the blue rectangle on
      focus/hover is wrong. Suppress for footer scopes. */
.footer .dropdown-menu > li > a:hover,
.footer .dropdown-menu > li > a:focus,
.footer .dropdown-menu li a:hover,
.footer .dropdown-menu li a:focus,
.footer-wrapper .dropdown-menu > li > a:hover,
.footer-wrapper .dropdown-menu > li > a:focus,
.footer-menu .dropdown-menu > li > a:hover,
.footer-menu .dropdown-menu > li > a:focus {
  background-color: transparent !important;
  background-image: none !important;
}

/* 7. SBX bootstrap.min.css sets `.dropdown-menu > li > a { white-space:
      nowrap }` (Bootstrap 2's dropdown-item rule). On WordPress footers
      this prevents long submenu link labels from wrapping, expanding
      parent <li> to fit unwrappable content — which overflows the
      column-item and causes adjacent columns (e.g. Newsletter) to
      wrap below. Force wrap on footer dropdown links. */
.footer .footer-menu .dropdown-menu > li > a,
.footer .footer-menu .dropdown-menu li a,
.footer .footer-menu .sub-menu li a,
.footer-wrapper .dropdown-menu li a {
  white-space: normal !important;
}

/* 8. SBX bootstrap.min.css applies `.dropdown-menu { background-color:
      #fff; border: 1px solid rgba(0,0,0,0.2); border-radius: 6px;
      box-shadow: rgba(0,0,0,0.2) 0 5px 10px }` to .dropdown-menu —
      making footer submenus look like floating tooltip cards with
      shadows. Suppress for footer scopes. */
.footer .footer-menu .dropdown-menu,
.footer-menu .menu-item-has-children .dropdown-menu,
.footer-menu .menu-item-has-children > ul,
.footer-menu .menu-item-has-children .sub-menu,
.footer-wrapper .dropdown-menu {
  background-color: transparent !important;
  border: 0 none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

/* 9. Flex-min-width gotcha: WordPress footers use flex layouts where
      a column's content (e.g. long submenu link text) can have a
      min-content width greater than the column's flex-basis. The
      default `min-width: auto` prevents flex-shrink from shrinking
      the column to its flex-basis, causing siblings to overflow or
      wrap. Force min-width: 0 on common footer flex containers. */
.footer .footer-top .container-column .column-item,
.footer .footer-top .flex-footer .column-item,
.footer .footer-menu,
.footer .footer-menu ul.menu-footer {
  min-width: 0 !important;
}

/* 10. Mobile-menu item indicators (chevron-down) are often JS-injected
       at narrow viewports by WordPress theme JS (bootstrap-navwalker
       or similar). When the source HTML is captured at desktop width,
       these <button class="dropdown-btn"> elements aren't in the DOM.
       Replicate the chevron visual via CSS ::after on
       .menu-item-has-children > a at mobile widths. */
@media (max-width: 1199px) {
  .menu-item-has-children > a {
    position: relative;
  }
  .menu-item-has-children > a:not(.dropdown-item):not(.sub-menu-link)::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.2s;
    pointer-events: none;
    opacity: 0.6;
  }
}

/* 11. Donation page frequency toggle (One Time / Monthly).
       SBX donation forms render frequency as radio inputs inside a
       <ul class="donation-list compList">. By default they look like
       a vertical list of labeled radios. The polished SBX look — used
       on annunciationmsp.secure.nonprofitsoapbox.com/school-donate and
       most well-styled donation pages — turns them into a horizontal
       toggle with two adjacent pill buttons.

       Recipe: hide the radio input, style the label as a full-width
       button half, color it differently when its sibling radio is
       :checked.

       The selected-state color is configurable per template via the
       --donation-toggle-active-bg CSS variable below; default is a
       brand-neutral blue. Override per-template in section (B). */
:root {
  --donation-toggle-active-bg: rgb(75, 159, 208);    /* default sky-blue */
  --donation-toggle-active-color: rgb(255, 255, 255);
  --donation-toggle-inactive-bg: rgb(245, 245, 245);
  --donation-toggle-inactive-color: rgb(102, 102, 102);
}

.section-donation ul.compList li.pad-notop div.cntr {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block {
  width: 50%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block input.radio {
  display: none;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block label.choice {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 0;
  background-color: var(--donation-toggle-inactive-bg);
  background-image: linear-gradient(rgb(255, 255, 255), rgb(230, 230, 230));
  background-repeat: repeat-x;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom-width: 3px;
  color: var(--donation-toggle-inactive-color);
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block:first-child label.choice {
  border-radius: 4px 0 0 4px;
  border-right-width: 0;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block:last-child label.choice {
  border-radius: 0 4px 4px 0;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block input.radio:checked + label.choice {
  background-color: var(--donation-toggle-active-bg);
  background-image: linear-gradient(var(--donation-toggle-active-bg), var(--donation-toggle-active-bg));
  color: var(--donation-toggle-active-color);
  border-color: var(--donation-toggle-active-bg);
}

/* 12. Donation amount pills ($100, $200, etc.) — the row of clickable
       suggested-amount buttons. SBX renders these as
       <button class="btn btn-amount amts"> and base styling comes from
       soapbox-bootstrap.min.css. The polished look adds a subtle gray
       gradient and shadow + a brand-color "selected" state.

       Like the toggle above, the selected-state color is configurable
       via --donation-amount-active-bg. Defaults to brand-neutral. */
:root {
  --donation-amount-active-bg: rgb(75, 159, 208);
  --donation-amount-active-color: rgb(255, 255, 255);
  --donation-amount-inactive-bg: rgb(245, 245, 245);
  --donation-amount-inactive-color: rgb(51, 51, 51);
}

.btn.btn-amount.amts,
.amount-group .btn-amount,
.donate-amount-group-onetime .btn-amount,
.donate-amount-group-recurring .btn-amount {
  background-color: var(--donation-amount-inactive-bg);
  background-image: linear-gradient(rgb(255, 255, 255), rgb(230, 230, 230));
  background-repeat: repeat-x;
  color: var(--donation-amount-inactive-color);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 9px 14px;
  min-width: 97px;
  font-size: 16px;
  line-height: normal;
  margin-bottom: 15px;
  margin-right: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.05s;
}
.btn.btn-amount.amts:hover,
.amount-group .btn-amount:hover {
  background-image: linear-gradient(rgb(248, 248, 248), rgb(220, 220, 220));
}
.btn.btn-amount.amts:active,
.amount-group .btn-amount:active {
  transform: translateY(1px);
}
.btn.btn-amount.amts.active,
.btn.btn-amount.amts.selected,
.amount-group .btn-amount.active,
.amount-group .btn-amount.selected {
  background-color: var(--donation-amount-active-bg) !important;
  background-image: linear-gradient(var(--donation-amount-active-bg), var(--donation-amount-active-bg)) !important;
  color: var(--donation-amount-active-color) !important;
  border-color: var(--donation-amount-active-bg) !important;
}

/* 13. Designation pills should match the OTHER buttons on the page.
       SBX core renders the designation chooser as `<button class="pill">`
       and applies a 24px pill-radius + bright Bootstrap blue. That makes
       the designation row visually inconsistent with the rectangular
       amount buttons ($100/$200/$500) above it.
       Make pills match the amount-button shape: 6px radius, 48px
       height, navy-outlined inactive / navy-filled active.
       Per-template: brand-color via --donation-amount-active-bg. */
#content .designation-group .pill,
#content .pills .pill,
.designation-group .pill,
.pills .pill {
  border-radius: 6px !important;
  padding: 14px 28px !important;
  height: 48px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 80px !important;
  margin: 0 6px 8px 0 !important;
  box-sizing: border-box !important;
  background-color: rgb(255, 255, 255) !important;
  background-image: none !important;
  border: 1.5px solid rgb(200, 210, 220) !important;
}
.designation-group .pill.active,
.pills .pill.active {
  background-color: var(--donation-amount-active-bg, rgb(37, 53, 81)) !important;
  background-image: none !important;
  color: var(--donation-amount-active-color, rgb(255, 255, 255)) !important;
  border-color: var(--donation-amount-active-bg, rgb(37, 53, 81)) !important;
}

/* 14. <select> dropdowns must be the same height as text inputs.
       SBX core's bootstrap-2 styling gives selects ~26px height while
       text inputs sit at 38-48px. Visually they look stunted next to
       siblings. Force matching dimensions across all SBX form scopes.
       Also normalize the dropdown caret across browsers since
       appearance:none drops it on every UA. */
#content select,
.item-form select,
form.form-donate select,
select.field,
select.input-large,
select.input-medium,
select.select {
  height: 48px !important;
  line-height: 1.4 !important;
  padding: 12px 40px 12px 16px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%23333' stroke-width='2' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
}

/* 14b. EQUALIZE ALL FIELDS TO THE TALLEST (the select, 48px). The reverse of
       #14: many SBX themes render <select> at 48px but text inputs at 36px (some
       at 28px!) with a 0-radius + inset shadow, so a form mixes short flat inputs
       and tall rounded selects (looked broken on ofjcc, 2026-06-24). Force every
       text-like field to the SAME spec as the select: 48px, 6px radius, white,
       no inset shadow, 1px grey border.

       CRITICAL GOTCHA: several SBX inputs have NO `type` attribute (firstname,
       lastname, card_code/Security Code) — they default to text but DON'T match
       `input[type="text"]`. They DO carry `.field`/`.text` classes. You must ALSO
       target those classes (excluding checkbox/radio) and a type-less catch-all,
       or those fields stay short (28px) and misaligned. And the catch-all MUST
       exclude checkbox/radio/submit/button/image or it stretches checkboxes to
       48px and knocks them out of line (see 14b-checkbox below).
       NOTE: only verifiable on the DEPLOYED page — the preview has no form. */
#content input[type="text"],
#content input[type="email"],
#content input[type="tel"],
#content input[type="number"],
#content input[type="password"],
#content input[type="url"],
#content input.form-control:not([type="checkbox"]):not([type="radio"]),
#content input.field:not([type="checkbox"]):not([type="radio"]),
#content input.text:not([type="checkbox"]):not([type="radio"]),
#content .input-text,
#content textarea,
#content .item-form input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]),
#content form.form-donate input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]) {
  height: 48px !important;
  min-height: 48px !important;
  border: 1px solid rgb(205, 211, 218) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  -webkit-appearance: none;
}
#content textarea,
.item-form textarea {
  height: auto !important;
  min-height: 96px !important;
}

/* 14b-checkbox. Checkboxes/radios must NOT be inflated by 14b — give them a
       fixed small box and align with their label. (ofjcc: the .field-classed
       checkboxes got stretched to 48px and floated out of line with the label.) */
#content input[type="checkbox"],
#content input[type="radio"] {
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  padding: 0 !important;
  margin: 3px 6px 0 0 !important;
  vertical-align: middle !important;
  border-radius: 0 !important;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

/* 14c. LAZY-LOADED IMAGES (footer supporter logos, content images). Themes like
       TheGem ship images with class="lazy-loading-item lazy" at
       visibility:hidden and reveal them with lazy-load JS that does NOT run on
       SBX — so the image is in the DOM (complete:true) but invisible. Force
       visible. An <img> existing is NOT proof it renders — check the deployed
       page visually. (ofjcc footer grateful8 supporter-logos, 2026-06-24.) */
.lazy-loading-item,
img.lazy,
.gem-wrapbox-inner.lazy,
.custom-footer .lazy-loading-item,
footer .lazy-loading-item {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 15. Mobile portrait: center the donation amount UI.
       At narrow viewports, the frequency toggle and predefined amount
       buttons currently left-align and overflow. Center them and
       wrap-allow multiple lines. */
@media (max-width: 767px) {
  .donate-amount-group-onetime,
  .donate-amount-group-recurring,
  li.amount-group-notice {
    text-align: center !important;
  }
  .donate-amount-group-onetime .cntr,
  .donate-amount-group-recurring .cntr,
  li.amount-group-notice > .cntr {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  .donate-amount-group-onetime .cntr > .span-block,
  .donate-amount-group-recurring .cntr > .span-block {
    flex: 0 0 auto !important;
  }
  .interval-toggle + label.choice,
  label.choice[for*="intervalUnit"] {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
  }
  .amount-group .btn-amount,
  button.btn.btn-amount.amts,
  button.btn-amount {
    flex: 0 0 auto !important;
    min-width: 88px !important;
    margin: 4px !important;
  }
  .input-group {
    display: inline-flex !important;
    justify-content: center !important;
    margin: 4px !important;
  }
  .designation-group .pills,
  .pills {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .designation-group .pill,
  .pills .pill {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .section-donation .section-header,
  .section-donation .title {
    text-align: center !important;
  }
}

/* 17. UNIFORM ACTION BUTTONS across donation / event-registration /
       form pages. SBX renders action buttons as Bootstrap-2 .btn
       variants with inconsistent default styling: .btn-primary is one
       color, secondary .btn / .btn-small (e.g. "Apply Code") render as a
       different-colored outline. Most brand sites use ONE button style
       everywhere. Re-skin them all to a single system driven by the
       --btn-* variables — set these four in your (B) section to the
       site's CTA spec (inspect a real CTA on the live site for the exact
       bg / radius / padding; many modern nonprofit sites use a fully-
       rounded pill, e.g. border-radius: 50px).

       CRITICAL: exclude .btn-amount (donation amount pills) and
       .btn-frequency — those are SELECTABLE (active/inactive) and get
       their styling from rules #11-12. Without the :not() guards this
       rule paints every amount pill solid, destroying the selected-state
       affordance. */
:root {
  --btn-bg: rgb(37, 53, 81);            /* brand CTA color — OVERRIDE in (B) */
  --btn-bg-hover: rgb(28, 40, 62);      /* darker hover — OVERRIDE in (B) */
  --btn-color: #ffffff;
  --btn-radius: 50px;                   /* pill by default; set 4px for square */
  --btn-padding: 15px 40px;
  --btn-weight: 600;
  --btn-font-size: 15px;
}
#content .btn:not(.btn-amount):not(.btn-frequency),
#content .btn-primary:not(.btn-amount),
#content .btn-large:not(.btn-amount),
#content .btn-small:not(.btn-amount),
#content button[type="submit"],
#content input[type="submit"],
#content input[type="button"]:not(.btn-amount),
#content a.btn:not(.btn-amount),
.region-content .btn:not(.btn-amount):not(.btn-frequency),
.region-content .btn-primary:not(.btn-amount),
.region-content button[type="submit"],
.region-content input[type="submit"],
.region-content a.btn:not(.btn-amount) {
  background: var(--btn-bg) !important;
  background-color: var(--btn-bg) !important;
  background-image: none !important;
  border: 0 none !important;
  color: var(--btn-color) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--btn-padding) !important;
  font-weight: var(--btn-weight) !important;
  font-size: var(--btn-font-size) !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  transition: background-color 0.2s ease !important;
}
#content .btn:not(.btn-amount):not(.btn-frequency):hover,
#content .btn-primary:not(.btn-amount):hover,
#content button[type="submit"]:hover,
#content input[type="submit"]:hover,
#content a.btn:not(.btn-amount):hover,
.region-content .btn:not(.btn-amount):not(.btn-frequency):hover,
.region-content button[type="submit"]:hover,
.region-content input[type="submit"]:hover,
.region-content a.btn:not(.btn-amount):hover {
  background: var(--btn-bg-hover) !important;
  background-color: var(--btn-bg-hover) !important;
  border: 0 none !important;
  color: var(--btn-color) !important;
  text-decoration: none !important;
}
#content .btn-small:not(.btn-amount),
.region-content .btn-small:not(.btn-amount) {
  padding: 10px 26px !important;
  font-size: 14px !important;
}

/* 18. EVENT TICKETS TABLE (.tickets-tbl / .resultsTBL). SBX core draws a
       1px grey border on every <th> plus a faint grey cell background,
       producing a boxed-grid look that clashes with clean modern
       designs. Strip the header-cell borders + cell shading; keep one
       subtle header rule and a light divider between ticket rows. */
#content table.tickets-tbl, #content table.resultsTBL,
.region-content table.tickets-tbl, .region-content table.resultsTBL {
  border: 0 none !important;
  border-collapse: collapse !important;
  background: transparent !important;
}
#content table.tickets-tbl th, #content table.resultsTBL th,
.region-content table.tickets-tbl th, .region-content table.resultsTBL th {
  border: 0 none !important;
  border-bottom: 2px solid #e2e2e2 !important;
  background: transparent !important;
  padding: 10px 8px !important;
}
#content table.tickets-tbl td, #content table.resultsTBL td,
.region-content table.tickets-tbl td, .region-content table.resultsTBL td {
  border: 0 none !important;
  background: transparent !important;
  padding: 14px 8px !important;
  vertical-align: middle !important;
}
#content table.tickets-tbl tbody tr, #content table.resultsTBL tbody tr,
.region-content table.tickets-tbl tbody tr, .region-content table.resultsTBL tbody tr {
  border-bottom: 1px solid #eef0f2 !important;
}

/* 19. SELECT BEVEL-BORDER fix. Beyond the height/caret normalization in
       #14, SBX gives selects an uneven 3D bevel border (dark top, light
       bottom — e.g. border-top #7c7c7c, border-bottom #ddd) that reads as
       broken. Flatten to one clean 1px border + rounded corners. */
#content select, #content .field.select,
.region-content select, .region-content .field.select {
  border: 1px solid #cdd3da !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}

/* 20. EVENT-REGISTRATION page fine-tuning (/component/events/event/rsvp/N).
       The default SBX event form has several rough edges that every
       event-enabled template hits. All reusable; brand-specific colors
       come from --btn-* (buttons) and the two --event-* vars below. */
:root {
  --event-panel-bg: #f4f7f9;          /* selected-attendee panel tint  */
  --event-panel-border: #d7dde3;      /* OVERRIDE in (B) to brand secondary */
}

/* 20a. Qty dropdown — SBX's .ticNumIn select is only ~52px wide, and the
        right-pad we add for the caret (#14/#19) clips the selected
        number so it's invisible once chosen (single AND double digit).
        Widen + reduce right-pad. Longhand padding + extra-class
        specificity so it beats the generic select rule. */
#content select.field.select.ticNumIn,
#content select.ticNumIn,
.region-content select.field.select.ticNumIn,
.region-content select.ticNumIn {
  width: auto !important;
  min-width: 72px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 12px !important;
  padding-right: 26px !important;
  text-align: left !important;
  text-indent: 0 !important;
  background-position: right 9px center !important;
}

/* 20b. Selected-attendee panel (.well.well-form) — SBX ships it pale-blue
        with a blue border. Re-skin to neutral brand tint. */
#content .well.well-form,
.region-content .well.well-form {
  background-color: var(--event-panel-bg) !important;
  background-image: none !important;
  border: 1px solid var(--event-panel-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* 20c. Compact secondary buttons — "Copy Contact Info", "Remove" (the
        .btn-mini attendee actions) and "Apply Code" (.btn-small) must be
        ~half the size of the primary CTA, not full pills. The generic
        button rule (#17) matches these as
        `#content .btn:not(.btn-amount):not(.btn-frequency)`; to win we
        must MATCH that specificity, hence the .btn + dual :not() here. */
#content .btn.btn-mini:not(.btn-amount):not(.btn-frequency),
#content .btn.copy-attendee:not(.btn-amount):not(.btn-frequency),
#content .btn.remove-attendee:not(.btn-amount):not(.btn-frequency),
#content .btn.btn-small:not(.btn-amount):not(.btn-frequency),
.region-content .btn.btn-mini:not(.btn-amount):not(.btn-frequency),
.region-content .btn.copy-attendee:not(.btn-amount):not(.btn-frequency),
.region-content .btn.remove-attendee:not(.btn-amount):not(.btn-frequency),
.region-content .btn.btn-small:not(.btn-amount):not(.btn-frequency) {
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
}

/* 20d. Promo-code input — SBX renders it ~736px wide. Constrain to ~20ch
        and add space beneath so Apply Code isn't crammed against it. */
#content input[name="promo_code"],
#content .form-promocode input.field.text,
.region-content input[name="promo_code"],
.region-content .form-promocode input.field.text {
  width: 20ch !important;
  max-width: 100% !important;
  display: block !important;
  margin-bottom: 14px !important;
  border: 1px solid #cdd3da !important;
  border-radius: 6px !important;
}
#content .form-promocode,
.region-content .form-promocode {
  display: block !important;
}

/* 20e. "Your Total:" box — SBX draws a 1px grey border around the total
        cell. Remove it so the total reads as clean text. */
#content table.tickets-total-tbl,
#content table.tickets-total-tbl td,
#content table.tickets-total-tbl tr,
#content .foot-total, #content .foot-total td,
.region-content table.tickets-total-tbl,
.region-content table.tickets-total-tbl td,
.region-content table.tickets-total-tbl tr,
.region-content .foot-total, .region-content .foot-total td {
  border: 0 none !important;
  background: transparent !important;
}

/* 20f. "Add a Donation" section (.foot-donation) — when an Events-app
        event enables the optional add-a-donation prompt, SBX renders a
        clearfix row with the label + description (.left:
        #form-donation-title + #form-donation-desc) floated far-left and
        the donation input (.right > #form-donation-input) floated
        far-right — leaving them visually disconnected across the row.
        Pull them together: right-align the label/description and sit it
        directly to the LEFT of the input as one unit.

        The LABEL TEXT VARIES per account ("Add a Donation", "Make a
        Gift", etc.) and the whole section may be ABSENT (no donation
        enabled, or non-Events templates) — so we target only the stable
        structural classes; the rule no-ops when the section isn't there.
        Mobile: stack the label above a full-width input instead of
        cramming them side by side. */
#content .foot-donation,
.region-content .foot-donation {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
}
#content .foot-donation > .left,
.region-content .foot-donation > .left {
  float: none !important;
  text-align: right !important;
  margin: 0 !important;
  flex: 0 1 auto !important;
}
#content .foot-donation > .right,
.region-content .foot-donation > .right {
  float: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
#content .foot-donation > .clear,
.region-content .foot-donation > .clear {
  display: none !important;
}
@media (max-width: 767px) {
  #content .foot-donation,
  .region-content .foot-donation {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  #content .foot-donation > .left,
  .region-content .foot-donation > .left {
    text-align: left !important;
    flex: 1 1 100% !important;
    margin-bottom: 8px !important;
  }
  #content .foot-donation > .right,
  .region-content .foot-donation > .right {
    flex: 1 1 100% !important;
  }
  #content .foot-donation > .right #form-donation-input,
  .region-content .foot-donation > .right #form-donation-input {
    width: 100% !important;
  }
  #content .foot-donation > .right input,
  .region-content .foot-donation > .right input {
    width: 100% !important;
    max-width: 240px !important;
  }
}

/* 20g. Footer order-summary column. The event ticket footer holds three
        sibling blocks inside .resultsTBL-foot.clearfix, in source order:
          1. .foot-donation        (Add a Donation — optional)
          2. .left.foot-promocode  (Enter Promo Code + Apply Code — optional)
          3. .right.foot-total      (Your Total)
        SBX core floats .left blocks left and .right blocks right, so the
        promo code lands ORPHANED on the far left while donation/total sit
        right. Stack all three into ONE right-aligned column (donation,
        then promo, then total) so they read as a single order-summary
        panel — the modern checkout convention. All blocks are optional
        and labels vary per account, so we target ONLY structural classes;
        the rule no-ops when a block is absent. Pairs with #20f. */
#content .resultsTBL-foot.clearfix,
.region-content .resultsTBL-foot.clearfix {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;          /* right-align the column */
  gap: 20px !important;
  width: 100% !important;
}
/* Neutralize SBX's float on the promo + total wrappers (they carry the
   generic .left / .right classes that SBX floats). Scoped under
   .resultsTBL-foot so .left/.right elsewhere on the page are untouched. */
#content .resultsTBL-foot .foot-promocode,
#content .resultsTBL-foot .foot-total,
.region-content .resultsTBL-foot .foot-promocode,
.region-content .resultsTBL-foot .foot-total {
  float: none !important;
  margin: 0 !important;
  width: auto !important;
}
#content .resultsTBL-foot .foot-promocode,
.region-content .resultsTBL-foot .foot-promocode {
  text-align: right !important;
}
@media (max-width: 767px) {
  #content .resultsTBL-foot.clearfix,
  .region-content .resultsTBL-foot.clearfix {
    align-items: stretch !important;         /* left-align, full width */
    gap: 16px !important;
  }
  #content .resultsTBL-foot .foot-promocode,
  .region-content .resultsTBL-foot .foot-promocode {
    text-align: left !important;
  }
}

/* 21. ACTIONS APP pages (advocacy / contact-your-rep, e.g.
       /component/actions/... — two screens: a Target Search address form,
       then a "Who You're Contacting / What You're Saying / Contact
       Information" letter form after submitting). The default SBX Actions
       markup has several rough edges; fix them all (verified on ICL's
       /public-lands-public-hands). All structural-class selectors — no-op
       when the page isn't an Action. TEST BOTH SCREENS: submit a real
       address (e.g. "300 Brannan St, San Francisco, California, 94107")
       to reach screen 2.

   21a. Fieldset wrapper boxes. EVERY Actions fieldset wraps its fields in
        a `.action-<name>-fs.clearfix` div with a 1px grey border box —
        .action-targetsearch-fs (Target Search), .action-letter-fs (What
        You're Saying), .action-contact-fs (Contact Information), etc.
        Remove the box on all of them. (NOTE: removing only the inner
        field borders is NOT enough — the visible border is on this
        WRAPPER, not the <input>s.) */
#content [class*="action-"][class*="-fs"],
.region-content [class*="action-"][class*="-fs"] {
  border: 0 none !important;
  padding: 0 !important;
}

/* 21b. CONSISTENT FIELD HEIGHTS. SBX Actions text inputs (.input-text /
        .input-block-level) render at a stunted ~30px because box-sizing +
        12px padding eats the height, while selects/zip sit at ~48px.
        Force ALL Actions inputs to a uniform 48px across both screens. */
#content .input-text,
#content input.input-block-level,
#content .action-targetsearch-fs input[type="text"],
#content .section-action-letter input[type="text"],
#content .section-action-contact input[type="text"],
#content .section-action-contact input[type="email"],
.region-content .input-text,
.region-content input.input-block-level {
  height: 48px !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
}

/* 21c. WHO YOU'RE CONTACTING — the target cards (.action-targets > .target)
        stack one-per-row by default. Lay them out 3-per-row on desktop,
        wrapping to the next line; full-width stack on mobile. */
#content .action-targets,
.region-content .action-targets {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}
#content .action-targets,
.region-content .action-targets {
  align-items: flex-start !important;   /* top-align the target cards */
}
#content .action-targets > .target,
.region-content .action-targets > .target {
  flex: 0 1 calc(33.333% - 14px) !important;
  width: calc(33.333% - 14px) !important;
  box-sizing: border-box !important;
  float: none !important;
}
@media (max-width: 767px) {
  #content .action-targets > .target,
  .region-content .action-targets > .target {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* 21d. FIELD BORDERS in "What You're Saying" + "Contact Information"
        identical to the screen-1 (Target Search) fields: a clean 1px box
        + 6px radius on all four sides, white fill. (NOTE: making these
        borderless instead leaves only the seams between adjacent fields
        visible, which reads as "missing top/side borders" — give them the
        full box like screen 1 so every field is a consistent rounded
        input.) */
#content .section-action-letter input[type="text"],
#content .section-action-letter textarea,
#content .section-action-contact input[type="text"],
#content .section-action-contact input[type="email"],
#content .section-action-contact select,
.region-content .section-action-letter input[type="text"],
.region-content .section-action-letter textarea,
.region-content .section-action-contact input[type="text"],
.region-content .section-action-contact input[type="email"],
.region-content .section-action-contact select {
  border: 1px solid rgb(200, 210, 220) !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}

/* 21f. EQUAL-HEIGHT, TOP-ALIGNED target cards. THREE distinct causes —
        all must be fixed (each was a separate debugging pass):
        (1) TOP MARGIN: SBX gives the 2nd/3rd .target a `margin-top:18px`
            (spacing for the original vertical stack). In a flex row that
            just pushes those cards DOWN ~18px, breaking top alignment.
            Zero it — the flex `gap` handles spacing now.
        (2) PHOTO HEIGHT: target photos declare height="120px" (invalid —
            px in an HTML attr is ignored), so source images render at
            their own portrait ratio and vary in height. Force a fixed
            HEIGHT with width:auto + object-fit:contain — this keeps all
            photos the same height AND UNCROPPED. (object-fit:cover would
            equalize height too, but it CROPS the portraits — chopping
            heads — so use contain, not cover.)
        (3) ADDRESS WRAP: a long building name in .target-address wraps an
            extra line; shrink .target-address/.target-phone to 13px so it
            fits. Name + title keep their size. */
#content .action-targets > .target,
.region-content .action-targets > .target {
  margin-top: 0 !important;
}
#content .target-photo,
.region-content .target-photo {
  height: 120px !important;
  width: auto !important;
  object-fit: contain !important;
}
#content .target-address,
#content .target-phone,
.region-content .target-address,
.region-content .target-phone {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* 21e. Hide the hero/media photo on the SECOND Actions screen ONLY (the
        letter form). Screen 2 is distinguished by containing the letter
        fieldset (.action-letter-fs); screen 1 (Target Search) does not.
        Use :has() so the hero stays on screen 1 and only disappears once
        the user has submitted an address. */
.actions:has(.action-letter-fs) .section-action-media,
#content:has(.action-letter-fs) .section-action-media,
.region-content:has(.action-letter-fs) .section-action-media {
  display: none !important;
}

/* 16. Site-wide body font typically requires per-template setting (the
       brand font lives in the per-site CSS). But SBX core forces
       `body { font-family: "Helvetica Neue", Helvetica, Arial }` via
       reset.min.css; if the per-template (B) section sets the body font
       via just `body` selector with normal specificity, SBX core may
       win in the cascade. Per-template authors should use
       `body, html, #bd, #page-container { font-family: <brand>
       !important }` to ensure the override sticks. */

/* ====================  (B) SITE-SPECIFIC RULES  ==================== */
/* Add per-template rules below this line. Examples:
   - Header positioning specific to the source theme
   - Brand color overrides
   - JS-shim conditional CSS (e.g. mobile drawer positioning that
     depends on the source CMS's nav structure)
   - Webflow scroll-anim force-visible
   - WordPress Bootstrap 4 desktop nav height-auto

   To customize donation form colors per template, set the four CSS
   variables at the top of your section (B):

     :root {
       --donation-toggle-active-bg: rgb(YOUR-BRAND-COLOR);
       --donation-toggle-active-color: rgb(255, 255, 255);
       --donation-amount-active-bg: rgb(YOUR-BRAND-COLOR);
       --donation-amount-active-color: rgb(255, 255, 255);
     }

   PRIMARY-CTA HOVER (Donate Now / Go To PayPal): the uniform-button rule #17
   drives the hover from --btn-bg-hover / --btn-color. If you want a clean
   INVERT-on-hover (filled -> outline), set BOTH:
       --btn-bg-hover: rgb(255, 255, 255);     // hover bg = white
       --btn-color-hover: var(--your-brand);   // hover text = brand
   ...and don't forget the donation PILLS + frequency toggle have NO hover by
   default — add :hover rules that invert them (white/brand <-> brand/white).
   See footgun #49 (and #35 — read hover colors AFTER the 0.2s transition).
*/

/* ====================================================================
   RIVERBEND COMMONS (soapboxengagedemo) — Section B
   From-scratch demo template: every SBX surface (donations, P2P, events,
   actions, shop, classes, cart) styled in the brand system.
   Palette: indigo #2D5798 / ink #1B3A66 / purple #7F32BF / lime #9AB800 /
   sky wash #EFF7FF. Fonts: Fraunces + Figtree (set in style-client).
   ==================================================================== */

:root {
  /* base-rule variable wiring (rules #11/#12/#17) — purple primary, invert hover */
  --donation-toggle-active-bg: rgb(127, 50, 191);
  --donation-toggle-active-color: rgb(255, 255, 255);
  --donation-toggle-inactive-bg: rgb(255, 255, 255);
  --donation-toggle-inactive-color: rgb(127, 50, 191);
  --donation-amount-active-bg: rgb(127, 50, 191);
  --donation-amount-active-color: rgb(255, 255, 255);
  --donation-amount-inactive-bg: rgb(255, 255, 255);
  --donation-amount-inactive-color: rgb(127, 50, 191);
  --btn-bg: rgb(127, 50, 191);
  --btn-color: rgb(255, 255, 255);
  --btn-bg-hover: rgb(255, 255, 255);
  --btn-color-hover: rgb(127, 50, 191);
  --btn-radius: 999px;
}

/* (rc-1) FIXED-HEADER CLEARANCE — the header is position:fixed (5px ribbon +
   84px bar), so #content needs top padding or titles hide beneath it
   (youthvillages lesson; #content ONLY — never also .region-content, they nest
   and the padding doubles). */
#content { padding-top: 130px !important; padding-bottom: 24px; }
#content .region-content, .region-content { padding-top: 0 !important; }
@media (max-width: 1080px) { #content { padding-top: 114px !important; } }
#content h1, #content h2, #content h3 { scroll-margin-top: 120px; }

/* (rc-2) Body font pinned against SBX reset (base rule #16 pattern). */
body, html, #bd, #page-container {
  font-family: "Figtree", "Avenir Next", "Segoe UI", sans-serif !important;
}

/* (rc-3) Buttons: force ALL SBX action buttons into the pill system.
   Filled purple / white text; hover inverts (white / purple, keeps border). */
#content .btn-primary,
#content .btn-submit,
#content .payable-form-btn,
#content button[type="submit"],
#content input[type="submit"],
#content .add-to-cart,
#content button.add-to-cart,
#content .btn-primary > span,
#content .btn-submit > span,
#content .payable-form-btn > span {
  background: rgb(127, 50, 191) !important;
  background-image: none !important;
  color: #fff !important;
  border: 2px solid rgb(127, 50, 191) !important;
  border-radius: 999px !important;
  font-family: "Figtree", sans-serif !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  padding: 11px 28px !important;
}
#content .btn-primary:hover, #content .btn-submit:hover,
#content .payable-form-btn:hover, #content button[type="submit"]:hover,
#content input[type="submit"]:hover, #content .add-to-cart:hover,
#content .btn-primary:hover > span, #content .btn-submit:hover > span,
#content .payable-form-btn:hover > span {
  background: #fff !important;
  background-image: none !important;
  color: rgb(127, 50, 191) !important;
  border-color: rgb(127, 50, 191) !important;
}

/* (rc-4) Giving pills — outline purple, selected fills, hover inverts.
   Border on the BUTTON only, never the inner span (double-box lesson). */
#content .btn-amount, #content button.btn-amount, #content .amts {
  background-color: #fff !important;
  background-image: none !important;
  color: rgb(127, 50, 191) !important;
  border: 2px solid rgb(127, 50, 191) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
#content .btn-amount > span, #content .amts > span {
  background: transparent !important; border: 0 none !important;
  color: inherit !important; font-weight: 700 !important;
}
#content .btn-amount.btn-primary, #content .amts.btn-primary,
#content .btn-amount.active, #content .amts.active {
  background-color: rgb(127, 50, 191) !important;
  color: #fff !important; border-color: rgb(127, 50, 191) !important;
}
#content .btn-amount.btn-primary > span, #content .amts.btn-primary > span,
#content .btn-amount.active > span, #content .amts.active > span { color: #fff !important; }
#content .btn-amount:not(.btn-primary):not(.active):hover,
#content .amts:not(.btn-primary):not(.active):hover {
  background-color: rgb(127, 50, 191) !important; color: #fff !important;
}
#content .btn-amount:not(.btn-primary):not(.active):hover > span,
#content .amts:not(.btn-primary):not(.active):hover > span { color: #fff !important; }
#content .btn-amount.btn-primary:hover, #content .amts.btn-primary:hover {
  background-color: #fff !important; color: rgb(127, 50, 191) !important;
}
#content .btn-amount.btn-primary:hover > span,
#content .amts.btn-primary:hover > span { color: rgb(127, 50, 191) !important; }

/* Frequency toggle: brand the halves + hover invert (extends base rule #11). */
.section-donation ul.compList li.pad-notop div.cntr span.span-block label.choice {
  background-color: #fff !important; background-image: none !important;
  border: 2px solid rgb(127, 50, 191) !important;
  color: rgb(127, 50, 191) !important;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block input:checked + label.choice {
  background-color: rgb(127, 50, 191) !important; color: #fff !important;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block label.choice:hover {
  background-color: rgb(127, 50, 191) !important; color: #fff !important; cursor: pointer;
}
.section-donation ul.compList li.pad-notop div.cntr span.span-block input:checked + label.choice:hover {
  background-color: #fff !important; color: rgb(127, 50, 191) !important;
}

/* (rc-5) SBX section cards — give each major form section the soft-card look. */
#content .section-donation, #content .section-contactinfo,
#content .section-billing, #content .section-dedication,
#content .eventRegistration,
#content .product-store-wrapper {
  background: #fff;
  border: 1px solid #DCE6F2;
  border-radius: 14px;
  padding: 26px 28px !important;
  margin-bottom: 22px;
  box-shadow: 0 2px 6px rgba(27,58,102,0.05), 0 10px 28px rgba(27,58,102,0.06);
}

/* (rc-6) SHOP: storefront grid + product detail + cart. */
#content .item-list { display: flex; flex-wrap: wrap; gap: 22px; }
#content .item-list > * {
  background: #fff; border: 1px solid #DCE6F2; border-radius: 14px;
  padding: 16px; transition: box-shadow 0.18s ease, transform 0.18s ease;
}
#content .item-list > *:hover {
  box-shadow: 0 4px 10px rgba(27,58,102,0.10), 0 18px 44px rgba(27,58,102,0.14);
  transform: translateY(-3px);
}
#content .item-thumb-wrapper img, #content .productImageList img {
  border-radius: 10px; max-width: 100%; height: auto;
}
#content .item-name, #content .item-name a {
  font-family: "Fraunces", Georgia, serif; font-size: 19px; font-weight: 600;
  color: #1B3A66; text-decoration: none;
}
#content .item-price { color: #5E7100; font-weight: 800; font-size: 16px; }
#content .product-quantity {
  width: 92px !important; min-width: 92px !important; max-width: 92px !important;
}

/* (rc-7) CLASSES search results + EVENTS meta rows. */
#content .elements-col-event {
  background: #fff; border: 1px solid #DCE6F2; border-radius: 14px;
  padding: 18px 20px; margin-bottom: 14px;
}
#content .element-data.class-code { color: #5E7100; font-weight: 700; }
#content .compSect-wrap {
  border: 0 !important; border-top: 1px solid #EFF7FF !important;
  padding: 18px 0 !important;
}

/* (rc-8) P2P — NEVER redefine .sbx-grid! It is SBX's own layout system
   (.sbx-col-75 = a 75% column etc.); a blanket grid-template override crushed
   the team/personal pages into a 230px column and overlapped the campaign
   team cards. Style COSMETICS only, geometry stays native. */
#content .campaign-supporters-list li {
  background: #fff; border: 1px solid #DCE6F2; border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px; list-style: none;
}
#content .section-create-fundraiser-buttons .btn,
#content .section-create-fundraiser-buttons a {
  margin: 4px 6px 4px 0;
}

/* (rc-9) Ticket qty dropdown (bootstrap's bare select{width:220px} trap). */
#content select.ticNumIn, #content .ticketQty select {
  width: 88px !important; min-width: 88px !important; max-width: 88px !important;
}
/* "Your Total" value — id-level so it beats SBX's id color rule. */
#content #total_cost, #content #subtotal_cost,
#content .foot-total .amount, #content .foot-total .amount span {
  color: rgb(127, 50, 191) !important; font-weight: 800 !important;
}

/* (rc-10) Hide stray badge imagery + demo chrome cruft. */
#content img.payment-ssl, img.payment-ssl { display: none !important; }
.poweredby { display: none; }

/* ====================================================================
   (rc-11) DEPLOYED-PAGE FIX ROUND — 2026-07-30, from the live 12-page audit.
   ==================================================================== */

/* -- DONATE -- */
/* Organization (and any full-width input) must not overflow its card. */
#content input, #content select, #content textarea {
  box-sizing: border-box !important;
  max-width: 100% !important;
}
/* Designation buttons: match the amount-pill outline look (covers the
   button/label/anchor variants SBX renders for designations). */
#content .section-donation .btn:not(.btn-amount):not(.btn-primary):not(.btn-submit),
#content .designation-list label,
#content .btn-designation,
#content [class*="designation"] .btn {
  background: #fff !important;
  background-image: none !important;
  color: var(--rc-purple, #7F32BF) !important;
  border: 2px solid #7F32BF !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  padding: 9px 20px !important;
}
#content .section-donation .btn:not(.btn-amount):not(.btn-primary):not(.btn-submit):hover,
#content .btn-designation:hover,
#content [class*="designation"] .btn:hover {
  background: #7F32BF !important; color: #fff !important;
}
/* Fee + total live OUTSIDE the section cards — give them aligned breathing room. */
#content .section-fee, #content .section-fee-field, #content .section-total {
  padding: 6px 4px !important;
}
#content .section-formactions { margin-top: 18px; }

/* -- P2P CAMPAIGN -- */
/* Campaign header: soft wash band, not an empty white card. */
#content .section-campaign-header {
  background: #EFF7FF;
  border-radius: 14px;
  padding: 34px 30px !important;
  margin-bottom: 22px;
}
/* Progress meters → brand. CAREFUL: in the P2P app `.progress-bar` is the
   whole STATS CONTAINER (a 600x270 sbx-col), NOT a meter — painting it
   created a giant gradient blob. The real meters are the native
   <progress class="sbx-progress-bar"> element and the div/span pair
   .sbx-progress-bar > .sbx-progress-bar__value. Style ONLY those. */
#content progress.sbx-progress-bar,
#content div.sbx-progress-bar {
  height: 10px !important; border: 0 !important; border-radius: 999px !important;
  background: #DCE6F2 !important; overflow: hidden;
  accent-color: #7F32BF;
}
#content progress.sbx-progress-bar::-webkit-progress-bar { background: #DCE6F2; border-radius: 999px; }
#content progress.sbx-progress-bar::-webkit-progress-value {
  background: linear-gradient(90deg, #7F32BF, #9AB800); border-radius: 999px;
}
#content progress.sbx-progress-bar::-moz-progress-bar {
  background: linear-gradient(90deg, #7F32BF, #9AB800); border-radius: 999px;
}
#content .sbx-progress-bar__value {
  background: linear-gradient(90deg, #7F32BF, #9AB800) !important;
  border-radius: 999px !important; height: 10px !important; display: block;
}
/* Teams / Fundraisers tabs → brand. */
#content .section-tab, #content .nav-tabs { border-bottom: 2px solid #DCE6F2 !important; }
#content .nav-tabs > li > a, #content .section-tab a {
  border: 0 !important; border-radius: 10px 10px 0 0 !important;
  color: #2D5798 !important; font-weight: 700 !important;
  background: transparent !important;
}
#content .nav-tabs > .active > a, #content .section-tab .active a,
#content .nav-tabs > li > a.active {
  color: #5F2390 !important;
  box-shadow: inset 0 -3px 0 #9AB800 !important;
  background: #EFF7FF !important;
}

/* -- SHOP -- */
/* Ghost card: hide empty grid items. */
#content .item-list > *:empty { display: none !important; }
/* Add to Cart: natural width, not a 457px slab. */
#content .add-to-cart, #content button.add-to-cart {
  width: auto !important; display: inline-block !important;
  min-width: 180px; margin-top: 10px;
}
/* Price + stock: lime price, quiet stock note, spaced apart. */
#content .price .price-value { color: #5E7100; font-weight: 800; font-size: 20px; }
#content .price { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 14px; }

/* -- CLASSES APP (all views) — user OK'd !important to beat core css -- */
/* Soft-corner card table: kill the hard #2c2c2c borders + #e0e0e0 zebra. */
#content table.search-result {
  border: 1px solid #DCE6F2 !important;
  border-radius: 14px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  width: 100%;
  box-shadow: 0 2px 6px rgba(27,58,102,0.05), 0 10px 28px rgba(27,58,102,0.06);
  background: #fff !important;
}
#content table.search-result td, #content table.search-result th {
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid #EFF7FF !important;
  padding: 16px 18px !important;   /* breathing room (was cramped) */
  vertical-align: middle !important;
}
#content table.search-result tr:last-child td { border-bottom: 0 !important; }
/* soft zebra: sky wash instead of hard grey */
#content table.search-result tr:nth-child(even) td { background: #F7FBFF !important; }
#content table.search-result tr:hover td { background: #EFF7FF !important; }
/* "Closed"/status → quiet badge */
#content .element-data.status {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  background: #EFF7FF; color: #2D5798; font-weight: 700; font-size: 13px;
}
/* class-code slugs: quiet lime, not shouting */
#content .element-data.class-code { color: #5E7100 !important; font-weight: 600 !important; font-size: 13.5px; }
/* Instructor cards: drop the underline on serif name links (kept highlighter) */
#content .region-content a h2, #content h2 a, #content h3 a,
#content a.instructor-name, #content .instructor a {
  text-decoration: none !important;
}
/* jQuery-UI time slider → brand */
#content .ui-slider { background: #DCE6F2 !important; border: 0 !important; border-radius: 999px !important; height: 6px !important; }
#content .ui-slider .ui-slider-range { background: #7F32BF !important; }
#content .ui-slider .ui-slider-handle {
  background: #fff !important; border: 3px solid #7F32BF !important;
  border-radius: 50% !important; width: 18px !important; height: 18px !important;
  top: -7px !important; cursor: pointer;
}
/* Filter sidebar: tidy day-of-week checkboxes into two neat columns */
#content .checkbox.days, #content [class*="days-of"] { display: inline-block; }

/* -- GLOBAL PADDING POLISH (user: "not enough padding between elements") -- */
#content .section, #content .compSect-wrap { margin-bottom: 18px; }
#content .item-intro, #content .product-collection-intro,
#content .section-intro { margin: 12px 0 26px; }
#content .item-list { margin-top: 10px; }
#content table.search-result { margin: 14px 0 26px; }
#content .section-formactions, #content .add-to-cart { margin-bottom: 8px; }

/* (rc-12) DONATE designation pills — real markup is
   li.designation-group > .designation-container > .pills > span.pill
   (found via live probe; none of the usual .btn classes). Outline-pill the
   idle state, fill on hover/selected, hide the empty no-label pill. */
#content .designation-container .pill {
  display: inline-block;
  background: #fff !important;
  color: #7F32BF !important;
  border: 2px solid #7F32BF !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  margin: 4px 8px 4px 0 !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
#content .designation-container .pill:hover {
  background: #7F32BF !important; color: #fff !important;
}
#content .designation-container .pill.active,
#content .designation-container .pill.selected,
#content .designation-container .pill[aria-selected="true"] {
  background: #7F32BF !important; color: #fff !important;
}
#content .designation-container .pill:empty { display: none !important; }