/**
 * CAF Donation Form Styles
 *
 * DESIGN TOKENS
 * Edit the custom properties below to restyle the entire form.
 * Colors, typography, spacing, and radius are all controlled here.
 *
 * SECTIONS
 *   1. Design Tokens
 *   2. Form Container (Gravity Forms overrides)
 *   3. Frequency Toggle
 *   4. Amount Grid
 *   5. Custom Amount Input
 *   6. Guidance & Nudge Panels
 *   7. Payment Page
 *   9. Confirmation Card
 *  10. Error State
 *  11. Utilities
 *  12. Responsive
 */

/* =============================================================
   1. DESIGN TOKENS
   ============================================================= */

:root {
  /* Brand colors */
  --caf-navy: #152a4a; /* Primary dark — headings, active states */
  --caf-blue: #036eb0; /* Action blue — buttons, links, focus rings */
  --caf-blue-light: #f0f7ff; /* Blue tint — suggestion panels */
  --caf-blue-border: #bee3f8; /* Blue border — suggestion panels */

  /* Brand accents (new — added in UI refresh)
     Match the CAF site's brand identity: chartreuse banner accent +
     a more vibrant blue used for primary CTAs. These are ADDITIVE
     to the existing palette; existing rules using --caf-blue etc.
     are unchanged. Use these for new components only. */
  --caf-blue-vibrant: #1872cc; /* Brand-site primary blue */
  --caf-blue-vibrant-deep: #155fad; /* Hover state for vibrant blue */
  --caf-chartreuse: #c5d96f; /* Brand-site banner accent */
  --caf-chartreuse-deep: #a8c046; /* For borders/text needing contrast */
  --caf-chartreuse-soft: #f5f9e1; /* For panel backgrounds */

  /* Neutral palette */
  --caf-white: #ffffff;
  --caf-bg: #f7fafc; /* Page/panel backgrounds */
  --caf-border: #cbd5e0; /* Default input borders */
  --caf-border-light: #e2e8f0; /* Dividers, subtle borders */
  --caf-text: #222333; /* Body text */
  --caf-text-mid: #4a5568; /* Secondary text */
  --caf-text-muted: #5a6b80; /* Hints, sub-labels — WCAG AA on white */
  --caf-text-placeholder: #94a3b8; /* Light gray reserved for input placeholders */

  /* Semantic — success */
  --caf-green: #276749;
  --caf-green-dark: #22543d;
  --caf-green-light: #f0fff4;
  --caf-green-border: #c6f6d5;
  --caf-green-mid: #38a169;
  --caf-green-pale: #48bb78;

  /* Semantic — warning */
  --caf-yellow-light: #fffff0;
  --caf-yellow-border: #fefcbf;
  --caf-yellow-bg: #fefcf3;
  --caf-yellow-border2: #f6e05e;
  --caf-amber: #744210;
  --caf-amber-dark: #5a3510;

  /* Semantic — error */
  --caf-red-light: #fff5f5;
  --caf-red-border: #fc8181;
  --caf-red: #c53030;
  --caf-red-required: #ba4657;

  /* Typography */
  --caf-font: "Lexend Deca", sans-serif;
  --caf-font-size-xs: 11px;
  --caf-font-size-sm: 13px;
  --caf-font-size-md: 14px;
  --caf-font-size-base: 15px;
  --caf-font-size-lg: 17px;
  --caf-font-size-xl: 18px;

  /* Spacing */
  --caf-radius-sm: 6px;
  --caf-radius-md: 8px;
  --caf-radius-lg: 10px;
  --caf-gap-xs: 4px;
  --caf-gap-sm: 8px;
  --caf-gap-md: 12px;
  --caf-gap-lg: 16px;
  --caf-gap-xl: 20px;
  --caf-gap-2xl: 24px;
  --caf-gap-3xl: 28px;

  /* Transitions */
  --caf-transition: 0.15s;
  --caf-transition-md: 0.2s;
}

/* =============================================================
   2. FORM CONTAINER (Gravity Forms overrides)
   Scoped via .caf-form-scope added by JS to #gform_{id}
   ============================================================= */

