/* Font loading fallback for CSP - Load before other styles */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: local('Inter'), local('Inter-Regular'), system-ui, -apple-system, sans-serif; } /** * Gravity Forms Professional Styling for Hope Mission Donations * Version: 1.2.0 * * This CSS targets Gravity Forms fields and styles them professionally * with iOS-style switches, gradient buttons, and dynamic accent colors. */ /* ======================================== CSS VARIABLES & WRAPPER ======================================== */ .hm-donation-form-wrapper { --hm-accent-color: #F36F28; --hm-accent-hover: #d95e1f; --hm-accent-light: rgba(243, 111, 40, 0.1); --hm-text-dark: #2c3e50; --hm-text-light: #7f8c8d; --hm-border-color: #e0e0e0; --hm-bg-light: #f8f9fa; --hm-success-color: #27ae60; --hm-error-color: #e74c3c; --hm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --hm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --hm-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16); --hm-radius-sm: 6px; --hm-radius-md: 10px; --hm-radius-lg: 16px; --hm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); max-width: 1200px; margin: 0 auto; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; overflow-x: hidden; box-sizing: border-box; } .hm-donation-form-container { background: white; box-sizing: border-box; padding: 50px; border-radius: 0 0 var(--hm-radius-lg) var(--hm-radius-lg); box-shadow: var(--hm-shadow-lg); margin-top: 0; border-top: 4px solid var(--hm-accent-color); } /* ======================================== FORM 3 SPECIFIC - COMPACT SPACING ======================================== */ /* Reduce vertical spacing for form 3 to fit on one page */ #gform_wrapper_3 .gfield, #gform_wrapper_3 .gform_fields .gfield { margin-bottom: 15px !important; } #gform_wrapper_3 .gfield_label { margin-bottom: 8px !important; } #gform_wrapper_3 .gform_fields { grid-row-gap: 15px !important; row-gap: 15px !important; } #gform_wrapper_3 .gform_footer { margin-top: 20px !important; padding-top: 15px !important; } /* Reduce padding in field containers */ #gform_wrapper_3 .ginput_container { margin-top: 0 !important; } /* Compact the impact calculator spacing */ #gform_wrapper_3 .hm-impact-calculator { margin-top: 8px !important; margin-bottom: 8px !important; padding: 10px 15px !important; } /* ======================================== GRAVITY FORMS GENERAL STYLING ======================================== */ .hm-donation-form-wrapper .gform_wrapper { margin: 0 !important; max-width: 100% !important; } .hm-donation-form-wrapper .gform_body { width: 100% !important; } .hm-donation-form-wrapper .gform_fields { list-style: none !important; padding: 0 !important; margin: 0 !important; row-gap: 10px !important; } .hm-donation-form-wrapper .gfield { margin-bottom: 10px !important; padding: 0 !important; list-style: none !important; } /* Force hidden fields to stay hidden (fix for conditional logic) */ .hm-donation-form-wrapper .gfield[style*="display: none"], .hm-donation-form-wrapper .gfield[style*="display:none"] { display: none !important; } .hm-donation-form-wrapper .gfield_label { font-weight: 600 !important; color: var(--hm-text-dark) !important; font-size: 14px !important; margin-bottom: 8px !important; display: block !important; } .hm-donation-form-wrapper .gfield_required { color: var(--hm-error-color) !important; margin-left: 3px !important; } /* ======================================== TEXT INPUTS & TEXTAREAS ======================================== */ .hm-donation-form-wrapper input[type="text"], .hm-donation-form-wrapper input[type="email"], .hm-donation-form-wrapper input[type="tel"], .hm-donation-form-wrapper input[type="number"], .hm-donation-form-wrapper input[type="url"], .hm-donation-form-wrapper select, .hm-donation-form-wrapper textarea { width: 100% !important; padding: 14px 18px !important; font-size: 15px !important; border: 2px solid var(--hm-border-color) !important; border-radius: var(--hm-radius-md) !important; transition: var(--hm-transition) !important; font-family: inherit !important; background: white !important; color: var(--hm-text-dark) !important; } /* Apply padding only to inputs and textareas, not select elements */ .hm-donation-form-wrapper input[type="text"], .hm-donation-form-wrapper input[type="email"], .hm-donation-form-wrapper input[type="tel"], .hm-donation-form-wrapper input[type="number"], .hm-donation-form-wrapper input[type="url"], .hm-donation-form-wrapper select { height: 60px !important; padding: 0 18px !important; line-height: 60px !important; } .hm-donation-form-wrapper textarea { padding: 14px 18px !important; } /* Ensure select options are visible */ .hm-donation-form-wrapper select option { color: #333 !important; background: white !important; } .hm-donation-form-wrapper input[type="text"]:focus, .hm-donation-form-wrapper input[type="email"]:focus, .hm-donation-form-wrapper input[type="tel"]:focus, .hm-donation-form-wrapper input[type="number"]:focus, .hm-donation-form-wrapper input[type="url"]:focus, .hm-donation-form-wrapper select:focus, .hm-donation-form-wrapper textarea:focus { outline: none !important; border-color: var(--hm-accent-color) !important; box-shadow: 0 0 0 3px var(--hm-accent-light) !important; } /* ======================================== FIELD 6 & 15: GIVE ONCE / MONTHLY TOGGLE iOS-Style Switch ======================================== */ /* Make the container hold the radio buttons side by side */ /* Doubled selectors with .gform-theme--framework to beat GF Orbital's flex-direction: column */ .hm-donation-form-wrapper #field_2_6 .gfield_radio, .hm-donation-form-wrapper #field_3_6 .gfield_radio, .hm-donation-form-wrapper #field_9_6 .gfield_radio, .hm-donation-form-wrapper #field_16_6 .gfield_radio, .hm-donation-form-wrapper #field_17_6 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_2_6 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_3_6 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_9_6 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_16_6 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_17_6 .gfield_radio { display: flex !important; flex-direction: row !important; position: relative !important; background: #e8e8e8 !important; border-radius: 50px !important; padding: 5px !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1) !important; width: 100% !important; max-width: 400px !important; margin: 0 auto !important; list-style: none !important; } .hm-donation-form-wrapper #field_2_6 .gchoice, .hm-donation-form-wrapper #field_3_6 .gchoice, .hm-donation-form-wrapper #field_9_6 .gchoice, .hm-donation-form-wrapper #field_16_6 .gchoice, .hm-donation-form-wrapper #field_17_6 .gchoice { flex: 1 !important; margin: 0 !important; position: relative !important; touch-action: manipulation !important; } .hm-donation-form-wrapper #field_2_6 input[type="radio"], .hm-donation-form-wrapper #field_3_6 input[type="radio"], .hm-donation-form-wrapper #field_9_6 input[type="radio"], .hm-donation-form-wrapper #field_16_6 input[type="radio"], .hm-donation-form-wrapper #field_17_6 input[type="radio"] { 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; white-space: nowrap !important; border: 0 !important; } .hm-donation-form-wrapper #field_2_6 label, .hm-donation-form-wrapper #field_3_6 label, .hm-donation-form-wrapper #field_9_6 label, .hm-donation-form-wrapper #field_16_6 label, .hm-donation-form-wrapper #field_17_6 label { display: flex !important; padding: 14px 24px !important; text-align: center !important; font-weight: 600 !important; font-size: 15px !important; line-height: 1.2 !important; cursor: pointer !important; /* Delay color change so slider moves first, preventing the "flash" */ transition: color 0.15s ease 0.1s !important; position: relative !important; z-index: 2 !important; color: var(--hm-text-light) !important; border-radius: 50px !important; width: 100% !important; align-items: center !important; justify-content: center !important; /* Generous touch target for mobile */ min-height: 48px !important; -webkit-tap-highlight-color: transparent !important; } .hm-donation-form-wrapper #field_2_6 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_3_6 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_9_6 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_16_6 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_17_6 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_2_6 .gchoice:has(input[type="radio"]:checked) label, .hm-donation-form-wrapper #field_3_6 .gchoice:has(input[type="radio"]:checked) label, .hm-donation-form-wrapper #field_9_6 .gchoice:has(input[type="radio"]:checked) label, .hm-donation-form-wrapper #field_16_6 .gchoice:has(input[type="radio"]:checked) label, .hm-donation-form-wrapper #field_17_6 .gchoice:has(input[type="radio"]:checked) label { color: white !important; } /* Sliding background for toggle */ .hm-donation-form-wrapper #field_2_6 .gfield_radio::before, .hm-donation-form-wrapper #field_3_6 .gfield_radio::before, .hm-donation-form-wrapper #field_9_6 .gfield_radio::before, .hm-donation-form-wrapper #field_16_6 .gfield_radio::before, .hm-donation-form-wrapper #field_17_6 .gfield_radio::before { content: '' !important; position: absolute !important; top: 5px !important; left: 5px !important; width: calc(50% - 5px) !important; height: calc(100% - 10px) !important; background: linear-gradient(135deg, var(--hm-accent-color), var(--hm-accent-hover)) !important; border-radius: 50px !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; z-index: 1 !important; } /* Move slider when second option is checked */ .hm-donation-form-wrapper #field_2_6 .gfield_radio:has(.gchoice:last-child input:checked)::before, .hm-donation-form-wrapper #field_3_6 .gfield_radio:has(.gchoice:last-child input:checked)::before, .hm-donation-form-wrapper #field_9_6 .gfield_radio:has(.gchoice:last-child input:checked)::before, .hm-donation-form-wrapper #field_16_6 .gfield_radio:has(.gchoice:last-child input:checked)::before, .hm-donation-form-wrapper #field_17_6 .gfield_radio:has(.gchoice:last-child input:checked)::before { transform: translateX(100%) !important; } /* ======================================== FIELD 12 SPECIFIC OVERRIDES (LONGER TEXT) ======================================== */ .hm-donation-form-wrapper #field_2_12 .gfield_radio, .hm-donation-form-wrapper #field_3_12 .gfield_radio, .hm-donation-form-wrapper #field_15_12 .gfield_radio, .hm-donation-form-wrapper #field_16_12 .gfield_radio, .hm-donation-form-wrapper #field_17_12 .gfield_radio { max-width: 550px !important; /* Wider container for longer text */ } /* Alternative selector for when radio is checked (Gravity Forms puts input after label) */ .hm-donation-form-wrapper #field_2_6:has(.gchoice:last-child input[type="radio"]:checked) .gfield_radio::before, .hm-donation-form-wrapper #field_3_6:has(.gchoice:last-child input[type="radio"]:checked) .gfield_radio::before, .hm-donation-form-wrapper #field_9_6:has(.gchoice:last-child input[type="radio"]:checked) .gfield_radio::before, .hm-donation-form-wrapper #field_16_6:has(.gchoice:last-child input[type="radio"]:checked) .gfield_radio::before, .hm-donation-form-wrapper #field_17_6:has(.gchoice:last-child input[type="radio"]:checked) .gfield_radio::before { transform: translateX(calc(100%)) !important; } /* ======================================== ACCESSIBILITY: Focus outlines for keyboard navigation ======================================== */ /* Hidden radio/checkbox focus — show outline on the visible label */ .hm-donation-form-wrapper input[type="radio"]:focus-visible + label, .hm-donation-form-wrapper input[type="checkbox"]:focus-visible + label, .hm-donation-form-wrapper .gchoice:focus-within label { outline: 3px solid var(--hm-accent-color, #F36F28) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px var(--hm-accent-light) !important; } /* Text inputs, selects, textareas */ .hm-donation-form-wrapper input:focus-visible, .hm-donation-form-wrapper select:focus-visible, .hm-donation-form-wrapper textarea:focus-visible { outline: 2px solid var(--hm-accent-color, #F36F28) !important; outline-offset: 1px !important; } /* Form buttons (Submit, Next, Previous) */ .hm-donation-form-wrapper .gform_button:focus-visible, .hm-donation-form-wrapper .gform_next_button:focus-visible, .hm-donation-form-wrapper .gform_previous_button:focus-visible, .hm-donation-form-wrapper input[type="submit"]:focus-visible { outline: 3px solid var(--hm-accent-color, #F36F28) !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px var(--hm-accent-light) !important; } /* ======================================== FIELD 3 & 8: PRESET AMOUNT BUTTONS Professional Gradient Buttons ======================================== */ /* Override GF 2.5+ Orbital theme flex-direction: column that causes Safari stacking */ .hm-donation-form-wrapper #field_2_3 .gfield_radio, .hm-donation-form-wrapper #field_3_3 .gfield_radio, .hm-donation-form-wrapper #field_9_3 .gfield_radio, .hm-donation-form-wrapper #field_15_3 .gfield_radio, .hm-donation-form-wrapper #field_16_3 .gfield_radio, .hm-donation-form-wrapper #field_17_3 .gfield_radio, .hm-donation-form-wrapper #field_2_8 .gfield_radio, .hm-donation-form-wrapper #field_3_8 .gfield_radio, .hm-donation-form-wrapper #field_9_8 .gfield_radio, .hm-donation-form-wrapper #field_15_8 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_2_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_3_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_9_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_15_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_16_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_17_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_2_8 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_3_8 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_9_8 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_15_8 .gfield_radio { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 15px !important; margin-bottom: 25px !important; flex-direction: unset !important; flex-wrap: unset !important; } .hm-donation-form-wrapper #field_2_3 .gchoice, .hm-donation-form-wrapper #field_3_3 .gchoice, .hm-donation-form-wrapper #field_9_3 .gchoice, .hm-donation-form-wrapper #field_15_3 .gchoice, .hm-donation-form-wrapper #field_16_3 .gchoice, .hm-donation-form-wrapper #field_17_3 .gchoice, .hm-donation-form-wrapper #field_2_8 .gchoice, .hm-donation-form-wrapper #field_3_8 .gchoice, .hm-donation-form-wrapper #field_9_8 .gchoice, .hm-donation-form-wrapper #field_15_8 .gchoice { margin: 0 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } /* Visually hide radio buttons but keep them keyboard-accessible. Using clip-rect instead of opacity:0 so screen readers and Tab still reach them. */ .hm-donation-form-wrapper #field_2_3 input[type="radio"], .hm-donation-form-wrapper #field_3_3 input[type="radio"], .hm-donation-form-wrapper #field_9_3 input[type="radio"], .hm-donation-form-wrapper #field_15_3 input[type="radio"], .hm-donation-form-wrapper #field_16_3 input[type="radio"], .hm-donation-form-wrapper #field_17_3 input[type="radio"], .hm-donation-form-wrapper #field_2_8 input[type="radio"], .hm-donation-form-wrapper #field_3_8 input[type="radio"], .hm-donation-form-wrapper #field_9_8 input[type="radio"], .hm-donation-form-wrapper #field_15_8 input[type="radio"] { 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; white-space: nowrap !important; border: 0 !important; } .hm-donation-form-wrapper #field_2_3 label, .hm-donation-form-wrapper #field_3_3 label, .hm-donation-form-wrapper #field_9_3 label, .hm-donation-form-wrapper #field_15_3 label, .hm-donation-form-wrapper #field_16_3 label, .hm-donation-form-wrapper #field_17_3 label, .hm-donation-form-wrapper #field_2_8 label, .hm-donation-form-wrapper #field_3_8 label, .hm-donation-form-wrapper #field_9_8 label, .hm-donation-form-wrapper #field_15_8 label { display: block !important; padding: 18px 20px !important; font-size: 22px !important; font-weight: 700 !important; color: var(--hm-text-dark) !important; background: white !important; border: 3px solid var(--hm-border-color) !important; border-radius: var(--hm-radius-md) !important; cursor: pointer !important; transition: var(--hm-transition) !important; box-shadow: var(--hm-shadow-sm) !important; text-align: center !important; margin: 0 !important; } .hm-donation-form-wrapper #field_2_3 label:hover, .hm-donation-form-wrapper #field_3_3 label:hover, .hm-donation-form-wrapper #field_9_3 label:hover, .hm-donation-form-wrapper #field_15_3 label:hover, .hm-donation-form-wrapper #field_16_3 label:hover, .hm-donation-form-wrapper #field_17_3 label:hover, .hm-donation-form-wrapper #field_2_8 label:hover, .hm-donation-form-wrapper #field_3_8 label:hover, .hm-donation-form-wrapper #field_9_8 label:hover, .hm-donation-form-wrapper #field_15_8 label:hover { transform: translateY(-3px) !important; box-shadow: var(--hm-shadow-md) !important; border-color: var(--hm-accent-color) !important; } .hm-donation-form-wrapper #field_2_3 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_3_3 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_9_3 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_15_3 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_16_3 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_17_3 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_2_8 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_3_8 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_9_8 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_15_8 input[type="radio"]:checked+label, .hm-donation-form-wrapper #field_2_3 .gchoice:has(input[type="radio"]:checked) label, .hm-donation-form-wrapper #field_3_3 .gchoice:has(input[type="radio"]:checked) label, .hm-donation-form-wrapper #field_9_3 .gchoice:has(input[type="radio"]:checked) label, .hm-donation-form-wrapper #field_15_3 .gchoice:has(input[type="radio"]:checked) label, .hm-donation-form-wrapper #field_16_3 .gchoice:has(input[type="radio"]:checked) label, .hm-donation-form-wrapper #field_17_3 .gchoice:has(input[type="radio"]:checked) label, .hm-donation-form-wrapper #field_2_8 .gchoice:has(input[type="radio"]:checked) label, .hm-donation-form-wrapper #field_3_8 .gchoice:has(input[type="radio"]:checked) label, .hm-donation-form-wrapper #field_9_8 .gchoice:has(input[type="radio"]:checked) label, .hm-donation-form-wrapper #field_15_8 .gchoice:has(input[type="radio"]:checked) label { background: linear-gradient(135deg, var(--hm-accent-color), var(--hm-accent-hover)) !important; border-color: var(--hm-accent-color) !important; color: white !important; box-shadow: var(--hm-shadow-md) !important; } /* Separator handled by JS */ /* Reset Field 9 Margin */ .hm-donation-form-wrapper #field_2_9, .hm-donation-form-wrapper #field_3_9, .hm-donation-form-wrapper #field_9_9, .hm-donation-form-wrapper #field_15_9, .hm-donation-form-wrapper #field_16_9, .hm-donation-form-wrapper #field_17_9 { position: relative !important; margin-top: 10px !important; } /* ======================================== FIELD 9: CUSTOM AMOUNT INPUT With Dollar Sign ======================================== */ .hm-donation-form-wrapper #field_2_9 .ginput_container, .hm-donation-form-wrapper #field_3_9 .ginput_container, .hm-donation-form-wrapper #field_9_9 .ginput_container, .hm-donation-form-wrapper #field_15_9 .ginput_container, .hm-donation-form-wrapper #field_16_9 .ginput_container, .hm-donation-form-wrapper #field_17_9 .ginput_container { position: relative !important; } /* Dollar sign restored and duplicates hidden */ .hm-donation-form-wrapper #field_2_9 .ginput_container::before, .hm-donation-form-wrapper #field_3_9 .ginput_container::before, .hm-donation-form-wrapper #field_9_9 .ginput_container::before, .hm-donation-form-wrapper #field_15_9 .ginput_container::before, .hm-donation-form-wrapper #field_16_9 .ginput_container::before, .hm-donation-form-wrapper #field_17_9 .ginput_container::before { content: '$' !important; position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 20px !important; font-weight: 700 !important; color: var(--hm-text-dark) !important; z-index: 2 !important; } /* Hide any default Gravity Forms currency symbol spans */ .hm-donation-form-wrapper #field_2_9 .ginput_container span, .hm-donation-form-wrapper #field_3_9 .ginput_container span, .hm-donation-form-wrapper #field_9_9 .ginput_container span, .hm-donation-form-wrapper #field_15_9 .ginput_container span, .hm-donation-form-wrapper #field_16_9 .ginput_container span, .hm-donation-form-wrapper #field_17_9 .ginput_container span { display: none !important; } .hm-donation-form-wrapper #field_2_9 input, .hm-donation-form-wrapper #field_3_9 input, .hm-donation-form-wrapper #field_9_9 input, .hm-donation-form-wrapper #field_15_9 input, .hm-donation-form-wrapper #field_16_9 input, .hm-donation-form-wrapper #field_17_9 input { padding-left: 45px !important; text-align: left !important; font-size: 18px !important; font-weight: 600 !important; max-width: 300px !important; height: 60px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ======================================== IMPACT CALCULATOR STYLING (Assuming this is added via custom HTML or field description) ======================================== */ .hm-donation-form-wrapper .hm-impact-calculator, .hm-donation-form-wrapper .gfield_description.impact-calculator { display: none; /* Hidden by default, shown via JS */ align-items: center !important; justify-content: center !important; gap: 15px !important; padding: 12px 20px !important; background: var(--hm-accent-light) !important; border-left: none !important; border-radius: var(--hm-radius-md) !important; margin: 10px auto !important; width: 66% !important; max-width: 800px !important; box-sizing: border-box !important; text-align: center !important; /* Grid Compatibility */ grid-column: 1 / -1 !important; float: none !important; clear: both !important; } /* Form 2 Specific Impact Calculator Centering */ html body #gform_wrapper_2 .gform_body .gform_fields .hm-impact-wrapper { grid-column: 1 / -1 !important; width: 100% !important; float: none !important; display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 !important; padding: 0 !important; list-style: none !important; text-indent: 0 !important; padding-inline-start: 0 !important; clear: both !important; } /* Form 9 Specific Impact Calculator Centering */ .hm-donation-form-wrapper .hm-impact-calculator-9, html body #gform_wrapper_9 .hm-impact-calculator-9 { display: none; /* Hidden by default, shown via JS */ width: 100% !important; max-width: 100% !important; margin: 0 auto 15px auto !important; padding: 15px !important; background: #f8f9fa !important; border-radius: 5px !important; text-align: center !important; box-sizing: border-box !important; clear: both !important; } /* Wrapper for Form 9 Impact Calculator (centering container) */ .hm-donation-form-wrapper .hm-impact-wrapper-9, html body #gform_wrapper_9 .hm-impact-wrapper-9 { display: flex !important; justify-content: center !important; width: 100% !important; list-style: none !important; margin: 15px 0 !important; clear: both !important; } html body #gform_wrapper_2 .hm-impact-calculator { margin: 10px auto !important; width: 100% !important; max-width: 100% !important; display: flex !important; justify-content: center !important; box-sizing: border-box !important; /* Grid Compatibility */ grid-column: 1 / -1 !important; float: none !important; clear: both !important; } .hm-donation-form-wrapper .hm-impact-icon { display: none !important; } .hm-donation-form-wrapper .hm-impact-text { font-size: 16px !important; font-weight: 500 !important; color: var(--hm-text-dark) !important; line-height: 1.5 !important; text-align: center !important; } .hm-donation-form-wrapper .hm-meal-count { color: var(--hm-accent-color) !important; font-size: 24px !important; font-weight: 700 !important; display: inline-block !important; min-width: 60px !important; text-align: center !important; } /* ======================================== FIELD 5: TOTAL DONATION DISPLAY Stylized Bar ======================================== */ .hm-donation-form-wrapper #field_2_5, .hm-donation-form-wrapper #field_3_5, .hm-donation-form-wrapper #field_9_5, .hm-donation-form-wrapper #field_15_5, .hm-donation-form-wrapper #field_16_5, .hm-donation-form-wrapper #field_17_5 { position: sticky !important; bottom: 20px !important; z-index: 10 !important; width: 66% !important; min-width: 250px !important; margin: 20px auto !important; background: var(--hm-text-dark) !important; border-radius: var(--hm-radius-sm) !important; box-shadow: none !important; padding: 10px 20px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; cursor: default !important; } .hm-donation-form-wrapper #field_2_5 .ginput_container, .hm-donation-form-wrapper #field_3_5 .ginput_container, .hm-donation-form-wrapper #field_9_5 .ginput_container, .hm-donation-form-wrapper #field_15_5 .ginput_container, .hm-donation-form-wrapper #field_16_5 .ginput_container, .hm-donation-form-wrapper #field_17_5 .ginput_container { background: transparent !important; padding: 0 !important; box-shadow: none !important; display: flex !important; align-items: center !important; margin: 0 !important; width: auto !important; } .hm-donation-form-wrapper #field_2_5 .gfield_label, .hm-donation-form-wrapper #field_3_5 .gfield_label, .hm-donation-form-wrapper #field_9_5 .gfield_label, .hm-donation-form-wrapper #field_15_5 .gfield_label, .hm-donation-form-wrapper #field_16_5 .gfield_label, .hm-donation-form-wrapper #field_17_5 .gfield_label { font-size: 16px !important; font-weight: 600 !important; color: white !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin: 0 !important; padding: 0 !important; } .hm-donation-form-wrapper #field_2_5 input, .hm-donation-form-wrapper #field_3_5 input, .hm-donation-form-wrapper #field_9_5 input, .hm-donation-form-wrapper #field_15_5 input, .hm-donation-form-wrapper #field_16_5 input, .hm-donation-form-wrapper #field_17_5 input { font-size: 24px !important; font-weight: 700 !important; color: white !important; background: transparent !important; border: none !important; text-align: right !important; text-shadow: none !important; padding: 0 !important; width: auto !important; pointer-events: none !important; } /* ======================================== STRIPE CREDIT CARD FIELD (Field 17) Professional Styling with Security Badge ======================================== */ .hm-donation-form-wrapper #field_2_17, .hm-donation-form-wrapper #field_3_17, .hm-donation-form-wrapper #field_9_17, .hm-donation-form-wrapper #field_15_17, .hm-donation-form-wrapper #field_16_17, .hm-donation-form-wrapper #field_17_17 { position: relative !important; } .hm-donation-form-wrapper #field_2_17 .ginput_container, .hm-donation-form-wrapper #field_3_17 .ginput_container, .hm-donation-form-wrapper #field_9_17 .ginput_container, .hm-donation-form-wrapper #field_15_17 .ginput_container, .hm-donation-form-wrapper #field_16_17 .ginput_container, .hm-donation-form-wrapper #field_17_17 .ginput_container { position: relative !important; } /* Security badge and info */ .hm-donation-form-wrapper #field_2_17::before, .hm-donation-form-wrapper #field_3_17::before, .hm-donation-form-wrapper #field_9_17::before, .hm-donation-form-wrapper #field_15_17::before, .hm-donation-form-wrapper #field_16_17::before, .hm-donation-form-wrapper #field_17_17::before { content: '' !important; display: block !important; margin-bottom: 15px !important; } /* Add security information */ .hm-donation-form-wrapper .hm-stripe-security { display: flex !important; align-items: center !important; gap: 15px !important; margin-bottom: 25px !important; padding: 15px 20px !important; background: var(--hm-bg-light) !important; border-radius: var(--hm-radius-md) !important; } .hm-donation-form-wrapper .hm-security-icon { font-size: 20px !important; color: var(--hm-accent-color) !important; cursor: help !important; transition: var(--hm-transition) !important; position: relative !important; } .hm-donation-form-wrapper .hm-security-icon:hover { color: var(--hm-accent-hover) !important; transform: scale(1.1) !important; } /* Security tooltip */ .hm-donation-form-wrapper .hm-security-tooltip { position: absolute !important; bottom: calc(100% + 15px) !important; right: 0 !important; width: 320px !important; padding: 20px !important; background: white !important; border-radius: var(--hm-radius-md) !important; box-shadow: var(--hm-shadow-lg) !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) !important; transition: var(--hm-transition) !important; z-index: 1000 !important; border: 2px solid var(--hm-accent-color) !important; } .hm-donation-form-wrapper .hm-security-icon:hover+.hm-security-tooltip { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* Stripe Credit Card: Ensure full width on all screens */ .hm-donation-form-wrapper .ginput_stripe_creditcard, .hm-donation-form-wrapper .ginput_container_stripe_creditcard { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .hm-donation-form-wrapper .ginput_stripe_creditcard .StripeElement, .hm-donation-form-wrapper .ginput_full .StripeElement { width: 100% !important; box-sizing: border-box !important; } /* Stripe Credit Card: Mobile responsive fixes */ @media (max-width: 480px) { /* Ensure Stripe Element has enough breathing room */ .hm-donation-form-wrapper .ginput_stripe_creditcard .StripeElement, .hm-donation-form-wrapper .ginput_full .StripeElement { padding: 10px 8px !important; min-height: 44px !important; } /* Fix GF's absolutely-positioned card placeholders overlapping on narrow screens */ .hm-donation-form-wrapper .ginput_stripe_creditcard .cc-placeholders { right: 8px !important; gap: 3px !important; } .hm-donation-form-wrapper .ginput_stripe_creditcard .cc-placeholders span { font-size: 12px !important; } /* Reduce card number left padding for card icon on small screens */ .hm-donation-form-wrapper .ginput_stripe_creditcard .cc-details-container input.cc-cardnumber { padding-left: 40px !important; font-size: 14px !important; } /* Security badge: stack on mobile */ .hm-donation-form-wrapper .hm-stripe-security { flex-direction: column !important; text-align: center !important; gap: 8px !important; padding: 12px 15px !important; } } @media (max-width: 360px) { /* Very small screens: hide GF's own placeholders (Stripe shows its own inside the iframe) */ .hm-donation-form-wrapper .ginput_stripe_creditcard .cc-placeholders { display: none !important; } .hm-donation-form-wrapper .ginput_stripe_creditcard .cc-details-container input.cc-cardnumber { padding-left: 36px !important; font-size: 13px !important; } } /* ======================================== SUBMIT BUTTON Professional Gradient Button ======================================== */ #gform_wrapper_2 .gform_footer, #gform_wrapper_2 .gform_page_footer, #gform_wrapper_3 .gform_footer, #gform_wrapper_3 .gform_page_footer, #gform_wrapper_9 .gform_footer, #gform_wrapper_9 .gform_page_footer, #gform_wrapper_15 .gform_footer, #gform_wrapper_15 .gform_page_footer, #gform_wrapper_16 .gform_footer, #gform_wrapper_16 .gform_page_footer, #gform_wrapper_17 .gform_footer, #gform_wrapper_17 .gform_page_footer { margin: 30px 0 0 0 !important; padding: 0 !important; } #gform_wrapper_2 .gform_button, #gform_wrapper_2 .gform_next_button, #gform_wrapper_2 input[type="submit"], #gform_wrapper_3 .gform_button, #gform_wrapper_3 .gform_next_button, #gform_wrapper_3 input[type="submit"], #gform_wrapper_9 .gform_button, #gform_wrapper_9 .gform_next_button, #gform_wrapper_9 input[type="submit"], #gform_wrapper_15 .gform_button, #gform_wrapper_15 .gform_next_button, #gform_wrapper_15 input[type="submit"], #gform_wrapper_16 .gform_button, #gform_wrapper_16 .gform_next_button, #gform_wrapper_16 input[type="submit"], #gform_wrapper_17 .gform_button, #gform_wrapper_17 .gform_next_button, #gform_wrapper_17 input[type="submit"] { width: 66% !important; margin: 0 auto !important; display: block !important; padding: 20px 40px !important; font-size: 20px !important; font-weight: 700 !important; color: white !important; background: linear-gradient(135deg, var(--hm-accent-color), var(--hm-accent-hover)) !important; border: none !important; border-radius: var(--hm-radius-lg) !important; cursor: pointer !important; transition: var(--hm-transition) !important; box-shadow: var(--hm-shadow-md) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; position: relative !important; overflow: hidden !important; } #gform_wrapper_2 .gform_button::before, #gform_wrapper_2 input[type="submit"]::before, #gform_wrapper_3 .gform_button::before, #gform_wrapper_3 input[type="submit"]::before, #gform_wrapper_9 .gform_button::before, #gform_wrapper_9 input[type="submit"]::before, #gform_wrapper_15 .gform_button::before, #gform_wrapper_15 input[type="submit"]::before, #gform_wrapper_16 .gform_button::before, #gform_wrapper_16 input[type="submit"]::before, #gform_wrapper_17 .gform_button::before, #gform_wrapper_17 input[type="submit"]::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important; transition: left 0.5s !important; } #gform_wrapper_2 .gform_button:hover, #gform_wrapper_2 input[type="submit"]:hover, #gform_wrapper_3 .gform_button:hover, #gform_wrapper_3 input[type="submit"]:hover, #gform_wrapper_9 .gform_button:hover, #gform_wrapper_9 input[type="submit"]:hover, #gform_wrapper_15 .gform_button:hover, #gform_wrapper_15 input[type="submit"]:hover, #gform_wrapper_16 .gform_button:hover, #gform_wrapper_16 input[type="submit"]:hover, #gform_wrapper_17 .gform_button:hover, #gform_wrapper_17 input[type="submit"]:hover { transform: translateY(-3px) !important; box-shadow: var(--hm-shadow-lg) !important; } #gform_wrapper_2 .gform_button:hover::before, #gform_wrapper_2 input[type="submit"]:hover::before, #gform_wrapper_3 .gform_button:hover::before, #gform_wrapper_3 input[type="submit"]:hover::before, #gform_wrapper_9 .gform_button:hover::before, #gform_wrapper_9 input[type="submit"]:hover::before, #gform_wrapper_15 .gform_button:hover::before, #gform_wrapper_15 input[type="submit"]:hover::before, #gform_wrapper_16 .gform_button:hover::before, #gform_wrapper_16 input[type="submit"]:hover::before, #gform_wrapper_17 .gform_button:hover::before, #gform_wrapper_17 input[type="submit"]:hover::before { left: 100% !important; } #gform_wrapper_2 .gform_button:active, #gform_wrapper_2 .gform_next_button:active, #gform_wrapper_2 input[type="submit"]:active, #gform_wrapper_3 .gform_button:active, #gform_wrapper_3 .gform_next_button:active, #gform_wrapper_3 input[type="submit"]:active, #gform_wrapper_9 .gform_button:active, #gform_wrapper_9 .gform_next_button:active, #gform_wrapper_9 input[type="submit"]:active, #gform_wrapper_15 .gform_button:active, #gform_wrapper_15 .gform_next_button:active, #gform_wrapper_15 input[type="submit"]:active, #gform_wrapper_16 .gform_button:active, #gform_wrapper_16 .gform_next_button:active, #gform_wrapper_16 input[type="submit"]:active, #gform_wrapper_17 .gform_button:active, #gform_wrapper_17 .gform_next_button:active, #gform_wrapper_17 input[type="submit"]:active { transform: translateY(1px) !important; box-shadow: var(--hm-shadow-sm) !important; } /* ======================================== VALIDATION & ERROR MESSAGES ======================================== */ .hm-donation-form-wrapper .gfield_error { background: rgba(231, 76, 60, 0.05) !important; border-left: 4px solid var(--hm-error-color) !important; padding: 15px !important; border-radius: var(--hm-radius-md) !important; } .hm-donation-form-wrapper .validation_message { color: var(--hm-error-color) !important; font-size: 14px !important; margin-top: 8px !important; } .hm-donation-form-wrapper .gform_validation_errors { background: rgba(231, 76, 60, 0.1) !important; color: var(--hm-error-color) !important; border-left: 4px solid var(--hm-error-color) !important; padding: 15px 20px !important; border-radius: var(--hm-radius-md) !important; margin-bottom: 20px !important; } /* Email validation error messages */ .hm-donation-form-wrapper .hm-email-error { color: var(--hm-error-color, #e74c3c) !important; font-size: 13px !important; margin-top: 6px !important; display: block !important; } /* ======================================== MONTHLY FREQUENCY INDICATORS Visual differentiation when "Monthly" is selected ======================================== */ /* "/month" badge on the total field */ .hm-donation-form-wrapper .hm-monthly-badge { display: inline-block; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.85); margin-left: 4px; vertical-align: baseline; } /* ======================================== MONTHLY MODE VISUAL DIFFERENTIATION When "Give Monthly" is selected, these styles make the mode change obvious. ======================================== */ /* Preset amount buttons: show "/mo" suffix via CSS */ .hm-frequency-monthly #field_2_3 .gchoice label::after, .hm-frequency-monthly #field_3_3 .gchoice label::after, .hm-frequency-monthly #field_9_3 .gchoice label::after, .hm-frequency-monthly #field_15_3 .gchoice label::after, .hm-frequency-monthly #field_16_3 .gchoice label::after, .hm-frequency-monthly #field_17_3 .gchoice label::after { content: '/mo'; font-size: 0.65em; font-weight: 400; opacity: 0.7; margin-left: 2px; vertical-align: baseline; } /* Impact calculator: add a recurring icon */ .hm-frequency-monthly .hm-impact-calculator { border-left: 3px solid var(--hm-accent-color, #F36F28); } /* Client-side required field error messages */ .hm-donation-form-wrapper .hm-required-error { color: var(--hm-error-color, #e74c3c) !important; font-size: 14px !important; font-weight: 500 !important; margin-top: 8px !important; padding: 4px 0 !important; display: block !important; } /* ======================================== RESPONSIVE DESIGN ======================================== */ @media (max-width: 768px) { .hm-donation-form-container { padding: 30px 20px 20px 20px !important; margin-top: 20px !important; width: 95% !important; max-width: 95% !important; margin-left: auto !important; margin-right: auto !important; } /* Keep Field 8 as 2 columns (it likely has longer text) */ .hm-donation-form-wrapper #field_2_8 .gfield_radio, .hm-donation-form-wrapper #field_3_8 .gfield_radio, .hm-donation-form-wrapper #field_9_8 .gfield_radio, .hm-donation-form-wrapper #field_15_8 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_2_8 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_3_8 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_9_8 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_15_8 .gfield_radio { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; flex-direction: unset !important; } /* Field 3 (Amounts) - 2x2 grid on tablet/mobile with proper spacing */ .hm-donation-form-wrapper #field_2_3 .gfield_radio, .hm-donation-form-wrapper #field_3_3 .gfield_radio, .hm-donation-form-wrapper #field_9_3 .gfield_radio, .hm-donation-form-wrapper #field_15_3 .gfield_radio, .hm-donation-form-wrapper #field_16_3 .gfield_radio, .hm-donation-form-wrapper #field_17_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_2_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_3_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_9_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_15_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_16_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_17_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_2_3 .ginput_container_radio, .gform-theme--framework .hm-donation-form-wrapper #field_3_3 .ginput_container_radio, .gform-theme--framework .hm-donation-form-wrapper #field_9_3 .ginput_container_radio, .gform-theme--framework .hm-donation-form-wrapper #field_15_3 .ginput_container_radio, .gform-theme--framework .hm-donation-form-wrapper #field_16_3 .ginput_container_radio, .gform-theme--framework .hm-donation-form-wrapper #field_17_3 .ginput_container_radio { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; flex-direction: unset !important; flex-wrap: unset !important; } .hm-donation-form-wrapper #field_2_3 .gchoice, .hm-donation-form-wrapper #field_3_3 .gchoice, .hm-donation-form-wrapper #field_9_3 .gchoice, .hm-donation-form-wrapper #field_15_3 .gchoice, .hm-donation-form-wrapper #field_16_3 .gchoice, .hm-donation-form-wrapper #field_17_3 .gchoice, .gform-theme--framework .hm-donation-form-wrapper [id$="_3"] .gchoice { overflow: visible !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; flex: none !important; } .hm-donation-form-wrapper #field_2_8 label, .hm-donation-form-wrapper #field_3_8 label, .hm-donation-form-wrapper #field_9_8 label, .hm-donation-form-wrapper #field_15_8 label { padding: 12px 10px !important; font-size: 16px !important; } /* Force Field 3 to be full width and centered */ .hm-donation-form-wrapper #field_2_3, .hm-donation-form-wrapper #field_3_3, .hm-donation-form-wrapper #field_9_3, .hm-donation-form-wrapper #field_15_3, .hm-donation-form-wrapper #field_16_3, .hm-donation-form-wrapper #field_17_3 { width: 100% !important; max-width: none !important; padding: 0 !important; margin-left: auto !important; margin-right: auto !important; } /* Remove specific padding from the input container and list */ .hm-donation-form-wrapper #field_2_3 .ginput_container, .hm-donation-form-wrapper #field_3_3 .ginput_container, .hm-donation-form-wrapper #field_9_3 .ginput_container, .hm-donation-form-wrapper #field_15_3 .ginput_container, .hm-donation-form-wrapper #field_16_3 .ginput_container, .hm-donation-form-wrapper #field_17_3 .ginput_container, .hm-donation-form-wrapper #field_2_3 .gfield_radio, .hm-donation-form-wrapper #field_3_3 .gfield_radio, .hm-donation-form-wrapper #field_9_3 .gfield_radio, .hm-donation-form-wrapper #field_15_3 .gfield_radio, .hm-donation-form-wrapper #field_16_3 .gfield_radio, .hm-donation-form-wrapper #field_17_3 .gfield_radio { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important; } .hm-donation-form-wrapper #field_2_3 label, .hm-donation-form-wrapper #field_3_3 label, .hm-donation-form-wrapper #field_9_3 label, .hm-donation-form-wrapper #field_15_3 label, .hm-donation-form-wrapper #field_16_3 label, .hm-donation-form-wrapper #field_17_3 label { padding: 14px 8px !important; font-size: 18px !important; min-height: 50px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Adjust Impact Calculator for Mobile */ .hm-donation-form-wrapper .hm-impact-calculator, .hm-donation-form-wrapper .gfield_description.impact-calculator, html body #gform_wrapper_2 .hm-impact-calculator { flex-direction: column !important; text-align: center !important; gap: 10px !important; padding: 15px !important; width: 100% !important; max-width: 100% !important; } .hm-donation-form-wrapper .hm-impact-icon { margin-bottom: 5px !important; } .hm-donation-form-wrapper .hm-message-text, .hm-donation-form-wrapper .hm-impact-text { font-size: 15px !important; text-align: center !important; } /* Total bar: label left, amount right on mobile */ .hm-donation-form-wrapper #field_2_5, .hm-donation-form-wrapper #field_3_5, .hm-donation-form-wrapper #field_9_5, .hm-donation-form-wrapper #field_15_5, .hm-donation-form-wrapper #field_16_5, .hm-donation-form-wrapper #field_17_5 { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; padding: 10px 16px !important; width: 80% !important; } .hm-donation-form-wrapper #field_2_5 .ginput_container, .hm-donation-form-wrapper #field_3_5 .ginput_container, .hm-donation-form-wrapper #field_9_5 .ginput_container, .hm-donation-form-wrapper #field_15_5 .ginput_container, .hm-donation-form-wrapper #field_16_5 .ginput_container, .hm-donation-form-wrapper #field_17_5 .ginput_container { padding: 0 !important; text-align: right !important; flex-shrink: 0 !important; } .hm-donation-form-wrapper #field_2_5 input, .hm-donation-form-wrapper #field_3_5 input, .hm-donation-form-wrapper #field_9_5 input, .hm-donation-form-wrapper #field_15_5 input, .hm-donation-form-wrapper #field_16_5 input, .hm-donation-form-wrapper #field_17_5 input { font-size: 22px !important; text-align: right !important; } #gform_wrapper_2 .gform_button, #gform_wrapper_2 input[type="submit"], #gform_wrapper_3 .gform_button, #gform_wrapper_3 input[type="submit"], #gform_wrapper_9 .gform_button, #gform_wrapper_9 input[type="submit"], #gform_wrapper_15 .gform_button, #gform_wrapper_15 input[type="submit"], #gform_wrapper_16 .gform_button, #gform_wrapper_16 input[type="submit"], #gform_wrapper_17 .gform_button, #gform_wrapper_17 input[type="submit"] { padding: 18px 30px !important; font-size: 18px !important; width: 100% !important; } .hm-donation-form-wrapper #field_2_6 .gfield_radio, .hm-donation-form-wrapper #field_3_6 .gfield_radio, .hm-donation-form-wrapper #field_9_6 .gfield_radio, .hm-donation-form-wrapper #field_16_6 .gfield_radio, .hm-donation-form-wrapper #field_17_6 .gfield_radio { max-width: 100% !important; } } @media (max-width: 480px) { .hm-donation-form-container { padding: 24px 16px 20px 16px !important; } /* Improve donation amount section spacing on small screens */ .hm-donation-form-wrapper .hm-separator-wrapper { margin: 8px 0 !important; } .hm-donation-form-wrapper .hm-separator { margin: 8px auto !important; font-size: 1rem !important; } /* Ensure preset amount grid has adequate gap on small screens */ .hm-donation-form-wrapper #field_2_3 .gfield_radio, .hm-donation-form-wrapper #field_3_3 .gfield_radio, .hm-donation-form-wrapper #field_9_3 .gfield_radio, .hm-donation-form-wrapper #field_15_3 .gfield_radio, .hm-donation-form-wrapper #field_16_3 .gfield_radio, .hm-donation-form-wrapper #field_17_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_2_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_3_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_9_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_15_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_16_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_17_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_2_3 .ginput_container_radio, .gform-theme--framework .hm-donation-form-wrapper #field_3_3 .ginput_container_radio, .gform-theme--framework .hm-donation-form-wrapper #field_9_3 .ginput_container_radio, .gform-theme--framework .hm-donation-form-wrapper #field_15_3 .ginput_container_radio, .gform-theme--framework .hm-donation-form-wrapper #field_16_3 .ginput_container_radio, .gform-theme--framework .hm-donation-form-wrapper #field_17_3 .ginput_container_radio { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; flex-direction: unset !important; flex-wrap: unset !important; } .hm-donation-form-wrapper #field_2_8 label, .hm-donation-form-wrapper #field_3_8 label, .hm-donation-form-wrapper #field_9_8 label, .hm-donation-form-wrapper #field_15_8 label { font-size: 16px !important; padding: 12px 8px !important; } /* Amount labels for Field 3 on small screens - responsive sizing */ .hm-donation-form-wrapper #field_2_3 label, .hm-donation-form-wrapper #field_3_3 label, .hm-donation-form-wrapper #field_9_3 label, .hm-donation-form-wrapper #field_15_3 label, .hm-donation-form-wrapper #field_16_3 label, .hm-donation-form-wrapper #field_17_3 label { font-size: 16px !important; padding: 12px 6px !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-width: 2px !important; box-shadow: none !important; } .hm-donation-form-wrapper #field_2_5, .hm-donation-form-wrapper #field_3_5, .hm-donation-form-wrapper #field_9_5, .hm-donation-form-wrapper #field_15_5, .hm-donation-form-wrapper #field_16_5, .hm-donation-form-wrapper #field_17_5 { width: 90% !important; min-width: 0 !important; padding: 10px 15px !important; } .hm-donation-form-wrapper #field_2_5 input, .hm-donation-form-wrapper #field_3_5 input, .hm-donation-form-wrapper #field_9_5 input, .hm-donation-form-wrapper #field_15_5 input, .hm-donation-form-wrapper #field_16_5 input, .hm-donation-form-wrapper #field_17_5 input { font-size: 18px !important; } .hm-donation-form-wrapper #field_2_5 .gfield_label, .hm-donation-form-wrapper #field_3_5 .gfield_label, .hm-donation-form-wrapper #field_9_5 .gfield_label, .hm-donation-form-wrapper #field_15_5 .gfield_label, .hm-donation-form-wrapper #field_16_5 .gfield_label, .hm-donation-form-wrapper #field_17_5 .gfield_label { font-size: 13px !important; } .hm-donation-form-wrapper .hm-impact-calculator { flex-direction: column !important; text-align: center !important; } .hm-donation-form-wrapper .hm-meal-count { font-size: 20px !important; } } /* ======================================== FIELD 3 (FORM 3): PRODUCT FIELD BUTTONS Professional Gradient Buttons (like Field 8) ======================================== */ .hm-donation-form-wrapper #field_3_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_3_3 .gfield_radio { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 15px !important; margin-bottom: 25px !important; flex-direction: unset !important; } .hm-donation-form-wrapper #field_3_3 .gchoice { margin: 0 !important; min-width: 0 !important; } .hm-donation-form-wrapper #field_3_3 input[type="radio"] { 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; white-space: nowrap !important; border: 0 !important; } .hm-donation-form-wrapper #field_3_3 label { display: block !important; padding: 18px 20px !important; font-size: 22px !important; font-weight: 700 !important; color: var(--hm-text-dark) !important; background: white !important; border: 3px solid var(--hm-border-color) !important; border-radius: var(--hm-radius-md) !important; cursor: pointer !important; transition: var(--hm-transition) !important; box-shadow: var(--hm-shadow-sm) !important; text-align: center !important; margin: 0 !important; } .hm-donation-form-wrapper #field_3_3 label:hover { transform: translateY(-3px) !important; box-shadow: var(--hm-shadow-md) !important; border-color: var(--hm-accent-color) !important; } .hm-donation-form-wrapper #field_3_3 input[type="radio"]:checked+label { background: linear-gradient(135deg, var(--hm-accent-color), var(--hm-accent-hover)) !important; border-color: var(--hm-accent-color) !important; color: white !important; box-shadow: var(--hm-shadow-md) !important; } /* Responsive for Field 3 */ @media (max-width: 768px) { .hm-donation-form-wrapper #field_3_3 .gfield_radio, .gform-theme--framework .hm-donation-form-wrapper #field_3_3 .gfield_radio { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; flex-direction: unset !important; } .hm-donation-form-wrapper #field_3_3 label { padding: 15px 10px !important; font-size: 18px !important; } } @media (max-width: 480px) { .hm-donation-form-wrapper #field_3_3 label { font-size: 16px !important; padding: 12px 8px !important; } } /* ======================================== LOADING STATE ======================================== */ .hm-donation-form-wrapper .gform_ajax_spinner { display: none !important; } /* Prevent GF spinner from shifting button layout */ .hm-donation-form-wrapper .gform_footer, .hm-donation-form-wrapper .gform_page_footer { text-align: center !important; display: block !important; position: relative !important; } .hm-donation-form-wrapper .gform_footer img.gform_ajax_spinner, .hm-donation-form-wrapper .gform_page_footer img.gform_ajax_spinner { display: none !important; width: 0 !important; height: 0 !important; position: absolute !important; } .hm-donation-form-wrapper.submitting .gform_button, .hm-donation-form-wrapper.submitting input[type="submit"] { background: var(--hm-text-light) !important; cursor: wait !important; pointer-events: none !important; width: 66% !important; margin: 0 auto !important; display: block !important; transform: none !important; } .hm-donation-form-wrapper.submitting .gform_button::after, .hm-donation-form-wrapper.submitting input[type="submit"]::after { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 20px !important; height: 20px !important; margin: -10px 0 0 -10px !important; border: 3px solid rgba(255, 255, 255, 0.3) !important; border-top-color: white !important; border-radius: 50% !important; animation: spin 0.8s linear infinite !important; } @keyframes spin { to { transform: rotate(360deg); } } /* ======================================== SECURITY INFO MODAL ======================================== */ .hm-security-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999999; opacity: 0; transition: opacity 0.3s ease; } .hm-security-modal.show { display: block; opacity: 1; } .hm-security-modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 0; width: 90%; max-width: 600px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); overflow: hidden; z-index: 1000000; } .hm-security-modal-header { background-color: var(--hm-accent-color); color: white; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; } .hm-security-modal-header h3 { margin: 0; font-size: 1.5rem; font-weight: 600; } .hm-security-modal-close { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; opacity: 0.8; transition: opacity 0.3s ease; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .hm-security-modal-close:hover { opacity: 1; } .hm-security-modal-body { padding: 30px; max-height: 70vh; overflow-y: auto; } .hm-security-item { display: flex; align-items: flex-start; margin-bottom: 25px; } .hm-security-item:last-child { margin-bottom: 0; } .hm-security-item i { font-size: 1.5rem; color: var(--hm-accent-color); margin-right: 15px; margin-top: 2px; flex-shrink: 0; } .hm-security-item div { flex: 1; } .hm-security-item strong { display: block; margin-bottom: 5px; color: var(--hm-text-dark); font-size: 1.1rem; } .hm-security-item p { margin: 0; color: var(--hm-text-light); line-height: 1.5; } /* ======================================== UPSELL BUTTONS - ENSURE CLICKABILITY ======================================== */ .hm-upsell-yes-btn, .hm-upsell-no-btn { pointer-events: auto !important; cursor: pointer !important; position: relative !important; z-index: 999999 !important; } /* ======================================== HIDE PREVIOUS BUTTON ======================================== */ #gform_wrapper_3 .gform_previous_button { display: none !important; } /* ======================================== MOBILE RESPONSIVE - COMPACT FORM ======================================== */ @media (max-width: 768px) { /* Reduce all field spacing */ #gform_wrapper_3 .gfield, #gform_wrapper_3 .gform_fields .gfield { margin-bottom: 10px !important; } /* Smaller labels */ #gform_wrapper_3 .gfield_label { font-size: 14px !important; margin-bottom: 6px !important; } /* Compact inputs */ #gform_wrapper_3 input[type="text"], #gform_wrapper_3 input[type="email"], #gform_wrapper_3 input[type="tel"], #gform_wrapper_3 input[type="number"], #gform_wrapper_3 select, #gform_wrapper_3 textarea { padding: 10px 12px !important; font-size: 14px !important; } /* Compact product buttons */ #gform_wrapper_3 .hm-product-button { padding: 12px 16px !important; font-size: 16px !important; min-height: 50px !important; } /* Compact toggle switches */ #gform_wrapper_3 .hm-toggle-switch { padding: 8px !important; } #gform_wrapper_3 .hm-toggle-option { padding: 10px 16px !important; font-size: 14px !important; } /* Compact impact calculator */ #gform_wrapper_3 .hm-impact-calculator { margin-top: 10px !important; margin-bottom: 10px !important; padding: 12px 16px !important; } /* Smaller buttons */ #gform_wrapper_3 .gform_button, #gform_wrapper_3 .gform_next_button, #gform_wrapper_3 .gform_previous_button { padding: 12px 24px !important; font-size: 14px !important; } /* Compact footer */ #gform_wrapper_3 .gform_footer { margin-top: 15px !important; padding-top: 12px !important; } } @media (max-width: 480px) { /* Extra compact for very small screens */ #gform_wrapper_3 .gfield { margin-bottom: 8px !important; } #gform_wrapper_3 .gfield_label { font-size: 13px !important; } #gform_wrapper_3 input[type="text"], #gform_wrapper_3 input[type="email"], #gform_wrapper_3 input[type="tel"], #gform_wrapper_3 input[type="number"], #gform_wrapper_3 select, #gform_wrapper_3 textarea { padding: 8px 10px !important; font-size: 13px !important; } #gform_wrapper_3 .hm-product-button { padding: 10px 12px !important; font-size: 14px !important; min-height: 45px !important; } /* FIELD 2_9 LABEL - HEADING STYLE Override hidden_label and apply custom styling========================================*/ /* First, make the label visible by overriding hidden_label class */ .hm-donation-form-wrapper #field_2_9.hidden_label .gfield_label, #gform_wrapper_2 #field_2_9.hidden_label .gfield_label, #field_2_9.hidden_label .gfield_label, body #field_2_9.hidden_label label, #field_9_9.hidden_label .gfield_label, #field_15_9.hidden_label .gfield_label, #field_16_9.hidden_label .gfield_label, #field_17_9.hidden_label .gfield_label { visibility: visible !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; display: block !important; overflow: visible !important; margin: 0 0 1rem 0 !important; padding: 0 !important; border: 0 !important; } /* Then apply the custom heading-style formatting */ .hm-donation-form-wrapper #field_2_9 .gfield_label, #gform_wrapper_2 #field_2_9 .gfield_label, #field_2_9 .gfield_label, body #field_2_9 label.gfield_label, #field_9_9 .gfield_label, #field_15_9 .gfield_label, #field_16_9 .gfield_label, #field_17_9 .gfield_label { font-size: 1.75rem !important; font-family: poppins, sans-serif !important; font-weight: 700 !important; line-height: 1.2 !important; margin-bottom: 1rem !important; color: #222 !important; } /* ======================================== FIELD 2_3 STYLING (Donation Amount) Center and set to 100% width on mobile as requested ======================================== */ #field_2_3, #field_9_3, #field_15_3, #field_16_3, #field_17_3 { width: 100% !important; margin-left: auto !important; margin-right: auto !important; float: none !important; clear: both !important; display: block !important; } #field_2_3 .ginput_container_radio, #field_9_3 .ginput_container_radio, #field_15_3 .ginput_container_radio, #field_16_3 .ginput_container_radio, #field_17_3 .ginput_container_radio, .gform-theme--framework #field_2_3 .ginput_container_radio, .gform-theme--framework #field_9_3 .ginput_container_radio, .gform-theme--framework #field_15_3 .ginput_container_radio, .gform-theme--framework #field_16_3 .ginput_container_radio, .gform-theme--framework #field_17_3 .ginput_container_radio { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; flex-direction: unset !important; } /* ======================================== FIELD 2_9 STYLING (Custom Donation Amount) Center in the form ======================================== */ #field_2_9, #field_9_9, #field_15_9, #field_16_9, #field_17_9 { width: 100% !important; margin-left: auto !important; margin-right: auto !important; float: none !important; clear: both !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } #field_2_9 .ginput_container, #field_9_9 .ginput_container, #field_15_9 .ginput_container, #field_16_9 .ginput_container, #field_17_9 .ginput_container { margin-left: auto !important; margin-right: auto !important; max-width: 300px !important; width: 100% !important; position: relative !important; } #field_2_9 .gfield_label, #field_9_9 .gfield_label, #field_15_9 .gfield_label, #field_16_9 .gfield_label, #field_17_9 .gfield_label { text-align: center !important; width: 100% !important; } /* ======================================== SEPARATOR STYLING (- OR -) ======================================== */ .hm-separator-wrapper { display: block !important; width: 100% !important; clear: both !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .hm-separator { text-align: center; font-weight: 700; color: #666; margin: 1.5rem 0; font-family: poppins, sans-serif; font-size: 1.2rem; width: 100%; clear: both; display: block !important; } .hm-impact-wrapper { display: block !important; width: 100% !important; clear: both !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } } /* ======================================== FORM 2 SPECIFIC: CENTERING & SIZING ======================================== */ /* Center Field 3 (Donation Amount Buttons) */ #field_2_3, #field_9_3, #field_15_3, #field_16_3, #field_17_3 { float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } /* Center Field 12 (Dedication Toggle) */ #field_2_12, #field_15_12, #field_16_12, #field_17_12 { float: none !important; margin-left: auto !important; margin-right: auto !important; clear: both !important; } /* Field 9 (Custom Amount): 40% width and centered (Desktop only) */ @media (min-width: 481px) { #field_2_9, #field_9_9, #field_15_9, #field_16_9, #field_17_9 { float: none !important; width: 40% !important; min-width: 200px !important; /* Prevent it from getting too small on mobile */ margin-left: auto !important; margin-right: auto !important; clear: both !important; } } #field_2_9 .ginput_container, #field_9_9 .ginput_container, #field_15_9 .ginput_container, #field_16_9 .ginput_container, #field_17_9 .ginput_container { max-width: 300px !important; margin-left: auto !important; margin-right: auto !important; position: relative !important; } #field_2_9 input, #field_9_9 input, #field_15_9 input, #field_16_9 input, #field_17_9 input { width: 100% !important; max-width: none !important; /* Override the 300px limit set earlier */ } #gform_wrapper_9 .gform_page_footer, #gform_wrapper_15 .gform_page_footer { display: flex !important; gap: 15px !important; align-items: stretch !important; justify-content: space-between !important; margin-top: 10px !important; /* Reduced from default */ padding-top: 0 !important; } /* Form 15: Hide frequency toggle (always monthly) */ #field_15_6 { display: none !important; } /* ======================================== FORMS 9 & 15: COMPACT SPACING (Modal Fit) ======================================== */ #gform_wrapper_9 .gform_body, #gform_wrapper_15 .gform_body { padding-top: 5px !important; padding-bottom: 5px !important; } #gform_wrapper_9 .gfield, #gform_wrapper_15 .gfield { margin-bottom: 12px !important; /* Standard is often ~20-30px */ padding-bottom: 0 !important; } #gform_wrapper_9 .gsection, #gform_wrapper_15 .gsection { margin-bottom: 10px !important; border-bottom: none !important; } #gform_wrapper_9 .ginput_container, #gform_wrapper_15 .ginput_container { margin-top: 4px !important; } /* Compact Headings */ #gform_wrapper_9 h3.gform_title, #gform_wrapper_15 h3.gform_title { margin-bottom: 10px !important; margin-top: 5px !important; } /* Specific fields if needed */ #field_9_6 .gfield_radio { gap: 5px !important; /* Tighter radio options */ } #gform_wrapper_9 .gform_previous_button, #gform_wrapper_15 .gform_previous_button { display: flex !important; align-items: center !important; justify-content: center !important; width: 60px !important; min-width: 60px !important; height: auto !important; flex: 0 0 60px !important; color: transparent !important; /* Hide text initially (prevents "Previous" flash) */ font-size: 24px !important; line-height: normal !important; position: relative !important; padding: 0 !important; border: none !important; border-radius: var(--hm-radius-lg) !important; box-shadow: none !important; z-index: 10 !important; cursor: pointer !important; background-color: var(--hm-accent-color, #F36F28) !important; background: linear-gradient(135deg, var(--hm-accent-color, #F36F28), var(--hm-accent-color, #d65a1c)) !important; /* Reset hacks */ text-indent: 0 !important; appearance: none !important; -webkit-appearance: none !important; } #gform_wrapper_9 .gform_previous_button.hm-arrow-visible, #gform_wrapper_15 .gform_previous_button.hm-arrow-visible { color: #fff !important; } /* FOUC Prevention removed - footer visibility now handled by forced visibility rules below */ /* Hide previous button when upsell is active */ #gform_wrapper_9.hm-upsell-active .gform_previous_button { display: none !important; } /* Hide footer only when upsell is actually active (Page 2 with qualifying conditions) */ /* JavaScript will add .hm-upsell-active class when showing the upsell */ #gform_wrapper_9.hm-upsell-active .gform_page_footer { display: none !important; } /* Re-show footer if JS determines we should skip upsell */ #gform_wrapper_9.hm-no-upsell .gform_page_footer { display: flex !important; } /* Vertically Center Upsell Message (Desktop & Mobile) */ #gform_wrapper_9.hm-upsell-active .gform_body { display: flex !important; flex-direction: column !important; justify-content: center !important; min-height: 60vh !important; /* Force height to allow centering */ } #gform_wrapper_9.hm-upsell-active .gform_fields { width: 100% !important; } /* Removed ::after pseudo-element */ /* Ensure Next button takes remaining space */ #gform_wrapper_9 .gform_next_button, #gform_wrapper_15 .gform_next_button { width: auto !important; flex: 1 !important; margin: 0 !important; } /* ======================================== FORM 7: EXIT INTENT ICON ======================================== */ .hm-exit-intent-icon { text-align: center !important; margin-bottom: 30px !important; width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; } .hm-pulsing-icon { font-size: 100px !important; line-height: 1 !important; animation: hmPulse 2s infinite ease-in-out !important; -webkit-animation: hmPulse 2s infinite ease-in-out !important; display: inline-block !important; padding: 10px !important; } @keyframes hmPulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } @-webkit-keyframes hmPulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.15); } 100% { -webkit-transform: scale(1); } } /* ======================================== UTILITY CLASSES ======================================== */ .hm-scroll-locked { overflow: hidden !important; position: relative !important; /* Helps with some mobile properties */ height: 100% !important; /* Prevents body scroll on some devices */ } /* ======================================== Form 9 Fix: Force Footer & Button Visibility ======================================== */ /* Target flexible ID to catch AJAX duplicates */ [id^="gform_wrapper_9"] .gform_footer, [id^="gform_wrapper_9"] .gform_page_footer, [id^="gform_wrapper_9"] .gform-footer, [id^="gform_wrapper_9"] .gform-page-footer, [id^="gform_wrapper_15"] .gform_footer, [id^="gform_wrapper_15"] .gform_page_footer, [id^="gform_wrapper_15"] .gform-footer, [id^="gform_wrapper_15"] .gform-page-footer { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; width: auto !important; z-index: 99 !important; padding-top: 10px !important; } [id^="gform_wrapper_9"] .gform_next_button, [id^="gform_wrapper_9"] .gform_button, [id^="gform_wrapper_15"] .gform_next_button, [id^="gform_wrapper_15"] .gform_button { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; width: auto !important; } /* ======================================== IMPACT CALCULATOR WRAPPER (Moved from JS) ======================================== */ .hm-donation-form-wrapper .hm-impact-wrapper, .hm-donation-form-wrapper .gfield.hm-impact-wrapper { width: 100% !important; max-width: 100% !important; grid-column: 1 / -1 !important; float: none !important; clear: both !important; margin: 15px auto !important; list-style: none !important; display: flex !important; justify-content: center !important; } .hm-donation-form-wrapper .gfield.hm-impact-wrapper .hm-impact-calculator { width: 100% !important; box-sizing: border-box !important; justify-content: center !important; } /* ======================================== PROFESSIONAL RADIO BUTTONS (ACCENT STYLED) Forms 2/3: Fields 12 & 15 Form 9: Fields 15 & 31 ======================================== */ .hm-donation-form-wrapper #field_2_12 .gfield_radio, .hm-donation-form-wrapper #field_3_12 .gfield_radio, .hm-donation-form-wrapper #field_15_12 .gfield_radio, .hm-donation-form-wrapper #field_16_12 .gfield_radio, .hm-donation-form-wrapper #field_17_12 .gfield_radio, .hm-donation-form-wrapper #field_2_15 .gfield_radio, .hm-donation-form-wrapper #field_3_15 .gfield_radio, .hm-donation-form-wrapper #field_9_15 .gfield_radio, .hm-donation-form-wrapper #field_9_31 .gfield_radio, .hm-donation-form-wrapper #field_15_15 .gfield_radio, .hm-donation-form-wrapper #field_16_15 .gfield_radio, .hm-donation-form-wrapper #field_17_15 .gfield_radio { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 20px !important; align-items: center !important; justify-content: center !important; } /* Hide Default Input */ .hm-donation-form-wrapper #field_2_12 input[type="radio"], .hm-donation-form-wrapper #field_3_12 input[type="radio"], .hm-donation-form-wrapper #field_15_12 input[type="radio"], .hm-donation-form-wrapper #field_16_12 input[type="radio"], .hm-donation-form-wrapper #field_17_12 input[type="radio"], .hm-donation-form-wrapper #field_2_15 input[type="radio"], .hm-donation-form-wrapper #field_3_15 input[type="radio"], .hm-donation-form-wrapper #field_9_15 input[type="radio"], .hm-donation-form-wrapper #field_9_31 input[type="radio"], .hm-donation-form-wrapper #field_15_15 input[type="radio"], .hm-donation-form-wrapper #field_16_15 input[type="radio"], .hm-donation-form-wrapper #field_17_15 input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; } /* Label Styling */ .hm-donation-form-wrapper #field_2_12 label, .hm-donation-form-wrapper #field_3_12 label, .hm-donation-form-wrapper #field_15_12 label, .hm-donation-form-wrapper #field_16_12 label, .hm-donation-form-wrapper #field_17_12 label, .hm-donation-form-wrapper #field_2_15 label, .hm-donation-form-wrapper #field_3_15 label, .hm-donation-form-wrapper #field_9_15 label, .hm-donation-form-wrapper #field_9_31 label, .hm-donation-form-wrapper #field_15_15 label, .hm-donation-form-wrapper #field_16_15 label, .hm-donation-form-wrapper #field_17_15 label { display: inline-flex !important; align-items: center !important; cursor: pointer !important; font-size: 15px !important; font-weight: 500 !important; color: var(--hm-text-light, #555) !important; margin: 0 !important; padding: 8px 12px 8px 30px !important; /* Space for radio circle */ position: relative !important; transition: all 0.2s ease !important; } /* Custom Radio Circle (Before) */ .hm-donation-form-wrapper #field_2_12 label::before, .hm-donation-form-wrapper #field_3_12 label::before, .hm-donation-form-wrapper #field_15_12 label::before, .hm-donation-form-wrapper #field_16_12 label::before, .hm-donation-form-wrapper #field_17_12 label::before, .hm-donation-form-wrapper #field_2_15 label::before, .hm-donation-form-wrapper #field_3_15 label::before, .hm-donation-form-wrapper #field_9_15 label::before, .hm-donation-form-wrapper #field_9_31 label::before, .hm-donation-form-wrapper #field_15_15 label::before, .hm-donation-form-wrapper #field_16_15 label::before, .hm-donation-form-wrapper #field_17_15 label::before { content: '' !important; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 20px !important; height: 20px !important; border: 2px solid #ccc !important; border-radius: 50% !important; background: white !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important; transition: all 0.2s ease !important; } /* Checked State - Border & Dot */ .hm-donation-form-wrapper #field_2_12 input:checked+label::before, .hm-donation-form-wrapper #field_3_12 input:checked+label::before, .hm-donation-form-wrapper #field_15_12 input:checked+label::before, .hm-donation-form-wrapper #field_16_12 input:checked+label::before, .hm-donation-form-wrapper #field_17_12 input:checked+label::before, .hm-donation-form-wrapper #field_2_15 input:checked+label::before, .hm-donation-form-wrapper #field_3_15 input:checked+label::before, .hm-donation-form-wrapper #field_9_15 input:checked+label::before, .hm-donation-form-wrapper #field_9_31 input:checked+label::before, .hm-donation-form-wrapper #field_15_15 input:checked+label::before, .hm-donation-form-wrapper #field_16_15 input:checked+label::before, .hm-donation-form-wrapper #field_17_15 input:checked+label::before { border-color: var(--hm-accent-color) !important; background: white !important; box-shadow: inset 0 0 0 5px var(--hm-accent-color) !important; /* Creates the dot */ } /* Label Text Highlight when Checked */ .hm-donation-form-wrapper #field_2_12 input:checked+label, .hm-donation-form-wrapper #field_3_12 input:checked+label, .hm-donation-form-wrapper #field_15_12 input:checked+label, .hm-donation-form-wrapper #field_16_12 input:checked+label, .hm-donation-form-wrapper #field_17_12 input:checked+label, .hm-donation-form-wrapper #field_2_15 input:checked+label, .hm-donation-form-wrapper #field_3_15 input:checked+label, .hm-donation-form-wrapper #field_9_15 input:checked+label, .hm-donation-form-wrapper #field_9_31 input:checked+label, .hm-donation-form-wrapper #field_15_15 input:checked+label, .hm-donation-form-wrapper #field_16_15 input:checked+label, .hm-donation-form-wrapper #field_17_15 input:checked+label { color: var(--hm-accent-color) !important; font-weight: 700 !important; } /* ======================================== GRAVITY FORMS CONFIRMATION MESSAGE ======================================== */ /* Hide excessive line breaks before tables in confirmation messages - scoped to donation forms only */ #gform_confirmation_wrapper_2 .gform_confirmation_message br, #gform_confirmation_wrapper_3 .gform_confirmation_message br, #gform_confirmation_wrapper_9 .gform_confirmation_message br, #gform_confirmation_wrapper_15 .gform_confirmation_message br, #gform_confirmation_wrapper_16 .gform_confirmation_message br, #gform_confirmation_wrapper_17 .gform_confirmation_message br { display: none !important; } /* Donation Receipt Table Styling */ .receipt-table { width: 100% !important; max-width: 600px !important; margin: 20px auto !important; border-collapse: collapse !important; background: white !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; border-radius: 8px !important; overflow: hidden !important; } .receipt-table thead { background: linear-gradient(135deg, var(--hm-accent-color, #F36F28), var(--hm-accent-hover, #E85A1A)) !important; color: white !important; } .receipt-table thead th { padding: 20px !important; text-align: center !important; font-size: 20px !important; font-weight: 700 !important; } .receipt-table tbody tr { border-bottom: 1px solid #eee !important; } .receipt-table tbody tr:last-child { border-bottom: none !important; } .receipt-table tbody td { padding: 12px 20px !important; font-size: 15px !important; } .receipt-table tbody td:first-child { width: 40% !important; color: #666 !important; } .receipt-table tbody td:last-child { color: #333 !important; } .receipt-table tbody td:last-child { font-weight: 400; } /* PDF Download Button */ .receipt-table a, .receipt-table .pdf-download-btn { display: inline-block; background: #f36f28 !important; color: white !important; padding: 12px 24px; border-radius: 6px; text-decoration: none !important; font-weight: 600; transition: background 0.3s ease; } .receipt-table a:hover, .receipt-table .pdf-download-btn:hover { background: #d85e1f !important; color: white !important; } /* Mobile responsive */ @media (max-width: 768px) { .receipt-table { max-width: 100% !important; } .receipt-table tbody td { padding: 10px 15px !important; font-size: 14px !important; } .receipt-table thead th { padding: 15px !important; font-size: 18px !important; } /* Field 5 (Total) Mobile Width */ .hm-donation-form-wrapper #field_2_5, .hm-donation-form-wrapper #field_3_5, .hm-donation-form-wrapper #field_9_5, .hm-donation-form-wrapper #field_15_5, .hm-donation-form-wrapper #field_16_5, .hm-donation-form-wrapper #field_17_5 { width: 100% !important; min-width: unset !important; } } /* ======================================== GEOLOCATION ADDRESS FIELDS - FORMS 2, 3, 9 - FIELD 10 ======================================== */ /* Hide address subfields that are always auto-filled (city, line2) */ #field_2_10 .address_line_2, #field_2_10 .address_city, #field_3_10 .address_line_2, #field_3_10 .address_city, #field_9_10 .address_line_2, #field_9_10 .address_city, #field_15_10 .address_line_2, #field_15_10 .address_city, #field_16_10 .address_line_2, #field_16_10 .address_city, #field_17_10 .address_line_2, #field_17_10 .address_city { display: none !important; } /* Country dropdown — always visible so user can verify/change */ #field_2_10 .address_country, #field_3_10 .address_country, #field_9_10 .address_country, #field_15_10 .address_country, #field_16_10 .address_country, #field_17_10 .address_country { display: block !important; margin-top: 10px; } /* Province/State and Postal Code — hidden until address is selected */ #field_2_10 .address_state, #field_2_10 .address_zip, #field_3_10 .address_state, #field_3_10 .address_zip, #field_9_10 .address_state, #field_9_10 .address_zip, #field_15_10 .address_state, #field_15_10 .address_zip, #field_16_10 .address_state, #field_16_10 .address_zip, #field_17_10 .address_state, #field_17_10 .address_zip { display: none !important; } /* Show province/state and postal code after address is selected */ #field_2_10.hm-address-selected .address_state, #field_2_10.hm-address-selected .address_zip, #field_3_10.hm-address-selected .address_state, #field_3_10.hm-address-selected .address_zip, #field_9_10.hm-address-selected .address_state, #field_9_10.hm-address-selected .address_zip, #field_15_10.hm-address-selected .address_state, #field_15_10.hm-address-selected .address_zip, #field_16_10.hm-address-selected .address_state, #field_16_10.hm-address-selected .address_zip, #field_17_10.hm-address-selected .address_state, #field_17_10.hm-address-selected .address_zip { display: block !important; margin-top: 10px; } /* Layout: state and zip side by side when shown */ .gfield--type-address.hm-address-selected .ginput_container_address { display: flex; flex-wrap: wrap; gap: 10px; } .gfield--type-address.hm-address-selected .address_line_1 { flex: 0 0 100%; } .gfield--type-address.hm-address-selected .address_country { flex: 0 0 100%; } .gfield--type-address.hm-address-selected .address_state { flex: 1 1 45%; min-width: 0; } .gfield--type-address.hm-address-selected .address_zip { flex: 1 1 45%; min-width: 0; } /* Ensure inputs inside address subfields take full width */ .gfield--type-address .address_state select, .gfield--type-address .address_state input, .gfield--type-address .address_zip input, .gfield--type-address .address_country select { width: 100% !important; box-sizing: border-box; } /* Mobile: stack state and zip vertically */ @media (max-width: 480px) { .gfield--type-address.hm-address-selected .address_state, .gfield--type-address.hm-address-selected .address_zip { flex: 0 0 100%; } } /* Show only the first autocomplete component, hide duplicates */ #field_2_10 .address_line_1 gmp-place-autocomplete:first-of-type, #field_3_10 .address_line_1 gmp-place-autocomplete:first-of-type, #field_9_10 .address_line_1 gmp-place-autocomplete:first-of-type, #field_15_10 .address_line_1 gmp-place-autocomplete:first-of-type, #field_16_10 .address_line_1 gmp-place-autocomplete:first-of-type, #field_17_10 .address_line_1 gmp-place-autocomplete:first-of-type { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; min-height: 50px !important; border: 1px solid #c5c5c5 !important; border-radius: 8px !important; box-sizing: border-box !important; } /* Hide duplicate autocomplete elements */ #field_2_10 .address_line_1 gmp-place-autocomplete ~ gmp-place-autocomplete, #field_3_10 .address_line_1 gmp-place-autocomplete ~ gmp-place-autocomplete, #field_9_10 .address_line_1 gmp-place-autocomplete ~ gmp-place-autocomplete, #field_15_10 .address_line_1 gmp-place-autocomplete ~ gmp-place-autocomplete, #field_16_10 .address_line_1 gmp-place-autocomplete ~ gmp-place-autocomplete, #field_17_10 .address_line_1 gmp-place-autocomplete ~ gmp-place-autocomplete { display: none !important; } /* Keep the address_line_1 container visible */ #field_2_10 .address_line_1, #field_3_10 .address_line_1, #field_9_10 .address_line_1, #field_15_10 .address_line_1, #field_16_10 .address_line_1, #field_17_10 .address_line_1 { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; } /* Ensure dropdown appears above other elements */ .pac-container { z-index: 999999 !important; } /* Fix blank suggestions in Google Places autocomplete dropdown. Ensures text is visible regardless of inherited styles. */ .pac-container .pac-item { color: #333 !important; font-size: 14px !important; line-height: 1.4 !important; padding: 8px 12px !important; } .pac-container .pac-item .pac-item-query { color: #000 !important; font-size: 14px !important; } .pac-container .pac-item .pac-matched { font-weight: 700 !important; } /* Ensure the new gmp-place-autocomplete component text is visible */ gmp-place-autocomplete { color: #333 !important; font-size: 16px !important; }