/* Define CSS variables for easy customization */
:root {
    --input-padding: 0.5rem 0.75rem;
    --input-border-radius: 8px;
    --input-border-color: #ced4da;
    --input-focus-border-color: #a290e7;
    --input-focus-box-shadow: 0 0 0 0.2rem #a290e78c;
    --input-background-color: #fff;
    --input-color: #495057;
    --label-color: #4a4a4a;
    --form-margin-bottom: 1rem;
    --button-padding: 14px 24px;
    --button-border-radius: 9999px;
    --button-background-color: #4125a8;
    --button-color: #fff;
    --button-hover-background-color: #5635ca;
}


/* ACF Form styling */
.acf-form {
  background: white;
  border-radius: 20px;
  border: 1px solid #f0f0f0;
  padding: .5rem .2rem;

  @media (min-width: 768px) {
    padding: 1.5rem 1rem;
  }

  .form-intro {
    padding-top: 0 !important;
  }

  p {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.5;
  }

  .af-page-wrap {
    border: 1px solid #dadada;
    box-shadow: 0 0 5px #f6f6f6;
    margin: 0 16px 24px;
  }

  .af-page-button .title {
    font-weight: 600;
    text-transform: uppercase;
  }

  .af-page-button.enabled {
    background: #f8f8f8;
  }
  .af-page-button.enabled:after {
    border-left-color: #f8f8f8;
  }

  .af-page-button.current {
    color: var(--bde-headings-color);
    background: #96fafa;
  }

  .af-page-button.current:after {
    border-left-color: #96fafa;
  }

  .acf-fields > .acf-field {
    border: unset;
  }

  .acf-field[data-width] + .acf-field[data-width] {
      border: unset;
  }

  .acf-field .acf-label label{
      display: block;
      margin-bottom: 0.5rem;
      color: var(--label-color);
      font-weight: 500;
      font-size: 16px;
  }

  .af-input.acf-input {
    display: flex;
    flex-direction: column;

    .acf-input-append {
      order: 3;
      border: unset;
      background: unset;
    }
  }

  .af-input.acf-input label {
    font-size: 14px;
    font-weight: 400;
  }

  .af-field-instructions {
    font-size: 14px;
    color: #3c3c3c;
  }

  .acf-fields.-border {
    border: unset;

    > .acf-field {
      padding: 0;
    }
  }

  .acf-input-wrap {
    overflow: unset;
  }

  ul.acf-radio-list, ul.acf-checkbox-list {
    border: unset !important;
    border-radius: unset !important;
  }

  ul.acf-radio-list label, ul.acf-checkbox-list label {
    cursor: pointer;
  }

  ul.acf-radio-list input, ul.acf-checkbox-list input {
    cursor: pointer;
  }

  .acf-input-wrap input[type="text"],
  .acf-input-wrap input[type="email"],
  .acf-input-wrap input[type="password"],
  .acf-input-wrap input[type="number"],
  .acf-input-wrap select,
  .acf-input-wrap textarea {
      display: block;
      width: 100%;
      padding: var(--input-padding);
      font-size: 1rem;
      line-height: 1.5;
      color: var(--input-color);
      background-color: var(--input-background-color);
      background-clip: padding-box;
      border: 1px solid var(--input-border-color);
      border-radius: var(--input-border-radius);
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  .acf-input-wrap input[type="text"]:focus,
  .acf-input-wrap input[type="email"]:focus,
  .acf-input-wrap input[type="password"]:focus,
  .acf-input-wrap input[type="number"]:focus,
  .acf-input-wrap select:focus,
  .acf-input-wrap textarea:focus {
      border-color: var(--input-focus-border-color);
      outline: 0;
      box-shadow: var(--input-focus-box-shadow);
  }

  .acf-input-wrap textarea {
      height: auto;
      resize: vertical;
  }

  /* Button styling */
  .af-previous-button,
  .af-next-button,
  .acf-button,
  .af-submit-button {
      display: inline-block;
      font-weight: 500;
      color: var(--button-color);
      text-align: center;
      vertical-align: middle;
      user-select: none;
      background-color: var(--button-background-color);
      border: unset;
      padding: var(--button-padding);
      font-size: 1rem;
      line-height: 16px;
      border-radius: var(--button-border-radius);
      transition: all var(--bde-transition-duration) ease-in-out;
  }

  .af-previous-button:hover,
  .af-next-button:hover,
  .acf-button:hover ,
  .af-submit-button:hover {
      color: var(--bde-button-secondary-text-color-hover);
      background-color: var(--bde-button-secondary-background-color-hover);
      border-color: transparent;
      cursor: pointer;
      transform: scale(1.1);
  }

  .af-previous-button[disabled],
  .af-next-button[disabled],
  .acf-button[disabled],
  .af-submit-button[disabled] {
      opacity: .5;
  }

  ul.acf-radio-list li, ul.acf-checkbox-list li {
      margin-bottom: 4px;
  }

  .acf-hl > li {
    margin-right: 30px;

    label {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    input {
      margin: 0 0 6px !important;
    }
  }


  /* Select2 styling */
  .select2-container .select2-selection--single {
      height: auto;
      padding: var(--input-padding);
      font-size: 1rem;
      line-height: 1.5;
      color: var(--input-color);
      background-color: var(--input-background-color);
      border: 1px solid var(--input-border-color);
      border-radius: var(--input-border-radius);
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  .select2-container.-acf .select2-selection {
    border-color: var(--input-border-color);
}

  .select2-container .select2-selection--single .select2-selection__rendered {
      padding: 0;
      line-height: 1.5;
  }

  .select2-container .select2-selection--single .select2-selection__arrow {
      height: 100%;
      right: 0.75rem;
  }

  .select2-container .select2-selection--single:focus,
  .select2-container .select2-selection--single .select2-selection__rendered:focus {
      border-color: var(--input-focus-border-color);
      outline: 0;
      box-shadow: var(--input-focus-box-shadow);
  }

  .select2-container .select2-selection--multiple {
      padding: var(--input-padding);
      font-size: 1rem;
      line-height: 1.5;
      color: var(--input-color);
      background-color: var(--input-background-color);
      border: 1px solid var(--input-border-color);
      border-radius: var(--input-border-radius);
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  .select2-container .select2-selection--multiple .select2-selection__rendered {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem;
  }

  .select2-container .select2-selection--multiple .select2-selection__choice {
      background-color: var(--button-background-color);
      border: 1px solid var(--button-border-color);
      color: var(--button-color);
      padding: 0.25rem 0.5rem;
      border-radius: var(--button-border-radius);
  }

  .select2-container .select2-selection--multiple .select2-selection__choice__remove {
      color: var(--button-color);
      margin-left: 0.25rem;
  }

  .select2-container .select2-selection--multiple:focus,
  .select2-container .select2-selection--multiple .select2-selection__rendered:focus {
      border-color: var(--input-focus-border-color);
      outline: 0;
      box-shadow: var(--input-focus-box-shadow);
  }

  /* Radio Button Field Custom Content */
  .af-field-type-radio.has-before-after-content .af-input.acf-input {
    li:last-child {
      margin-right: 0;
    }

    .radio-content-wrap {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.5rem;

      @media screen and (min-width: 768px) {
        gap: 1.8rem;
        flex-wrap: unset;
        justify-content: unset;
      }
    }

    .radio-before-content,
    .radio-after-content {
      font-size: 11px;
      background-color: #efefef;
      line-height: 1.1;
      padding: 2px 6px;
      position: relative;
      display: flex;
      align-items: center;
      max-width: calc(50% - 30px);
      min-height: 24px;

      @media screen and (min-width: 768px) {
        max-width: unset;
      }

      &:after {
        content: "";
        position: absolute;
        right: -16px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left: 16px solid #efefef;
      }
    }

    .radio-after-content {
      text-align: right;
    }

    .radio-after-content:after {
      right: unset;
      left: -16px;
      border-right: 16px solid #efefef;
      border-left: unset;
    }

    .acf-radio-wrap {
      margin-top: 6px;
      order: 1;
      width: 100%;
      text-align: center;

      @media screen and (min-width: 768px) {
        order: unset;
        width: unset;
      }

      .acf-radio-list {
        display: flex;
        justify-content: space-between;
        gap: 0.6rem;

        @media screen and (min-width: 768px) {
          gap: 1rem;
        }

        &:before,
        &:after {
          content:unset;
        }

        li {
          margin: 0;
        }
      }
    }
  }

  /* Error message styling */
  .acf-notice {
    margin: 5px 16px 15px;

    .acf-icon.-cancel:before {
      margin: 2px 0 0 -1px;
    }
  }

  /* Success message styling */
  .af-success {
    color: var(--bde-headings-color);
    font-size: 18px;
    padding: 1rem;
    text-align: center;
    line-height: 1.4;
  }

  /* Page Message custom class */
  .page-message.af-field-type-message {
    padding-bottom: 0.5rem;

    .af-label.acf-label label{
      font-size: 18px;
      font-weight: 600;
      color: var(--bde-headings-color);
    }
  }
}

/* Custom Form styling */
#pe-program-survey-form {
  .acf-form-fields {

    @media screen and (min-width: 768px) {
      display: flex;
      flex-wrap: wrap;
    }


    > * {
      width: 100%;

      @media screen and (max-width: 767px) {
      width: 100% !important;
      }
    }

    .form-row {
      padding: 16px;



      label {
        margin-bottom: .5rem;
        display: inline-block;
      }
    }
  }

  .af-submit {
    padding: 1rem;
  }

  .form-result-error {
    padding: 12px;
  }
}

/* Mobile Form styling */
@media screen and (max-width: 767px) {
  .acf-form .acf-fields > .acf-field {
      border: unset;
      width: 100% !important;
  }
}