.caf-form-scope {
  background: var(--caf-white);
  border: 1.5px solid var(--caf-border);
  border-radius: var(--caf-radius-lg);
  padding: var(--caf-gap-3xl) var(--caf-gap-3xl) var(--caf-gap-2xl) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.caf-form-scope .gfield {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.gform-theme--foundation .caf-form-scope .gform_fields,
.gform-theme--foundation.caf-form-scope .gform_fields,
.caf-form-scope .gform_fields {
  row-gap: 8px !important;
}

.caf-form-scope .gfield_label {
  font-size: var(--caf-font-size-sm);
  font-weight: 500;
  color: var(--caf-navy);
  margin-bottom: var(--caf-gap-xs) !important;
  font-family: var(--caf-font);
}

.caf-form-scope .ginput_container input[type="text"],
.caf-form-scope .ginput_container input[type="email"],
.caf-form-scope .ginput_container input[type="tel"],
.caf-form-scope .ginput_container input[type="number"],
.caf-form-scope .ginput_container textarea {
  padding: 8px 12px !important;
  font-size: var(--caf-font-size-md) !important;
  font-family: var(--caf-font) !important;
  font-weight: 300 !important;
  border: 1.5px solid var(--caf-border) !important;
  border-radius: var(--caf-radius-sm) !important;
  color: var(--caf-text) !important;
  background: var(--caf-white) !important;
  transition: border-color var(--caf-transition) !important;
  box-shadow: none !important;
}

.caf-form-scope .ginput_container select {
  padding: 8px 12px !important;
  height: auto !important;
  min-height: 38px !important;
  line-height: 1.5 !important;
  font-size: var(--caf-font-size-md) !important;
  font-family: var(--caf-font) !important;
  font-weight: 300 !important;
  border: 1.5px solid var(--caf-border) !important;
  border-radius: var(--caf-radius-sm) !important;
  color: var(--caf-text) !important;
  background: var(--caf-white) !important;
  transition: border-color var(--caf-transition) !important;
  box-shadow: none !important;
}

.caf-form-scope .ginput_container input:focus,
.caf-form-scope .ginput_container select:focus,
.caf-form-scope .ginput_container textarea:focus {
  border-color: var(--caf-blue) !important;
  outline: none !important;
  box-shadow: none !important;
}

.caf-form-scope .ginput_complex {
  gap: var(--caf-gap-sm) !important;
}
.caf-form-scope .ginput_complex .ginput_full,
.caf-form-scope .ginput_complex .ginput_left,
.caf-form-scope .ginput_complex .ginput_right {
  margin-bottom: 0 !important;
}

.caf-form-scope .ginput_complex span label,
.caf-form-scope .address_city label,
.caf-form-scope .address_state label,
.caf-form-scope .address_zip label,
.caf-form-scope .name_first label,
.caf-form-scope .name_last label {
  font-size: var(--caf-font-size-xs) !important;
  font-weight: 400 !important;
  color: var(--caf-text-muted) !important;
  margin-top: 3px !important;
  font-family: var(--caf-font) !important;
}

.caf-form-scope .gfield_required {
  color: var(--caf-red-required) !important;
}

.caf-form-scope .gform_footer,
.caf-form-scope .gform_page_footer {
  padding-top: var(--caf-gap-lg) !important;
  margin-top: var(--caf-gap-xs) !important;
}

/* Hide country sub-field — US only */
.gfield .address_country {
  display: none !important;
}

/* Hide utility fields */
.gform_wrapper .gfield.caf-hidden {
  position: absolute;
  visibility: hidden;
  left: -9999px;
}

/* =============================================================
   3. FREQUENCY TOGGLE
   ============================================================= */

.caf-payment-ui {
  margin: var(--caf-gap-md) 0;
  font-family: var(--caf-font);
}

.caf-frequency-toggle {
  display: flex;
  background: #edf1f5;
  border-radius: var(--caf-radius-md);
  padding: 3px;
  margin-bottom: var(--caf-gap-xl);
  gap: 3px;
}

.caf-frequency-toggle input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
}

.caf-frequency-toggle label {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--caf-radius-sm);
  background: transparent;
  font-size: var(--caf-font-size-md);
  font-weight: 500;
  color: var(--caf-text-muted);
  cursor: pointer;
  transition: all var(--caf-transition-md);
  text-align: center;
  margin: 0;
}

