/* Fluent Forms Global Styling (Raj)
-------------------------------------------------------------- */
:root {
  --global-nos-form-default: var(--global-palette4); /* Kadence Strong Text */
  --global-nos-form-required: var(--global-palette1); /* Kadence Accent Alt */
  --global-nos-form-invalid: var(--global-palette13); /* Kadence Notices accent-colour Alert */
  --global-nos-form-valid: var(--global-palette11); /* Kadence Notices - Success */
  --global-nos-form-accent-colour: var(--global-palette2); /* Kadence Accent Alt */

  /* Overwrite Fluent Forms default variables */
  --fluentform-danger: var(--global-nos-form-invalid);
}

div.fluentform.ff-default .ff-t-container {
  margin-bottom: 0px; /* Remove default bottom margin */
}

form input {
  accent-color: var(--global-nos-form-accent-colour); /* Accent colour for checkboxes and radio buttons */
}

/* Required Fields */
.fluentform.ff-default .ff-el-input--label.ff-el-is-required + .ff-el-input--content input,
.fluentform.ff-default .ff-el-input--label.ff-el-is-required + .ff-el-input--content textarea {
  border-left: 4px solid var(--global-nos-form-required);
}
/* Required Fields - error state */
.fluentform.ff-default .ff-el-is-error .ff-el-input--label.ff-el-is-required + .ff-el-input--content input,
.fluentform.ff-default .ff-el-is-error .ff-el-input--label.ff-el-is-required + .ff-el-input--content textarea {
  border-left: 4px solid var(--global-nos-form-invalid);
}

/* Non-Required Fields */
.fluentform.ff-default .ff-el-input--content input {
  border-left: 4px solid var(--global-nos-form-default);
}
/* Invalid Fields */
.fluentform.ff-default .ff-el-input--label.ff-el-is-required + .ff-el-input--content input:invalid,
.fluentform.ff-default .ff-el-input--content input:invalid {
  border-left: 4px solid var(--global-nos-form-invalid);
}

/* Fields with Focus */
.fluentform.ff-default .ff-el-form-control:focus {
  border-color: var(--global-nos-form-default);
}

/*** Fluent Forms - Custom Styles for Current Website ***/
.fluentform .pcn-form .ff-el-group.ff_list_inline {
  margin-bottom: 40px;
}
.fluentform .pcn-form .ff-el-group.ff_list_inline .ff-el-input--label {
  margin-top: 20px;
  margin-bottom: 20px;
}
.fluentform .pcn-form label.ff-el-image-input-src {
  background-size: contain;
  height: 100px;
  width: 150px;
}
.fluentform .pcn-form .ff-el-form-check.ff-el-form-check-.ff-el-image-holder .ff-el-form-check-label {
  display: none;
}

.fluentform .pcn-form .ff-el-group .ff-el-form-check.ff-el-form-check-.ff-el-image-holder {
  padding: 1rem;
  border: 2px solid var(--global-palette1);
  border-radius: 10px;
  margin-bottom: 2rem;
}
.fluentform .pcn-form .ff_el_checkable_photo_holders {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
}
.fluentform .pcn-form .ff-el-form-check.ff-el-form-check-.ff-el-image-holder.ff_item_selected {
  border: 2px solid var(--global-palette10);
  background-color: var(--global-palette7);
  position: relative;
}
.fluentform .pcn-form .ff-el-form-check.ff-el-form-check-.ff-el-image-holder.ff_item_selected::after {
  content: "✓";
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: var(--global-palette10);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Donation Forms */
.fluentform .pcn-donation-form .ff-el-group.ff_list_buttons .ff-el-form-check label:focus-within span {
  background-color: var(--global-palette1);
}

.fluentform .pcn-donation-form .pcn-donation-option .ff-el-input--content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fluentform .pcn-donation-form .pcn-form-message {
  border: 1px solid var(--global-palette1);
  background: var(--global-palette8);
  border-radius: 10px;
  padding: 1rem;
}
.fluentform .pcn-donation-form .ff-el-group.pcn-donation-option.ff_list_buttons .ff-el-form-check,
.fluentform .pcn-donation-form .ff-el-group.pcn-donation-option.ff_list_buttons .ff-el-form-check label,
.fluentform .pcn-donation-form .ff-el-group.pcn-donation-option.ff_list_buttons .ff-el-form-check label > span {
  width: 100% !important;
  display: block;
}
.fluentform .pcn-donation-form .ff-el-group.pcn-donation-option.ff_list_buttons .ff-el-form-check label > span {
  border: 1px solid var(--global-palette1);
  border-radius: 10px;
  text-align: center;
}

/* Action Columns - second column is visible when option in first column is selected */
.fluentform .pcn-form .pcn-action-column .ff-t-cell.ff-t-column-2 .ff_cond_v {
  padding: 20px;
  background-color: var(--global-palette2);
}
.fluentform .ff-message-success {
  border: none;
  box-shadow: none;
  margin-bottom: 1.5rem;
}