@charset "UTF-8";
body.chd-full-width-template #primary,
body.chd-full-width-template .site-main,
body.chd-full-width-template .content-area,
body.chd-full-width-template main,
body.no-sidebar #primary,
body.no-sidebar .site-main,
body.no-sidebar .content-area,
body.no-sidebar main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
body.chd-full-width-template #secondary,
body.chd-full-width-template .sidebar,
body.chd-full-width-template .widget-area,
body.chd-full-width-template aside,
body.chd-full-width-template [class*=sidebar],
body.no-sidebar #secondary,
body.no-sidebar .sidebar,
body.no-sidebar .widget-area,
body.no-sidebar aside,
body.no-sidebar [class*=sidebar] {
  display: none !important;
  width: 0 !important;
  visibility: hidden !important;
}
body.chd-full-width-template .site-content,
body.no-sidebar .site-content {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: 1fr !important;
}
body.chd-full-width-template.has-sidebar .site-content,
body.chd-full-width-template .site-content.has-sidebar,
body.no-sidebar.has-sidebar .site-content,
body.no-sidebar .site-content.has-sidebar {
  grid-template-columns: 1fr !important;
}

.action-centre-wrapper.chd-full-width {
  width: 100%;
  max-width: 100%;
}
.action-centre-wrapper.chd-full-width .chd-donation-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

#processing {
  display: none;
}
#processing .lds-ring {
  /* change color here */
  color: var(--chd-color-info);
}
#processing .lds-ring,
#processing .lds-ring div {
  box-sizing: border-box;
}
#processing .lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
#processing .lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid currentColor;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}
#processing .lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
#processing .lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
#processing .lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.success, .error {
  display: none;
}

.success {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--chd-space-xl) var(--chd-card-padding);
  text-align: center;
  border-radius: var(--chd-radius-md);
}
.success h2 {
  font-size: var(--chd-heading-1-px);
  font-family: var(--chd-font-heading);
  font-weight: var(--chd-font-weight-heading);
  margin-bottom: var(--chd-space-lg);
  color: var(--chd-text-primary);
}
.success .donation-details {
  margin-bottom: var(--chd-space-xl);
}
.success .donation-details p {
  font-size: max(16px, var(--chd-text-lg-px));
  margin-bottom: 15px;
}
.success .donation-details p.donor-name {
  font-size: max(18px, var(--chd-text-lg-px));
  font-weight: 500;
}
.success .donation-details p.donation-amount {
  font-size: max(20px, var(--chd-text-lg-px));
  color: var(--chd-primary-color);
  font-weight: var(--chd-font-weight-heading);
}
.success .next-steps {
  text-align: left;
  background: var(--chd-card-bg);
  padding: var(--chd-card-padding);
  border-radius: var(--chd-radius-sm);
  margin-top: var(--chd-space-xl);
}
.success .next-steps h3 {
  font-size: var(--chd-heading-3-px);
  font-family: var(--chd-font-heading);
  font-weight: var(--chd-font-weight-heading);
  margin-bottom: var(--chd-space-lg);
  color: var(--chd-text-primary);
}
.success .next-steps ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.success .next-steps ul li {
  font-size: max(16px, var(--chd-text-base-px));
  margin-bottom: 15px;
  padding-left: 30px;
  position: relative;
}
.success .next-steps ul li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--chd-primary-color);
  font-weight: bold;
}