.caf-frequency-toggle label:hover {
  color: var(--caf-text);
}

.caf-frequency-toggle input[type="radio"]:checked + label {
  background: var(--caf-navy) !important;
  color: var(--caf-white) !important;
  box-shadow: 0 2px 6px rgba(15, 42, 74, 0.18) !important;
}

/* =============================================================
   4. AMOUNT GRID
   ============================================================= */

.caf-amount-section {
  margin-bottom: var(--caf-gap-lg);
}

.caf-amount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--caf-gap-sm);
}

.caf-amount-option {
  display: flex;
}

.caf-amount-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
}

.caf-amount-option label {
  flex: 1;
  padding: 12px 8px;
  border: 1.5px solid var(--caf-border);
  border-radius: var(--caf-radius-sm);
  background: var(--caf-white);
  font-size: var(--caf-font-size-base);
  font-weight: 500;
  color: var(--caf-text);
  cursor: pointer;
  transition: all var(--caf-transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 52px;
  justify-content: center;
  margin: 0;
}

.caf-amount-option label:hover {
  border-color: var(--caf-blue);
  background: #f7fafd;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 42, 74, 0.06);
}

.caf-amount-option input[type="radio"]:checked + label {
  border-color: var(--caf-blue) !important;
  background: var(--caf-blue) !important;
  color: var(--caf-white) !important;
  box-shadow: 0 6px 16px rgba(3, 110, 176, 0.18) !important;
}

.caf-amount-option input[type="radio"]:checked + label:hover {
  transform: translateY(-1px);
}

.caf-amount-main {
  display: block;
}

.caf-amount-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--caf-text-muted);
  margin-top: 4px;
  line-height: 1.2;
}

.caf-amount-option input[type="radio"]:checked + label .caf-amount-label {
  color: rgba(255, 255, 255, 0.85);
}


/* =============================================================
   CARLMONT ARTS — TYPE SELECTOR + FIXED PRICE DISPLAY
   ============================================================= */

.caf-arts-type-selector {
  margin-bottom: var(--caf-gap);
}

.caf-arts-type-label {
  font-size: var(--caf-font-size-sm);
  font-weight: 600;
  color: var(--caf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px 0;
}

.caf-arts-type-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 6px;
  border: 2px solid var(--caf-border);
  border-radius: var(--caf-radius);
  cursor: pointer;
  transition: border-color 0.15s;
}

.caf-arts-type-option:hover {
  border-color: var(--caf-blue);
}

.caf-arts-type-option input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--caf-blue);
  cursor: pointer;
}

.caf-arts-type-option label {
  font-size: var(--caf-font-size-base);
  font-weight: 500;
  color: var(--caf-text);
  cursor: pointer;
  margin: 0;
  line-height: 1.3;
}

.caf-arts-type-option:has(input:checked) {
  border-color: var(--caf-blue);
  background: color-mix(in srgb, var(--caf-blue) 6%, white);
}

.caf-arts-fixed-amount {
  padding: 16px 20px;
  background: var(--caf-bg-light);
  border: 2px solid var(--caf-blue);
  border-radius: var(--caf-radius);
  margin-top: var(--caf-gap-sm);
}

.caf-arts-fixed-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.caf-arts-fixed-price strong {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--caf-blue);
}

.caf-arts-fixed-label {
  font-size: var(--caf-font-size-base);
  color: var(--caf-text-muted);
}

/* =============================================================
   5. CUSTOM AMOUNT INPUT
   ============================================================= */

.caf-custom-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--caf-gap-sm);
}

.caf-input-prefix {
  display: flex;
  align-items: center;
  gap: 0; /* remove gap so $ sits flush against input */
  border: 1.5px solid var(--caf-border);
  border-radius: var(--caf-radius-sm);
  overflow: hidden;
  transition: border-color var(--caf-transition);
}

.caf-input-prefix:focus-within {
  border-color: var(--caf-blue);
}

.caf-input-prefix span {
  padding: 8px 12px 8px 12px;
  font-size: var(--caf-font-size-base);
  font-weight: 500;
  color: var(--caf-text-muted);
}

