/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */




/* ---ADRA DONATIONS - ELEMENTOR WIDGET SCOPED STYLES---  */

/* Hidden until the campaign select is "Other" (class added in public JS). */
.elementor-widget-adra_donation_form .gfield.adra-donation-description {
    display: none !important;
}

.elementor-widget-adra_donation_form .gfield.adra-donation-description.adra-description-visible {
    display: block !important;
}

.elementor-widget-adra_donation_form .gform_wrapper {
    font-family: inherit;
    /* Inherit Elementor typography */
    max-width: 530px !important;
    margin: 0 auto !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    padding: 40px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* Create relative positioning on the field wrapper for the absolute label */
.elementor-widget-adra_donation_form .gform_wrapper .gfield {
    position: relative !important;
    margin-top: 0 !important;
}

.elementor-widget-adra_donation_form .gform_fields {
    gap: 32px !important;
}

.elementor-widget-adra_donation_form .gfield h3 {
    font-size: 16px;
    color: #007a5f;
    margin: 0;
    font-weight: 700;
}

.elementor-widget-adra_donation_form .gform_wrapper input[type="text"],
.elementor-widget-adra_donation_form .gform_wrapper input[type="email"],
.elementor-widget-adra_donation_form .gform_wrapper input[type="tel"],
.elementor-widget-adra_donation_form .gform_wrapper input[type="number"],
.elementor-widget-adra_donation_form .gform_wrapper select,
.elementor-widget-adra_donation_form .gform_wrapper textarea {
    border: 1px solid #dcdcdc !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    background-color: #fff !important;
    color: #333 !important;
    width: 100% !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    min-height: 40px !important;
    transition: border-color 0.2s ease !important;
}

.elementor-widget-adra_donation_form .gform_wrapper input[type="text"].gform-phone__search {
    padding: 8px 16px 8px 32px !important;
}

/* Custom Dropdown Arrow */
.elementor-widget-adra_donation_form .gform_wrapper select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position-x: calc(100% - 12px) !important;
    background-position-y: 50% !important;
    padding-right: 40px !important;
}

.elementor-widget-adra_donation_form .gform_wrapper input:focus,
.elementor-widget-adra_donation_form .gform_wrapper select:focus,
.elementor-widget-adra_donation_form .gform_wrapper textarea:focus {
    border-color: #007c5a !important;
    outline: none !important;
}

/* Floating Label Design */
.elementor-widget-adra_donation_form .gform_wrapper .gfield_label {
    position: absolute !important;
    top: -10px !important;
    left: 12px !important;
    background-color: #fff !important;
    padding: 0 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #888 !important;
    z-index: 10 !important;
    margin: 0 !important;
    width: auto !important;
    line-height: 1 !important;
}

/* Highlight label when input is focused */
.elementor-widget-adra_donation_form .gform_wrapper .gfield:focus-within .gfield_label {
    color: #007c5a !important;
}

/* Enhanced UI (Choices.js) Overrides - If 'Enhanced UI' is checked in Gravity Forms */
.elementor-widget-adra_donation_form .gform_wrapper .choices__inner {
    border: 1px solid #dcdcdc !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    background-color: #fff !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
}

/* Custom Phone Field Layout */
.elementor-widget-adra_donation_form .gform_wrapper .gform-phone__input-wrapper {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 15px !important;
    padding: 0 !important;
    display: flex !important;
}

