/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 10 2026 | 06:15:45 */
/* ============================================================
BrightLeaf Giving — Disbursement Forms
v1.0 — Modern web-app styling for CSF / EOF / SIC forms.
Targets:
- Form #32 (CSF Disbursement)
- Form #26 (EOF Scholarship)
- Form #113 (SIC Disbursement — same treatment as CSF)
Architecture
──────────────────────────────────────────────────────────
§0 Brand tokens + global form scoping
§1 Form shell (page intro, heading, required-legend)
§2 Section headings (Recipient Info / Disbursement Info / etc.)
§3 Field grid + labels + descriptions
§4 Text / email / tel / number inputs
§5 Textarea
§6 Select (incl. Chosen + TomSelect)
§7 Radio groups → segmented button cards
§8 Checkboxes (incl. consent + cover-fee toggle)
§9 Address / name composite fields
§10 Recipient summary card (#field_*_67, #field_*_56)
§11 "Please select an approved recipient" notice
§12 Type-narrative HTML blocks (Grant/Stipend/Vendor)
§13 Disbursement summary panel (fee, recipient receives, deducted)
§14 Shekels Calculator panel
§15 Bank/Cash payment-method panels
§16 Submit button (sticky on desktop)
§17 Empty-field gentle pulse
§18 Date picker
§19 intl-tel-input phone field
§20 Validation errors
§21 Print
============================================================ */
/* ── §0 Tokens + form scoping ─────────────────────────────── */
:root {
--bl-navy: #0b2a4a;
--bl-green: #2F7E4B;
--bl-green-hover: #25663D;
--bl-green-dark: #2F5F3C;
--bl-green-soft: rgba(47, 126, 75, 0.08);
--bl-green-soft-2: rgba(47, 126, 75, 0.16);
--bl-accent: #A8C64A;
--bl-accent-2: #6fc24a;
--bl-white: #ffffff;
--bl-surface: #F7F9F6;
--bl-surface-2: #F1F4F0;
--bl-ink: #1F2A26;
--bl-ink-2: #2A3833;
--bl-muted: #56645F;
--bl-muted-2: #8A958F;
--bl-border: #DEE4E1;
--bl-border-soft: #E8EDE9;
--bl-cards: #CCD5D1;
--bl-red-soft: #C0392B;
--bl-red-bg: rgba(192, 57, 43, 0.06);
--bl-amber: #D4A017;
--bl-amber-bg: rgba(212, 160, 23, 0.10);
--bl-disb-radius-sm: 8px;
--bl-disb-radius-md: 12px;
--bl-disb-radius-lg: 16px;
--bl-disb-radius-xl: 20px;
--bl-disb-shadow-xs: 0 1px 2px rgba(11,42,74,0.04);
--bl-disb-shadow-sm: 0 1px 3px rgba(11,42,74,0.06), 0 4px 12px rgba(11,42,74,0.04);
--bl-disb-shadow-md: 0 4px 12px rgba(11,42,74,0.10), 0 12px 32px rgba(11,42,74,0.08);
--bl-disb-shadow-focus: 0 0 0 3px rgba(47, 126, 75, 0.18);
--bl-tx: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--bl-tx-fast: 0.15s ease-out;
--bl-tx-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
--bl-font: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Scope every rule to the disbursement-form wrappers we know about.
This is a heavy hammer but keeps us from stomping on other GF forms
on the site. */
#gform_wrapper_26,
#gform_wrapper_32,
#gform_wrapper_113 {
font-family: var(--bl-font) !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
#gform_wrapper_26 *,
#gform_wrapper_32 *,
#gform_wrapper_113 * {
box-sizing: border-box !important;
}
/* ──────────────────────────────────────────────────────────
§1 Form shell — intro paragraph, heading, required legend
────────────────────────────────────────────────────────── */
/* The intro paragraph above the form ("Requesting a disbursement…").
It's a sibling of the form wrapper inside .entry-content. We re-style
it as an "available balance" banner. */
.entry-content > p:has(+ #gform_wrapper_26),
.entry-content > p:has(+ #gform_wrapper_32),
.entry-content > p:has(+ #gform_wrapper_113) {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
background: linear-gradient(135deg, var(--bl-white) 0%, var(--bl-surface) 100%) !important;
border: 1px solid var(--bl-border) !important;
border-left: 4px solid var(--bl-green) !important;
border-radius: var(--bl-disb-radius-md) !important;
padding: 16px 20px !important;
margin: 0 0 24px !important;
font-family: var(--bl-font) !important;
font-size: 0.95rem !important;
line-height: 1.5 !important;
color: var(--bl-ink) !important;
box-shadow: var(--bl-disb-shadow-xs) !important;
position: relative !important;
overflow: hidden !important;
}
/* Required legend "* indicates required fields" — calmer */
#gform_wrapper_26 .gform_required_legend,
#gform_wrapper_32 .gform_required_legend,
#gform_wrapper_113 .gform_required_legend {
font-family: var(--bl-font) !important;
font-size: 0.78rem !important;
color: var(--bl-muted-2) !important;
margin: 0 0 18px !important;
padding: 0 !important;
text-align: right !important;
font-style: italic !important;
}
#gform_wrapper_26 .gform_required_legend .gfield_required,
#gform_wrapper_32 .gform_required_legend .gfield_required,
#gform_wrapper_113 .gform_required_legend .gfield_required {
color: var(--bl-red-soft) !important;
font-weight: 700 !important;
}
#gform_wrapper_26 .gform_heading,
#gform_wrapper_32 .gform_heading,
#gform_wrapper_113 .gform_heading {
margin: 0 0 8px !important;
}
/* Form body */
#gform_wrapper_26 .gform-body,
#gform_wrapper_32 .gform-body,
#gform_wrapper_113 .gform-body {
background: transparent !important;
}
#gform_wrapper_26 .gform_fields,
#gform_wrapper_32 .gform_fields,
#gform_wrapper_113 .gform_fields {
display: grid !important;
grid-template-columns: repeat(12, 1fr) !important;
gap: 18px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* ──────────────────────────────────────────────────────────
§2 Section headings (gsection)
────────────────────────────────────────────────────────── */
#gform_wrapper_26 .gsection,
#gform_wrapper_32 .gsection,
#gform_wrapper_113 .gsection {
grid-column: 1 / -1 !important;
border: none !important;
margin: 14px 0 0 !important;
padding: 0 !important;
background: transparent !important;
position: relative !important;
}
/* First section after the recipient picker shouldn't have the big top margin */
#gform_wrapper_26 .gform_fields > .gsection:first-of-type,
#gform_wrapper_32 .gform_fields > .gsection:first-of-type,
#gform_wrapper_113 .gform_fields > .gsection:first-of-type {
margin-top: 6px !important;
}
#gform_wrapper_26 .gsection_title,
#gform_wrapper_32 .gsection_title,
#gform_wrapper_113 .gsection_title {
font-family: var(--bl-font) !important;
font-size: 1.05rem !important;
font-weight: 800 !important;
color: var(--bl-navy) !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
margin: 0 0 4px !important;
padding: 0 0 8px !important;
border-bottom: 1px solid var(--bl-border) !important;
position: relative !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
#gform_wrapper_26 .gsection_title::before,
#gform_wrapper_32 .gsection_title::before,
#gform_wrapper_113 .gsection_title::before {
content: '' !important;
display: inline-block !important;
width: 4px !important;
height: 20px !important;
background: linear-gradient(180deg, var(--bl-green), var(--bl-accent-2)) !important;
border-radius: 2px !important;
flex-shrink: 0 !important;
}
/* ──────────────────────────────────────────────────────────
§3 Field grid + labels + descriptions
────────────────────────────────────────────────────────── */
/* Default: full-width unless a width modifier overrides */
#gform_wrapper_26 .gfield,
#gform_wrapper_32 .gfield,
#gform_wrapper_113 .gfield {
grid-column: 1 / -1 !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
}
#gform_wrapper_26 .gfield--width-full,
#gform_wrapper_32 .gfield--width-full,
#gform_wrapper_113 .gfield--width-full {
grid-column: 1 / -1 !important;
}
/* Half + Third + Quarter widths — collapse on narrow viewports */
@media (min-width: 768px) {
#gform_wrapper_26 .gfield--width-half,
#gform_wrapper_32 .gfield--width-half,
#gform_wrapper_113 .gfield--width-half {
grid-column: span 6 !important;
}
#gform_wrapper_26 .gfield--width-third,
#gform_wrapper_32 .gfield--width-third,
#gform_wrapper_113 .gfield--width-third {
grid-column: span 4 !important;
}
#gform_wrapper_26 .gfield--width-quarter,
#gform_wrapper_32 .gfield--width-quarter,
#gform_wrapper_113 .gfield--width-quarter {
grid-column: span 3 !important;
}
}
/* Hidden fields shouldn't take grid space */
#gform_wrapper_26 .gfield_visibility_hidden,
#gform_wrapper_32 .gfield_visibility_hidden,
#gform_wrapper_113 .gfield_visibility_hidden,
#gform_wrapper_26 .gfield[style*="display: none"],
#gform_wrapper_32 .gfield[style*="display: none"],
#gform_wrapper_113 .gfield[style*="display: none"],
#gform_wrapper_26 .gform_validation_container,
#gform_wrapper_32 .gform_validation_container,
#gform_wrapper_113 .gform_validation_container {
display: none !important;
}
/* Field labels */
#gform_wrapper_26 .gfield_label,
#gform_wrapper_32 .gfield_label,
#gform_wrapper_113 .gfield_label {
display: block !important;
font-family: var(--bl-font) !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
color: var(--bl-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
margin: 0 0 8px !important;
line-height: 1.3 !important;
}
#gform_wrapper_26 .gfield_required,
#gform_wrapper_32 .gfield_required,
#gform_wrapper_113 .gfield_required {
color: var(--bl-red-soft) !important;
font-weight: 800 !important;
margin-left: 3px !important;
}
#gform_wrapper_26 .gfield_required_asterisk,
#gform_wrapper_32 .gfield_required_asterisk,
#gform_wrapper_113 .gfield_required_asterisk {
color: var(--bl-red-soft) !important;
}
/* Field description (helper text below the input) */
#gform_wrapper_26 .gfield_description,
#gform_wrapper_32 .gfield_description,
#gform_wrapper_113 .gfield_description {
font-family: var(--bl-font) !important;
font-size: 0.8rem !important;
color: var(--bl-muted) !important;
margin: 6px 0 0 !important;
line-height: 1.4 !important;
}
#gform_wrapper_26 .gfield_description.instruction,
#gform_wrapper_32 .gfield_description.instruction,
#gform_wrapper_113 .gfield_description.instruction {
font-style: italic !important;
font-size: 0.75rem !important;
margin-top: 4px !important;
}
/* Sub-labels (First/Last, Address line labels) */
#gform_wrapper_26 .gform-field-label--type-sub,
#gform_wrapper_32 .gform-field-label--type-sub,
#gform_wrapper_113 .gform-field-label--type-sub {
display: block !important;
font-family: var(--bl-font) !important;
font-size: 0.7rem !important;
font-weight: 600 !important;
color: var(--bl-muted-2) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
margin: 5px 0 0 !important;
}
/* Description-above placement */
#gform_wrapper_26 .field_description_above .gfield_description,
#gform_wrapper_32 .field_description_above .gfield_description,
#gform_wrapper_113 .field_description_above .gfield_description {
margin: -4px 0 8px !important;
}
/* ──────────────────────────────────────────────────────────
§4 Text / email / tel / number inputs
────────────────────────────────────────────────────────── */
#gform_wrapper_26 input[type="text"],
#gform_wrapper_26 input[type="email"],
#gform_wrapper_26 input[type="tel"],
#gform_wrapper_26 input[type="number"],
#gform_wrapper_26 input[type="date"],
#gform_wrapper_32 input[type="text"],
#gform_wrapper_32 input[type="email"],
#gform_wrapper_32 input[type="tel"],
#gform_wrapper_32 input[type="number"],
#gform_wrapper_32 input[type="date"],
#gform_wrapper_113 input[type="text"],
#gform_wrapper_113 input[type="email"],
#gform_wrapper_113 input[type="tel"],
#gform_wrapper_113 input[type="number"],
#gform_wrapper_113 input[type="date"] {
width: 100% !important;
height: 44px !important;
padding: 0 14px !important;
background: var(--bl-white) !important;
border: 1.5px solid var(--bl-border) !important;
border-radius: var(--bl-disb-radius-sm) !important;
font-family: var(--bl-font) !important;
font-size: 0.95rem !important;
color: var(--bl-ink) !important;
line-height: 1.4 !important;
margin: 0 !important;
transition: border-color var(--bl-tx), box-shadow var(--bl-tx), background var(--bl-tx) !important;
box-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
}
#gform_wrapper_26 input[type="text"]:hover,
#gform_wrapper_26 input[type="email"]:hover,
#gform_wrapper_26 input[type="tel"]:hover,
#gform_wrapper_26 input[type="number"]:hover,
#gform_wrapper_32 input[type="text"]:hover,
#gform_wrapper_32 input[type="email"]:hover,
#gform_wrapper_32 input[type="tel"]:hover,
#gform_wrapper_32 input[type="number"]:hover,
#gform_wrapper_113 input[type="text"]:hover,
#gform_wrapper_113 input[type="email"]:hover,
#gform_wrapper_113 input[type="tel"]:hover,
#gform_wrapper_113 input[type="number"]:hover {
border-color: var(--bl-cards) !important;
}
#gform_wrapper_26 input[type="text"]:focus,
#gform_wrapper_26 input[type="email"]:focus,
#gform_wrapper_26 input[type="tel"]:focus,
#gform_wrapper_26 input[type="number"]:focus,
#gform_wrapper_32 input[type="text"]:focus,
#gform_wrapper_32 input[type="email"]:focus,
#gform_wrapper_32 input[type="tel"]:focus,
#gform_wrapper_32 input[type="number"]:focus,
#gform_wrapper_113 input[type="text"]:focus,
#gform_wrapper_113 input[type="email"]:focus,
#gform_wrapper_113 input[type="tel"]:focus,
#gform_wrapper_113 input[type="number"]:focus {
outline: none !important;
border-color: var(--bl-green) !important;
box-shadow: var(--bl-disb-shadow-focus) !important;
background: var(--bl-white) !important;
}
/* Filled state — soft visual confirmation */
#gform_wrapper_26 input[type="text"]:not(:placeholder-shown):not(:focus):valid,
#gform_wrapper_26 input[type="email"]:not(:placeholder-shown):not(:focus):valid,
#gform_wrapper_26 input[type="tel"]:not(:placeholder-shown):not(:focus):valid,
#gform_wrapper_26 input[type="number"]:not(:placeholder-shown):not(:focus):valid,
#gform_wrapper_32 input[type="text"]:not(:placeholder-shown):not(:focus):valid,
#gform_wrapper_32 input[type="email"]:not(:placeholder-shown):not(:focus):valid,
#gform_wrapper_32 input[type="tel"]:not(:placeholder-shown):not(:focus):valid,
#gform_wrapper_32 input[type="number"]:not(:placeholder-shown):not(:focus):valid,
#gform_wrapper_113 input[type="text"]:not(:placeholder-shown):not(:focus):valid,
#gform_wrapper_113 input[type="email"]:not(:placeholder-shown):not(:focus):valid,
#gform_wrapper_113 input[type="tel"]:not(:placeholder-shown):not(:focus):valid,
#gform_wrapper_113 input[type="number"]:not(:placeholder-shown):not(:focus):valid {
border-color: var(--bl-border) !important;
background: var(--bl-surface) !important;
}
#gform_wrapper_26 input::placeholder,
#gform_wrapper_32 input::placeholder,
#gform_wrapper_113 input::placeholder {
color: var(--bl-muted-2) !important;
opacity: 0.7 !important;
}
/* Readonly inputs — calculated values */
#gform_wrapper_26 input[readonly],
#gform_wrapper_32 input[readonly],
#gform_wrapper_113 input[readonly] {
background: var(--bl-surface-2) !important;
color: var(--bl-ink) !important;
cursor: not-allowed !important;
border-color: var(--bl-border) !important;
font-weight: 600 !important;
}
#gform_wrapper_26 input[readonly]:focus,
#gform_wrapper_32 input[readonly]:focus,
#gform_wrapper_113 input[readonly]:focus {
box-shadow: none !important;
border-color: var(--bl-border) !important;
}
/* Disabled inputs */
#gform_wrapper_26 input:disabled,
#gform_wrapper_32 input:disabled,
#gform_wrapper_113 input:disabled,
#gform_wrapper_26 select:disabled,
#gform_wrapper_32 select:disabled,
#gform_wrapper_113 select:disabled,
#gform_wrapper_26 textarea:disabled,
#gform_wrapper_32 textarea:disabled,
#gform_wrapper_113 textarea:disabled {
opacity: 0.55 !important;
cursor: not-allowed !important;
}
/* Character counter (charleft) */
#gform_wrapper_26 .charleft.ginput_counter,
#gform_wrapper_32 .charleft.ginput_counter,
#gform_wrapper_113 .charleft.ginput_counter {
font-family: var(--bl-font) !important;
font-size: 0.74rem !important;
color: var(--bl-muted-2) !important;
margin-top: 4px !important;
text-align: right !important;
}
/* ──────────────────────────────────────────────────────────
§5 Textarea
────────────────────────────────────────────────────────── */
#gform_wrapper_26 textarea,
#gform_wrapper_32 textarea,
#gform_wrapper_113 textarea {
width: 100% !important;
min-height: 90px !important;
padding: 12px 14px !important;
background: var(--bl-white) !important;
border: 1.5px solid var(--bl-border) !important;
border-radius: var(--bl-disb-radius-sm) !important;
font-family: var(--bl-font) !important;
font-size: 0.95rem !important;
color: var(--bl-ink) !important;
line-height: 1.5 !important;
margin: 0 !important;
transition: border-color var(--bl-tx), box-shadow var(--bl-tx) !important;
resize: vertical !important;
box-shadow: none !important;
}
#gform_wrapper_26 textarea:focus,
#gform_wrapper_32 textarea:focus,
#gform_wrapper_113 textarea:focus {
outline: none !important;
border-color: var(--bl-green) !important;
box-shadow: var(--bl-disb-shadow-focus) !important;
}
#gform_wrapper_26 textarea.small,
#gform_wrapper_32 textarea.small,
#gform_wrapper_113 textarea.small {
min-height: 80px !important;
}
/* ──────────────────────────────────────────────────────────
§6 Select fields
────────────────────────────────────────────────────────── */
/* Native select fallback */
#gform_wrapper_26 select,
#gform_wrapper_32 select,
#gform_wrapper_113 select {
width: 100% !important;
height: 44px !important;
padding: 0 36px 0 14px !important;
background: var(--bl-white) !important;
border: 1.5px solid var(--bl-border) !important;
border-radius: var(--bl-disb-radius-sm) !important;
font-family: var(--bl-font) !important;
font-size: 0.95rem !important;
color: var(--bl-ink) !important;
line-height: 1.4 !important;
margin: 0 !important;
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
cursor: pointer !important;
transition: border-color var(--bl-tx), box-shadow var(--bl-tx) !important;
}
#gform_wrapper_26 select:focus,
#gform_wrapper_32 select:focus,
#gform_wrapper_113 select:focus {
outline: none !important;
border-color: var(--bl-green) !important;
box-shadow: var(--bl-disb-shadow-focus) !important;
}
/* Chosen.js select — used for "Approved Recipient" */
#gform_wrapper_26 .chosen-container,
#gform_wrapper_32 .chosen-container,
#gform_wrapper_113 .chosen-container {
width: 100% !important;
font-family: var(--bl-font) !important;
}
#gform_wrapper_26 .chosen-container-single .chosen-single,
#gform_wrapper_32 .chosen-container-single .chosen-single,
#gform_wrapper_113 .chosen-container-single .chosen-single {
height: 44px !important;
padding: 0 36px 0 14px !important;
background: var(--bl-white) !important;
background-image: none !important;
border: 1.5px solid var(--bl-border) !important;
border-radius: var(--bl-disb-radius-sm) !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
font-family: var(--bl-font) !important;
font-size: 0.95rem !important;
color: var(--bl-ink) !important;
line-height: 1 !important;
cursor: pointer !important;
transition: border-color var(--bl-tx), box-shadow var(--bl-tx) !important;
}
#gform_wrapper_26 .chosen-container-single .chosen-single span,
#gform_wrapper_32 .chosen-container-single .chosen-single span,
#gform_wrapper_113 .chosen-container-single .chosen-single span {
margin: 0 !important;
color: var(--bl-ink) !important;
}
#gform_wrapper_26 .chosen-container-single.chosen-disabled .chosen-single span,
#gform_wrapper_32 .chosen-container-single.chosen-disabled .chosen-single span,
#gform_wrapper_113 .chosen-container-single.chosen-disabled .chosen-single span {
color: var(--bl-muted-2) !important;
}
#gform_wrapper_26 .chosen-container-single .chosen-single div,
#gform_wrapper_32 .chosen-container-single .chosen-single div,
#gform_wrapper_113 .chosen-container-single .chosen-single div {
width: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#gform_wrapper_26 .chosen-container-single .chosen-single div b,
#gform_wrapper_32 .chosen-container-single .chosen-single div b,
#gform_wrapper_113 .chosen-container-single .chosen-single div b {
background: none !important;
width: 12px !important;
height: 8px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
}
#gform_wrapper_26 .chosen-container-active.chosen-with-drop .chosen-single,
#gform_wrapper_32 .chosen-container-active.chosen-with-drop .chosen-single,
#gform_wrapper_113 .chosen-container-active.chosen-with-drop .chosen-single {
border-color: var(--bl-green) !important;
box-shadow: var(--bl-disb-shadow-focus) !important;
border-radius: var(--bl-disb-radius-sm) var(--bl-disb-radius-sm) 0 0 !important;
}
#gform_wrapper_26 .chosen-container .chosen-drop,
#gform_wrapper_32 .chosen-container .chosen-drop,
#gform_wrapper_113 .chosen-container .chosen-drop {
border: 1.5px solid var(--bl-green) !important;
border-top: none !important;
border-radius: 0 0 var(--bl-disb-radius-sm) var(--bl-disb-radius-sm) !important;
box-shadow: 0 8px 24px rgba(11,42,74,0.10) !important;
background: var(--bl-white) !important;
margin-top: -2px !important;
}
#gform_wrapper_26 .chosen-container .chosen-search input[type="text"],
#gform_wrapper_32 .chosen-container .chosen-search input[type="text"],
#gform_wrapper_113 .chosen-container .chosen-search input[type="text"] {
height: 36px !important;
padding: 0 12px !important;
border: 1px solid var(--bl-border) !important;
border-radius: var(--bl-disb-radius-sm) !important;
font-size: 0.9rem !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
}
#gform_wrapper_26 .chosen-container .chosen-results,
#gform_wrapper_32 .chosen-container .chosen-results,
#gform_wrapper_113 .chosen-container .chosen-results {
margin: 0 !important;
padding: 4px !important;
max-height: 280px !important;
}
#gform_wrapper_26 .chosen-container .chosen-results li,
#gform_wrapper_32 .chosen-container .chosen-results li,
#gform_wrapper_113 .chosen-container .chosen-results li {
padding: 9px 12px !important;
border-radius: 6px !important;
font-family: var(--bl-font) !important;
font-size: 0.92rem !important;
color: var(--bl-ink) !important;
line-height: 1.3 !important;
transition: background var(--bl-tx-fast) !important;
}
#gform_wrapper_26 .chosen-container .chosen-results li.highlighted,
#gform_wrapper_32 .chosen-container .chosen-results li.highlighted,
#gform_wrapper_113 .chosen-container .chosen-results li.highlighted {
background: var(--bl-green) !important;
color: var(--bl-white) !important;
}
#gform_wrapper_26 .chosen-container .chosen-results li.no-results,
#gform_wrapper_32 .chosen-container .chosen-results li.no-results,
#gform_wrapper_113 .chosen-container .chosen-results li.no-results {
background: var(--bl-surface) !important;
color: var(--bl-muted) !important;
font-style: italic !important;
text-align: center !important;
}
/* TomSelect (used for country selector) */
#gform_wrapper_26 .ts-wrapper,
#gform_wrapper_32 .ts-wrapper,
#gform_wrapper_113 .ts-wrapper {
font-family: var(--bl-font) !important;
}
#gform_wrapper_26 .ts-wrapper .ts-control,
#gform_wrapper_32 .ts-wrapper .ts-control,
#gform_wrapper_113 .ts-wrapper .ts-control {
min-height: 44px !important;
padding: 0 14px !important;
background: var(--bl-white) !important;
border: 1.5px solid var(--bl-border) !important;
border-radius: var(--bl-disb-radius-sm) !important;
font-family: var(--bl-font) !important;
font-size: 0.95rem !important;
color: var(--bl-ink) !important;
display: flex !important;
align-items: center !important;
box-shadow: none !important;
transition: border-color var(--bl-tx), box-shadow var(--bl-tx) !important;
}
#gform_wrapper_26 .ts-wrapper.focus .ts-control,
#gform_wrapper_32 .ts-wrapper.focus .ts-control,
#gform_wrapper_113 .ts-wrapper.focus .ts-control {
border-color: var(--bl-green) !important;
box-shadow: var(--bl-disb-shadow-focus) !important;
}
#gform_wrapper_26 .ts-wrapper .ts-control .item,
#gform_wrapper_32 .ts-wrapper .ts-control .item,
#gform_wrapper_113 .ts-wrapper .ts-control .item {
background: transparent !important;
border: none !important;
color: var(--bl-ink) !important;
padding: 0 !important;
}
#gform_wrapper_26 .ts-dropdown,
#gform_wrapper_32 .ts-dropdown,
#gform_wrapper_113 .ts-dropdown {
border: 1.5px solid var(--bl-green) !important;
border-radius: var(--bl-disb-radius-sm) !important;
box-shadow: 0 8px 24px rgba(11,42,74,0.10) !important;
margin-top: 4px !important;
font-family: var(--bl-font) !important;
}
#gform_wrapper_26 .ts-dropdown .option,
#gform_wrapper_32 .ts-dropdown .option,
#gform_wrapper_113 .ts-dropdown .option {
padding: 9px 12px !important;
font-size: 0.92rem !important;
}
#gform_wrapper_26 .ts-dropdown .option.active,
#gform_wrapper_32 .ts-dropdown .option.active,
#gform_wrapper_113 .ts-dropdown .option.active {
background: var(--bl-green) !important;
color: var(--bl-white) !important;
}
/* ──────────────────────────────────────────────────────────
§7 Radio groups → segmented button cards
This is the key web-app upgrade: replacing default radio
inputs with prominent button-style choices.
────────────────────────────────────────────────────────── */
/* Common reset for radio fieldsets */
#gform_wrapper_26 .gfield--type-radio,
#gform_wrapper_32 .gfield--type-radio,
#gform_wrapper_113 .gfield--type-radio {
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
#gform_wrapper_26 .gfield--type-radio legend,
#gform_wrapper_32 .gfield--type-radio legend,
#gform_wrapper_113 .gfield--type-radio legend {
/* Reuse the normal field-label styling */
}
#gform_wrapper_26 .gfield_radio,
#gform_wrapper_32 .gfield_radio,
#gform_wrapper_113 .gfield_radio {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}
#gform_wrapper_26 .gfield_radio .gchoice,
#gform_wrapper_32 .gfield_radio .gchoice,
#gform_wrapper_113 .gfield_radio .gchoice {
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
/* Visually hide the native radio button */
#gform_wrapper_26 .gfield_radio input[type="radio"],
#gform_wrapper_32 .gfield_radio input[type="radio"],
#gform_wrapper_113 .gfield_radio input[type="radio"] {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
width: 1px !important;
height: 1px !important;
}
/* Style the label as a button */
#gform_wrapper_26 .gfield_radio label,
#gform_wrapper_32 .gfield_radio label,
#gform_wrapper_113 .gfield_radio label {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
min-height: 48px !important;
padding: 12px 18px !important;
background: var(--bl-white) !important;
border: 1.5px solid var(--bl-border) !important;
border-radius: var(--bl-disb-radius-sm) !important;
font-family: var(--bl-font) !important;
font-size: 0.92rem !important;
font-weight: 600 !important;
color: var(--bl-ink) !important;
cursor: pointer !important;
text-align: center !important;
transition: all var(--bl-tx) !important;
margin: 0 !important;
line-height: 1.3 !important;
user-select: none !important;
position: relative !important;
box-shadow: none !important;
}
#gform_wrapper_26 .gfield_radio label:hover,
#gform_wrapper_32 .gfield_radio label:hover,
#gform_wrapper_113 .gfield_radio label:hover {
background: var(--bl-green-soft) !important;
border-color: var(--bl-green-soft-2) !important;
color: var(--bl-green-dark) !important;
transform: translateY(-1px) !important;
}
#gform_wrapper_26 .gfield_radio input[type="radio"]:focus-visible + label,
#gform_wrapper_32 .gfield_radio input[type="radio"]:focus-visible + label,
#gform_wrapper_113 .gfield_radio input[type="radio"]:focus-visible + label {
border-color: var(--bl-green) !important;
box-shadow: var(--bl-disb-shadow-focus) !important;
}
#gform_wrapper_26 .gfield_radio input[type="radio"]:checked + label,
#gform_wrapper_32 .gfield_radio input[type="radio"]:checked + label,
#gform_wrapper_113 .gfield_radio input[type="radio"]:checked + label {
background: linear-gradient(135deg, var(--bl-green) 0%, var(--bl-green-dark) 100%) !important;
border-color: var(--bl-green) !important;
color: var(--bl-white) !important;
font-weight: 700 !important;
box-shadow: 0 2px 6px rgba(47, 126, 75, 0.20), 0 4px 14px rgba(47, 126, 75, 0.14) !important;
transform: translateY(-1px) !important;
}
/* Checkmark on selected state */
#gform_wrapper_26 .gfield_radio input[type="radio"]:checked + label::before,
#gform_wrapper_32 .gfield_radio input[type="radio"]:checked + label::before,
#gform_wrapper_113 .gfield_radio input[type="radio"]:checked + label::before {
content: '✓' !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
height: 18px !important;
background: rgba(255, 255, 255, 0.22) !important;
border-radius: 50% !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
flex-shrink: 0 !important;
animation: blDisbCheckPop var(--bl-tx-spring) !important;
}
@keyframes blDisbCheckPop {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* Show / Hide segmented toggle (Shekels Calculator) — keep compact */
#gform_wrapper_26 #field_26_48 .gfield_radio,
#gform_wrapper_32 #field_32_59 .gfield_radio,
#gform_wrapper_113 #field_113_59 .gfield_radio {
display: inline-flex !important;
background: var(--bl-surface-2) !important;
border-radius: 999px !important;
padding: 4px !important;
gap: 0 !important;
width: auto !important;
}
#gform_wrapper_26 #field_26_48 .gfield_radio .gchoice,
#gform_wrapper_32 #field_32_59 .gfield_radio .gchoice,
#gform_wrapper_113 #field_113_59 .gfield_radio .gchoice {
flex: 0 0 auto !important;
}
#gform_wrapper_26 #field_26_48 .gfield_radio label,
#gform_wrapper_32 #field_32_59 .gfield_radio label,
#gform_wrapper_113 #field_113_59 .gfield_radio label {
min-height: 32px !important;
padding: 4px 18px !important;
background: transparent !important;
border: none !important;
border-radius: 999px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
color: var(--bl-muted) !important;
}
#gform_wrapper_26 #field_26_48 .gfield_radio label:hover,
#gform_wrapper_32 #field_32_59 .gfield_radio label:hover,
#gform_wrapper_113 #field_113_59 .gfield_radio label:hover {
background: rgba(255,255,255,0.6) !important;
color: var(--bl-ink) !important;
transform: none !important;
}
#gform_wrapper_26 #field_26_48 .gfield_radio input[type="radio"]:checked + label,
#gform_wrapper_32 #field_32_59 .gfield_radio input[type="radio"]:checked + label,
#gform_wrapper_113 #field_113_59 .gfield_radio input[type="radio"]:checked + label {
background: var(--bl-white) !important;
color: var(--bl-green-dark) !important;
box-shadow: 0 1px 3px rgba(11,42,74,0.10) !important;
transform: none !important;
}
#gform_wrapper_26 #field_26_48 .gfield_radio input[type="radio"]:checked + label::before,
#gform_wrapper_32 #field_32_59 .gfield_radio input[type="radio"]:checked + label::before,
#gform_wrapper_113 #field_113_59 .gfield_radio input[type="radio"]:checked + label::before {
display: none !important;
}
/* ──────────────────────────────────────────────────────────
§8 Checkboxes
────────────────────────────────────────────────────────── */
#gform_wrapper_26 .gfield--type-checkbox,
#gform_wrapper_26 .gfield--type-consent,
#gform_wrapper_32 .gfield--type-checkbox,
#gform_wrapper_32 .gfield--type-consent,
#gform_wrapper_113 .gfield--type-checkbox,
#gform_wrapper_113 .gfield--type-consent {
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
#gform_wrapper_26 .gfield_checkbox,
#gform_wrapper_32 .gfield_checkbox,
#gform_wrapper_113 .gfield_checkbox {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
}
#gform_wrapper_26 .gfield_checkbox .gchoice,
#gform_wrapper_32 .gfield_checkbox .gchoice,
#gform_wrapper_113 .gfield_checkbox .gchoice,
#gform_wrapper_26 .ginput_container_consent,
#gform_wrapper_32 .ginput_container_consent,
#gform_wrapper_113 .ginput_container_consent {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Hide native checkbox visually but keep it accessible */
#gform_wrapper_26 .gfield_checkbox input[type="checkbox"],
#gform_wrapper_32 .gfield_checkbox input[type="checkbox"],
#gform_wrapper_113 .gfield_checkbox input[type="checkbox"],
#gform_wrapper_26 .ginput_container_consent input[type="checkbox"],
#gform_wrapper_32 .ginput_container_consent input[type="checkbox"],
#gform_wrapper_113 .ginput_container_consent input[type="checkbox"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 22px !important;
height: 22px !important;
margin: 0 !important;
border: 2px solid var(--bl-border) !important;
border-radius: 6px !important;
background: var(--bl-white) !important;
cursor: pointer !important;
flex-shrink: 0 !important;
position: relative !important;
transition: all var(--bl-tx) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
#gform_wrapper_26 .gfield_checkbox input[type="checkbox"]:hover,
#gform_wrapper_32 .gfield_checkbox input[type="checkbox"]:hover,
#gform_wrapper_113 .gfield_checkbox input[type="checkbox"]:hover,
#gform_wrapper_26 .ginput_container_consent input[type="checkbox"]:hover,
#gform_wrapper_32 .ginput_container_consent input[type="checkbox"]:hover,
#gform_wrapper_113 .ginput_container_consent input[type="checkbox"]:hover {
border-color: var(--bl-green) !important;
background: var(--bl-green-soft) !important;
}
#gform_wrapper_26 .gfield_checkbox input[type="checkbox"]:focus-visible,
#gform_wrapper_32 .gfield_checkbox input[type="checkbox"]:focus-visible,
#gform_wrapper_113 .gfield_checkbox input[type="checkbox"]:focus-visible,
#gform_wrapper_26 .ginput_container_consent input[type="checkbox"]:focus-visible,
#gform_wrapper_32 .ginput_container_consent input[type="checkbox"]:focus-visible,
#gform_wrapper_113 .ginput_container_consent input[type="checkbox"]:focus-visible {
outline: none !important;
box-shadow: var(--bl-disb-shadow-focus) !important;
border-color: var(--bl-green) !important;
}
#gform_wrapper_26 .gfield_checkbox input[type="checkbox"]:checked,
#gform_wrapper_32 .gfield_checkbox input[type="checkbox"]:checked,
#gform_wrapper_113 .gfield_checkbox input[type="checkbox"]:checked,
#gform_wrapper_26 .ginput_container_consent input[type="checkbox"]:checked,
#gform_wrapper_32 .ginput_container_consent input[type="checkbox"]:checked,
#gform_wrapper_113 .ginput_container_consent input[type="checkbox"]:checked {
background: linear-gradient(135deg, var(--bl-green) 0%, var(--bl-green-dark) 100%) !important;
border-color: var(--bl-green) !important;
}
#gform_wrapper_26 .gfield_checkbox input[type="checkbox"]:checked::after,
#gform_wrapper_32 .gfield_checkbox input[type="checkbox"]:checked::after,
#gform_wrapper_113 .gfield_checkbox input[type="checkbox"]:checked::after,
#gform_wrapper_26 .ginput_container_consent input[type="checkbox"]:checked::after,
#gform_wrapper_32 .ginput_container_consent input[type="checkbox"]:checked::after,
#gform_wrapper_113 .ginput_container_consent input[type="checkbox"]:checked::after {
content: '' !important;
position: absolute !important;
width: 6px !important;
height: 11px !important;
border: solid var(--bl-white) !important;
border-width: 0 2.5px 2.5px 0 !important;
transform: rotate(45deg) translateY(-1px) !important;
animation: blDisbCheckDraw 0.2s ease-out !important;
}
@keyframes blDisbCheckDraw {
0% { transform: rotate(45deg) translateY(-1px) scale(0); opacity: 0; }
100% { transform: rotate(45deg) translateY(-1px) scale(1); opacity: 1; }
}
#gform_wrapper_26 .gfield_checkbox label,
#gform_wrapper_32 .gfield_checkbox label,
#gform_wrapper_113 .gfield_checkbox label,
#gform_wrapper_26 .gfield_consent_label,
#gform_wrapper_32 .gfield_consent_label,
#gform_wrapper_113 .gfield_consent_label {
font-family: var(--bl-font) !important;
font-size: 0.92rem !important;
font-weight: 500 !important;
color: var(--bl-ink) !important;
line-height: 1.45 !important;
cursor: pointer !important;
margin: 0 !important;
padding-top: 1px !important;
text-transform: none !important;
letter-spacing: 0 !important;
flex: 1 !important;
}
/* "Cover Disbursement Fee" — promote into a contained card */
#gform_wrapper_26 #field_26_50,
#gform_wrapper_32 #field_32_70,
#gform_wrapper_113 #field_113_70 {
background: var(--bl-surface) !important;
border: 1.5px solid var(--bl-border) !important;
border-radius: var(--bl-disb-radius-md) !important;
padding: 14px 16px !important;
transition: border-color var(--bl-tx), background var(--bl-tx) !important;
}
#gform_wrapper_26 #field_26_50:has(input:checked),
#gform_wrapper_32 #field_32_70:has(input:checked),
#gform_wrapper_113 #field_113_70:has(input:checked) {
border-color: var(--bl-green-soft-2) !important;
background: var(--bl-green-soft) !important;
}
#gform_wrapper_26 #field_26_50 .gfield_label.hidden_label,
#gform_wrapper_32 #field_32_70 .gfield_label.hidden_label,
#gform_wrapper_113 #field_113_70 .gfield_label.hidden_label {
/* Default Gravity Forms hidden_label class hides it visually with screen-reader-only text.
We want to actually hide it to prevent layout issues. */
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
border: 0 !important;
}
#gform_wrapper_26 #field_26_50 .gfield_description,
#gform_wrapper_32 #field_32_70 .gfield_description,
#gform_wrapper_113 #field_113_70 .gfield_description {
font-size: 0.82rem !important;
margin: 8px 0 0 32px !important;
color: var(--bl-muted) !important;
}
#gform_wrapper_26 #field_26_50 .gfield_description em,
#gform_wrapper_32 #field_32_70 .gfield_description em,
#gform_wrapper_113 #field_113_70 .gfield_description em {
display: block !important;
font-size: 0.74rem !important;
margin-top: 2px !important;
color: var(--bl-muted-2) !important;
}
#gform_wrapper_26 #field_26_50 .gfield_description span[data-gppa-live-merge-tag],
#gform_wrapper_32 #field_32_70 .gfield_description span[data-gppa-live-merge-tag],
#gform_wrapper_113 #field_113_70 .gfield_description span[data-gppa-live-merge-tag] {
font-weight: 800 !important;
color: var(--bl-ink) !important;
font-style: normal !important;
}
/* Consent fields (Legal Declarations) — bigger card with description above */
#gform_wrapper_26 .gfield--type-consent,
#gform_wrapper_32 .gfield--type-consent,
#gform_wrapper_113 .gfield--type-consent {
background: var(--bl-white) !important;
border: 1.5px solid var(--bl-border) !important;
border-radius: var(--bl-disb-radius-md) !important;
padding: 16px 18px !important;
margin: 0 !important;
transition: border-color var(--bl-tx), background var(--bl-tx) !important;
}
#gform_wrapper_26 .gfield--type-consent:has(input:checked),
#gform_wrapper_32 .gfield--type-consent:has(input:checked),
#gform_wrapper_113 .gfield--type-consent:has(input:checked) {
border-color: var(--bl-green-soft-2) !important;
background: linear-gradient(180deg, var(--bl-white) 0%, var(--bl-green-soft) 100%) !important;
}
#gform_wrapper_26 .gfield--type-consent legend,
#gform_wrapper_32 .gfield--type-consent legend,
#gform_wrapper_113 .gfield--type-consent legend {
font-family: var(--bl-font) !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
color: var(--bl-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
margin: 0 0 10px !important;
padding: 0 !important;
}
#gform_wrapper_26 .gfield_consent_description,
#gform_wrapper_32 .gfield_consent_description,
#gform_wrapper_113 .gfield_consent_description {
background: var(--bl-surface) !important;
border: 1px solid var(--bl-border-soft) !important;
border-radius: var(--bl-disb-radius-sm) !important;
padding: 12px 14px !important;
margin: 0 0 12px !important;
font-family: var(--bl-font) !important;
font-size: 0.88rem !important;
font-style: italic !important;
color: var(--bl-ink) !important;
line-height: 1.5 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
#gform_wrapper_26 .gfield_consent_description span[data-gppa-live-merge-tag],
#gform_wrapper_32 .gfield_consent_description span[data-gppa-live-merge-tag],
#gform_wrapper_113 .gfield_consent_description span[data-gppa-live-merge-tag] {
font-weight: 700 !important;
color: var(--bl-navy) !important;
font-style: normal !important;
}
/* Hidden checkbox label class on consent — the label should be visible */
#gform_wrapper_26 .gfield_consent_label.gform-field-label--type-inline,
#gform_wrapper_32 .gfield_consent_label.gform-field-label--type-inline,
#gform_wrapper_113 .gfield_consent_label.gform-field-label--type-inline {
font-weight: 600 !important;
}
/* ──────────────────────────────────────────────────────────
§9 Address / Name composite fields
────────────────────────────────────────────────────────── */
#gform_wrapper_26 .gfield--type-name,
#gform_wrapper_32 .gfield--type-name,
#gform_wrapper_113 .gfield--type-name,
#gform_wrapper_26 .gfield--type-address,
#gform_wrapper_32 .gfield--type-address,
#gform_wrapper_113 .gfield--type-address {
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
#gform_wrapper_26 .ginput_complex,
#gform_wrapper_32 .ginput_complex,
#gform_wrapper_113 .ginput_complex {
display: grid !important;
grid-template-columns: repeat(12, 1fr) !important;
gap: 12px !important;
margin: 0 !important;
}
/* Name field — 2 columns */
#gform_wrapper_26 .ginput_container_name,
#gform_wrapper_32 .ginput_container_name,
#gform_wrapper_113 .ginput_container_name {
grid-template-columns: repeat(2, 1fr) !important;
}
#gform_wrapper_26 .ginput_container_name > span,
#gform_wrapper_32 .ginput_container_name > span,
#gform_wrapper_113 .ginput_container_name > span {
grid-column: span 1 !important;
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 600px) {
#gform_wrapper_26 .ginput_container_name,
#gform_wrapper_32 .ginput_container_name,
#gform_wrapper_113 .ginput_container_name {
grid-template-columns: 1fr !important;
}
#gform_wrapper_26 .ginput_container_name > span,
#gform_wrapper_32 .ginput_container_name > span,
#gform_wrapper_113 .ginput_container_name > span {
grid-column: 1 !important;
}
}
/* Address field — multi-row layout */
#gform_wrapper_26 .ginput_container_address,
#gform_wrapper_32 .ginput_container_address,
#gform_wrapper_113 .ginput_container_address {
grid-template-columns: repeat(12, 1fr) !important;
}
#gform_wrapper_26 .ginput_container_address > span,
#gform_wrapper_32 .ginput_container_address > span,
#gform_wrapper_113 .ginput_container_address > span {
margin: 0 !important;
padding: 0 !important;
}
#gform_wrapper_26 .ginput_container_address .ginput_full,
#gform_wrapper_32 .ginput_container_address .ginput_full,
#gform_wrapper_113 .ginput_container_address .ginput_full {
grid-column: 1 / -1 !important;
}
#gform_wrapper_26 .ginput_container_address .ginput_left,
#gform_wrapper_32 .ginput_container_address .ginput_left,
#gform_wrapper_113 .ginput_container_address .ginput_left {
grid-column: span 6 !important;
}
#gform_wrapper_26 .ginput_container_address .ginput_right,
#gform_wrapper_32 .ginput_container_address .ginput_right,
#gform_wrapper_113 .ginput_container_address .ginput_right {
grid-column: span 6 !important;
}
@media (max-width: 600px) {
#gform_wrapper_26 .ginput_container_address .ginput_left,
#gform_wrapper_32 .ginput_container_address .ginput_left,
#gform_wrapper_113 .ginput_container_address .ginput_left,
#gform_wrapper_26 .ginput_container_address .ginput_right,
#gform_wrapper_32 .ginput_container_address .ginput_right,
#gform_wrapper_113 .ginput_container_address .ginput_right {
grid-column: 1 / -1 !important;
}
}
#gform_wrapper_26 .gf_clear,
#gform_wrapper_32 .gf_clear,
#gform_wrapper_113 .gf_clear {
display: none !important;
}
/* ──────────────────────────────────────────────────────────
§10 Recipient summary card
When an Approved Recipient is selected, GF auto-populates an
HTML field with their info. We promote it into a featured card.
────────────────────────────────────────────────────────── */
#gform_wrapper_26 #field_26_56,
#gform_wrapper_32 #field_32_67,
#gform_wrapper_113 #field_113_67 {
background: linear-gradient(135deg, var(--bl-white) 0%, var(--bl-green-soft) 100%) !important;
border: 1.5px solid var(--bl-green-soft-2) !important;
border-left: 4px solid var(--bl-green) !important;
border-radius: var(--bl-disb-radius-md) !important;
padding: 16px 20px !important;
font-family: var(--bl-font) !important;
font-size: 0.95rem !important;
color: var(--bl-ink) !important;
line-height: 1.6 !important;
position: relative !important;
box-shadow: var(--bl-disb-shadow-xs) !important;
}
#gform_wrapper_26 #field_26_56::before,
#gform_wrapper_32 #field_32_67::before,
#gform_wrapper_113 #field_113_67::before {
content: 'Recipient' !important;
display: block !important;
font-family: var(--bl-font) !important;
font-size: 0.7rem !important;
font-weight: 800 !important;
color: var(--bl-green-dark) !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
margin-bottom: 6px !important;
}
#gform_wrapper_26 #field_26_56 span[data-gppa-live-merge-tag]:first-child,
#gform_wrapper_32 #field_32_67 span[data-gppa-live-merge-tag]:first-child,
#gform_wrapper_113 #field_113_67 span[data-gppa-live-merge-tag]:first-child {
font-weight: 700 !important;
font-size: 1.05rem !important;
color: var(--bl-navy) !important;
}
/* ──────────────────────────────────────────────────────────
§11 "Please select an approved recipient" notice
────────────────────────────────────────────────────────── */
#gform_wrapper_26 #field_26_58 p,
#gform_wrapper_32 #field_32_66 p,
#gform_wrapper_113 #field_113_66 p {
display: flex !important;
align-items: center !important;
gap: 10px !important;
background: var(--bl-amber-bg) !important;
border: 1px solid rgba(212, 160, 23, 0.30) !important;
border-radius: var(--bl-disb-radius-md) !important;
padding: 12px 16px !important;
margin: 0 !important;
font-family: var(--bl-font) !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
color: var(--bl-ink) !important;
font-style: normal !important;
/* Override the inline style="color:red" */
/* The inline style wins specificity-wise unless we're more specific than
it, so we use an attribute selector for extra weight. */
}
#gform_wrapper_26 #field_26_58 p[style],
#gform_wrapper_32 #field_32_66 p[style],
#gform_wrapper_113 #field_113_66 p[style] {
color: var(--bl-ink) !important;
}
#gform_wrapper_26 #field_26_58 p::before,
#gform_wrapper_32 #field_32_66 p::before,
#gform_wrapper_113 #field_113_66 p::before {
content: '↑' !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 22px !important;
height: 22px !important;
background: var(--bl-amber) !important;
color: var(--bl-white) !important;
border-radius: 50% !important;
font-size: 0.85rem !important;
font-weight: 800 !important;
flex-shrink: 0 !important;
}
/* ──────────────────────────────────────────────────────────
§12 Type-narrative HTML blocks
"You are recommending a one-time grant be awarded to…"
────────────────────────────────────────────────────────── */
#gform_wrapper_32 #field_32_42,
#gform_wrapper_32 #field_32_43,
#gform_wrapper_32 #field_32_44,
#gform_wrapper_113 #field_113_42,
#gform_wrapper_113 #field_113_43,
#gform_wrapper_113 #field_113_44 {
background: var(--bl-surface) !important;
border-left: 3px solid var(--bl-accent-2) !important;
border-radius: 0 var(--bl-disb-radius-sm) var(--bl-disb-radius-sm) 0 !important;
padding: 12px 16px !important;
font-family: var(--bl-font) !important;
font-size: 0.92rem !important;
color: var(--bl-ink) !important;
line-height: 1.5 !important;
}
#gform_wrapper_32 #field_32_42 strong,
#gform_wrapper_32 #field_32_43 strong,
#gform_wrapper_32 #field_32_44 strong,
#gform_wrapper_113 #field_113_42 strong,
#gform_wrapper_113 #field_113_43 strong,
#gform_wrapper_113 #field_113_44 strong {
color: var(--bl-green-dark) !important;
font-weight: 800 !important;
}
#gform_wrapper_32 #field_32_42 span[data-gppa-live-merge-tag],
#gform_wrapper_32 #field_32_43 span[data-gppa-live-merge-tag],
#gform_wrapper_32 #field_32_44 span[data-gppa-live-merge-tag],
#gform_wrapper_113 #field_113_42 span[data-gppa-live-merge-tag],
#gform_wrapper_113 #field_113_43 span[data-gppa-live-merge-tag],
#gform_wrapper_113 #field_113_44 span[data-gppa-live-merge-tag] {
font-weight: 700 !important;
color: var(--bl-navy) !important;
}
/* ──────────────────────────────────────────────────────────
§13 Disbursement summary panel
The "Recipient Would Receive / Amount Deducted from Program"
readonly fields — promote into a financial summary card.
────────────────────────────────────────────────────────── */
/* "Recipient Would Receive" + "Amount Deducted from Program" — turn the
readonly inputs into stat-card style figures */
#gform_wrapper_26 #field_26_18,
#gform_wrapper_26 #field_26_20,
#gform_wrapper_32 #field_32_18,
#gform_wrapper_32 #field_32_20,
#gform_wrapper_113 #field_113_18,
#gform_wrapper_113 #field_113_20 {
background: var(--bl-white) !important;
border: 1.5px solid var(--bl-border) !important;
border-radius: var(--bl-disb-radius-md) !important;
padding: 14px 16px !important;
position: relative !important;
}
#gform_wrapper_26 #field_26_18,
#gform_wrapper_32 #field_32_18,
#gform_wrapper_113 #field_113_18 {
background: linear-gradient(135deg, var(--bl-white) 0%, var(--bl-green-soft) 100%) !important;
border-color: var(--bl-green-soft-2) !important;
}
#gform_wrapper_26 #field_26_18::before,
#gform_wrapper_32 #field_32_18::before,
#gform_wrapper_113 #field_113_18::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 3px !important;
background: linear-gradient(90deg, var(--bl-green), var(--bl-accent-2)) !important;
border-radius: var(--bl-disb-radius-md) var(--bl-disb-radius-md) 0 0 !important;
}
#gform_wrapper_26 #field_26_18 .gfield_label,
#gform_wrapper_26 #field_26_20 .gfield_label,
#gform_wrapper_32 #field_32_18 .gfield_label,
#gform_wrapper_32 #field_32_20 .gfield_label,
#gform_wrapper_113 #field_113_18 .gfield_label,
#gform_wrapper_113 #field_113_20 .gfield_label {
margin: 0 0 6px !important;
}
#gform_wrapper_26 #field_26_18 input,
#gform_wrapper_26 #field_26_20 input,
#gform_wrapper_32 #field_32_18 input,
#gform_wrapper_32 #field_32_20 input,
#gform_wrapper_113 #field_113_18 input,
#gform_wrapper_113 #field_113_20 input {
background: transparent !important;
border: none !important;
padding: 0 !important;
height: auto !important;
font-family: var(--bl-font) !important;
font-size: 1.5rem !important;
font-weight: 800 !important;
color: var(--bl-navy) !important;
letter-spacing: -0.01em !important;
cursor: default !important;
box-shadow: none !important;
}
#gform_wrapper_26 #field_26_18 input,
#gform_wrapper_32 #field_32_18 input,
#gform_wrapper_113 #field_113_18 input {
color: var(--bl-green) !important;
}
#gform_wrapper_26 #field_26_20 input,
#gform_wrapper_32 #field_32_20 input,
#gform_wrapper_113 #field_113_20 input {
color: var(--bl-red-soft) !important;
}
/* Disbursement Fee notice — adjacent to the cover-fee toggle */
#gform_wrapper_26 #field_26_50 .gfield_description,
#gform_wrapper_32 #field_32_70 .gfield_description,
#gform_wrapper_113 #field_113_70 .gfield_description {
display: block !important;
}
/* Amount field — make it visually the "primary" input */
#gform_wrapper_26 #field_26_8,
#gform_wrapper_32 #field_32_8,
#gform_wrapper_113 #field_113_8 {
background: var(--bl-white) !important;
border: 1.5px solid var(--bl-border) !important;
border-radius: var(--bl-disb-radius-md) !important;
padding: 14px 16px !important;
position: relative !important;
transition: border-color var(--bl-tx), box-shadow var(--bl-tx) !important;
}
#gform_wrapper_26 #field_26_8:focus-within,
#gform_wrapper_32 #field_32_8:focus-within,
#gform_wrapper_113 #field_113_8:focus-within {
border-color: var(--bl-green) !important;
box-shadow: var(--bl-disb-shadow-focus) !important;
}
#gform_wrapper_26 #field_26_8 .gfield_label,
#gform_wrapper_32 #field_32_8 .gfield_label,
#gform_wrapper_113 #field_113_8 .gfield_label {
margin-bottom: 4px !important;
}
#gform_wrapper_26 #field_26_8 input.medium,
#gform_wrapper_32 #field_32_8 input.medium,
#gform_wrapper_113 #field_113_8 input.medium {
width: 100% !important;
height: auto !important;
padding: 4px 0 !important;
background: transparent !important;
border: none !important;
border-bottom: 2px solid var(--bl-border-soft) !important;
border-radius: 0 !important;
font-family: var(--bl-font) !important;
font-size: 1.6rem !important;
font-weight: 800 !important;
color: var(--bl-navy) !important;
letter-spacing: -0.01em !important;
box-shadow: none !important;
transition: border-color var(--bl-tx) !important;
}
#gform_wrapper_26 #field_26_8 input.medium:focus,
#gform_wrapper_32 #field_32_8 input.medium:focus,
#gform_wrapper_113 #field_113_8 input.medium:focus {
outline: none !important;
border-bottom-color: var(--bl-green) !important;
box-shadow: none !important;
background: transparent !important;
}
#gform_wrapper_26 #field_26_8 input.medium::placeholder,
#gform_wrapper_32 #field_32_8 input.medium::placeholder,
#gform_wrapper_113 #field_113_8 input.medium::placeholder {
font-weight: 600 !important;
color: var(--bl-muted-2) !important;
}
#gform_wrapper_26 #field_26_8 .gfield_description,
#gform_wrapper_32 #field_32_8 .gfield_description,
#gform_wrapper_113 #field_113_8 .gfield_description {
margin-top: 6px !important;
}
/* Disbursement Fee inline display (on its own as plain text in some layouts) */
#gform_wrapper_26 #field_26_50 .gfield_description span[data-gppa-live-merge-tag="@{:51}"],
#gform_wrapper_32 #field_32_70 .gfield_description span[data-gppa-live-merge-tag="@{:71}"],
#gform_wrapper_113 #field_113_70 .gfield_description span[data-gppa-live-merge-tag="@{:71}"] {
font-size: 1rem !important;
}
/* ──────────────────────────────────────────────────────────
§14 Shekels Calculator panel
────────────────────────────────────────────────────────── */
/* The HR + heading + intro block (#field_*_26 / #field_*_27) and the
3 calculator fields (shekel input, converted dollars, "use" checkbox)
plus the closing HR (#field_*_30 / #field_*_32). When Shekels Calc is
set to Show, JS removes the data-bl-native-hidden flag and these
become visible. We give them a distinct panel treatment. */
#gform_wrapper_26 #field_26_26,
#gform_wrapper_32 #field_32_27,
#gform_wrapper_113 #field_113_27 {
background: linear-gradient(135deg, var(--bl-surface) 0%, var(--bl-white) 100%) !important;
border: 1.5px solid var(--bl-border) !important;
border-radius: var(--bl-disb-radius-md) var(--bl-disb-radius-md) 0 0 !important;
border-bottom: none !important;
padding: 16px 20px 14px !important;
margin: 0 !important;
position: relative !important;
}
#gform_wrapper_26 #field_26_26 hr,
#gform_wrapper_32 #field_32_27 hr,
#gform_wrapper_113 #field_113_27 hr {
display: none !important;
}
#gform_wrapper_26 #field_26_26 h3,
#gform_wrapper_32 #field_32_27 h3,
#gform_wrapper_113 #field_113_27 h3 {
font-family: var(--bl-font) !important;
font-size: 1rem !important;
font-weight: 800 !important;
color: var(--bl-navy) !important;
margin: 0 0 6px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
letter-spacing: -0.005em !important;
}
#gform_wrapper_26 #field_26_26 h3::before,
#gform_wrapper_32 #field_32_27 h3::before,
#gform_wrapper_113 #field_113_27 h3::before {
content: '₪' !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 26px !important;
height: 26px !important;
background: linear-gradient(135deg, var(--bl-green) 0%, var(--bl-accent-2) 100%) !important;
color: var(--bl-white) !important;
border-radius: 7px !important;
font-size: 0.95rem !important;
font-weight: 800 !important;
flex-shrink: 0 !important;
}
#gform_wrapper_26 #field_26_26 p,
#gform_wrapper_32 #field_32_27 p,
#gform_wrapper_113 #field_113_27 p {
font-family: var(--bl-font) !important;
font-size: 0.85rem !important;
color: var(--bl-muted) !important;
margin: 0 !important;
line-height: 1.5 !important;
}
/* The 3 calculator fields — shekel input, converted dollars, and checkbox */
#gform_wrapper_26 #field_26_27,
#gform_wrapper_26 #field_26_28,
#gform_wrapper_26 #field_26_29,
#gform_wrapper_32 #field_32_28,
#gform_wrapper_32 #field_32_29,
#gform_wrapper_32 #field_32_30,
#gform_wrapper_113 #field_113_28,
#gform_wrapper_113 #field_113_29,
#gform_wrapper_113 #field_113_30 {
background: var(--bl-surface) !important;
border-top: none !important;
border-bottom: none !important;
border-left: 1.5px solid var(--bl-border) !important;
border-right: 1.5px solid var(--bl-border) !important;
padding: 0 20px 14px !important;
margin: 0 !important;
}
/* Converted dollars (readonly) — show as a styled output card */
#gform_wrapper_26 #field_26_28,
#gform_wrapper_32 #field_32_29,
#gform_wrapper_113 #field_113_29 {
background: var(--bl-surface) !important;
}
#gform_wrapper_26 #field_26_28 input,
#gform_wrapper_32 #field_32_29 input,
#gform_wrapper_113 #field_113_29 input {
background: var(--bl-white) !important;
font-weight: 800 !important;
color: var(--bl-green-dark) !important;
font-size: 1.1rem !important;
}
/* Closing HR field */
#gform_wrapper_26 #field_26_30,
#gform_wrapper_32 #field_32_32,
#gform_wrapper_113 #field_113_32 {
background: var(--bl-surface) !important;
border: 1.5px solid var(--bl-border) !important;
border-top: none !important;
border-radius: 0 0 var(--bl-disb-radius-md) var(--bl-disb-radius-md) !important;
padding: 0 20px 12px !important;
margin: 0 !important;
}
#gform_wrapper_26 #field_26_30 hr,
#gform_wrapper_32 #field_32_32 hr,
#gform_wrapper_113 #field_113_32 hr {
display: none !important;
}
/* ──────────────────────────────────────────────────────────
§15 Bank/Cash payment-method narrative + bank fields
These fields are conditionally hidden (CSF form) and only show
when a specific payment method is chosen. We keep them clean.
────────────────────────────────────────────────────────── */
#gform_wrapper_32 #field_32_49,
#gform_wrapper_32 #field_32_50,
#gform_wrapper_32 #field_32_17,
#gform_wrapper_113 #field_113_49,
#gform_wrapper_113 #field_113_50,
#gform_wrapper_113 #field_113_17 {
background: var(--bl-surface) !important;
border-left: 3px solid var(--bl-amber) !important;
border-radius: 0 var(--bl-disb-radius-sm) var(--bl-disb-radius-sm) 0 !important;
padding: 10px 14px !important;
font-family: var(--bl-font) !important;
font-size: 0.88rem !important;
color: var(--bl-ink) !important;
line-height: 1.5 !important;
}
/* ──────────────────────────────────────────────────────────
§16 Submit button (sticky on desktop)
────────────────────────────────────────────────────────── */
#gform_wrapper_26 .gform_footer,
#gform_wrapper_32 .gform_footer,
#gform_wrapper_113 .gform_footer {
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin: 28px 0 0 !important;
padding: 20px 0 0 !important;
border-top: 1px solid var(--bl-border) !important;
}
#gform_wrapper_26 .gform_button,
#gform_wrapper_32 .gform_button,
#gform_wrapper_113 .gform_button,
#gform_wrapper_26 input[type="submit"].gform_button,
#gform_wrapper_32 input[type="submit"].gform_button,
#gform_wrapper_113 input[type="submit"].gform_button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
min-width: 280px !important;
height: 52px !important;
padding: 0 32px !important;
background: linear-gradient(135deg, var(--bl-green) 0%, var(--bl-green-dark) 100%) !important;
color: var(--bl-white) !important;
border: none !important;
border-radius: 999px !important;
font-family: var(--bl-font) !important;
font-size: 1rem !important;
font-weight: 800 !important;
letter-spacing: 0.01em !important;
cursor: pointer !important;
transition: transform var(--bl-tx-fast), box-shadow var(--bl-tx), background var(--bl-tx) !important;
box-shadow: 0 2px 6px rgba(47, 126, 75, 0.20), 0 8px 22px rgba(47, 126, 75, 0.18) !important;
text-shadow: none !important;
background-image: linear-gradient(135deg, var(--bl-green) 0%, var(--bl-green-dark) 100%) !important;
margin: 0 !important;
line-height: 1.2 !important;
position: relative !important;
overflow: hidden !important;
}
#gform_wrapper_26 .gform_button:hover,
#gform_wrapper_32 .gform_button:hover,
#gform_wrapper_113 .gform_button:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 10px rgba(47, 126, 75, 0.25), 0 14px 32px rgba(47, 126, 75, 0.22) !important;
}
#gform_wrapper_26 .gform_button:active,
#gform_wrapper_32 .gform_button:active,
#gform_wrapper_113 .gform_button:active {
transform: translateY(0) !important;
box-shadow: 0 1px 3px rgba(47, 126, 75, 0.20) !important;
}
#gform_wrapper_26 .gform_button:focus-visible,
#gform_wrapper_32 .gform_button:focus-visible,
#gform_wrapper_113 .gform_button:focus-visible {
outline: none !important;
box-shadow: 0 0 0 3px var(--bl-white), 0 0 0 5px var(--bl-green), 0 8px 22px rgba(47, 126, 75, 0.18) !important;
}
/* The button uses GForm conditional logic to show/hide. When showing,
the inline style="display: none" gets removed by GF. */
/* ──────────────────────────────────────────────────────────
§17 Empty-field gentle pulse
Calmer + on-brand version of what you had — applied only to
visible required-and-empty inputs, no auto-pulse for selects
that have a default selection.
────────────────────────────────────────────────────────── */
@keyframes blDisbEmptyPulse {
0% { box-shadow: 0 0 0 0 rgba(47, 126, 75, 0); }
50% { box-shadow: 0 0 0 4px rgba(47, 126, 75, 0.12); }
100% { box-shadow: 0 0 0 0 rgba(47, 126, 75, 0); }
}
/* Only pulse required text-like inputs that are empty AND focused-ancestor
is the Approved Recipient picker (key field). Disable global pulse by
default — the new look has plenty of visual hierarchy without it. */
/* The Approved Recipient field is the gateway. If empty, the whole
downstream UI is disabled, so we draw attention to it specifically. */
#gform_wrapper_26 #field_26_23 .chosen-container-single .chosen-single,
#gform_wrapper_32 #field_32_23 .chosen-container-single .chosen-single,
#gform_wrapper_113 #field_113_23 .chosen-container-single .chosen-single {
animation: blDisbEmptyPulse 2.6s infinite ease-in-out !important;
}
/* Stop pulsing once a real selection has been made — Chosen sets
.chosen-default class when nothing is picked. Once a value is set,
the class is removed. */
#gform_wrapper_26 #field_26_23 .chosen-container-single:not(.chosen-disabled):not(:has(.chosen-default)) .chosen-single,
#gform_wrapper_32 #field_32_23 .chosen-container-single:not(.chosen-disabled):not(:has(.chosen-default)) .chosen-single,
#gform_wrapper_113 #field_113_23 .chosen-container-single:not(.chosen-disabled):not(:has(.chosen-default)) .chosen-single {
animation: none !important;
}
/* Disabled "no results" Chosen state — slightly muted look */
#gform_wrapper_26 .chosen-container-single.chosen-disabled,
#gform_wrapper_32 .chosen-container-single.chosen-disabled,
#gform_wrapper_113 .chosen-container-single.chosen-disabled {
cursor: not-allowed !important;
opacity: 1 !important;
}
#gform_wrapper_26 .chosen-container-single.chosen-disabled .chosen-single,
#gform_wrapper_32 .chosen-container-single.chosen-disabled .chosen-single,
#gform_wrapper_113 .chosen-container-single.chosen-disabled .chosen-single {
background: var(--bl-surface-2) !important;
cursor: not-allowed !important;
animation: none !important;
}
/* ──────────────────────────────────────────────────────────
§18 Date picker
────────────────────────────────────────────────────────── */
#gform_wrapper_26 .ginput_container_date input,
#gform_wrapper_32 .ginput_container_date input,
#gform_wrapper_113 .ginput_container_date input {
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
padding-right: 40px !important;
}
/* jQuery UI datepicker that renders when a date input is focused */
.ui-datepicker {
font-family: var(--bl-font) !important;
background: var(--bl-white) !important;
border: 1.5px solid var(--bl-green) !important;
border-radius: var(--bl-disb-radius-md) !important;
box-shadow: 0 8px 24px rgba(11,42,74,0.12) !important;
padding: 12px !important;
}
/* ──────────────────────────────────────────────────────────
§19 intl-tel-input phone field
────────────────────────────────────────────────────────── */
#gform_wrapper_26 .iti,
#gform_wrapper_32 .iti,
#gform_wrapper_113 .iti {
width: 100% !important;
display: block !important;
}
#gform_wrapper_26 .iti__tel-input,
#gform_wrapper_32 .iti__tel-input,
#gform_wrapper_113 .iti__tel-input {
/* Already styled by the generic input rules; just ensure the country
button gets respected for left padding. */
}
#gform_wrapper_26 .iti__selected-country,
#gform_wrapper_32 .iti__selected-country,
#gform_wrapper_113 .iti__selected-country {
background: var(--bl-surface) !important;
border: none !important;
border-right: 1.5px solid var(--bl-border) !important;
border-radius: var(--bl-disb-radius-sm) 0 0 var(--bl-disb-radius-sm) !important;
padding: 0 10px !important;
height: 100% !important;
}
#gform_wrapper_26 .iti__selected-country:hover,
#gform_wrapper_32 .iti__selected-country:hover,
#gform_wrapper_113 .iti__selected-country:hover {
background: var(--bl-green-soft) !important;
}
/* ──────────────────────────────────────────────────────────
§20 Validation errors
────────────────────────────────────────────────────────── */
#gform_wrapper_26.gform_validation_error,
#gform_wrapper_32.gform_validation_error,
#gform_wrapper_113.gform_validation_error {
/* No global treatment — let the per-field errors show */
}
#gform_wrapper_26 .gfield_validation_message,
#gform_wrapper_32 .gfield_validation_message,
#gform_wrapper_113 .gfield_validation_message,
#gform_wrapper_26 .validation_message,
#gform_wrapper_32 .validation_message,
#gform_wrapper_113 .validation_message {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
background: var(--bl-red-bg) !important;
border: 1px solid rgba(192, 57, 43, 0.22) !important;
border-radius: var(--bl-disb-radius-sm) !important;
padding: 8px 12px !important;
margin: 8px 0 0 !important;
font-family: var(--bl-font) !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
color: var(--bl-red-soft) !important;
line-height: 1.4 !important;
}
#gform_wrapper_26 .gfield_validation_message::before,
#gform_wrapper_32 .gfield_validation_message::before,
#gform_wrapper_113 .gfield_validation_message::before,
#gform_wrapper_26 .validation_message::before,
#gform_wrapper_32 .validation_message::before,
#gform_wrapper_113 .validation_message::before {
content: '!' !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 16px !important;
height: 16px !important;
background: var(--bl-red-soft) !important;
color: var(--bl-white) !important;
border-radius: 50% !important;
font-weight: 800 !important;
font-size: 0.75rem !important;
flex-shrink: 0 !important;
margin-top: 1px !important;
}
#gform_wrapper_26 .gfield_error input,
#gform_wrapper_26 .gfield_error select,
#gform_wrapper_26 .gfield_error textarea,
#gform_wrapper_32 .gfield_error input,
#gform_wrapper_32 .gfield_error select,
#gform_wrapper_32 .gfield_error textarea,
#gform_wrapper_113 .gfield_error input,
#gform_wrapper_113 .gfield_error select,
#gform_wrapper_113 .gfield_error textarea {
border-color: var(--bl-red-soft) !important;
background: var(--bl-red-bg) !important;
}
/* Top-of-form validation summary */
#gform_wrapper_26 .gform_validation_errors,
#gform_wrapper_32 .gform_validation_errors,
#gform_wrapper_113 .gform_validation_errors {
background: var(--bl-red-bg) !important;
border: 1px solid rgba(192, 57, 43, 0.22) !important;
border-radius: var(--bl-disb-radius-md) !important;
padding: 14px 18px !important;
margin: 0 0 18px !important;
font-family: var(--bl-font) !important;
font-size: 0.92rem !important;
color: var(--bl-red-soft) !important;
}
/* ──────────────────────────────────────────────────────────
§21 JS-coordinated states
The companion JS file tags the form wrapper with state classes
so we can do things CSS-alone can't quite reach.
────────────────────────────────────────────────────────── */
/* When no recipient is selected, soften the "type narrative" blocks
(which would otherwise read "You are recommending a one-time grant
be awarded to , who is eligible…" with an empty name). */
#gform_wrapper_32.bl-recipient-empty #field_32_42,
#gform_wrapper_32.bl-recipient-empty #field_32_43,
#gform_wrapper_32.bl-recipient-empty #field_32_44,
#gform_wrapper_113.bl-recipient-empty #field_113_42,
#gform_wrapper_113.bl-recipient-empty #field_113_43,
#gform_wrapper_113.bl-recipient-empty #field_113_44 {
opacity: 0.55 !important;
font-style: italic !important;
}
/* When a recipient is set, soften the warning notice */
#gform_wrapper_26.bl-recipient-set #field_26_58,
#gform_wrapper_32.bl-recipient-set #field_32_66,
#gform_wrapper_113.bl-recipient-set #field_113_66 {
display: none !important;
}
/* Shekels calculator panel — animate on show/hide.
Default state: panel is hidden via inline display:none from GF.
When .bl-shekels-on is set, GF clears the inline style on its conditional
logic fields. We can't override display:none from GF, but once it's
removed, our padding/margin/border kick in for a clean reveal. */
#gform_wrapper_26.bl-shekels-on #field_26_26,
#gform_wrapper_26.bl-shekels-on #field_26_27,
#gform_wrapper_26.bl-shekels-on #field_26_28,
#gform_wrapper_26.bl-shekels-on #field_26_29,
#gform_wrapper_26.bl-shekels-on #field_26_30,
#gform_wrapper_32.bl-shekels-on #field_32_27,
#gform_wrapper_32.bl-shekels-on #field_32_28,
#gform_wrapper_32.bl-shekels-on #field_32_29,
#gform_wrapper_32.bl-shekels-on #field_32_30,
#gform_wrapper_32.bl-shekels-on #field_32_32,
#gform_wrapper_113.bl-shekels-on #field_113_27,
#gform_wrapper_113.bl-shekels-on #field_113_28,
#gform_wrapper_113.bl-shekels-on #field_113_29,
#gform_wrapper_113.bl-shekels-on #field_113_30,
#gform_wrapper_113.bl-shekels-on #field_113_32 {
animation: blDisbFadeIn 0.3s ease-out !important;
}
@keyframes blDisbFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* The amount field gets a subtle accent once a value is entered */
#gform_wrapper_26.bl-amount-set #field_26_8,
#gform_wrapper_32.bl-amount-set #field_32_8,
#gform_wrapper_113.bl-amount-set #field_113_8 {
border-color: var(--bl-green-soft-2) !important;
background: linear-gradient(135deg, var(--bl-white) 0%, var(--bl-green-soft) 100%) !important;
}
/* Until the form has been initialized by JS, hide visual artifacts of
inline styles we'll be removing momentarily. Avoid FOUC on inline
color:red and groove HRs. */
#gform_wrapper_26:not(.bl-disb-ready) hr[style*="groove"],
#gform_wrapper_32:not(.bl-disb-ready) hr[style*="groove"],
#gform_wrapper_113:not(.bl-disb-ready) hr[style*="groove"] {
visibility: hidden !important;
}
/* ──────────────────────────────────────────────────────────
§22 Print
────────────────────────────────────────────────────────── */
@media print {
#gform_wrapper_26 .gform_footer,
#gform_wrapper_32 .gform_footer,
#gform_wrapper_113 .gform_footer {
display: none !important;
}
#gform_wrapper_26 .gfield,
#gform_wrapper_32 .gfield,
#gform_wrapper_113 .gfield {
break-inside: avoid !important;
}
}
/* ──────────────────────────────────────────────────────────
EOF
────────────────────────────────────────────────────────── */