.caf-input-prefix input {
  flex: 1;
  width: 160px;
  padding: 8px 12px 8px 4px;
  border: none;
  font-size: var(--caf-font-size-base);
  font-weight: 500;
  color: var(--caf-text);
  outline: none;
  background: transparent;
  font-family: inherit;
}

.caf-input-prefix input::placeholder {
  color: var(--caf-text-placeholder);
  font-weight: 300;
}

.caf-freq-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.caf-freq-note {
  margin: 8px 0 4px;
  font-size: var(--caf-font-size-md);
  color: var(--caf-text-muted);
  font-style: italic;
}

.caf-field-note {
  margin: 0 0 12px;
  font-size: var(--caf-font-size-sm);
  color: var(--caf-text-muted);
  font-style: italic;
}

.caf-installment-info {
  padding: var(--caf-gap-md) var(--caf-gap-lg);
  background: var(--caf-bg);
  border: 1px solid var(--caf-border-light);
  border-radius: var(--caf-radius-sm);
  margin-bottom: var(--caf-gap-lg);
  font-size: var(--caf-font-size-md);
  font-weight: 300;
  line-height: 1.6;
  color: var(--caf-text);
}

.caf-installment-info strong {
  color: var(--caf-navy);
  font-weight: 500;
}

/* =============================================================
   6. GUIDANCE & NUDGE PANELS
   
   All contextual panels share the same 4 semantic state modifiers.
   JS sets exactly one modifier class on any panel element:
     .caf-panel--positive   good news / already doing the right thing
     .caf-panel--suggest    gentle nudge toward better option
     .caf-panel--warning    caution / savings opportunity
     .caf-panel--neutral    informational, no sentiment
   ============================================================= */

/* Base panel — structure and typography only, no color */
.caf-panel {
  padding: var(--caf-gap-md) var(--caf-gap-lg);
  border: 1px solid transparent;
  border-radius: var(--caf-radius-sm);
  font-size: var(--caf-font-size-sm);
  font-weight: 300;
  line-height: 1.6;
}

.caf-panel strong {
  display: block;
  font-weight: 500;
  margin-bottom: 3px;
}

.caf-panel p {
  margin: 0 0 6px;
}
.caf-panel p:last-of-type {
  margin-bottom: 0;
}

/* State modifiers — color only */
.caf-panel--positive {
  background: var(--caf-chartreuse-soft);
  border-color: #dde8b0;
  border-left: 3px solid var(--caf-chartreuse-deep);
  color: var(--caf-navy);
}
.caf-panel--positive strong {
  color: var(--caf-navy);
}

.caf-panel--suggest {
  background: var(--caf-blue-light);
  border-color: var(--caf-blue-border);
  color: #2a4a6b;
}
.caf-panel--suggest strong {
  color: var(--caf-navy);
}

.caf-panel--warning {
  background: var(--caf-yellow-light);
  border-color: var(--caf-yellow-border);
  color: var(--caf-amber);
}
.caf-panel--warning strong {
  color: var(--caf-amber-dark);
}

.caf-panel--neutral {
  background: var(--caf-bg);
  border-color: var(--caf-border-light);
  color: var(--caf-text-mid);
}
.caf-panel--neutral strong {
  color: #2d3748;
}

/* Per-component sizing overrides */
.caf-freq-nudge {
  margin-bottom: var(--caf-gap-lg);
  transition: all var(--caf-transition-md);
}
.caf-freq-nudge strong {
  font-size: var(--caf-font-size-md);
  margin-bottom: var(--caf-gap-xs);
}
.caf-freq-nudge p {
  margin-bottom: 8px;
}

.caf-custom-guidance {
  width: 100%;
  margin-top: 10px;
}

.caf-custom-guidance strong {
  font-size: var(--caf-font-size-sm);
}

.caf-ach-nudge {
  margin-bottom: 14px;
}
.caf-ach-nudge strong {
  font-size: var(--caf-font-size-sm);
}

