/*
 * Charitable Ambassadors -- card-grid submit-campaign form (phase 1).
 *
 * SCOPE: every selector below is prefixed with
 *   `body.charitable-ambassadors-submit-cards`
 * so this bundle never affects pages that do not host the new form,
 * and so its specificity sits one class above plain element selectors
 * (which most themes use for bare `button`, `input`, `ul li` styling).
 *
 * RESET: a :where()-wrapped block at the top normalizes box-sizing,
 * inheritance, list-style, and tap-highlight. Kept at 0,1,0 specificity
 * so a customer's stylesheet can still override.
 *
 * !IMPORTANT: deliberate and limited. Only used where a guarantee must
 * hold regardless of theme:
 *   - card-grid `display: grid` (against `ul { display: block !important }`)
 *   - mobile sticky-Continue `position: sticky`
 *   - touch-target `min-height` (44/48/88px)
 *   - search input `font-size: 16px` (iOS zoom prevention)
 *   - mobile-breakpoint `grid-template-columns: 1fr`
 * Everything else (colors, padding, radius, typography) is `!important`-free
 * so customers can override aesthetics without specificity wars.
 *
 * ACCENT: every accent atom reads `var(--cap-accent, #1db954)`. The
 * variable is injected on `:root` by `charitable_ambassadors_enqueue_styles()`
 * from the saved `theme_primary_color` option.
 */