.chd-donation-container .split-container {
  display: grid;
  grid-template-columns: 1fr minmax(0, 480px);
  grid-gap: 60px;
}
@media (max-width: 991px) {
  .chd-donation-container .split-container {
    grid-template-columns: 1fr;
    grid-gap: 24px;
  }
}
@media (max-width: 787px) {
  .chd-donation-container .split-container h1 {
    font-size: calc(var(--chd-heading-1-px, 48px) * 0.75);
  }
}
.chd-donation-container .split-container h1 {
  font-size: var(--chd-heading-1-px);
  font-family: var(--chd-font-heading);
  font-weight: var(--chd-font-weight-heading);
}
.chd-donation-container .split-container .form-wrap {
  padding: var(--chd-card-padding);
  border-radius: var(--chd-radius-md);
  background-color: var(--chd-card-bg);
  border: var(--chd-card-border);
}
.chd-donation-container .split-container .form-wrap .page-2 {
  display: none;
}
.chd-donation-container .split-container .form-wrap .page-2 #card-element {
  margin-top: 20px;
  border: var(--chd-input-border-width, 1px) solid var(--chd-form-border);
  padding: var(--chd-input-padding-v, 10px) var(--chd-input-padding-h, 14px);
  border-radius: var(--chd-radius-md, 8px);
  background: var(--chd-form-bg, white);
}
.chd-donation-container .split-container .form-wrap h2 {
  margin-top: 0;
  font-size: var(--chd-heading-2-px);
  font-family: var(--chd-font-heading);
  font-weight: var(--chd-font-weight-heading);
  color: var(--chd-text-primary, #171717);
}
.chd-donation-container .split-container .form-wrap .donation-amounts {
  padding-left: 0;
}
.chd-donation-container .split-container .form-wrap .donation-amounts li {
  list-style-type: none;
}
.chd-donation-container .split-container .form-wrap .donation-amounts li ~ li {
  margin-top: 8px;
}
.chd-donation-container .split-container .form-wrap .donation-amounts li label {
  display: block;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.chd-donation-container .split-container .form-wrap .donation-amounts li label .description {
  padding: var(--chd-button-padding-v, 16px) var(--chd-button-padding-h, 32px);
  border-radius: var(--chd-radius-button);
  border: var(--chd-button-border-width) solid var(--chd-option-border);
  line-height: 1.5;
  font-size: max(16px, var(--chd-option-font-size));
  font-family: var(--chd-button-font-family);
  background-color: var(--chd-option-bg);
  color: var(--chd-option-text);
}
.chd-donation-container .split-container .form-wrap .donation-amounts li label .description .amount {
  font-weight: bold;
  font-size: max(18px, var(--chd-option-font-size));
}
.chd-donation-container .split-container .form-wrap .donation-amounts li label input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.chd-donation-container .split-container .form-wrap .donation-amounts li label input[type=radio]:checked + p.description, .chd-donation-container .split-container .form-wrap .donation-amounts li label input[type=radio]:checked + label {
  background-color: var(--chd-primary-color);
  color: var(--chd-primary-text-color);
  border-color: var(--chd-primary-color);
}
.chd-donation-container .split-container .form-wrap .donation-amounts li label:hover .description {
  border-color: var(--chd-primary-color);
}
.chd-donation-container .split-container .form-wrap .donation-amounts li:last-child input[type=radio]:checked + label {
  background-color: var(--chd-primary-color);
  color: var(--chd-primary-text-color);
  border-color: var(--chd-primary-color);
}
.chd-donation-container .split-container .form-wrap .donation-amounts li:last-child input[type=text] {
  display: block;
  margin-top: 10px;
  padding: var(--chd-input-padding-v, 10px) var(--chd-input-padding-h, 14px);
  border-radius: var(--chd-radius-button);
  border: var(--chd-input-border-width, 1px) solid var(--chd-form-border);
  font-size: max(16px, var(--chd-font-input-text-px));
  background-color: var(--chd-form-bg);
  color: var(--chd-form-text-color);
}
.chd-donation-container .split-container .form-wrap .donation-amounts .custom-amount-wrap {
  display: none;
}
.chd-donation-container .split-container .form-wrap .donation-amounts .custom-amount-wrap label[for=custom-amount] {
  font-weight: var(--chd-form-label-weight);
  font-size: max(16px, var(--chd-font-form-label-px));
  color: var(--chd-form-label-color);
  display: block;
  margin-bottom: 8px;
}
.chd-donation-container .split-container .form-wrap .donation-amounts .custom-amount-wrap #custom-amount {
  width: 100%;
  padding: var(--chd-button-padding-v, 16px) var(--chd-button-padding-h, 32px);
  border-radius: var(--chd-radius-button);
  border: var(--chd-input-border-width, 1px) solid var(--chd-form-border);
  background-color: var(--chd-form-bg);
  color: var(--chd-form-text-color);
  font-size: max(16px, var(--chd-font-input-text-px));
  font-weight: var(--chd-form-input-weight);
}
.chd-donation-container .split-container .form-wrap .donation-amounts .custom-amount-wrap #custom-amount:focus {
  outline: none;
  border-color: var(--chd-form-border-focus);
}
.chd-donation-container .split-container .form-wrap .timeframe-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.chd-donation-container .split-container .form-wrap .timeframe-wrap label {
  cursor: pointer;
}
.chd-donation-container .split-container .form-wrap .timeframe-wrap label ~ label {
  margin-left: 8px;
}
.chd-donation-container .split-container .form-wrap .timeframe-wrap label .description {
  padding: var(--chd-button-padding-v, 16px) var(--chd-button-padding-h, 32px);
  border-radius: var(--chd-radius-button);
  border: var(--chd-button-border-width) solid var(--chd-option-border);
  font-weight: var(--chd-font-weight-button);
  font-size: max(16px, var(--chd-option-font-size));
  font-family: var(--chd-button-font-family);
  background-color: var(--chd-option-bg);
  color: var(--chd-option-text);
  margin: 0;
  line-height: 1.5;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.chd-donation-container .split-container .form-wrap .timeframe-wrap label input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.chd-donation-container .split-container .form-wrap .timeframe-wrap label input[type=radio]:checked + p.description, .chd-donation-container .split-container .form-wrap .timeframe-wrap label input[type=radio]:checked + label {
  background-color: var(--chd-primary-color);
  color: var(--chd-primary-text-color);
  border-color: var(--chd-primary-color);
}
.chd-donation-container .split-container .form-wrap .timeframe-wrap label:hover .description {
  border-color: var(--chd-primary-color);
}
.chd-donation-container .split-container .form-wrap .repeat-monthly p {
  color: var(--chd-form-text-color, #171717);
  font-size: max(16px, var(--chd-text-base-px));
  margin-bottom: 12px;
}
.chd-donation-container .split-container button {
  padding: var(--chd-button-padding-v, 16px) var(--chd-button-padding-h, 32px);
  border-radius: var(--chd-radius-button);
  border: var(--chd-button-border-width) solid var(--chd-primary-color);
  background-color: var(--chd-primary-color);
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--chd-font-weight-button);
  color: var(--chd-primary-text-color);
  font-size: max(16px, var(--chd-button-font-size-px));
  font-family: var(--chd-button-font-family);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  width: 100%;
}
.chd-donation-container .split-container button:hover {
  background-color: var(--chd-primary-hover);
  border-color: var(--chd-primary-hover);
}
.chd-donation-container .split-container button span {
  font-weight: var(--chd-font-weight-button);
  color: var(--chd-primary-text-color);
  font-size: max(16px, var(--chd-button-font-size-px));
}
.chd-donation-container .split-container button img {
  margin-left: 10px;
  max-width: 24px;
  max-height: 24px;
}
.chd-donation-container #donation-back-button {
  background-color: var(--chd-secondary-color);
  color: var(--chd-secondary-text-color);
  border-color: var(--chd-secondary-color);
  cursor: pointer;
}
.chd-donation-container #donation-back-button:hover {
  background-color: var(--chd-secondary-hover);
  border-color: var(--chd-secondary-hover);
}
.chd-donation-container #donation-back-button span {
  color: var(--chd-secondary-text-color);
}
.chd-donation-container #donation-back-button img {
  margin-left: 0;
  margin-right: 10px;
  transform: rotate(180deg);
  max-width: 24px;
  max-height: 24px;
}
.chd-donation-container .payment-fields .field-wrap ~ .field-wrap {
  margin-top: 20px;
}
.chd-donation-container .payment-fields .field-wrap label {
  display: block;
  font-weight: var(--chd-form-label-weight);
  font-size: max(16px, var(--chd-font-form-label-px));
  color: var(--chd-form-label-color);
  margin-bottom: 4px;
}
.chd-donation-container .payment-fields .field-wrap input, .chd-donation-container .payment-fields .field-wrap select {
  padding: var(--chd-input-padding-v, 10px) var(--chd-input-padding-h, 14px);
  width: 100%;
  border-radius: var(--chd-radius-md, 8px);
  border: var(--chd-input-border-width, 1px) solid var(--chd-form-border);
  background-color: var(--chd-form-bg);
  color: var(--chd-form-text-color);
  font-size: max(16px, var(--chd-font-input-text-px));
  font-weight: var(--chd-form-input-weight);
}
.chd-donation-container .payment-fields .field-wrap input:focus, .chd-donation-container .payment-fields .field-wrap select:focus {
  outline: none;
  border-color: var(--chd-form-border-focus);
}
.chd-donation-container .gift-aid h3, .chd-donation-container .sign-up h3 {
  font-size: var(--chd-heading-3-px);
  font-family: var(--chd-font-heading);
  font-weight: var(--chd-font-weight-heading);
  color: var(--chd-text-primary, #171717);
  margin-bottom: var(--chd-space-md);
  margin-top: 0;
}

.chd-donation-container .gift-aid,
.chd-donation-container .sign-up {
  margin-top: 32px;
}

.chd-donation-container .gift-aid p,
.chd-donation-container .sign-up p {
  color: var(--chd-form-text-color, #171717);
  font-size: max(16px, var(--chd-text-base-px));
  line-height: 1.5;
}

/* Toggle Switch Styles */
.chd-donation-container .toggle-wrap,
.chd-action-donate-container .toggle-wrap,
.donate-step .toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 16px;
}

.chd-donation-container .toggle-wrap .toggle-label,
.chd-action-donate-container .toggle-wrap .toggle-label,
.donate-step .toggle-wrap .toggle-label {
  font-size: max(16px, var(--chd-text-base-px));
  color: var(--chd-form-text-color, #171717);
  flex: 1;
}

.chd-donation-container .toggle-switch,
.chd-action-donate-container .toggle-switch,
.donate-step .toggle-switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 36px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}

.chd-donation-container .toggle-switch input[type="checkbox"],
.chd-action-donate-container .toggle-switch input[type="checkbox"],
.donate-step .toggle-switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.chd-donation-container .toggle-slider,
.chd-action-donate-container .toggle-slider,
.donate-step .toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--chd-toggle-off-bg, #e5e7eb);
  border-radius: 18px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  padding: 2px;
}