.caf-nudge-cta {
  display: inline-block;
  margin-top: var(--caf-gap-sm);
  font-size: var(--caf-font-size-sm);
  font-weight: 500;
  color: var(--caf-blue);
  text-decoration: none;
}
.caf-nudge-cta:hover {
  text-decoration: underline;
}

/* =============================================================
   7. PAYMENT PAGE
   ============================================================= */

.caf-review-summary {
  padding: var(--caf-gap-md) var(--caf-gap-lg);
  background: var(--caf-bg);
  border: 1px solid var(--caf-border-light);
  border-radius: var(--caf-radius-sm);
  margin-bottom: 14px;
  font-size: var(--caf-font-size-md);
  font-weight: 300;
  line-height: 1.6;
  color: var(--caf-text);
}

.caf-review-summary strong {
  display: block;
  color: var(--caf-navy);
  font-weight: 500;
}

.caf-review-summary span {
  font-size: 12px;
  color: var(--caf-text-muted);
}

/* Fee coverage — always warning/yellow, no state change needed */
.caf-fee-coverage {
  padding: var(--caf-gap-md) var(--caf-gap-lg);
  background: var(--caf-yellow-bg);
  border: 1px solid var(--caf-yellow-border2);
  border-radius: var(--caf-radius-sm);
  margin: var(--caf-gap-md) 0;
}

.caf-fee-coverage label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--caf-font-size-sm);
  font-weight: 400;
  color: var(--caf-amber);
}

.caf-fee-coverage input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--caf-blue);
  flex-shrink: 0;
}

/* Charge total — always positive/green, no state change needed */
.caf-charge-total {
  padding: var(--caf-gap-md) var(--caf-gap-lg);
  background: var(--caf-green-light);
  border: 1px solid var(--caf-green-border);
  border-radius: var(--caf-radius-sm);
  margin-bottom: 14px;
  font-size: var(--caf-font-size-md);
  font-weight: 300;
  color: var(--caf-green);
}

.caf-charge-total strong {
  color: var(--caf-green-dark);
  font-weight: 500;
}

.caf-charge-total span {
  font-size: 12px;
  color: var(--caf-green-pale);
}

/* Stripe element */
#stripe-payment-element {
  min-height: 80px;
  margin: 14px 0;
}

/* Stripe appearance token — JS reads this via getComputedStyle to avoid hardcoding */
:root {
  --stripe-color-primary: var(--caf-blue);
  --stripe-font-family: var(--caf-font);
}

.caf-processing {
  opacity: 0.6;
  pointer-events: none;
}

/* =============================================================

#dd-container { margin-top: var(--caf-gap-sm); }


/* =============================================================
   10. ERROR STATE
   ============================================================= */

.caf-field-error {
  margin-top: var(--caf-gap-md);
  padding: 8px 12px;
  background: var(--caf-red-light);
  border: 1.5px solid var(--caf-red-border);
  border-radius: var(--caf-radius-sm);
  color: var(--caf-red);
  font-size: var(--caf-font-size-base);
}

.caf-error-message {
  padding: 10px 14px;
  background: var(--caf-red-light);
  border: 1.5px solid var(--caf-red-border);
  border-radius: var(--caf-radius-sm);
  color: var(--caf-red);
  font-size: var(--caf-font-size-base);
  margin-bottom: var(--caf-gap-md);
}

.caf-error-message strong {
  display: block;
  margin-bottom: 3px;
}
.caf-error-message p {
  margin: 0;
}

/* GF-native validation errors — make failed fields visibly red.
   When GF validation fails, it adds .gfield_error to the field wrapper.
   Without this, our form-scope styles (which use !important on borders)
   suppress GF's default error appearance and the only signal is the
   text below the field — easy for donors to miss. */
.caf-form-scope .gfield_error input[type="text"],
.caf-form-scope .gfield_error input[type="email"],
.caf-form-scope .gfield_error input[type="tel"],
.caf-form-scope .gfield_error input[type="number"],
.caf-form-scope .gfield_error select,
.caf-form-scope .gfield_error textarea {
  border-color: var(--caf-red-border) !important;
  background: var(--caf-red-light) !important;
}

