.elementor-4147 .elementor-element.elementor-element-2e44e05{--display:flex;--min-height:150px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4147 .elementor-element.elementor-element-2e44e05:not(.elementor-motion-effects-element-type-background), .elementor-4147 .elementor-element.elementor-element-2e44e05 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-41c2435 );background-image:url("https://sightforsurrey.org.uk/wp-content/uploads/2026/10/Snowflakes.svg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-4147 .elementor-element.elementor-element-7a557cf{--display:flex;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:2%;--padding-bottom:2%;--padding-left:5%;--padding-right:5%;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-4147 .elementor-element.elementor-element-d529ccf{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;}.elementor-4147 .elementor-element.elementor-element-d529ccf .elementor-heading-title{font-family:var( --e-global-typography-e80d1dd-font-family ), Sans-serif;font-size:var( --e-global-typography-e80d1dd-font-size );line-height:var( --e-global-typography-e80d1dd-line-height );color:var( --e-global-color-41c2435 );}.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form{font-family:var( --e-global-typography-1b582dd-font-family ), Sans-serif;font-size:var( --e-global-typography-1b582dd-font-size );line-height:var( --e-global-typography-1b582dd-line-height );background-color:var( --e-global-color-c831111 );border-style:none;}.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form label{font-family:var( --e-global-typography-1b582dd-font-family ), Sans-serif;font-size:var( --e-global-typography-1b582dd-font-size );line-height:var( --e-global-typography-1b582dd-line-height );}.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form input, .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form textarea, .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form select{font-family:var( --e-global-typography-1b582dd-font-family ), Sans-serif;font-size:var( --e-global-typography-1b582dd-font-size );line-height:var( --e-global-typography-1b582dd-line-height );}.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form button, .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form input[type="submit"]{font-family:var( --e-global-typography-1b582dd-font-family ), Sans-serif;font-size:var( --e-global-typography-1b582dd-font-size );line-height:var( --e-global-typography-1b582dd-line-height );}.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-elementor-editor-wrapper{background-color:var( --e-global-color-b656287 );}.elementor-4147 .elementor-element.elementor-element-bc0df96{--display:flex;--min-height:150px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4147 .elementor-element.elementor-element-bc0df96:not(.elementor-motion-effects-element-type-background), .elementor-4147 .elementor-element.elementor-element-bc0df96 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-41c2435 );background-image:url("https://sightforsurrey.org.uk/wp-content/uploads/2026/10/Snowflakes-colour.svg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-4147 .elementor-element.elementor-element-9a49b0f{--display:flex;--margin-top:0px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}@media(min-width:768px){.elementor-4147 .elementor-element.elementor-element-9a49b0f{--width:100%;}}@media(max-width:1024px){.elementor-4147 .elementor-element.elementor-element-2e44e05{--min-height:100px;}.elementor-4147 .elementor-element.elementor-element-d529ccf .elementor-heading-title{font-size:var( --e-global-typography-e80d1dd-font-size );line-height:var( --e-global-typography-e80d1dd-line-height );}.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form{font-size:var( --e-global-typography-1b582dd-font-size );line-height:var( --e-global-typography-1b582dd-line-height );}.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form label{font-size:var( --e-global-typography-1b582dd-font-size );line-height:var( --e-global-typography-1b582dd-line-height );}.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form input, .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form textarea, .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form select{font-size:var( --e-global-typography-1b582dd-font-size );line-height:var( --e-global-typography-1b582dd-line-height );}.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form button, .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form input[type="submit"]{font-size:var( --e-global-typography-1b582dd-font-size );line-height:var( --e-global-typography-1b582dd-line-height );}.elementor-4147 .elementor-element.elementor-element-bc0df96{--min-height:100px;}}@media(max-width:767px){.elementor-4147 .elementor-element.elementor-element-2e44e05{--min-height:50px;}.elementor-4147 .elementor-element.elementor-element-d529ccf .elementor-heading-title{font-size:var( --e-global-typography-e80d1dd-font-size );line-height:var( --e-global-typography-e80d1dd-line-height );}.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form{font-size:var( --e-global-typography-1b582dd-font-size );line-height:var( --e-global-typography-1b582dd-line-height );}.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form label{font-size:var( --e-global-typography-1b582dd-font-size );line-height:var( --e-global-typography-1b582dd-line-height );}.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form input, .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form textarea, .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form select{font-size:var( --e-global-typography-1b582dd-font-size );line-height:var( --e-global-typography-1b582dd-line-height );}.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form button, .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form input[type="submit"]{font-size:var( --e-global-typography-1b582dd-font-size );line-height:var( --e-global-typography-1b582dd-line-height );}.elementor-4147 .elementor-element.elementor-element-bc0df96{--min-height:50px;}}/* Start custom CSS for charitable_donation_form, class: .elementor-element-70553a0 *//* =========================================================
   Charitable Donation Form - Clean SFS Styling
   Paste into Elementor Widget Custom CSS
   ========================================================= */

.elementor-4147 .elementor-element.elementor-element-70553a0 {
  --sfs-navy: #262656;
  --sfs-yellow: #F7CE46;
  --sfs-grey: #D2D2D2;
  --sfs-light: #F8F8F8;
  --sfs-white: #FFFFFF;
  --sfs-black: #000000;
}


/* =========================================================
   Basic form styling
   ========================================================= */

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form,
.elementor-4147 .elementor-element.elementor-element-70553a0 form.charitable-form {
  color: var(--sfs-navy) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form *,
.elementor-4147 .elementor-element.elementor-element-70553a0 form.charitable-form * {
  box-sizing: border-box !important;
}

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form p,
.elementor-4147 .elementor-element.elementor-element-70553a0 form.charitable-form p {
  margin-top: 0 !important;
}


/* =========================================================
   Main form sections
   ========================================================= */

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-fieldset,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form fieldset,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-form-fields,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-payment-fields,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-payment-section,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-gift-aid,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-giftaid,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-gift-aid-fieldset {
  border: 1px solid var(--sfs-grey) !important;
  border-radius: 14px !important;
  background: var(--sfs-white) !important;
  padding: 28px !important;
  margin: 0 0 28px 0 !important;
  box-shadow: none !important;
}

/* Remove nested boxes inside sections */
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-fieldset .charitable-fieldset,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form fieldset fieldset,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-form-fields fieldset,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-payment-section fieldset,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-payment-fields fieldset,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-gift-aid fieldset,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-giftaid fieldset {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Section headings */
.elementor-4147 .elementor-element.elementor-element-70553a0 legend,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form-header,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form h3,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form h4 {
  color: var(--sfs-navy) !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
}


/* =========================================================
   Donation amount section
   ========================================================= */

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .donation-amounts,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form ul.donation-amounts,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-radio-list,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-options,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-amounts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .donation-amounts li,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form ul.donation-amounts li,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-radio-list li,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-options li,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-amounts li {
  float: none !important;
  clear: none !important;
  list-style: none !important;
  width: auto !important;
  min-width: 130px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Hide radio inputs */
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .donation-amounts input[type="radio"],
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-radio-list input[type="radio"],
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-options input[type="radio"],
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-amounts input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* Donation amount buttons */
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .donation-amounts label,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-radio-list label,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-options label,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-amounts label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 54px !important;
  width: 100% !important;
  padding: 12px 18px !important;
  border: 2px solid var(--sfs-yellow) !important;
  border-radius: 8px !important;
  background: var(--sfs-yellow) !important;
  color: var(--sfs-navy) !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-align: center !important;
  cursor: pointer !important;
}

/* Remove odd pseudo elements */
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .donation-amounts label::before,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .donation-amounts label::after,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-radio-list label::before,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-radio-list label::after,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-options label::before,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-options label::after,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-amounts label::before,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-amounts label::after {
  display: none !important;
  content: none !important;
}

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .donation-amounts label *,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-radio-list label *,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-options label *,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-amounts label * {
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
}

/* Selected amount */
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .donation-amounts li.selected label,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-radio-list li.selected label,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-options li.selected label,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-amounts li.selected label,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .donation-amounts input[type="radio"]:checked + label,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-radio-list input[type="radio"]:checked + label,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-options input[type="radio"]:checked + label,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-amounts input[type="radio"]:checked + label {
  background: var(--sfs-white) !important;
  border-color: var(--sfs-navy) !important;
  color: var(--sfs-navy) !important;
}

/* Hover */
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .donation-amounts label:hover,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-radio-list label:hover,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-options label:hover,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-amounts label:hover {
  background: var(--sfs-navy) !important;
  border-color: var(--sfs-navy) !important;
  color: var(--sfs-white) !important;
}


/* =========================================================
   Custom amount
   ========================================================= */

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .custom-donation-amount,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form li.custom-donation-amount,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form [class*="custom-donation"] {
  display: block !important;
  width: 100% !important;
  max-width: 420px !important;
  min-width: 280px !important;
  padding: 16px !important;
  border: 1px solid var(--sfs-grey) !important;
  border-radius: 8px !important;
  background: var(--sfs-light) !important;
  margin: 4px 0 0 0 !important;
}

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .custom-donation-amount label,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form [class*="custom-donation"] label {
  display: block !important;
  width: 100% !important;
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--sfs-navy) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: left !important;
}

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .custom-donation-amount input,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form [class*="custom-donation"] input {
  width: 100% !important;
  min-height: 46px !important;
  border: 2px solid var(--sfs-navy) !important;
  border-radius: 6px !important;
  background: var(--sfs-white) !important;
  color: var(--sfs-navy) !important;
  font-size: 16px !important;
  padding: 11px 13px !important;
}


/* =========================================================
   Make it monthly spacing
   ========================================================= */

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-recurring-donation,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-recurring-donation-field,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-field-recurring-donation,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-recurring-field,
.elementor-4147 .elementor-element.elementor-element-70553a0 .recurring-donation,
.elementor-4147 .elementor-element.elementor-element-70553a0 #charitable_field_recurring_donation,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form [class*="recurring"] {
  display: block !important;
  margin-top: 18px !important;
  margin-bottom: 34px !important;
  padding-bottom: 8px !important;
}


/* =========================================================
   Labels and fields
   ========================================================= */

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form label {
  color: var(--sfs-navy) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form input[type="text"],
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form input[type="email"],
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form input[type="tel"],
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form input[type="number"],
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form input[type="url"],
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form select,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form textarea {
  width: 100% !important;
  min-height: 46px !important;
  border: 2px solid var(--sfs-grey) !important;
  border-radius: 6px !important;
  background: var(--sfs-white) !important;
  color: var(--sfs-navy) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  padding: 11px 13px !important;
  box-shadow: none !important;
}

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form input:focus,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form select:focus,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form textarea:focus {
  border-color: var(--sfs-navy) !important;
  outline: 3px solid rgba(247, 206, 70, 0.55) !important;
  outline-offset: 2px !important;
}


/* =========================================================
   Checkboxes
   ========================================================= */

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 8px 0 0 !important;
  accent-color: var(--sfs-navy) !important;
}

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form input[type="checkbox"] + label {
  display: inline !important;
  font-weight: 500 !important;
}


/* =========================================================
   Gift Aid section
   ========================================================= */

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-gift-aid,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-giftaid,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-gift-aid-fieldset {
  background: var(--sfs-white) !important;
  margin-bottom: 38px !important;
}

/* Keep Gift Aid compact */
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-gift-aid p,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-giftaid p,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-gift-aid-fieldset p {
  margin-bottom: 14px !important;
}

/* Space below the final Gift Aid declaration before Payment */
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-gift-aid p:last-child,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-giftaid p:last-child,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-gift-aid-fieldset p:last-child {
  margin-bottom: 36px !important;
}


/* =========================================================
   Payment section
   ========================================================= */

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-payment-fields,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-payment-section,
.elementor-4147 .elementor-element.elementor-element-70553a0 #charitable-gateway-fields,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-gateway-fields,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-payment {
  background: var(--sfs-white) !important;
  padding-top: 34px !important;
  margin-top: 34px !important;
}

