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

  font-family: var(--font-helvetica-neue);
  position: relative;
  color: white;
  padding: 20px 0;
  background-size: cover;
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100%;
  margin-top: 90px;

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

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

  h1 {
    font-family: var(--font-heading);
  }

  /* Text inputs, textareas, and selects - exclude checkbox/radio */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  textarea,
  select {
    color: white;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px !important;
    font-size: 16px;
    line-height: 22px;
    width: 100%;
    background: transparent;
  }

  /* 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: 3px solid rgba(91, 61, 248, 0.8);
  }

  /* Invalid styles - only show after form submission (when form has .invalid or .failed class) */
  .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: 3px solid #f43098;

    &:placeholder-shown {
      color: #f43098;
    }

    &:not(:placeholder-shown) {
      color: white;
    }
  }

  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 white;
    background: transparent;
    position: relative;

    /* Unselected state */
    &:not(:checked) {
      background: transparent;
      border-color: white;
    }

    /* Selected state */
    &:checked {
      background: transparent;
      border-color: white;

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

    /* Focus state */
    &:focus {
      outline: none;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

    /* Disabled state */
    &:disabled {
      background: transparent;
      border-color: rgba(255, 255, 255, 0.5);
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

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

    /* Unselected state */
    &:not(:checked) {
      background: transparent;
      border-color: white;
    }

    /* Selected state */
    &:checked {
      background: white;
      border-color: white;

      &::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='black'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
    }

    /* Focus state */
    &:focus {
      outline: none;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

    /* Disabled state */
    &:disabled {
      background: transparent;
      border-color: rgba(255, 255, 255, 0.5);
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  input[type="submit"] {
    margin-top: 20px;
    background: #3332ff;
    border: 2px solid #3332ff;
    border-radius: 40px;
    color: white;
    padding: 12px 40px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 3px;
    width: auto;
    text-transform: uppercase;

    &:hover {
      background: transparent;
      border: 2px solid white;
      color: white;
    }
  }

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

  .wpcf7 {
    margin: 0 !important;
    max-width: 1000px !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: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    transition: all 0.2s ease;
    min-height: 48px;

    &:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.3);
    }
  }

  .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(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    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 14px 1px rgba(0, 0, 0, 0.12);
  }

  .wpcf7 form.invalid .wpcf7-response-output,
  .wpcf7 form.unaccepted .wpcf7-response-output {
    border: none;
    font-family: var(--font-helvetica-neue-regular);
    color: #f43098;
    font-weight: bold;
    padding: 0;
    margin-top: 11px;
    margin: 0;
  }

  .wpcf7-response-output {
    border: none;
    font-family: var(--font-helvetica-neue-regular);
    color: #0e73e8;
    font-weight: bold;
    padding: 0;
    margin-top: 11px;
  }

  .wpcf7 form.sent .wpcf7-response-output {
    border: none !important;
  }

  .wpcf7-list-item-label {
    font-size: 14px;
    min-width: 200px;
  }

  label {
    color: #bababa;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
  }

  .wpcf7-form-control-wrap {
    position: relative;
    display: block;
  }

  /* Error tip inside field - only for text inputs, textareas, and selects */
  input[type="text"] ~ .wpcf7-not-valid-tip,
  input[type="email"] ~ .wpcf7-not-valid-tip,
  input[type="tel"] ~ .wpcf7-not-valid-tip,
  input[type="url"] ~ .wpcf7-not-valid-tip,
  input[type="number"] ~ .wpcf7-not-valid-tip,
  input[type="date"] ~ .wpcf7-not-valid-tip,
  input[type="time"] ~ .wpcf7-not-valid-tip,
  input:not([type]) ~ .wpcf7-not-valid-tip,
  textarea ~ .wpcf7-not-valid-tip,
  select ~ .wpcf7-not-valid-tip {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #f43098;
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 1;
    line-height: 22px;
  }

  /* Standard error tip positioning for radio/checkbox */
  input[type="radio"] ~ .wpcf7-not-valid-tip,
  input[type="checkbox"] ~ .wpcf7-not-valid-tip {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    font-size: 14px;
    text-align: left;
    margin-top: 5px;
    color: #f43098;
  }

  /* General error tip color - pink for all */
  .wpcf7-not-valid-tip {
    color: #f43098;
  }

  /* 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(255, 255, 255, 0.2) !important;
    color: white !important;
  }

  /* Error tip display - only after form submission */
  .wpcf7
    form.invalid
    input[type="text"].wpcf7-not-valid:placeholder-shown
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.invalid
    input[type="email"].wpcf7-not-valid:placeholder-shown
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.invalid
    input[type="tel"].wpcf7-not-valid:placeholder-shown
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.invalid
    input:not([type]).wpcf7-not-valid:placeholder-shown
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.invalid
    textarea.wpcf7-not-valid:placeholder-shown
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.failed
    input[type="text"].wpcf7-not-valid:placeholder-shown
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.failed
    input[type="email"].wpcf7-not-valid:placeholder-shown
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.failed
    input[type="tel"].wpcf7-not-valid:placeholder-shown
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.failed
    input:not([type]).wpcf7-not-valid:placeholder-shown
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.failed
    textarea.wpcf7-not-valid:placeholder-shown
    ~ .wpcf7-not-valid-tip {
    display: block;
  }

  .wpcf7
    form.invalid
    input[type="text"].wpcf7-not-valid:not(:placeholder-shown)
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.invalid
    input[type="email"].wpcf7-not-valid:not(:placeholder-shown)
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.invalid
    input[type="tel"].wpcf7-not-valid:not(:placeholder-shown)
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.invalid
    input:not([type]).wpcf7-not-valid:not(:placeholder-shown)
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.invalid
    input[type="text"].wpcf7-not-valid[value]:not([value=""])
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.invalid
    input[type="email"].wpcf7-not-valid[value]:not([value=""])
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.invalid
    textarea.wpcf7-not-valid:not(:placeholder-shown)
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.failed
    input[type="text"].wpcf7-not-valid:not(:placeholder-shown)
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.failed
    input[type="email"].wpcf7-not-valid:not(:placeholder-shown)
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.failed
    input[type="tel"].wpcf7-not-valid:not(:placeholder-shown)
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.failed
    input:not([type]).wpcf7-not-valid:not(:placeholder-shown)
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.failed
    input[type="text"].wpcf7-not-valid[value]:not([value=""])
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.failed
    input[type="email"].wpcf7-not-valid[value]:not([value=""])
    ~ .wpcf7-not-valid-tip,
  .wpcf7
    form.failed
    textarea.wpcf7-not-valid:not(:placeholder-shown)
    ~ .wpcf7-not-valid-tip {
    display: none;
  }

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

  .p-section {
    padding-bottom: 98px;
    padding-top: 168px;
  }

  .subtitle {
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 15px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 2px;
  }

  .title-note {
    font-size: 14px;
    line-height: 16px;
  }

  .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-helvetica-neue);
      color: white;
      background: transparent;
      border: none;
      padding: 0;
      margin: 0;
    }
  }

  .select2-container--default {
    .select2-selection--multiple {
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 4px;
      min-height: 40px;
      background: rgba(255, 255, 255, 0.1);
      padding: 4px 8px;

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

        .select2-selection__choice__display {
          font-size: 14px;
          font-family: var(--font-helvetica-neue);
          color: black;
        }

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

          &:hover {
            color: #333;
          }
        }
      }

      .select2-selection__rendered {
        padding: 0;
      }
    }

    .select2-selection--single {
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 4px;
      height: 40px;
      background: rgba(255, 255, 255, 0.1);

      .select2-selection__rendered {
        color: white;
        line-height: 38px;
        padding-left: 9px;
        font-size: 16px;
        font-family: var(--font-helvetica-neue);
      }

      .select2-selection__arrow {
        height: 38px;
        right: 8px;

        b {
          border-color: white transparent transparent transparent;
        }
      }
    }

    &.select2-container--open {
      .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent white transparent;
      }
    }
  }
}

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

    h1 {
      word-break: break-word;
      overflow-wrap: break-word;
      text-align: center;
    }

    .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: 100px;
      padding-bottom: 60px;
    }

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

/* Select2 Dropdown - Global styles (dropdown is appended to body) */
.select2-dropdown {
  background: black !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.select2-results__option {
  font-size: 16px !important;
  font-family: var(--font-helvetica-neue) !important;
  color: white !important;
  padding: 10px 12px !important;
  background: transparent !important;
}

.select2-results__option[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

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

.select2-search--dropdown {
  padding: 8px !important;
  background: #0a0a2e !important;
}

.select2-search--dropdown .select2-search__field {
  font-size: 16px !important;
  font-family: var(--font-helvetica-neue) !important;
  color: white !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}

.select2-search--dropdown .select2-search__field::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}