.caf-form-scope .gfield_error input[type="text"]:focus,
.caf-form-scope .gfield_error input[type="email"]:focus,
.caf-form-scope .gfield_error input[type="tel"]:focus,
.caf-form-scope .gfield_error input[type="number"]:focus,
.caf-form-scope .gfield_error select:focus,
.caf-form-scope .gfield_error textarea:focus {
  border-color: var(--caf-red) !important;
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.12) !important;
}

/* The label inside a failed field — bump weight slightly so the donor's
   eye gets pulled to the right field, not just the error message text */
.caf-form-scope .gfield_error .gfield_label {
  color: var(--caf-red) !important;
}

/* GF's own validation_message div — style consistently with our errors.
   GF default is small dark-red text; we make it a proper inline alert
   matching .caf-field-error for visual consistency. */
.caf-form-scope .gfield_validation_message,
.caf-form-scope .validation_message {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--caf-red-light);
  border-left: 3px solid var(--caf-red);
  border-radius: var(--caf-radius-sm);
  color: var(--caf-red);
  font-size: var(--caf-font-size-sm);
  font-weight: 500;
}

/* =============================================================
   10b. UI REFRESH COMPONENTS (added in Phase 1)
   
   New components for the UI refresh. These are unwired in Phase 1
   (no HTML emits them yet); Phase 2/3 turn them on. Adding the CSS
   now means we deploy styling and behavior changes separately,
   reducing diff size per ship.
   ============================================================= */

/* ----- Suggested gift callout — headline panel above tile grid ----- */
.caf-suggested-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 24px;
  padding: 14px 16px 14px 18px;
  background: var(--caf-white);
  border: 1px solid var(--caf-border-light);
  border-left: 4px solid var(--caf-chartreuse);
  border-radius: var(--caf-radius-sm);
  margin-bottom: var(--caf-gap-lg);
  font-family: var(--caf-font);
}

.caf-suggested-callout__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--caf-text-muted);
}

.caf-suggested-callout__amount {
  font-size: 26px;
  font-weight: 700;
  color: var(--caf-navy);
  line-height: 1;
  letter-spacing: -0.015em;
}

.caf-suggested-callout__suffix {
  font-size: 14px;
  color: var(--caf-text-muted);
}

.caf-suggested-callout__leadership {
  margin-left: auto;
  font-size: 13px;
  color: var(--caf-text-muted);
}

.caf-suggested-callout__leadership strong {
  color: var(--caf-navy);
  font-weight: 600;
}

/* ----- Tier tag on amount tiles (e.g. "Leadership Circle") ----- */
/* Builds on existing .caf-amount-label but with stronger contrast */
.caf-tier-tag {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--caf-text-muted);
  margin-top: 4px;
  line-height: 1.2;
}

.caf-amount-option input[type="radio"]:checked + label .caf-tier-tag {
  color: rgba(255, 255, 255, 0.85);
}

/* ----- Gift summary bar — persistent context across pages 2/3 ----- */
.caf-form-scope .caf-gift-summary,
.caf-gift-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--caf-gap-md) !important;
  padding: 10px 14px !important;
  background: var(--caf-blue-light) !important;
  border: 1px solid var(--caf-blue-border) !important;
  border-radius: var(--caf-radius-sm) !important;
  margin: 0 0 var(--caf-gap-lg) !important;
  font-family: var(--caf-font) !important;
}

.caf-form-scope .caf-gift-summary__label,
.caf-gift-summary__label {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
  font-size: var(--caf-font-size-sm) !important;
  color: var(--caf-navy) !important;
}

.caf-form-scope .caf-gift-summary__label > span,
.caf-gift-summary__label > span {
  display: inline-block;
}

.caf-form-scope .caf-gift-summary__amount,
.caf-gift-summary__amount {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--caf-navy) !important;
}

.caf-form-scope .caf-gift-summary__freq,
.caf-gift-summary__freq {
  color: var(--caf-text-muted) !important;
}

.caf-gift-summary__edit {
  display: inline-block !important;
  font-size: 12px;
  color: var(--caf-blue) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--caf-transition);
}

.caf-gift-summary__edit:hover {
  background: var(--caf-white);
  color: var(--caf-navy) !important;
  text-decoration: none !important;
}

/* Anonymous donor helper row — appears below the Annual Report name field.
   Scoped with .caf-form-scope to beat GF's .gfield rule specificity. */