/* If Payment heading follows a paragraph, add space above it */
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form p + h3,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form p + h4,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form p + legend {
  margin-top: 34px !important;
}

/* Payment heading spacing */
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-payment-fields legend,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-payment-section legend,
.elementor-4147 .elementor-element.elementor-element-70553a0 #charitable-gateway-fields legend,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-gateway-fields legend,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-payment-fields h3,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-payment-section h3,
.elementor-4147 .elementor-element.elementor-element-70553a0 #charitable-gateway-fields h3,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-gateway-fields h3 {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

.elementor-4147 .elementor-element.elementor-element-70553a0 .StripeElement,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-stripe-card-element {
  min-height: 46px !important;
  border: 2px solid var(--sfs-grey) !important;
  border-radius: 6px !important;
  padding: 11px 13px !important;
  background: var(--sfs-white) !important;
}


/* =========================================================
   Notice box
   ========================================================= */

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-notice,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form-notice,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-error,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-warning {
  border: 2px solid var(--sfs-yellow) !important;
  border-radius: 8px !important;
  background: #FFF8D8 !important;
  color: var(--sfs-navy) !important;
  padding: 16px 18px !important;
  margin: 0 0 22px 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-notice a,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-form-notice a,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-error a,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-warning a {
  color: var(--sfs-navy) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}


/* =========================================================
   Total donation
   ========================================================= */

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-total,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-total-donation,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form-total,
.elementor-4147 .elementor-element.elementor-element-70553a0 .donation-total {
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--sfs-navy) !important;
  color: var(--sfs-white) !important;
  padding: 18px 22px !important;
  margin: 28px 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-total *,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-total-donation *,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form-total *,
.elementor-4147 .elementor-element.elementor-element-70553a0 .donation-total * {
  color: var(--sfs-white) !important;
}


/* =========================================================
   Donate button
   ========================================================= */

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-submit-field {
  margin-top: 24px !important;
}

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form button,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form input[type="submit"],
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-submit-field button,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-submit-field input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  padding: 13px 30px !important;
  border: 2px solid var(--sfs-navy) !important;
  border-radius: 8px !important;
  background: var(--sfs-navy) !important;
  color: var(--sfs-white) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form button:hover,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form input[type="submit"]:hover,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-submit-field button:hover,
.elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-submit-field input[type="submit"]:hover {
  background: var(--sfs-yellow) !important;
  border-color: var(--sfs-yellow) !important;
  color: var(--sfs-navy) !important;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-fieldset,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form fieldset,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-form-fields,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-payment-fields,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-payment-section,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-gift-aid,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-giftaid,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-gift-aid-fieldset {
    padding: 22px !important;
  }

  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .donation-amounts li,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form ul.donation-amounts li,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-radio-list li,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-options li,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-donation-amounts li,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .custom-donation-amount,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form [class*="custom-donation"] {
    width: 100% !important;
    max-width: none !important;
  }

  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form button,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form input[type="submit"],
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-submit-field button,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-submit-field input[type="submit"] {
    width: 100% !important;
  }
}
/**
 * Sensory Services by Sight for Surrey
 * F16 donation-form reflow guard
 *
 * Paste at the END of the Charitable Donation Form widget's
 * Advanced > Custom CSS field. Elementor replaces `.elementor-4147 .elementor-element.elementor-element-70553a0` with the
 * exact widget .elementor-4147 .elementor-element.elementor-element-70553a0, so this remains limited to the donation widget.
 */
@media (max-width: 767px) {
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .charitable-fieldset,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form fieldset {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form .custom-donation-amount,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form li.custom-donation-amount,
  .elementor-4147 .elementor-element.elementor-element-70553a0 .charitable-donation-form [class*="custom-donation"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}/* End custom CSS */