/**
 * 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 */

  /* 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: #788ea7; /* Hints, 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 1px 3px rgba(0, 0, 0, 0.12) !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;
}

.caf-amount-option input[type="radio"]:checked + label {
  border-color: var(--caf-blue) !important;
  background: var(--caf-blue) !important;
  color: var(--caf-white) !important;
}

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

.caf-amount-label {
  font-size: 9px;
  font-weight: 400;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* =============================================================
   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-end;
  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-muted);
  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-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-green-light);
  border-color: var(--caf-green-border);
  color: var(--caf-green);
}
.caf-panel--positive strong {
  color: var(--caf-green-dark);
}

.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;
}

/* =============================================================
   11. UTILITIES
   ============================================================= */

/* 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);
  }
}

/* =============================================================
   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;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 4px;
}

.caf-success-icon {
  flex-shrink: 0;
  color: #38a169;
  margin-top: 2px;
}

.caf-success-body strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: #152a4a;
  margin-bottom: 6px;
}

.caf-success-body p {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 300;
  color: #4a5568;
  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;
}
.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: 300;
  color: #788ea7;
  line-height: 1.6;
}
.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-highlight {
  font-weight: 700;
  color: #152a4a;
}