.caf-form-scope .caf-anon-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
  font-size: var(--caf-font-size-sm) !important;
  color: var(--caf-text-muted) !important;
}

.caf-form-scope .caf-anon-row__checkbox {
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  accent-color: var(--caf-blue);
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  position: static !important;
  float: none !important;
  vertical-align: middle;
}

.caf-form-scope .caf-anon-row__label {
  cursor: pointer;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 400 !important;
  color: var(--caf-text-muted) !important;
  font-size: var(--caf-font-size-sm) !important;
  display: inline-block !important;
  float: none !important;
  line-height: 1.4;
}

/* When anonymous is applied, italicize the ARN field to make the override visible */
.caf-form-scope input.caf-arn-anonymous-applied {
  font-style: italic !important;
  color: var(--caf-text-muted) !important;
}

/* ----- Trust row — three small civic credibility signals ----- */
.caf-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--caf-gap-2xl);
  padding: 14px 16px;
  background: var(--caf-bg);
  border-radius: var(--caf-radius-sm);
  margin: var(--caf-gap-md) 0;
  font-size: 12px;
  color: var(--caf-text-muted);
  font-family: var(--caf-font);
}

.caf-trust-row__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.caf-trust-row__icon {
  color: var(--caf-blue);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

/* ----- Stripe-controlled zone — placeholder around Payment Element ----- */
.caf-stripe-zone {
  background: var(--caf-bg);
  border: 1.5px dashed #b6c4d2;
  border-radius: var(--caf-radius-md);
  padding: 14px 16px 16px;
  margin-bottom: var(--caf-gap-md);
}

.caf-stripe-zone__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: #635bff; /* Stripe brand purple */
  color: var(--caf-white);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: var(--caf-font);
}

.caf-stripe-zone__mount {
  background: var(--caf-white);
  border: 1px solid var(--caf-border-light);
  border-radius: var(--caf-radius-sm);
  padding: 12px;
  min-height: 60px;
}

.caf-stripe-zone__note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--caf-text-muted);
  line-height: 1.5;
  font-style: italic;
  font-family: var(--caf-font);
}

/* ----- Employer match — visually elevated panel ----- */
.caf-employer-match {
  margin: var(--caf-gap-lg) 0;
  padding: var(--caf-gap-xl);
  background: linear-gradient(180deg, var(--caf-white) 0%, var(--caf-chartreuse-soft) 100%);
  border: 1px solid var(--caf-border-light);
  border-left: 4px solid var(--caf-chartreuse-deep);
  border-radius: var(--caf-radius-md);
  font-family: var(--caf-font);
}

.caf-employer-match__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--caf-chartreuse);
  color: var(--caf-navy);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--caf-gap-md);
}

.caf-employer-match__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--caf-navy);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
  font-family: var(--caf-font);
}

.caf-employer-match__help {
  font-size: 14px;
  color: var(--caf-text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
  font-family: var(--caf-font);
}

.caf-employer-match__examples {
  margin-top: 12px;
  font-size: 13px;
  color: var(--caf-text-muted);
  line-height: 1.5;
  font-family: var(--caf-font);
}

.caf-employer-match__examples strong {
  color: var(--caf-navy);
  font-weight: 600;
}



/* Replaces all inline style="display:none" — JS toggles this class instead */
.caf-is-hidden {
  display: none !important;
}

/* Session expiry overlay — shown when payment page times out */
.caf-session-expired {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--caf-gap-3xl) var(--caf-gap-2xl);
  gap: var(--caf-gap-lg);
  font-family: var(--caf-font);
}

.caf-session-expired p {
  font-size: var(--caf-font-size-lg);
  color: var(--caf-text-mid);
  margin: 0;
  line-height: 1.6;
}

.caf-session-timeout-bar {
  width: 100%;
  height: 4px;
  background: var(--caf-border-light);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--caf-gap-sm);
}

.caf-session-timeout-bar-fill {
  height: 100%;
  background: var(--caf-blue);
  border-radius: 2px;
  transition: width 1s linear;
}