/* Phone Country Selector Box */
.elementor-widget-adra_donation_form .gform_wrapper .gform-phone__country-selector {
    border: 1px solid #dcdcdc !important;
    border-radius: 4px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px 0 16px !important;
    background-color: #fff !important;
    width: auto !important;
    min-width: 85px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Hide the dial code text (+1 etc) */
.elementor-widget-adra_donation_form .gform_wrapper .gform-phone__dial-code {
    display: none !important;
}

/* Add custom chevron to selector */
.elementor-widget-adra_donation_form .gform_wrapper .gform-phone__country-selector::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    background-color: #666;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg fill="%23666" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg fill="%23666" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Phone Number Input Box */
.elementor-widget-adra_donation_form .gform_wrapper .gform-phone__input {
    border: 1px solid #dcdcdc !important;
    border-radius: 4px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 8px 16px !important;
    background-color: #fff !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .ginput_phone_container {
    flex-grow: 1 !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .ginput_country-selector_container {
    flex-shrink: 0 !important;
}

/* Hide the native arrow if GF puts one */
.elementor-widget-adra_donation_form .gform_wrapper .gform-phone__arrow {
    display: none !important;
}

.elementor-widget-adra_donation_form .gform_wrapper.gravity-theme .gfield--type-phone .gform-phone__country-selector::after {
    block-size: 30px !important;
    inline-size: 50px !important;
}

/* Layout for Complex Fields (Name, Address) */
.elementor-widget-adra_donation_form .gform_wrapper .ginput_complex.gform-grid-row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: column !important;
    gap: 32px !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .ginput_complex.gform-grid-row>span {
    flex: 1 1 calc(50% - 15px) !important;
    min-width: 0 !important;
    /* prevent flex blowout */
    margin: 0 !important;
    /* override GF default margin */
}

/* Address line 1 full width */
.elementor-widget-adra_donation_form .gform_wrapper .ginput_complex.gform-grid-row>span.ginput_full {
    flex: 1 1 100% !important;
}

/* Stripe card field is a div, and sublabel-above sets align-items: flex-end, so it otherwise shrinks. */
.elementor-widget-adra_donation_form .gform_wrapper.gravity-theme .ginput_complex .ginput_full {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.elementor-widget-adra_donation_form .gform_wrapper .choices.is-open .choices__inner {
    border-color: #007c5a !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .choices__list--dropdown {
    border-color: #007c5a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 0 4px 4px !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #e2efeb !important;
    /* Pale green hover state */
    color: #007c5a !important;
}

/* --------------------------------------------------------------------------
   2. Progress Bar (Multi-page Steps)
   -------------------------------------------------------------------------- */
.elementor-widget-adra_donation_form .gform_wrapper .gf_page_steps {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 40px !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .gf_step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 33% !important;
    opacity: 1 !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .gf_step_number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 55px !important;
    height: 55px !important;
    border-radius: 50px !important;
    border: none !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
    background-color: #007c5a !important;
    /* Default Pending */
    color: #fff !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .gf_step_label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #888 !important;
    /* Default Pending */
    padding: 0 !important;
    margin: 0 !important;
}

/* Active Step (Yellow) */
.elementor-widget-adra_donation_form .gform_wrapper .gf_step_active .gf_step_number {
    background-color: #f5a700 !important;
    color: #000 !important;
    border: none !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .gf_step_active .gf_step_label {
    color: #000 !important;
}

/* Completed Step (Green) */
.elementor-widget-adra_donation_form .gform_wrapper .gf_step_completed .gf_step_number {
    background-color: #54585a !important;
    color: #fff !important;
}

/* Completed steps are clickable (go back); others are not */
.elementor-widget-adra_donation_form .gform_wrapper .gf_step.adra-step-clickable {
    cursor: pointer !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .gf_step.adra-step-clickable:hover .gf_step_number {
    background-color: #3f4244 !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .gf_step.adra-step-clickable:hover .gf_step_label {
    text-decoration: unset !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .gf_step_active,
.elementor-widget-adra_donation_form .gform_wrapper .gf_step_pending {
    cursor: default !important;
}

/* Remove GF native checkmark icons from completed steps */
.elementor-widget-adra_donation_form .gform_wrapper.gravity-theme .gf_step_completed .gf_step_number::before,
.elementor-widget-adra_donation_form .gform_wrapper.gravity-theme .gf_step_completed .gf_step_number::after,
.elementor-widget-adra_donation_form .gform_wrapper .gf_step_completed .gf_step_number::before,
.elementor-widget-adra_donation_form .gform_wrapper .gf_step_completed .gf_step_number::after {
    display: none !important;
    content: none !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .gf_step_completed .gf_step_label {
    color: #000 !important;
}


/* --------------------------------------------------------------------------
   3. Buttons (Next / Submit / Previous)
   -------------------------------------------------------------------------- */
.elementor-widget-adra_donation_form .gform_wrapper .gform_page_footer {
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    border-top: none !important;
    padding-top: 20px !important;
    margin-top: 20px !important;
}

/* Next and Submit Buttons */
.elementor-widget-adra_donation_form .gform_wrapper input[type="button"].gform_button,
.elementor-widget-adra_donation_form .gform_wrapper input[type="button"].gform_next_button,
.elementor-widget-adra_donation_form .gform_wrapper input[type="submit"],
.elementor-widget-adra_donation_form .gform_wrapper button.gform_button,
.elementor-widget-adra_donation_form .gform_wrapper button.gform_next_button {
    background-color: #007c5a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    flex-grow: 1;
}

.elementor-widget-adra_donation_form .gform_wrapper input[type="button"].gform_button:hover,
.elementor-widget-adra_donation_form .gform_wrapper input[type="button"].gform_next_button:hover,
.elementor-widget-adra_donation_form .gform_wrapper input[type="submit"]:hover,
.elementor-widget-adra_donation_form .gform_wrapper button.gform_button:hover,
.elementor-widget-adra_donation_form .gform_wrapper button.gform_next_button:hover {
    background-color: #005a41 !important;
}

/* Move Back Button to Top for pages after the first one */
.elementor-widget-adra_donation_form .gform_wrapper .gform_page:nth-of-type(n+2) {
    position: relative !important;
    padding-top: 60px !important;
    /* create space for the back button and header */
}

/* Horizontal rule separator below the header */
.elementor-widget-adra_donation_form .gform_wrapper .gform_page:nth-of-type(n+2)::before {
    content: "" !important;
    position: absolute !important;
    top: 40px !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background-color: #eee !important;
}

/* Previous (Back) Button */
.elementor-widget-adra_donation_form .gform_wrapper input[type="button"].gform_previous_button,
.elementor-widget-adra_donation_form .gform_wrapper button.gform_previous_button {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #000 !important;
    font-weight: 500 !important;
    padding: 0 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-transform: none !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Add Chevron Icon to Back button */
.elementor-widget-adra_donation_form .gform_wrapper input[type="button"].gform_previous_button::before,
.elementor-widget-adra_donation_form .gform_wrapper button.gform_previous_button::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    background-color: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 18L9 12L15 6" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 18L9 12L15 6" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.elementor-widget-adra_donation_form .gform_wrapper input[type="button"].gform_previous_button:hover,
.elementor-widget-adra_donation_form .gform_wrapper button.gform_previous_button:hover {
    text-decoration: underline !important;
}

/* Position Product/Total fields at the top right as a header */
.elementor-widget-adra_donation_form .gform_wrapper .gfield--type-product,
.elementor-widget-adra_donation_form .gform_wrapper .gfield--type-total {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide the main label ("Product Name" or "Total") */
.elementor-widget-adra_donation_form .gform_wrapper .gfield--type-product>.gfield_label,
.elementor-widget-adra_donation_form .gform_wrapper .gfield--type-total>.gfield_label {
    display: none !important;
}

/* Layout for the price/total wrapper */
.elementor-widget-adra_donation_form .gform_wrapper .ginput_product_price_wrapper,
.elementor-widget-adra_donation_form .gform_wrapper .ginput_container_total {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
}

/* Replace "Price:" text with "Donation Amount •" (For Product Field) */
.elementor-widget-adra_donation_form .gform_wrapper .ginput_product_price_label {
    font-size: 0 !important;
    /* hide original text */
    color: #333 !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .ginput_product_price_label::after {
    content: "Donation Amount \2022" !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #333 !important;
}

/* Style the Price Value */
.elementor-widget-adra_donation_form .gform_wrapper .ginput_product_price,
.elementor-widget-adra_donation_form .gform_wrapper .ginput_total {
    color: #007c5a !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
}

/* Prepend text to Total field if they used a Total field instead of Product on step 3 */
.elementor-widget-adra_donation_form .gform_wrapper .ginput_total::before {
    content: "Donation Amount \2022" !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin-right: 6px !important;
}


/* --------------------------------------------------------------------------
   4. Custom Donation Radio Boxes & Frequency Toggles
   -------------------------------------------------------------------------- */

/* Target BOTH the amount boxes and frequency toggles */
.elementor-widget-adra_donation_form .gform_wrapper .adra-donation-radio .gfield_radio,
.elementor-widget-adra_donation_form .gform_wrapper .adra-frequency-toggle .gfield_radio {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .adra-donation-radio .gfield_radio .gchoice,
.elementor-widget-adra_donation_form .gform_wrapper .adra-frequency-toggle .gfield_radio .gchoice {
    flex: 1 !important;
    min-width: 30% !important;
    margin: 0 !important;
}

/* Hide the native round radio dot */
.elementor-widget-adra_donation_form .gform_wrapper .adra-donation-radio .gfield_radio input[type="radio"],
.elementor-widget-adra_donation_form .gform_wrapper .adra-frequency-toggle .gfield_radio input[type="radio"] {
    display: none !important;
}

/* Style the Label as a clickable box */
.elementor-widget-adra_donation_form .gform_wrapper .adra-donation-radio .gfield_radio label,
.elementor-widget-adra_donation_form .gform_wrapper .adra-frequency-toggle .gfield_radio label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 14px !important;
    text-align: center !important;
    border: 1px solid #007c5a !important;
    border-radius: 4px !important;
    color: #333 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Selected state - Fills with ADRA Green */
.elementor-widget-adra_donation_form .gform_wrapper .adra-donation-radio .gfield_radio input[type="radio"]:checked+label,
.elementor-widget-adra_donation_form .gform_wrapper .adra-frequency-toggle .gfield_radio input[type="radio"]:checked+label {
    background-color: #007c5a !important;
    color: #fff !important;
}

/* Icons for Frequency Toggle */
.elementor-widget-adra_donation_form .gform_wrapper .adra-frequency-toggle .gchoice:nth-child(1) label::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 16.3168L3 13.4642C3.37228 13.6792 3.78288 13.8362 4.21973 13.9231C4.61143 14.001 5.02655 14.0005 5.37106 14L5.417 14C9.80567 13.9965 14.1944 13.9965 18.5831 14L18.629 14C18.9735 14.0005 19.3886 14.001 19.7803 13.9231C20.2171 13.8362 20.6277 13.6792 21 13.4642L21 16.3168C21 17.1582 21.0001 17.8832 20.9179 18.4637C20.8297 19.0859 20.631 19.6823 20.1213 20.166C19.6117 20.6497 18.9833 20.8384 18.3278 20.922C17.7161 21.0001 16.9523 21 16.0658 21H7.93417C7.04768 21 6.28387 21.0001 5.67221 20.922C5.0167 20.8384 4.38835 20.6497 3.87868 20.166C3.36902 19.6823 3.17028 19.0859 3.08215 18.4637C2.99991 17.8832 2.99995 17.1582 3 16.3168ZM13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V17Z" fill="%23ffffff"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M5.71099 2.87475C4.81028 3.77546 4.64197 4.98504 5.0038 6.00293C4.7912 6.008 4.59628 6.02163 4.41479 6.05773C3.22473 6.29444 2.29445 7.22471 2.05773 8.41476C1.99948 8.70761 1.99974 9.03544 2.00004 9.41613L2.00009 9.5L2.00004 9.58387C1.99974 9.96456 1.99948 10.2924 2.05773 10.5852C2.29445 11.7753 3.22473 12.7056 4.41479 12.9423C4.70765 13.0005 5.03548 13.0003 5.41617 13C9.80538 12.9965 14.1946 12.9965 18.5838 13C18.9645 13.0003 19.2924 13.0005 19.5852 12.9423C20.7753 12.7056 21.7056 11.7753 21.9423 10.5852C22.0005 10.2924 22.0003 9.9646 22 9.58393L21.9999 9.5L22 9.4161C22.0003 9.03544 22.0005 8.70759 21.9423 8.41476C21.7056 7.22471 20.7753 6.29445 19.5852 6.05773C19.4037 6.02163 19.2088 6.008 18.9961 6.00293C19.3579 4.98504 19.1896 3.77546 18.2889 2.87475C17.0258 1.61166 14.9413 1.72259 13.8232 3.12018L12 5.39921L10.1767 3.12018C9.05866 1.72259 6.97408 1.61166 5.71099 2.87475ZM12 7C11.4477 7 11 7.44772 11 8V10C11 10.5523 11.4477 11 12 11C12.5523 11 13 10.5523 13 10V8C13 7.44772 12.5523 7 12 7ZM7.82839 6C6.9434 6 6.49105 4.92312 7.1252 4.28897C7.54788 3.86629 8.24376 3.90552 8.61499 4.36957L9.91933 6H7.82839ZM16.1715 6C17.0565 6 17.5089 4.92312 16.8747 4.28897C16.452 3.86629 15.7562 3.90552 15.3849 4.36957L14.0806 6H16.1715Z" fill="%23ffffff"></path></g></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 16.3168L3 13.4642C3.37228 13.6792 3.78288 13.8362 4.21973 13.9231C4.61143 14.001 5.02655 14.0005 5.37106 14L5.417 14C9.80567 13.9965 14.1944 13.9965 18.5831 14L18.629 14C18.9735 14.0005 19.3886 14.001 19.7803 13.9231C20.2171 13.8362 20.6277 13.6792 21 13.4642L21 16.3168C21 17.1582 21.0001 17.8832 20.9179 18.4637C20.8297 19.0859 20.631 19.6823 20.1213 20.166C19.6117 20.6497 18.9833 20.8384 18.3278 20.922C17.7161 21.0001 16.9523 21 16.0658 21H7.93417C7.04768 21 6.28387 21.0001 5.67221 20.922C5.0167 20.8384 4.38835 20.6497 3.87868 20.166C3.36902 19.6823 3.17028 19.0859 3.08215 18.4637C2.99991 17.8832 2.99995 17.1582 3 16.3168ZM13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V17Z" fill="%23ffffff"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M5.71099 2.87475C4.81028 3.77546 4.64197 4.98504 5.0038 6.00293C4.7912 6.008 4.59628 6.02163 4.41479 6.05773C3.22473 6.29444 2.29445 7.22471 2.05773 8.41476C1.99948 8.70761 1.99974 9.03544 2.00004 9.41613L2.00009 9.5L2.00004 9.58387C1.99974 9.96456 1.99948 10.2924 2.05773 10.5852C2.29445 11.7753 3.22473 12.7056 4.41479 12.9423C4.70765 13.0005 5.03548 13.0003 5.41617 13C9.80538 12.9965 14.1946 12.9965 18.5838 13C18.9645 13.0003 19.2924 13.0005 19.5852 12.9423C20.7753 12.7056 21.7056 11.7753 21.9423 10.5852C22.0005 10.2924 22.0003 9.9646 22 9.58393L21.9999 9.5L22 9.4161C22.0003 9.03544 22.0005 8.70759 21.9423 8.41476C21.7056 7.22471 20.7753 6.29445 19.5852 6.05773C19.4037 6.02163 19.2088 6.008 18.9961 6.00293C19.3579 4.98504 19.1896 3.77546 18.2889 2.87475C17.0258 1.61166 14.9413 1.72259 13.8232 3.12018L12 5.39921L10.1767 3.12018C9.05866 1.72259 6.97408 1.61166 5.71099 2.87475ZM12 7C11.4477 7 11 7.44772 11 8V10C11 10.5523 11.4477 11 12 11C12.5523 11 13 10.5523 13 10V8C13 7.44772 12.5523 7 12 7ZM7.82839 6C6.9434 6 6.49105 4.92312 7.1252 4.28897C7.54788 3.86629 8.24376 3.90552 8.61499 4.36957L9.91933 6H7.82839ZM16.1715 6C17.0565 6 17.5089 4.92312 16.8747 4.28897C16.452 3.86629 15.7562 3.90552 15.3849 4.36957L14.0806 6H16.1715Z" fill="%23ffffff"></path></g></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin-right: 8px;
    vertical-align: text-bottom;
}

.elementor-widget-adra_donation_form .gform_wrapper .adra-frequency-toggle .gchoice:nth-child(2) label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V448c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352H176c17.7 0 32-14.3 32-32s-14.3-32-32-32H48.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V448c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352H176c17.7 0 32-14.3 32-32s-14.3-32-32-32H48.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin-right: 8px;
    vertical-align: text-bottom;
}

/* --------------------------------------------------------------------------
   4.1 Other Amount Field ($ Icon Prefix)
   -------------------------------------------------------------------------- */
.elementor-widget-adra_donation_form .gform_wrapper .adra-donation-custom .ginput_container,
.gform_wrapper .adra-donation-custom .ginput_container {
    position: relative !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .adra-donation-custom .ginput_container::before,
.gform_wrapper .adra-donation-custom .ginput_container::before {
    content: "$" !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #54585a !important;
    pointer-events: none !important;
    z-index: 2 !important;
    line-height: 1 !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .adra-donation-custom input[type="text"],
.elementor-widget-adra_donation_form .gform_wrapper .adra-donation-custom input[type="number"],
.gform_wrapper .adra-donation-custom input[type="text"],
.gform_wrapper .adra-donation-custom input[type="number"] {
    padding-left: 32px !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .adra-donation-custom input::placeholder,
.gform_wrapper .adra-donation-custom input::placeholder {
    color: #888 !important;
    opacity: 1 !important;
}

/* Ensure hidden_label hides the floating label */
.elementor-widget-adra_donation_form .gform_wrapper .gfield.hidden_label .gfield_label,
.elementor-widget-adra_donation_form .gform_wrapper .hidden_label .gfield_label,
.gform_wrapper .hidden_label .gfield_label {
    display: none !important;
}

/* --------------------------------------------------------------------------
   5. Custom Checkboxes
   -------------------------------------------------------------------------- */

/* Hide main legend to avoid duplicate text */
.elementor-widget-adra_donation_form .gform_wrapper .gfield--type-checkbox>.gfield_label {
    display: none !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .gfield_checkbox .gchoice {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* Hide native checkbox visually */
.elementor-widget-adra_donation_form .gform_wrapper .gfield_checkbox input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Create the custom checkbox box next to the label */
.elementor-widget-adra_donation_form .gform_wrapper .gfield_checkbox label {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    cursor: pointer !important;
    font-size: 16px !important;
    color: #333 !important;
    margin: 0 !important;
    padding-left: 32px !important;
    /* Make room for the custom box */
    line-height: 24px !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .gfield_checkbox label::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #7a7a7a !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Create a perfectly circular, invisible element for the pulse */
.elementor-widget-adra_donation_form .gform_wrapper .gfield_checkbox label::after {
    content: "" !important;
    position: absolute !important;
    left: 11px !important;
    /* Center of the 22px box */
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    /* Forces a circular shadow */
    pointer-events: none !important;
}

/* Checked State - Solid Green with White Checkmark */
.elementor-widget-adra_donation_form .gform_wrapper .gfield_checkbox input[type="checkbox"]:checked+label::before {
    background-color: #007c5a !important;
    border: 2px solid #007c5a !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>') !important;
    background-size: 14px 14px !important;
}

/* Trigger the circular pulse on the ::after element */
.elementor-widget-adra_donation_form .gform_wrapper .gfield_checkbox input[type="checkbox"]:checked+label::after {
    animation: adraCheckboxPulseChecked 0.4s ease-out forwards !important;
}

.elementor-widget-adra_donation_form .gform_wrapper .gfield_checkbox input[type="checkbox"]:not(:checked)+label::after {
    animation: adraCheckboxPulseUnchecked 0.4s ease-out forwards !important;
}

/* Pulse Animations (Circular and smaller) */
@keyframes adraCheckboxPulseChecked {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 124, 90, 0.4);
    }

    100% {
        box-shadow: 0 0 0 10px rgba(0, 124, 90, 0);
        /* Reduced from 15px to 10px */
    }
}

@keyframes adraCheckboxPulseUnchecked {
    0% {
        box-shadow: 0 0 0 0 rgba(122, 122, 122, 0.4);
    }

    100% {
        box-shadow: 0 0 0 10px rgba(122, 122, 122, 0);
        /* Reduced from 15px to 10px */
    }
}