.chd-donation-container .toggle-slider::before,
.chd-action-donate-container .toggle-slider::before,
.donate-step .toggle-slider::before {
  content: "";
  position: absolute;
  height: 32px;
  width: 32px;
  left: 2px;
  bottom: 2px;
  background-color: var(--chd-toggle-knob-color, #ffffff);
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.chd-donation-container .toggle-text,
.chd-action-donate-container .toggle-text,
.donate-step .toggle-text {
  position: absolute;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: all 0.3s ease;
  z-index: 1;
  user-select: none;
  top: 50%;
  transform: translateY(-50%);
}

.chd-donation-container .toggle-text-off,
.chd-action-donate-container .toggle-text-off,
.donate-step .toggle-text-off {
  right: 12px;
  color: var(--chd-toggle-off-text, #6b7280);
}

.chd-donation-container .toggle-text-on,
.chd-action-donate-container .toggle-text-on,
.donate-step .toggle-text-on {
  left: 12px;
  color: var(--chd-toggle-on-text, #ffffff);
  opacity: 0;
}

.chd-donation-container .toggle-switch input[type="checkbox"]:checked + .toggle-slider,
.chd-action-donate-container .toggle-switch input[type="checkbox"]:checked + .toggle-slider,
.donate-step .toggle-switch input[type="checkbox"]:checked + .toggle-slider {
  background-color: var(--chd-toggle-on-bg, #10b981);
}

.chd-donation-container .toggle-switch input[type="checkbox"]:checked + .toggle-slider::before,
.chd-action-donate-container .toggle-switch input[type="checkbox"]:checked + .toggle-slider::before,
.donate-step .toggle-switch input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(44px);
}

.chd-donation-container .toggle-switch input[type="checkbox"]:checked + .toggle-slider .toggle-text-off,
.chd-action-donate-container .toggle-switch input[type="checkbox"]:checked + .toggle-slider .toggle-text-off,
.donate-step .toggle-switch input[type="checkbox"]:checked + .toggle-slider .toggle-text-off {
  opacity: 0;
}

.chd-donation-container .toggle-switch input[type="checkbox"]:checked + .toggle-slider .toggle-text-on,
.chd-action-donate-container .toggle-switch input[type="checkbox"]:checked + .toggle-slider .toggle-text-on,
.donate-step .toggle-switch input[type="checkbox"]:checked + .toggle-slider .toggle-text-on {
  opacity: 1;
}

.chd-donation-container .toggle-switch:hover .toggle-slider,
.chd-action-donate-container .toggle-switch:hover .toggle-slider,
.donate-step .toggle-switch:hover .toggle-slider {
  box-shadow: 0 0 0 3px rgba(var(--chd-toggle-focus-rgb, 16, 185, 129), 0.1);
}

.chd-donation-container .toggle-switch input[type="checkbox"]:focus + .toggle-slider,
.chd-action-donate-container .toggle-switch input[type="checkbox"]:focus + .toggle-slider,
.donate-step .toggle-switch input[type="checkbox"]:focus + .toggle-slider {
  box-shadow: 0 0 0 3px rgba(var(--chd-toggle-focus-rgb, 16, 185, 129), 0.2);
}

/* Validation Error Styles */
.validation-error {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-error {
  background-color: var(--chd-color-error, #f8d7da);
  border: var(--chd-border-width-error, 1px) solid var(--chd-color-error-border, #f5c6cb);
  border-radius: var(--chd-radius-sm, 4px);
  color: var(--chd-color-error-text, #721c24);
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: max(16px, var(--chd-text-base-px));
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-error:before {
  content: "⚠";
  font-size: 24px;
  flex-shrink: 0;
}

.field-error {
  display: block;
  color: var(--chd-color-error-text, #721c24);
  font-size: max(14px, var(--chd-text-sm-px, 14px));
  margin-top: 6px;
  font-weight: 500;
}

.error-field {
  border-color: var(--chd-color-error-border, #f5c6cb) !important;
  background-color: var(--chd-color-error, #f8d7da) !important;
}

.error-field:focus {
  outline: 2px solid var(--chd-color-error-border, #f5c6cb) !important;
  outline-offset: 2px;
  border-color: var(--chd-color-error-border, #f5c6cb) !important;
}

/* Donation success message box */
.donation-message,
.donation-message--success,
.donation-message--error {
  padding: 30px;
  border-radius: var(--chd-radius-md, 8px);
  margin: 0;
  text-align: center;
  line-height: 1.6;
}

.donation-message--success {
  background: var(--chd-color-success, #d4edda);
  color: var(--chd-color-success-text, #155724);
  border: 1px solid var(--chd-color-success-border, #c3e6cb);
}

.donation-message--error {
  background: var(--chd-color-error, #f8d7da);
  color: var(--chd-color-error-text, #721c24);
  border: 1px solid var(--chd-color-error-border, #f5c6cb);
}

/* Donation success message buttons */
.donation-message-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 16px 0 0 0;
  padding: 0;
}

.donation-message-actions .button {
  display: block;
  width: 100%;
  padding: var(--chd-button-padding-v, 16px) var(--chd-button-padding-h, 32px);
  border-radius: var(--chd-radius-button, 8px);
  font-size: max(16px, var(--chd-text-base-px, 16px));
  font-weight: var(--chd-button-font-weight, 600);
  font-family: var(--chd-font-body, inherit);
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: var(--chd-button-border-width, 2px) solid transparent;
  box-sizing: border-box;
  margin: 0 !important;
}

.donation-message-actions .button--primary {
  background: var(--chd-primary-color, #1e40af);
  color: var(--chd-primary-text-color, #ffffff);
  border-color: var(--chd-primary-color, #1e40af);
  padding: var(--chd-button-padding-v, 16px) var(--chd-button-padding-h, 32px);
}

.donation-message-actions .button--primary:hover {
  opacity: 0.9;
}

.donation-message-actions .button--secondary {
  background: transparent;
  color: var(--chd-primary-color, #1e40af);
  border-color: var(--chd-primary-color, #1e40af);
  padding: var(--chd-button-padding-v, 16px) var(--chd-button-padding-h, 32px);
}

.donation-message-actions .button--secondary:hover {
  background: var(--chd-primary-color, #1e40af);
  color: var(--chd-primary-text-color, #ffffff);
}

@media (min-width: 600px) {
  .donation-message-actions {
    flex-direction: row;
    gap: 16px;
  }

  .donation-message-actions .button {
    flex: 1;
  }
}

/* Mobile: timeframe buttons wrap and reduce padding */
@media (max-width: 600px) {
  .chd-donation-container .split-container .form-wrap .timeframe-wrap {
    flex-wrap: wrap;
    gap: 8px;
  }
  .chd-donation-container .split-container .form-wrap .timeframe-wrap label ~ label {
    margin-left: 0;
  }
  .chd-donation-container .split-container .form-wrap .timeframe-wrap label .description {
    padding: 12px 20px;
  }
  .chd-donation-container .split-container .form-wrap .donation-amounts li label .description {
    padding: 12px 20px;
  }
  .chd-donation-container .split-container .form-wrap .donation-amounts .custom-amount-wrap #custom-amount {
    padding: 12px 16px;
  }
  .chd-donation-container .split-container .form-wrap {
    padding: 20px 16px;
  }
}

/*# sourceMappingURL=donation-form.css.map */