.caf-session-warning {
  padding: var(--caf-gap-md) var(--caf-gap-lg);
  background: var(--caf-yellow-bg);
  border: 1px solid var(--caf-yellow-border2);
  border-radius: var(--caf-radius-sm);
  font-size: var(--caf-font-size-sm);
  color: var(--caf-amber);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--caf-gap-lg);
  margin-bottom: var(--caf-gap-md);
}

.caf-session-warning button {
  background: var(--caf-blue);
  color: var(--caf-white);
  border: none;
  border-radius: var(--caf-radius-sm);
  padding: 6px 14px;
  font-size: var(--caf-font-size-sm);
  font-family: var(--caf-font);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.caf-session-warning button:hover {
  background: var(--caf-navy);
}

/* =============================================================
   12. RESPONSIVE
   ============================================================= */

@media (max-width: 500px) {
  .caf-amount-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* UI refresh components — mobile adaptations */
  .caf-suggested-callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .caf-suggested-callout__leadership {
    margin-left: 0;
  }
  .caf-gift-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .caf-trust-row {
    flex-direction: column;
    gap: 8px;
  }
  .caf-employer-match {
    padding: var(--caf-gap-md);
  }
}

/* =============================================================
   13. CONFIRMATION FOOTER
   ============================================================= */

/* ---- Confirmation card wrapper ---- */
.caf-confirmation-card {
  all: revert;
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  color: #152a4a;
  line-height: 1.6;
  margin-top: 24px;
}

/* ---- Success message block ---- */
.caf-success-message {
  display: flex !important;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 4px;
  background: #f0fff4 !important;
  border: 1.5px solid #c6f6d5 !important;
  border-radius: 10px;
  padding: 28px 28px 24px;
  box-sizing: border-box;
}

.caf-success-icon {
  flex-shrink: 0;
  color: var(--caf-green-mid);
  margin-top: 4px;
}

.caf-success-body strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--caf-green);
  margin-bottom: 10px;
  line-height: 1.3;
}

.caf-success-body p {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 400;
  color: var(--caf-green-dark);
  line-height: 1.6;
}

.caf-confirmation-footer {
  margin-top: var(--caf-gap-lg);
  padding-top: var(--caf-gap-md);
  border-top: 1px solid var(--caf-border);
  font-size: var(--caf-font-size-sm);
  color: var(--caf-muted);
  text-align: center;
}

.caf-confirmation-footer a {
  color: var(--caf-blue);
  text-decoration: none;
}
.caf-confirmation-footer a:hover {
  text-decoration: underline;
}

/* ---- Confirmation page: DTD matching gift section ---- */
.caf-dtd-wrap {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
  font-family: "Lexend Deca", sans-serif;
}
#dd-container {
  transform: scale(0.8);
  transform-origin: top left;
  width: 125%; /* compensate so scaled content fills the column */
  margin-bottom: -20%; /* pull up the dead space left by scale */
}
.caf-dtd-heading {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 500;
  color: #152a4a;
}
.caf-dtd-sub {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--caf-text-muted);
  line-height: 1.6;
}

/* DTD search input placeholder — third-party widget renders the input
   inside .caf-employer-search-anchor. Override its default near-black
   placeholder color so the typewriter cycler reads as hint text. */
.caf-employer-search-anchor input::placeholder,
.caf-employer-search-anchor input::-webkit-input-placeholder,
.caf-employer-search-anchor input::-moz-placeholder {
  color: var(--caf-text-placeholder) !important;
  opacity: 1 !important; /* Firefox dims placeholders by default */
  font-style: italic;
}
.caf-dtd-footer {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 300;
  color: #2d3748;
  line-height: 1.6;
}
.caf-dtd-footer a {
  color: var(--caf-blue);
  text-decoration: none;
}
.caf-dtd-footer a:hover {
  text-decoration: underline;
}
.caf-another-donation-btn {
  display: block;
  margin: 24px auto 0;
  padding: 11px 28px;
  background: transparent;
  border: 2px solid var(--caf-blue);
  border-radius: 6px;
  color: var(--caf-blue);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.caf-another-donation-btn:hover {
  background: var(--caf-blue);
  color: #fff;
}
.caf-highlight {
  font-weight: 700;
  color: #152a4a;
}