.form-template {
  .d-flex {
    gap: 20px;
  }

  font-family: var(--font-primary);
  position: relative;
  padding: 20px 0;
  background: var(--color-bg-light);
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100%;
  margin-top: 50px;

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  > * {
    position: relative;
    z-index: 1;
    max-width: 100%;
  }

  h1 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
  }

  .subtitle {
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-secondary);
    font-weight: 600;
    margin-bottom: 8px;
  }

  .title-note {
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-secondary);
  }

  /* Text inputs, textareas, and selects - exclude checkbox/radio */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  textarea,
  select {
    color: var(--color-secondary);
    padding: 12px 16px;
    border: 1px solid rgba(0, 167, 225, 0.3);
    border-radius: 8px !important;
    font-size: 16px;
    line-height: 1.4;
    width: 100%;
    background: white;
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  input:not([type="checkbox"]):not([type="radio"]):not(
      [type="submit"]
    )::placeholder,
  textarea::placeholder {
    color: #999;
  }

  /* Focus styles - only for text inputs, textareas, and selects */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(242, 169, 0, 0.15);
  }

  /* Invalid styles - only show after form submission */
  .wpcf7 form.invalid input[type="text"].wpcf7-not-valid,
  .wpcf7 form.invalid input[type="email"].wpcf7-not-valid,
  .wpcf7 form.invalid input[type="tel"].wpcf7-not-valid,
  .wpcf7 form.invalid input[type="url"].wpcf7-not-valid,
  .wpcf7 form.invalid input[type="number"].wpcf7-not-valid,
  .wpcf7 form.invalid input[type="date"].wpcf7-not-valid,
  .wpcf7 form.invalid input:not([type]).wpcf7-not-valid,
  .wpcf7 form.invalid textarea.wpcf7-not-valid,
  .wpcf7 form.invalid select.wpcf7-not-valid,
  .wpcf7 form.failed input[type="text"].wpcf7-not-valid,
  .wpcf7 form.failed input[type="email"].wpcf7-not-valid,
  .wpcf7 form.failed input[type="tel"].wpcf7-not-valid,
  .wpcf7 form.failed input[type="url"].wpcf7-not-valid,
  .wpcf7 form.failed input[type="number"].wpcf7-not-valid,
  .wpcf7 form.failed input[type="date"].wpcf7-not-valid,
  .wpcf7 form.failed input:not([type]).wpcf7-not-valid,
  .wpcf7 form.failed textarea.wpcf7-not-valid,
  .wpcf7 form.failed select.wpcf7-not-valid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    flex-shrink: 0;
    margin-right: 12px;
  }

  /* Radio Button Styles */
  input[type="radio"] {
    border-radius: 50%;
    border: 2px solid var(--color-secondary);
    background: white;
    position: relative;

    &:checked {
      border-color: var(--color-primary);

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--color-primary);
      }
    }

    &:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(242, 169, 0, 0.2);
    }
  }

  /* Checkbox Styles */
  input[type="checkbox"] {
    border-radius: 4px;
    border: 2px solid var(--color-secondary);
    background: white;
    position: relative;

    &:checked {
      background: var(--color-primary);
      border-color: var(--color-primary);

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 11px;
        height: 11px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2907 0.142029C10.4769 0.26616 10.6061 0.459157 10.65 0.678571C10.6939 0.897984 10.6488 1.12584 10.5247 1.31203L4.8997 9.74953C4.83042 9.8533 4.73899 9.94042 4.63199 10.0046C4.52499 10.0688 4.40508 10.1084 4.28091 10.1207C4.15674 10.133 4.03139 10.1175 3.9139 10.0755C3.79641 10.0335 3.6897 9.96599 3.60145 9.87778L0.226453 6.50278C0.0774133 6.34283 -0.00372529 6.13128 0.000131453 5.91269C0.0039882 5.6941 0.0925392 5.48554 0.247129 5.33095C0.401718 5.17637 0.610277 5.08781 0.828865 5.08396C1.04745 5.0801 1.25901 5.16124 1.41895 5.31028L4.06608 7.9574L9.1207 0.374904C9.24501 0.188916 9.43809 0.0599051 9.65749 0.0162358C9.87689 -0.0274335 10.1047 0.0178136 10.2907 0.142029Z' fill='white'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
    }

    &:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(242, 169, 0, 0.2);
    }
  }

  input[type="submit"] {
    margin-top: 24px;
    background: var(--color-primary);
    border: none;
    border-radius: 50px;
    color: white;
    padding: 16px 48px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    width: auto;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: #e6951f;
      transform: translateY(-2px);
    }
  }

  .which-meet {
    margin-top: 3px;
    margin-bottom: 15px;
    display: block;
  }

  .wpcf7 {
    margin: 0 !important;
    max-width: 800px !important;
  }

  .wpcf7-checkbox,
  .wpcf7-radio {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-items: stretch;
  }

  .wpcf7-checkbox > span,
  .wpcf7-radio > span {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: white;
    border: 1px solid rgba(0, 167, 225, 0.3);
    border-radius: 8px;
    color: var(--color-secondary);
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    transition: all 0.2s ease;
    min-height: 48px;

    &:hover {
      border-color: var(--color-secondary);
      background: rgba(0, 167, 225, 0.05);
    }
  }

  .wpcf7-checkbox > span:last-child,
  .wpcf7-radio > span:last-child {
    margin-bottom: 0;
  }

  .wpcf7-checkbox > span > input,
  .wpcf7-radio > span > input {
    margin-bottom: 0;
  }

  .wpcf7-checkbox > span > input.wpcf7-free-text,
  .wpcf7-radio > span > input.wpcf7-free-text {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
    margin-bottom: 0;
    padding: 9px;
    border: 1px solid rgba(0, 167, 225, 0.3);
    border-radius: 4px;
    background: white;
    color: var(--color-secondary);
    font-size: 16px;
  }

  /* "Other" option spans that contain free text inputs should be full width */
  .wpcf7-checkbox > span:has(input.wpcf7-free-text),
  .wpcf7-radio > span:has(input.wpcf7-free-text) {
    grid-column: 1 / -1;
  }

  select {
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
  }

  .wpcf7 form.invalid .wpcf7-response-output,
  .wpcf7 form.unaccepted .wpcf7-response-output {
    border: none;
    color: #dc3545;
    font-weight: 600;
    padding: 0;
    margin: 16px 0 0 0;
  }

  .wpcf7-response-output {
    border: none;
    color: var(--color-secondary);
    font-weight: 600;
    padding: 0;
    margin-top: 16px;
  }

  .wpcf7 form.sent .wpcf7-response-output {
    border: none !important;
    color: #28a745;
  }

  .wpcf7-list-item-label {
    font-size: 14px;
    min-width: 200px;
    color: var(--color-secondary);
  }

  label {
    color: var(--color-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    width: 100%;
    text-align: left;
    margin-bottom: 0;
    padding-bottom: 0;
    display: block;

    /* Style required asterisk */
    .wpcf7-required {
      color: var(--color-primary);
    }
  }

  .wpcf7-form-control-wrap {
    position: relative;
    display: block;
    margin-top: 8px;
  }

  /* Hide all line breaks in form */
  p br,
  label br {
    display: none;
  }

  /* Tighten form paragraphs */
  .wpcf7 p {
    margin-bottom: 16px;
  }

  /* Error tip styling */
  .wpcf7-not-valid-tip {
    color: #dc3545;
    font-size: 13px;
    margin-top: 4px;
  }

  /* Hide error tips until form is actually submitted */
  .wpcf7 form:not(.invalid):not(.failed) .wpcf7-not-valid-tip {
    display: none !important;
  }

  /* Reset error border until form is actually submitted */
  .wpcf7 form:not(.invalid):not(.failed) input.wpcf7-not-valid,
  .wpcf7 form:not(.invalid):not(.failed) textarea.wpcf7-not-valid,
  .wpcf7 form:not(.invalid):not(.failed) select.wpcf7-not-valid {
    border: 1px solid rgba(0, 167, 225, 0.3) !important;
  }

  .d-flex div {
    width: 100%;
    display: block;
  }

  .p-section {
    padding-bottom: 80px;
    padding-top: 120px;
  }

  .graphic {
    position: absolute;
    left: -75px;
    transform: translateY(-40%);
    pointer-events: none;

    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }

  .wpcf7-list-item {
    label {
      display: flex;
      align-items: center;
    }
  }

  /* Select2 Styles */
  .select2-container {
    width: 100% !important;

    .select2-search--inline .select2-search__field {
      font-size: 16px;
      font-family: var(--font-primary);
      color: var(--color-secondary);
      background: transparent;
      border: none;
      padding: 0;
      margin: 0;
    }
  }

  .select2-container--default {
    .select2-selection--multiple {
      border: 1px solid rgba(0, 167, 225, 0.3);
      border-radius: 8px;
      min-height: 44px;
      background: white;
      padding: 4px 8px;

      .select2-selection__choice {
        background: var(--color-secondary);
        border: none;
        border-radius: 4px;
        margin: 2px 4px 2px 0;
        color: white;
        font-size: 14px;
        font-family: var(--font-primary);

        .select2-selection__choice__display {
          font-size: 14px;
          font-family: var(--font-primary);
          color: white;
        }

        .select2-selection__choice__remove {
          color: white;
          margin-right: 4px;
          font-weight: bold;
          top: -1.2px;

          &:hover {
            color: rgba(255, 255, 255, 0.8);
          }
        }
      }

      .select2-selection__rendered {
        padding: 0;
      }
    }

    .select2-selection--single {
      border: 1px solid rgba(0, 167, 225, 0.3);
      border-radius: 8px;
      height: 44px;
      background: white;

      .select2-selection__rendered {
        color: var(--color-secondary);
        line-height: 42px;
        padding-left: 16px;
        font-size: 16px;
        font-family: var(--font-primary);
      }

      .select2-selection__arrow {
        height: 42px;
        right: 12px;

        b {
          border-color: var(--color-secondary) transparent transparent
            transparent;
        }
      }
    }

    &.select2-container--open {
      .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent var(--color-secondary) transparent;
      }
    }
  }
}

