/* == MARKETO 3-COLUMN FORM OVERRIDES == */

.Col3Form {
  form.mktoForm {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px 15px !important;
    width: 100% !important;

    span {
      margin-left: 0 !important;
    }

    input.mktoField[type="text"],
    input.mktoField[type="email"],
    input.mktoField[type="tel"],
    input.mktoField[type="date"],
    select.mktoField {
      width: 100% !important;
      box-sizing: border-box !important;
      padding: 12px 15px;
      background-color: var(--white, #e0e0e0) !important;
      border: none !important;
      mask-image: var(--mask-button);
      mask-position: center;
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
      -webkit-mask-image: var(--mask-button);
      -webkit-mask-position: center;
      -webkit-mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
    }

    select.mktoField {
      height: 45px !important;
      appearance: none !important;
    }

    .mktoButtonWrap.mktoSimple .mktoButton {
      padding: 15px 30px !important;
      background-image: none !important;
      background-color: var(--orange) !important;
      border: none !important;
      color: var(--white, #fff) !important;
      font-size: 16px !important;
      font-weight: bold !important;
      cursor: pointer;
      mask-image: var(--mask-button) !important;
      mask-position: center !important;
      mask-size: 100% 100% !important;
      mask-repeat: no-repeat !important;
      -webkit-mask-image: var(--mask-button) !important;
      -webkit-mask-position: center !important;
      -webkit-mask-size: 100% 100% !important;
      -webkit-mask-repeat: no-repeat !important;

      &:hover {
        background-color: var(--yellow, #0056b3) !important;
        color: var(--black) !important;
      }
    }
  }

  .mktoFormRow {
    grid-column: span 1 !important;
    width: 100% !important;

    &:has(textarea),
      &:has(input[type="checkbox"]),
      /* &:has(input[type="radio"]), */
      &:has(button[type="submit"]),
      &:has(input[type="hidden"]),
      &.mktoButtonRow {
      grid-column: 1 / -1 !important;
    }

    &:has(input[type="checkbox"]) {
      .mktoFieldWrap {
        display: flex !important;
        flex-direction: row-reverse !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        gap: 10px !important;
      }

      label.mktoLabel {
        margin-top: -2px !important;
        padding-bottom: 0 !important;
      }
    }

    &:has(input[type="hidden"]),
    &:has(> input[type="hidden"]:only-child) {
      display: none !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }

  .mktoFieldDescriptor,
  .mktoFieldWrap,
  .mktoFormRow .mktoHasWidth {
    width: 100% !important;
  }

  .mktoOffset,
  .mktoGutter,
  .mktoClear {
    display: none !important;
  }

  .mktoLabel {
    width: fit-content !important;
    color: var(--white) !important;
    padding-bottom: 8px !important;
  }

  .mktoAsterix {
    color: var(--blue) !important;
  }

  .mktoErrorMsg,
  .mktoErrorArrow {
    background: var(--blue) !important;
    color: var(--white) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  .mktoLogicalField {
    width: auto !important;
    display: inline-block !important;
  }

  .mktoCheckboxList {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    display: inline-block !important;
  }

  input[type="hidden"] {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .Col3Form {
    form.mktoForm {
      grid-template-columns: 1fr !important;
      gap: 15px 0 !important;
    }
  }
}

/* == MARKETO 2-COLUMN FORM OVERRIDES == */

.Col2Form {
  form.mktoForm {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px 20px !important;
    width: 100% !important;

    span {
      margin-left: 0 !important;
    }

    input.mktoField[type="text"],
    input.mktoField[type="email"],
    input.mktoField[type="tel"],
    input.mktoField[type="date"],
    select.mktoField {
      width: 100% !important;
      box-sizing: border-box !important;
      padding: 12px 15px;
      background-color: var(--white, #e0e0e0) !important;
      border: none !important;
      mask-image: var(--mask-button);
      mask-position: center;
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
      -webkit-mask-image: var(--mask-button);
      -webkit-mask-position: center;
      -webkit-mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
    }

    select.mktoField {
      height: 45px !important;
      appearance: none !important;
    }

    .mktoButtonWrap.mktoSimple .mktoButton {
      padding: 15px 30px !important;
      background-image: none !important;
      background-color: var(--blue, #007bff) !important;
      border: none !important;
      color: #fff !important;
      font-size: 16px !important;
      font-weight: bold !important;
      cursor: pointer;
      mask-image: var(--mask-button) !important;
      mask-position: center !important;
      mask-size: 100% 100% !important;
      mask-repeat: no-repeat !important;
      -webkit-mask-image: var(--mask-button) !important;
      -webkit-mask-position: center !important;
      -webkit-mask-size: 100% 100% !important;
      -webkit-mask-repeat: no-repeat !important;

      &:hover {
        background-color: var(--yellow, #0056b3) !important;
        color: var(--black) !important;
      }
    }
  }

  .mktoFormRow {
    grid-column: span 1 !important;
    width: 100% !important;

    &:has(textarea),
    &:has(input[type="checkbox"]),
    &:has(input[type="radio"]),
    &:has(button[type="submit"]),
    &:has(input[type="hidden"]),
    &.mktoButtonRow {
      grid-column: 1 / -1 !important;
    }

    &:has(input[type="checkbox"]) {
      .mktoFieldWrap {
        display: flex !important;
        flex-direction: row-reverse !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        gap: 10px !important;
      }

      label.mktoLabel {
        margin-top: -2px !important;
        padding-bottom: 0 !important;
      }
    }

    &:has(input[type="hidden"]),
    &:has(> input[type="hidden"]:only-child) {
      display: none !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }

  .mktoFieldDescriptor,
  .mktoFieldWrap,
  .mktoFormRow .mktoHasWidth {
    width: 100% !important;
  }

  .mktoOffset,
  .mktoGutter,
  .mktoClear {
    display: none !important;
  }

  .mktoLabel {
    width: fit-content !important;
    color: var(--white) !important;
    padding-bottom: 8px !important;
  }

  .mktoAsterix {
    color: var(--blue) !important;
  }

  .mktoErrorMsg,
  .mktoErrorArrow {
    background: var(--blue) !important;
    color: var(--white) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  .mktoLogicalField {
    width: auto !important;
    display: inline-block !important;
  }

  .mktoCheckboxList {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    display: inline-block !important;
  }

  .mktoRadioList {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0px !important;
    width: auto !important;

    input[type="radio"] {
      width: auto !important;
      margin: 0 !important;
      cursor: pointer;

      &:last-of-type {
        margin-left: 20px !important;
      }
    }

    label {
      display: inline-block !important;
      margin: 0 0 0 6px !important;
      padding: 0 !important;
      cursor: pointer;
      white-space: nowrap !important;
      color: white !important;
    }
  }

  input[type="hidden"] {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .Col2Form {
    form.mktoForm {
      grid-template-columns: 1fr !important;
      gap: 15px 0 !important;
    }
  }
}