body.charitable-ambassadors-submit-cards {
  /* Reset block -- :where() keeps specificity flat. */
}
body.charitable-ambassadors-submit-cards :where(.charitable-ambassadors-submit-cards-form,
.charitable-ambassadors-submit-cards-form *) {
  box-sizing: border-box;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
body.charitable-ambassadors-submit-cards :where(.charitable-ambassadors-submit-cards-form ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.charitable-ambassadors-submit-cards :where(.charitable-ambassadors-submit-cards-form label) {
  text-decoration: none;
}
body.charitable-ambassadors-submit-cards .charitable-ambassadors-submit-cards-form {
  display: block;
  max-width: 100%;
}
body.charitable-ambassadors-submit-cards .cap-step-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}
body.charitable-ambassadors-submit-cards .cap-step-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  background: #f3f4f6;
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 0; /* margin handled by .cap-step-row now */
}
body.charitable-ambassadors-submit-cards .cap-step-back {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  color: #4b5563;
  cursor: pointer;
  line-height: 1.2;
  flex-shrink: 0;
}
body.charitable-ambassadors-submit-cards .cap-step-back:hover, body.charitable-ambassadors-submit-cards .cap-step-back:focus-visible {
  border-color: var(--cap-accent, #1db954);
  color: var(--cap-accent, #1db954);
}
body.charitable-ambassadors-submit-cards .cap-step-heading {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #1d2327;
  margin: 0 0 16px;
}
body.charitable-ambassadors-submit-cards {
  /* Card grid. */
}
body.charitable-ambassadors-submit-cards .cap-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 16px;
}
body.charitable-ambassadors-submit-cards .cap-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 14px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  color: #1d2327;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  min-height: 88px !important;
}
body.charitable-ambassadors-submit-cards .cap-card__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.charitable-ambassadors-submit-cards .cap-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cap-accent, #1db954) 8%, #fff);
  color: var(--cap-accent, #1db954);
  margin-bottom: 8px;
}
body.charitable-ambassadors-submit-cards .cap-card__icon svg {
  width: 24px;
  height: 24px;
  display: block;
  /* Inherit the accent color set on .cap-card__icon; without this the SVG
     falls back to the spec default fill:black (J1: black recipient-card icon). */
  fill: currentColor;
}
body.charitable-ambassadors-submit-cards .cap-card__title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
body.charitable-ambassadors-submit-cards .cap-card__description {
  font-size: 12px;
  line-height: 1.45;
  color: #4b5563;
}
body.charitable-ambassadors-submit-cards .cap-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--cap-accent, #1db954);
  padding: 3px 8px;
  border-radius: 10px;
  display: none;
}
body.charitable-ambassadors-submit-cards .cap-card:hover,
body.charitable-ambassadors-submit-cards .cap-card:focus-within {
  border-color: var(--cap-accent, #1db954);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cap-accent, #1db954) 30%, #fff);
}
body.charitable-ambassadors-submit-cards .cap-card:has(.cap-card__radio:checked),
body.charitable-ambassadors-submit-cards .cap-card.is-selected {
  border-color: var(--cap-accent, #1db954);
  background: color-mix(in srgb, var(--cap-accent, #1db954) 5%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cap-accent, #1db954) 30%, #fff);
}
body.charitable-ambassadors-submit-cards .cap-card:has(.cap-card__radio:checked) .cap-card__badge,
body.charitable-ambassadors-submit-cards .cap-card.is-selected .cap-card__badge {
  display: inline-block;
}
body.charitable-ambassadors-submit-cards {
  /*
   * Fundraiser-type sub-step (Individual / Create a team / Join a team)
   *
   * The legacy field renderer emits `<ul class="charitable-radio-list">`
   * with `<li>` items. In card mode the option HTML is replaced with our
   * `.ft-card` structure (outer wrapper + icon + title + description).
   * The outer `.ft-card` span is critical because Charitable Pro's radio
   * template wraps option HTML in a `<label>` (display:inline) — the inner
   * flex column only stacks correctly when forced inside a block container.
   */
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field {
  margin: 0 0 16px;
  /* Header text from the form's fieldset wrapper. */
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-fieldset-field-wrapper .charitable-fieldset-field-header {
  font-size: 14px;
  font-weight: 700;
  color: #1d2327;
  line-height: 1.4;
  margin: 0 0 10px;
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border: 0 !important;
  border-radius: 0;
  padding: 0;
  margin: 0 !important;
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li {
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #1d2327;
  cursor: pointer;
  min-height: 160px !important;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li {
  /* Make the surrounding label (added by Charitable Pro's radio
   * template) a true block, so our flex-column wrapper inside
   * stacks correctly. */
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li label {
  display: block !important;
  width: 100%;
  padding: 20px 14px 18px !important;
  margin: 0 !important;
  cursor: pointer;
  color: inherit;
  font-weight: 400;
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li .ft-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 6px;
  width: 100%;
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li .ft-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cap-accent, #1db954) 8%, #fff);
  color: var(--cap-accent, #1db954);
  margin: 0 0 4px;
  flex: 0 0 auto;
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li .ft-card__icon svg {
  width: 26px !important;
  height: 26px !important;
  display: block !important;
  margin: 0 !important;
  fill: currentColor !important;
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li .ft-card__title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #1d2327;
  line-height: 1.3;
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li .ft-card__description {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: #4b5563;
  margin: 2px 0 0;
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li:hover, body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li:focus-within {
  border-color: var(--cap-accent, #1db954) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cap-accent, #1db954) 30%, #fff);
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li.selected, body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li:has(input[type=radio]:checked) {
  border-color: var(--cap-accent, #1db954) !important;
  background: color-mix(in srgb, var(--cap-accent, #1db954) 5%, #fff) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cap-accent, #1db954) 30%, #fff);
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li:last-child {
  border-right: 2px solid #e0e0e0 !important;
}
body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li:last-child.selected, body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list li:last-child:has(input[type=radio]:checked) {
  border-right: 2px solid var(--cap-accent, #1db954) !important;
  border-bottom: 2px solid var(--cap-accent, #1db954) !important;
}
body.charitable-ambassadors-submit-cards {
  /* Dynamic info-card panel below the fundraiser-type chooser. */
}
body.charitable-ambassadors-submit-cards .cap-ft-info {
  margin: 12px 0 0;
  padding: 16px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: color-mix(in srgb, var(--cap-accent, #1db954) 4%, #fff);
  color: #1d2327;
  font-size: 15px;
  line-height: 1.55;
}
body.charitable-ambassadors-submit-cards .cap-ft-info__panel {
  display: none;
}
body.charitable-ambassadors-submit-cards .cap-ft-info__panel.is-visible {
  display: block;
}
body.charitable-ambassadors-submit-cards .cap-ft-info__title {
  font-size: 17px;
  font-weight: 700;
  color: #1d2327;
  margin: 0 0 6px;
}
body.charitable-ambassadors-submit-cards .cap-ft-info__body {
  margin: 0 0 8px;
  font-size: 15px;
  color: #1d2327;
}
body.charitable-ambassadors-submit-cards .cap-ft-info__tip {
  margin: 0;
  font-size: 14px;
  color: #4b5563;
}
body.charitable-ambassadors-submit-cards .cap-ft-info__tip strong {
  color: var(--cap-accent, #1db954);
  font-weight: 700;
}
body.charitable-ambassadors-submit-cards {
  /* The "Choose the team you would like to join:" select field appears
   * below the chooser when the user picks `team-member`. Style it to look
   * like the picker panel. */
}
body.charitable-ambassadors-submit-cards #charitable_field_team_id.fundraiser-type-selection-step {
  padding: 14px !important;
  margin: 12px 0 0 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--cap-accent, #1db954) 4%, #fff) !important;
  color: #1d2327;
}
body.charitable-ambassadors-submit-cards #charitable_field_team_id.fundraiser-type-selection-step label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1d2327;
  margin: 0 0 6px;
}
body.charitable-ambassadors-submit-cards #charitable_field_team_id.fundraiser-type-selection-step select {
  width: 100%;
  max-width: 480px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}
body.charitable-ambassadors-submit-cards {
  /* Picker panel. */
}
body.charitable-ambassadors-submit-cards .cap-picker {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border: 1px solid transparent;
  border-radius: 10px;
  margin: 0 0 16px;
}
body.charitable-ambassadors-submit-cards .cap-picker[aria-expanded=true] {
  max-height: 2000px;
  border-color: #e5e7eb;
  padding: 14px;
}
body.charitable-ambassadors-submit-cards .cap-picker__search-label {
  position: absolute;
  left: -9999px;
}
body.charitable-ambassadors-submit-cards .cap-picker__search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 16px !important;
  line-height: 1.4;
  color: #1d2327;
  background: #fff;
  appearance: none;
  min-height: 48px !important;
  margin-bottom: 10px;
}
body.charitable-ambassadors-submit-cards .cap-picker__empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  background: #f9fafb;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
body.charitable-ambassadors-submit-cards .cap-picker__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
body.charitable-ambassadors-submit-cards .cap-picker-tile {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  min-height: 64px !important;
  -webkit-overflow-scrolling: touch;
}
body.charitable-ambassadors-submit-cards .cap-picker-tile:hover,
body.charitable-ambassadors-submit-cards .cap-picker-tile:focus-visible {
  border-color: var(--cap-accent, #1db954);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cap-accent, #1db954) 30%, #fff);
  outline: none;
}
body.charitable-ambassadors-submit-cards .cap-picker-tile[aria-pressed=true] {
  border-color: var(--cap-accent, #1db954);
  background: color-mix(in srgb, var(--cap-accent, #1db954) 5%, #fff);
}
body.charitable-ambassadors-submit-cards .cap-picker-tile__thumb {
  flex: 0 0 56px;
  width: 56px;
  aspect-ratio: 1;
  border-radius: 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cap-accent, #1db954) 20%, #fff), color-mix(in srgb, var(--cap-accent, #1db954) 60%, #fff));
  object-fit: cover;
  overflow: hidden;
}
body.charitable-ambassadors-submit-cards .cap-picker-tile__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.charitable-ambassadors-submit-cards .cap-picker-tile__meta {
  flex: 1 1 0;
  min-width: 0;
}
body.charitable-ambassadors-submit-cards .cap-picker-tile__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
body.charitable-ambassadors-submit-cards .cap-picker-tile__raised {
  font-size: 11px;
  color: #4b5563;
  margin-bottom: 4px;
}
body.charitable-ambassadors-submit-cards .cap-picker-tile__bar {
  height: 4px;
  max-width: 300px;
  background: #d1d5db;
  border-radius: 2px;
  overflow: hidden;
}
body.charitable-ambassadors-submit-cards .cap-picker-tile__bar i {
  display: block;
  height: 100%;
  background: var(--cap-accent, #1db954);
  max-width: 100%;
}
body.charitable-ambassadors-submit-cards .cap-picker__loadmore {
  display: block;
  width: 100%;
  margin: 10px auto 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #1d2327;
  cursor: pointer;
  min-height: 48px !important;
}
body.charitable-ambassadors-submit-cards .cap-picker__loadmore[hidden] {
  display: none;
}
body.charitable-ambassadors-submit-cards {
  /* ---- picker loading state: search spinner + skeleton tiles ---- */
}
body.charitable-ambassadors-submit-cards .cap-picker__search-wrap {
  position: relative;
}
body.charitable-ambassadors-submit-cards .cap-picker__search-spinner {
  display: none;
  position: absolute;
  top: 16px;
  right: 14px;
  width: 16px;
  height: 16px;
  border: 2px solid #d1d5db;
  border-top-color: #6b7280;
  border-radius: 50%;
  animation: cap-email-spin 0.8s linear infinite;
  pointer-events: none;
}
body.charitable-ambassadors-submit-cards .cap-picker--loading .cap-picker__search-spinner {
  display: block;
}
body.charitable-ambassadors-submit-cards .cap-picker-tile--skeleton {
  cursor: default;
  pointer-events: none;
}
body.charitable-ambassadors-submit-cards .cap-picker-tile--skeleton .cap-picker-tile__thumb,
body.charitable-ambassadors-submit-cards .cap-skel {
  background: linear-gradient(90deg, #eef0f2 25%, #e2e5e8 37%, #eef0f2 63%);
  background-size: 400% 100%;
  animation: cap-skel-shimmer 1.4s ease infinite;
}
body.charitable-ambassadors-submit-cards .cap-skel {
  display: block;
  border-radius: 4px;
}
body.charitable-ambassadors-submit-cards .cap-skel--title {
  width: 70%;
  height: 11px;
  margin-bottom: 7px;
}
body.charitable-ambassadors-submit-cards .cap-skel--line {
  width: 45%;
  height: 9px;
  margin-bottom: 8px;
}
body.charitable-ambassadors-submit-cards .cap-skel--bar {
  width: 100%;
  max-width: 300px;
  height: 4px;
}
@keyframes cap-skel-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
body.charitable-ambassadors-submit-cards .cap-picker__loadmore.is-loading {
  opacity: 0.7;
  pointer-events: none;
}
body.charitable-ambassadors-submit-cards .cap-picker__loadmore.is-loading::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid #d1d5db;
  border-top-color: #6b7280;
  border-radius: 50%;
  vertical-align: -2px;
  animation: cap-email-spin 0.8s linear infinite;
}
body.charitable-ambassadors-submit-cards .cap-picker__empty {
  padding: 24px 12px;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
}
body.charitable-ambassadors-submit-cards .cap-picker__empty a {
  display: inline-block;
  margin-top: 6px;
  color: var(--cap-accent, #1db954);
  font-weight: 600;
  text-decoration: none;
}
body.charitable-ambassadors-submit-cards {
  /* Team-card picker (replaces the legacy team-id select).
   * Reuses .cap-picker* styles, with team-specific tile content.
   * Hidden by default; shown only when the user has the `team-member`
   * radio checked (see the top-level :has() rule at the bottom of this file). */
}
body.charitable-ambassadors-submit-cards .cap-team-picker {
  display: none;
  margin: 12px 0 0;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: color-mix(in srgb, var(--cap-accent, #1db954) 4%, #fff);
}
body.charitable-ambassadors-submit-cards .cap-team-picker .cap-picker__search {
  margin-bottom: 10px;
}
body.charitable-ambassadors-submit-cards .cap-team-tile {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  min-height: 64px !important;
}
body.charitable-ambassadors-submit-cards .cap-team-tile:hover,
body.charitable-ambassadors-submit-cards .cap-team-tile:focus-visible {
  border-color: var(--cap-accent, #1db954);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cap-accent, #1db954) 30%, #fff);
  outline: none;
}
body.charitable-ambassadors-submit-cards .cap-team-tile[aria-pressed=true] {
  border-color: var(--cap-accent, #1db954);
  background: color-mix(in srgb, var(--cap-accent, #1db954) 5%, #fff);
}
body.charitable-ambassadors-submit-cards .cap-team-tile__thumb {
  flex: 0 0 80px;
  width: 80px;
  aspect-ratio: 1;
  border-radius: 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cap-accent, #1db954) 20%, #fff), color-mix(in srgb, var(--cap-accent, #1db954) 60%, #fff));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 22px;
}
body.charitable-ambassadors-submit-cards .cap-team-tile__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.charitable-ambassadors-submit-cards .cap-team-tile__meta {
  flex: 1 1 0;
  min-width: 0;
}
body.charitable-ambassadors-submit-cards .cap-team-tile__title {
  font-size: 14px;
  font-weight: 700;
  color: #1d2327;
  margin: 0 0 2px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
body.charitable-ambassadors-submit-cards .cap-team-tile__meta-line {
  font-size: 11.5px;
  color: #4b5563;
  margin: 0 0 4px;
  line-height: 1.4;
}
body.charitable-ambassadors-submit-cards .cap-team-tile__meta-line strong {
  color: #1d2327;
}
body.charitable-ambassadors-submit-cards .cap-team-tile__bar {
  height: 4px;
  max-width: 300px;
  background: #d1d5db;
  border-radius: 2px;
  overflow: hidden;
}
body.charitable-ambassadors-submit-cards .cap-team-tile__bar i {
  display: block;
  height: 100%;
  background: var(--cap-accent, #1db954);
  max-width: 100%;
}
body.charitable-ambassadors-submit-cards {
  /* CTA row. */
}
body.charitable-ambassadors-submit-cards .cap-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 0;
}
body.charitable-ambassadors-submit-cards .cap-cta__cancel {
  font-size: 13px;
  color: #6b7280;
  text-decoration: underline;
}
body.charitable-ambassadors-submit-cards .cap-cta button[type=submit],
body.charitable-ambassadors-submit-cards .cap-cta input[type=submit] {
  min-height: 48px !important;
}
body.charitable-ambassadors-submit-cards {
  /* Continue button is disabled until the user picks a campaign tile
   * (when "fundraiser" recipient is selected). The `disabled` attribute
   * is set by JS — we tighten the visual state to match. */
}
body.charitable-ambassadors-submit-cards .cap-cta input[type=submit][disabled],
body.charitable-ambassadors-submit-cards .cap-cta input[type=submit][data-cap-pending-campaign="1"] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}
body.charitable-ambassadors-submit-cards {
  /* Inline notice (JS-driven) shown when the user tries to advance step
   * 1 with the fundraiser card selected but no campaign tile picked.
   * Replaces the legacy reload-with-error UX with an in-place prompt. */
}
body.charitable-ambassadors-submit-cards .cap-inline-notice {
  margin: 0 0 14px;
  padding: 12px 14px 12px 38px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cap-accent, #1db954) 8%, #fff);
  border-left: 3px solid var(--cap-accent, #1db954);
  color: #1d2327;
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  animation: cap-inline-notice-in 0.25s ease;
}
body.charitable-ambassadors-submit-cards .cap-inline-notice::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231db954'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cline%20x1='12'%20y1='8'%20x2='12'%20y2='12'/%3E%3Cline%20x1='12'%20y1='16'%20x2='12.01'%20y2='16'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
}
@keyframes cap-inline-notice-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
body.charitable-ambassadors-submit-cards {
  /* Disabled-until-selection state: when require-selection is set and no
   * selection has been made yet, visually disable + block pointer events. */
}
body.charitable-ambassadors-submit-cards .cap-cta[data-require-selection="1"]:not([data-selection-made]) button[type=submit],
body.charitable-ambassadors-submit-cards .cap-cta[data-require-selection="1"]:not([data-selection-made]) input[type=submit] {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}
body.charitable-ambassadors-submit-cards {
  /* Submit-button icons. Higher-specificity + !important to defeat theme
   * styling on `.button-primary` / generic submit-input rules. The icons
   * are inline-encoded SVGs (utf-8 + percent-encoded brackets), 16x16,
   * white stroke so they're legible on the magenta button background.
   * @at-root escapes the `body.charitable-ambassadors-submit-cards` wrapper
   * so we can add #charitable-campaign-submission-form to the selector chain
   * for extra specificity without nesting an ID inside itself.
   *
   * Button names emitted by get_submit_buttons():
   *   name="preview-campaign"  → Save & Preview  → eye icon
   *   name="submit-campaign"   → Submit Campaign  → paper-plane / send icon
   *   (any other submit)       → default check icon
   */
}
body.charitable-ambassadors-submit-cards #charitable-campaign-submission-form .cap-cta input[type=submit] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%206%209%2017%204%2012'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 16px 16px !important;
  padding-left: 38px !important;
  padding-right: 18px !important;
}

body.charitable-ambassadors-submit-cards #charitable-campaign-submission-form .cap-cta input[type=submit][name=next-page] {
  /* Continue button on Steps 1 and 2: right-pointing arrow, right-aligned.
   * Overrides the default checkmark-on-left used for terminal-action buttons. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='5'%20y1='12'%20x2='19'%20y2='12'/%3E%3Cpolyline%20points='12%205%2019%2012%2012%2019'/%3E%3C/svg%3E") !important;
  background-position: right 14px center !important;
  padding-left: 18px !important;
  padding-right: 38px !important;
}

body.charitable-ambassadors-submit-cards #charitable-campaign-submission-form .cap-cta input[type=submit][name=preview-campaign] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%2012s4-8%2011-8%2011%208%2011%208-4%208-11%208-11-8-11-8z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E") !important;
}

body.charitable-ambassadors-submit-cards #charitable-campaign-submission-form .cap-cta input[type=submit][name=submit-campaign] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='22'%20y1='2'%20x2='11'%20y2='13'/%3E%3Cpolygon%20points='22%202%2015%2022%2011%2013%202%209%2022%202'/%3E%3C/svg%3E") !important;
}

body.charitable-ambassadors-submit-cards {
  /* Mobile breakpoint. */
}
@media (max-width: 640px) {
  body.charitable-ambassadors-submit-cards .cap-cards {
    grid-template-columns: 1fr !important;
  }
  body.charitable-ambassadors-submit-cards .cap-card {
    min-height: 88px !important;
  }
  body.charitable-ambassadors-submit-cards .cap-cta[data-sticky="1"] {
    position: sticky !important;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 12px;
    margin: 0 -12px;
    z-index: 10;
  }
  body.charitable-ambassadors-submit-cards .cap-cta[data-sticky="1"] button[type=submit],
  body.charitable-ambassadors-submit-cards .cap-cta[data-sticky="1"] input[type=submit] {
    width: 100%;
  }
  body.charitable-ambassadors-submit-cards .charitable-fundraiser-type-field .charitable-radio-list {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  body.charitable-ambassadors-submit-cards .cap-picker__tiles {
    grid-template-columns: 1fr;
  }
}
body.charitable-ambassadors-submit-cards {
  /* -------------------------------------------------------------
   * Team-card compact + Change button (Step 3 fundraiser-details).
   * Added in 3.0.0 for the Join Team mini-card UX.
   * ------------------------------------------------------------- */
}
body.charitable-ambassadors-submit-cards .cap-team-compact__mini {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #dcdcde;
  border-radius: 8px;
  background: #fff;
}
@media (max-width: 600px) {
  body.charitable-ambassadors-submit-cards .cap-team-compact__mini {
    flex-wrap: wrap;
  }
}
body.charitable-ambassadors-submit-cards .cap-team-compact__mini {
  /* Honor the `hidden` attribute -- without this override,
   * the `display: flex` above wins over the UA `[hidden] { display: none }`. */
}
body.charitable-ambassadors-submit-cards .cap-team-compact__mini[hidden] {
  display: none;
}
body.charitable-ambassadors-submit-cards .cap-team-compact__change {
  margin-left: auto;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--cap-accent, #1db954);
  color: var(--cap-accent, #1db954);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
body.charitable-ambassadors-submit-cards .cap-team-compact__change:hover, body.charitable-ambassadors-submit-cards .cap-team-compact__change:focus-visible {
  background: var(--cap-accent, #1db954);
  color: #fff;
}
@media (max-width: 600px) {
  body.charitable-ambassadors-submit-cards .cap-team-compact__change {
    margin-left: 0;
    width: 100%;
    order: 99;
  }
}
body.charitable-ambassadors-submit-cards .cap-team-compact {
  /* Step 3 picker visibility. The base `.cap-team-picker { display: none }`
   * rule (used for Step 2's :has()-driven show/hide) would otherwise keep
   * the Step 3 picker invisible regardless of the [hidden] attribute,
   * because Step 3 has no `fundraiser_type` radio to satisfy the :has(). */
}
body.charitable-ambassadors-submit-cards .cap-team-compact .cap-team-picker {
  display: block;
  margin: 0;
}
body.charitable-ambassadors-submit-cards .cap-team-compact .cap-team-picker[hidden] {
  display: none;
}
body.charitable-ambassadors-submit-cards .cap-team-tile--mini {
  flex: 1;
  display: flex;
  gap: 14px;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
body.charitable-ambassadors-submit-cards .cap-team-tile--mini .cap-team-tile__thumb {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
}
body.charitable-ambassadors-submit-cards .cap-team-tile--mini .cap-team-tile__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.charitable-ambassadors-submit-cards .cap-team-tile--mini .cap-team-tile__title {
  font-size: 16px;
  margin: 0 0 4px;
}
body.charitable-ambassadors-submit-cards .cap-team-tile--mini .cap-team-tile__meta-line {
  font-size: 13px;
  margin: 2px 0;
  color: #50575e;
}
body.charitable-ambassadors-submit-cards .cap-team-tile--mini .cap-team-tile__bar {
  height: 4px;
  margin-top: 8px;
}
body.charitable-ambassadors-submit-cards {
  /* Disabled submit-button visual layer.
   * The `disabled` attribute handles the actual gate; this class is the
   * theme-safe override for visual styling because Charitable Pro's
   * button rules don't always read `:disabled` consistently. */
}
body.charitable-ambassadors-submit-cards .charitable-form-button.cap-disabled,
body.charitable-ambassadors-submit-cards button[type=submit].cap-disabled,
body.charitable-ambassadors-submit-cards input[type=submit].cap-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Show the team-card picker only when the user has `team-member` selected.
 * Must be a top-level rule (outside the body.charitable-ambassadors-submit-cards
 * block) because it uses both the body class and a descendant :has() selector
 * in the same chain — nesting it inside the body block would double-up the
 * body-class qualifier and make the selector malformed in some SCSS compilers. */
body.charitable-ambassadors-submit-cards #charitable-campaign-submission-form:has(input[type=radio][name=fundraiser_type][value=team-member]:checked) .cap-team-picker {
  display: block;
}

/* "View" link inside team tiles (Step 2 picker) and beside the Change
 * button (Step 3 mini-card). Opens the team campaign in a new tab. */
body.charitable-ambassadors-submit-cards .cap-team-tile__view,
body.charitable-ambassadors-submit-cards .cap-picker-tile__view {
  display: inline-block;
  margin-top: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--cap-accent, #1db954);
  text-decoration: none;
  text-underline-offset: 2px;
  cursor: pointer;
  pointer-events: auto; /* override the parent's pointer-events:none on mini variant */
}
body.charitable-ambassadors-submit-cards .cap-team-tile__view:hover, body.charitable-ambassadors-submit-cards .cap-team-tile__view:focus-visible,
body.charitable-ambassadors-submit-cards .cap-picker-tile__view:hover,
body.charitable-ambassadors-submit-cards .cap-picker-tile__view:focus-visible {
  color: var(--cap-accent, #1db954);
  text-decoration: underline;
}
body.charitable-ambassadors-submit-cards .cap-team-compact__view {
  margin-left: auto;
  margin-right: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cap-accent, #1db954);
  text-decoration: none;
  border-radius: 6px;
}
body.charitable-ambassadors-submit-cards .cap-team-compact__view:hover, body.charitable-ambassadors-submit-cards .cap-team-compact__view:focus-visible {
  text-decoration: underline;
}
body.charitable-ambassadors-submit-cards .cap-team-compact__view {
  /* When the View link is present, the Change button should not steal margin-left. */
}
body.charitable-ambassadors-submit-cards .cap-team-compact__view + .cap-team-compact__change {
  margin-left: 0;
}
@media (max-width: 600px) {
  body.charitable-ambassadors-submit-cards .cap-team-compact__view {
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    order: 98; /* sits between meta (default order) and the Change button (order 99) */
  }
}
body.charitable-ambassadors-submit-cards .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
body.charitable-ambassadors-submit-cards {
  /* Donation Options - suggested amount rows.
   *
   * Old markup: a <table> where each <tr> contained a div with two stacked
   * .charitable-form-field children and a bare <button class="remove">x</button>.
   * With no scoped CSS, the inputs stacked vertically and themes painted the
   * remove button as a giant blue rectangle. This block restores a tight
   * two-column row, a compact icon-only remove control, and a proper
   * "Add a suggested amount" link. */
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations {
  border: 1px solid #e3e6ec !important;
  border-radius: 8px;
  background: #fff;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 0 0 12px;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations tbody, body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations tfoot {
  display: block;
  width: 100%;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations tr.suggested-donation {
  display: block;
  border-top: 1px solid #eef0f4;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations tr.suggested-donation:first-child {
  border-top: 0;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations tr.suggested-donation > td {
  display: block;
  padding: 14px 16px;
  border: 0;
  width: 100% !important;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .repeatable-field-wrapper {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 540px) {
  body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .repeatable-field-wrapper {
    grid-template-columns: 1fr auto;
  }
  body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .charitable-form-field.even {
    grid-column: 1/-1;
  }
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .charitable-form-field {
  margin: 0;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .charitable-form-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #4b5160;
  margin: 0 0 4px;
  text-transform: none;
  letter-spacing: 0;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .charitable-form-field input[type=number],
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .charitable-form-field input[type=text] {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #1a1f2e;
  background: #fff;
  border: 1px solid #d1d3d8;
  border-radius: 6px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .charitable-form-field input:focus {
  outline: none;
  border-color: var(--cap-accent, #1db954);
  box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.18);
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations {
  /* Compact icon-only remove control. Defended against theme button
   * styles (background / border / min-height / padding) so it lands as
   * a 32x32 ghost button with an X glyph and a soft danger hover. */
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations button.remove,
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
  margin: 0;
  line-height: 1;
  font-size: 0;
  color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid #e3e6ec !important;
  border-radius: 6px;
  box-shadow: none !important;
  cursor: pointer;
  position: relative;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations button.remove::before,
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .remove::before {
  content: "×"; /* multiplication sign */
  font-size: 18px;
  font-weight: 500;
  color: #6a6e7a;
  line-height: 1;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations button.remove:hover, body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations button.remove:focus-visible,
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .remove:hover,
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .remove:focus-visible {
  background: #fdecec !important;
  border-color: #f3c2c2 !important;
  outline: none;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations button.remove:hover::before, body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations button.remove:focus-visible::before,
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .remove:hover::before,
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .remove:focus-visible::before {
  color: #b42318;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations tfoot tr td {
  padding: 0;
  border: 1px solid #eef0f4;
  background: transparent;
  border-radius: 0 0 8px 8px;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations a.add-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff !important;
  background: #1db954 !important;
  border: 0 !important;
  border-radius: 6px;
  box-shadow: none !important;
  text-decoration: none !important;
  text-shadow: none;
  cursor: pointer;
  line-height: 1.3;
  margin: 10px;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations a.add-row::before {
  content: "+";
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations a.add-row:hover, body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations a.add-row:focus-visible {
  background: #17a449 !important;
  outline: none;
  box-shadow: none !important;
}
body.charitable-ambassadors-submit-cards {
  /* Pill-chip picker for Categories + Tags.
   *
   * Replaces the legacy stacked-checkbox list. The real <input> checkboxes
   * remain in the DOM (visually hidden + screen-reader accessible) so form
   * submission still goes through the existing pipeline; the visible
   * <label> is the chip and click-toggling the chip toggles the checkbox.
   *
   * Two variants, controlled by .cap-pill-field--searchable:
   *   - Default (Categories): single wrapped row of chips, no search.
   *   - Searchable (Tags):    search input + "Show all N" toggle.
   */
}
body.charitable-ambassadors-submit-cards .cap-pill-field {
  /* Pill-chip pickers intentionally do NOT pick up the site's
   * --cap-accent value, because customer accent colors are often
   * high-saturation hues (magenta, purple, hot pink) that read poorly
   * as solid chip backgrounds with white text. We use a fixed dark
   * green for the selected state, focus ring, and search-input focus
   * halo so contrast and legibility are predictable across themes.
   *
   * Override per-site with:
   *   .cap-pill-field { --cap-pill-accent: #yourcolor; }
   */
  --cap-pill-accent: #15803d;
  --cap-pill-accent-soft: rgba(21, 128, 61, .15);
}
body.charitable-ambassadors-submit-cards .cap-pill-field .charitable-fieldset-field-wrapper {
  border: 0;
  padding: 0;
  margin: 0;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__legend {
  padding: 0;
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 14px;
  color: #1a1f2e;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__toolbar {
  margin: 0 0 10px;
}
body.charitable-ambassadors-submit-cards .cap-pill-field {
  /* The submit-step3 stylesheet sets a generic `label { display: block }`
   * rule with higher specificity (body class + form ID + element) that
   * was clobbering the search label's flex layout (icon would jump
   * above the input). Pinning the selector to `label.cap-pill-field__search`
   * gives us one class + one element (specificity 0,1,1), which still
   * loses on its own — add a `!important` to defeat the submit-step3
   * rule without dragging in a longer selector ancestor. */
}
body.charitable-ambassadors-submit-cards .cap-pill-field labelbody.charitable-ambassadors-submit-cards .cap-pill-field__search, body.charitable-ambassadors-submit-cards .cap-pill-field__search {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid #d1d3d8;
  border-radius: 8px;
  background: #fff;
  max-width: 360px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
body.charitable-ambassadors-submit-cards .cap-pill-field labelbody.charitable-ambassadors-submit-cards .cap-pill-field__search svg, body.charitable-ambassadors-submit-cards .cap-pill-field__search svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #6a6e7a;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 0 !important;
  font-size: 14px;
  color: #1a1f2e;
  outline: none;
  width: 100%;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__search-input::placeholder {
  color: #8a8f9a;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__search:focus-within {
  border-color: var(--cap-pill-accent);
  box-shadow: 0 0 0 3px var(--cap-pill-accent-soft);
}
body.charitable-ambassadors-submit-cards .cap-pill-field__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Visually hide the real checkbox while keeping it accessible. */
}
body.charitable-ambassadors-submit-cards .cap-pill-field__item .cap-pill-field__input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: #4b5160;
  background: #fff;
  border: 1px solid #d1d3d8;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  max-width: 100%;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__pill:hover {
  background: #f4f6fa;
  border-color: #b6bbc4;
  color: #1a1f2e;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  position: relative;
  color: #8a8f9a;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__icon svg {
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
  stroke: currentColor;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__icon .cap-pill-field__icon-check {
  display: none;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize; /* normalize tag terms stored lowercase */
}
body.charitable-ambassadors-submit-cards .cap-pill-field {
  /* Focused-via-keyboard ring. */
}
body.charitable-ambassadors-submit-cards .cap-pill-field__input:focus-visible + body.charitable-ambassadors-submit-cards .cap-pill-field__pill {
  outline: 2px solid var(--cap-pill-accent);
  outline-offset: 2px;
}
body.charitable-ambassadors-submit-cards .cap-pill-field {
  /* Selected state. Hardcoded with !important to defeat theme button
   * styles or other site CSS that might paint chips a different
   * color or invert the text contrast. The text + icon are forced to
   * white because the dark-green fill needs the high-contrast pair. */
}
body.charitable-ambassadors-submit-cards .cap-pill-field__item.is-selected .cap-pill-field__pill {
  background: var(--cap-pill-accent) !important;
  border-color: var(--cap-pill-accent) !important;
  color: #fff !important;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__item.is-selected .cap-pill-field__text {
  color: #fff !important;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__item.is-selected .cap-pill-field__icon {
  color: #fff !important;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__item.is-selected .cap-pill-field__icon .cap-pill-field__icon-plus {
  display: none;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__item.is-selected .cap-pill-field__icon .cap-pill-field__icon-check {
  display: block;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__item.is-selected .cap-pill-field__pill:hover {
  /* Subtle darken on hover for selected chips. */
  background: #0f6630 !important;
  border-color: #0f6630 !important;
}
body.charitable-ambassadors-submit-cards .cap-pill-field {
  /* Collapsed list: chips past the threshold are hidden until the
   * toggle expands them. Selected chips beyond the threshold are kept
   * visible (the PHP renderer only marks unselected overflow items
   * with .is-overflow). */
}
body.charitable-ambassadors-submit-cards .cap-pill-field.is-collapsed .cap-pill-field__item.is-overflow {
  display: none;
}
body.charitable-ambassadors-submit-cards .cap-pill-field.is-expanded .cap-pill-field__item.is-overflow {
  display: inline-block;
}
body.charitable-ambassadors-submit-cards .cap-pill-field {
  /* Search-mode: items hidden by client-side filter. */
}
body.charitable-ambassadors-submit-cards .cap-pill-field .cap-pill-field__item.is-search-hidden {
  display: none;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__toggle {
  margin-top: 10px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cap-pill-accent);
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--cap-pill-accent) !important;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__toggle:hover, body.charitable-ambassadors-submit-cards .cap-pill-field__toggle:focus-visible {
  background: var(--cap-pill-accent-soft) !important;
  outline: none;
}
body.charitable-ambassadors-submit-cards .cap-pill-field__empty {
  margin: 6px 0 0;
  padding: 8px 12px;
  color: #6a6e7a;
  font-size: 13px;
  font-style: italic;
}

/* Gallery uploader dropzone + status. Replaces the WP Media Library
 * uploader so guest submitters can attach photos without needing
 * upload_files capability. */
body.charitable-ambassadors-submit-cards .charitable-ambassadors-gallery-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px;
  margin-top: 8px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  color: #4b5563;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
body.charitable-ambassadors-submit-cards .charitable-ambassadors-gallery-dropzone:hover, body.charitable-ambassadors-submit-cards .charitable-ambassadors-gallery-dropzone:focus-visible, body.charitable-ambassadors-submit-cards .charitable-ambassadors-gallery-dropzone.is-dragover {
  background: rgba(29, 185, 84, 0.06);
  border-color: var(--cap-accent, #1db954);
  color: #1f2937;
  outline: none;
}
body.charitable-ambassadors-submit-cards .charitable-ambassadors-gallery-dropzone__icon {
  color: var(--cap-accent, #1db954);
}
body.charitable-ambassadors-submit-cards .charitable-ambassadors-gallery-dropzone__primary {
  font-size: 14px;
  font-weight: 600;
}
body.charitable-ambassadors-submit-cards .charitable-ambassadors-gallery-dropzone__secondary {
  font-size: 12px;
  color: #6b7280;
}

body.charitable-ambassadors-submit-cards .charitable-ambassadors-gallery-disabled {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  margin-top: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  text-align: center;
}
body.charitable-ambassadors-submit-cards .charitable-ambassadors-gallery-disabled__icon {
  color: #9ca3af;
  line-height: 0;
}
body.charitable-ambassadors-submit-cards .charitable-ambassadors-gallery-disabled__primary {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}
body.charitable-ambassadors-submit-cards .charitable-ambassadors-gallery-disabled__secondary {
  font-size: 13px;
  color: #6b7280;
  max-width: 360px;
}

body.charitable-ambassadors-submit-cards .charitable-ambassadors-gallery-status {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #4b5563;
}
body.charitable-ambassadors-submit-cards .charitable-ambassadors-gallery-status.is-uploading {
  color: #6b7280;
}
body.charitable-ambassadors-submit-cards .charitable-ambassadors-gallery-status.is-error {
  color: #b91c1c;
}

/* Submit buttons disabled while gallery uploads are in flight. The
 * `cap-upload-locked` class is added/removed from JS in lockstep with
 * the upload queue. Visual: dim + not-allowed cursor. */
body.charitable-ambassadors-submit-cards .charitable-form-button.cap-upload-locked,
body.charitable-ambassadors-submit-cards button[type=submit].cap-upload-locked,
body.charitable-ambassadors-submit-cards input[type=submit].cap-upload-locked {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Email-uniqueness inline status, shown below the Your Details > Email
 * input for logged-out users. Mirrors the slug-status pattern. */
body.charitable-ambassadors-submit-cards .charitable-ambassadors-email-status {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #4b5563;
}
body.charitable-ambassadors-submit-cards .charitable-ambassadors-email-status.is-checking {
  color: #6b7280;
}
body.charitable-ambassadors-submit-cards .charitable-ambassadors-email-status.is-available {
  color: #166534;
}
body.charitable-ambassadors-submit-cards .charitable-ambassadors-email-status.is-taken, body.charitable-ambassadors-submit-cards .charitable-ambassadors-email-status.is-invalid {
  color: #b91c1c;
}
body.charitable-ambassadors-submit-cards .charitable-ambassadors-email-status a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

body.charitable-ambassadors-submit-cards .charitable-ambassadors-email-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid #d1d5db;
  border-top-color: #6b7280;
  border-radius: 50%;
  vertical-align: -1px;
  animation: cap-email-spin 0.8s linear infinite;
}

@keyframes cap-email-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* jQuery UI datepicker dropdown — Pro's stylesheet only defines border
 * + padding, leaving the header (prev / month-year / next) unlaid-out.
 * The picker is appended to <body>, so we scope under the cards body
 * class to keep admin / other-page datepickers unaffected. */
body.charitable-ambassadors-submit-cards .ui-datepicker {
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  font-size: 14px;
  line-height: 1.4;
  color: #1f2937;
  z-index: 9999;
}
body.charitable-ambassadors-submit-cards .ui-datepicker .ui-datepicker-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 4px 0;
}
body.charitable-ambassadors-submit-cards .ui-datepicker .ui-datepicker-prev,
body.charitable-ambassadors-submit-cards .ui-datepicker .ui-datepicker-next {
  flex: 0 0 auto;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--cap-accent, #1db954);
  cursor: pointer;
  text-decoration: none;
  border-radius: 4px;
}
body.charitable-ambassadors-submit-cards .ui-datepicker .ui-datepicker-prev:hover,
body.charitable-ambassadors-submit-cards .ui-datepicker .ui-datepicker-next:hover {
  background: rgba(0, 0, 0, 0.04);
}
body.charitable-ambassadors-submit-cards .ui-datepicker .ui-datepicker-prev .ui-icon,
body.charitable-ambassadors-submit-cards .ui-datepicker .ui-datepicker-next .ui-icon {
  display: none;
}
body.charitable-ambassadors-submit-cards .ui-datepicker .ui-datepicker-title {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  text-align: center;
}
body.charitable-ambassadors-submit-cards .ui-datepicker .ui-datepicker-title select {
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: #1f2937;
}
body.charitable-ambassadors-submit-cards .ui-datepicker table.ui-datepicker-calendar {
  width: 100%;
  border-collapse: collapse;
}
body.charitable-ambassadors-submit-cards .ui-datepicker table.ui-datepicker-calendar th {
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-align: center;
}
body.charitable-ambassadors-submit-cards .ui-datepicker table.ui-datepicker-calendar td {
  padding: 2px;
  text-align: center;
}
body.charitable-ambassadors-submit-cards .ui-datepicker table.ui-datepicker-calendar td a, body.charitable-ambassadors-submit-cards .ui-datepicker table.ui-datepicker-calendar td span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #1f2937;
  text-decoration: none;
  border-radius: 4px;
}
body.charitable-ambassadors-submit-cards .ui-datepicker table.ui-datepicker-calendar td a:hover {
  background: rgba(0, 0, 0, 0.05);
}
body.charitable-ambassadors-submit-cards .ui-datepicker table.ui-datepicker-calendar td .ui-state-active,
body.charitable-ambassadors-submit-cards .ui-datepicker table.ui-datepicker-calendar td a.ui-state-active {
  background: var(--cap-accent, #1db954);
  color: #fff;
}
body.charitable-ambassadors-submit-cards .ui-datepicker table.ui-datepicker-calendar td .ui-state-disabled, body.charitable-ambassadors-submit-cards .ui-datepicker table.ui-datepicker-calendar td.ui-state-disabled span {
  color: #d1d5db;
}

/* Your Details — pair name fields on one row, city/state/country on
 * one row. Lives in the cards bundle (always loaded on the submit
 * page) instead of step3-enhanced (gated to /fundraise/ URLs) so the
 * pairing fires regardless of which step or recipient type. The form
 * id is specific enough on its own; legacy mode doesn't have the
 * cards bundle loaded so it stays untouched. */
@media (min-width: 720px) {
  body.charitable-ambassadors-submit-cards #charitable-campaign-submission-form .charitable-form-field:has(input[name=first_name]),
  body.charitable-ambassadors-submit-cards #charitable-campaign-submission-form .charitable-form-field:has(input[name=last_name]) {
    display: inline-block !important;
    width: calc(50% - 12px) !important;
    vertical-align: top;
  }
  body.charitable-ambassadors-submit-cards #charitable-campaign-submission-form .charitable-form-field:has(input[name=first_name]) {
    margin-right: 16px !important;
  }
  body.charitable-ambassadors-submit-cards #charitable-campaign-submission-form .charitable-form-field:has(input[name=city]),
  body.charitable-ambassadors-submit-cards #charitable-campaign-submission-form .charitable-form-field:has(input[name=state]) {
    display: inline-block !important;
    width: calc(31% - 6px) !important;
    margin-right: 12px !important;
    vertical-align: top;
  }
  body.charitable-ambassadors-submit-cards #charitable-campaign-submission-form .charitable-form-field:has(select[name=country]) {
    display: inline-block !important;
    width: calc(34% - 6px) !important;
    vertical-align: top;
  }
}
/* Variant A: single-option centered hero. The base .cap-cards rule sets
 * `display: grid !important`, which would drop the lone card into a narrow
 * grid column; override with block !important so the single card fills a
 * centered column instead of sitting left-aligned and narrow. */
body.charitable-ambassadors-submit-cards .cap-cards.cap-cards--single {
  display: block !important;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
body.charitable-ambassadors-submit-cards .cap-cards.cap-cards--single .cap-card-wrap {
  width: 100%;
  margin: 0;
  list-style: none;
}
body.charitable-ambassadors-submit-cards .cap-cards.cap-cards--single .cap-card {
  width: 100%;
  padding: 38px 34px 34px;
}
body.charitable-ambassadors-submit-cards .cap-cards.cap-cards--single .cap-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
}
body.charitable-ambassadors-submit-cards .cap-cards.cap-cards--single .cap-card__title {
  font-size: 20px;
}

body.charitable-ambassadors-submit-cards .cap-single-intro {
  max-width: 480px;
  margin: 22px auto 0;
  text-align: center;
  color: #39414f;
}

/* ---------------------------------------------------------------------------
 * Theme-builder button reset for the rich-text editor toolbar.
 *
 * Page builders such as Elementor apply a global `button` style (background,
 * font, color, letter-spacing) through their kit stylesheet. Those rules
 * cascade onto the TinyMCE editor toolbar buttons inside the campaign
 * submission form and turn the Bold / Italic / etc. controls into solid
 * colored blocks. The toolbar controls are generic <button> elements, so we
 * re-scope them here and restore the editor's own look. Scoped to .mce-*
 * descendants so genuine form buttons are left alone.
 * ------------------------------------------------------------------------- */
.charitable-ambassadors-submit-cards-form .mce-container button,
.charitable-ambassadors-submit-cards-form .mce-widget button,
.charitable-ambassadors-submit-cards-form .mce-btn button {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #595959;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-shadow: none;
  text-transform: none;
}
.charitable-ambassadors-submit-cards-form .mce-btn:hover button,
.charitable-ambassadors-submit-cards-form .mce-btn:focus button,
.charitable-ambassadors-submit-cards-form .mce-btn.mce-active button {
  background: transparent;
  color: #595959;
}
.charitable-ambassadors-submit-cards-form .mce-ico,
.charitable-ambassadors-submit-cards-form .mce-ico::before {
  font-family: dashicons !important;
}
/* J4: TinyMCE's toolbar icons are remapped to dashicons, but the blockquote
   glyph is blanked on this site by a Customizer "Additional CSS" rule
   (i.mce-i-blockquote::before { content: inherit !important; }) which uses
   !important and makes the pseudo inherit content:normal -> a blank button
   while every other icon renders. Supply the dashicons editor-quote glyph and
   use !important so this higher-specificity, scoped rule beats that override.
   Scoped to the ambassador submit form, where dashicons is already forced. */
.charitable-ambassadors-submit-cards-form .mce-i-blockquote::before {
  content: "\f205" !important;
  font-family: dashicons !important;
}

/* 3.3.0 suggested-donations: align the remove (x) button with the input boxes (was pinned to the grid bottom by align-items:end). */
body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .repeatable-field-wrapper button.remove,body.charitable-ambassadors-submit-cards .charitable-campaign-form-table#charitable-campaign-suggested-donations .repeatable-field-wrapper .remove {
  align-self: start;
  margin-top: 34px;
}

/* 3.3.0 fundraiser-for-existing reminder banner at the top of step 3. */
body.charitable-ambassadors-submit-cards .cap-fundraising-for {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 12px 16px;
  background: #f4f2ff;
  border: 1px solid #e3dcff;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #4b5563;
}
body.charitable-ambassadors-submit-cards .cap-fundraising-for__heart {
  color: #6b5ce7;
  font-size: 16px;
  line-height: 1;
}
body.charitable-ambassadors-submit-cards .cap-fundraising-for__text strong {
  color: #1f2937;
  font-weight: 700;
}