@media (max-width: 768px) {
  .form-template {
    padding: 0 20px;
    width: 100%;

    h1 {
      font-size: 32px;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    .subtitle,
    .title-note,
    p {
      word-break: break-word;
      overflow-wrap: break-word;
    }

    .wpcf7 {
      width: 100%;
      max-width: 100% !important;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    textarea,
    select {
      max-width: 100%;
    }

    .graphic {
      display: none;
    }

    .container {
      padding-left: 15px;
      padding-right: 15px;
      max-width: 100%;
    }

    .p-section {
      padding-top: 80px;
      padding-bottom: 60px;
    }

    .wpcf7-checkbox,
    .wpcf7-radio {
      grid-template-columns: 1fr;
    }
  }
}

/* Select2 Dropdown - Global styles (dropdown is appended to body) */
.select2-dropdown {
  background: white !important;
  border: 1px solid rgba(0, 167, 225, 0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.select2-results__option {
  font-size: 16px !important;
  font-family: var(--font-primary) !important;
  color: var(--color-secondary) !important;
  padding: 10px 16px !important;
  background: transparent !important;
}

.select2-results__option[aria-selected="true"] {
  background: rgba(0, 167, 225, 0.1) !important;
}

.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected] {
  background: var(--color-secondary) !important;
  color: white !important;
}

.select2-search--dropdown {
  padding: 8px !important;
  background: white !important;
}

.select2-search--dropdown .select2-search__field {
  font-size: 16px !important;
  font-family: var(--font-primary) !important;
  color: var(--color-secondary) !important;
  background: white !important;
  border: 1px solid rgba(0, 167, 225, 0.3) !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}

.select2-search--dropdown .select2-search__field::placeholder {
  color: #999 !important;
}