.hubspot-form {
  --gray: rgba(0, 0, 0, 0.25);
  padding: 0 mobile-vw(24px);

  @media (--desktop) {
    padding: 0 desktop-vw(24px);
  }

  > div:first-child {
    font-family: var(--font-mono);
    text-align: center;
    font-size: mobile-vw(25px);

    @media (--desktop) {
      font-size: desktop-vw(25px);
    }
  }

  :global(.hs-email),
  :global(.hs-phone),
  :global(.hs-fieldtype-number),
  :global(.hs-fieldtype-text) {
    input,
    select {
      /* biome-ignore lint: Modifying Hubspot's CSS */
      width: 100% !important;
      border: 2px solid var(--color-black);
      padding: mobile-vw(15px) mobile-vw(21px);
      border-radius: mobile-vw(8px);

      @media (--desktop) {
        font-size: desktop-vw(14px);
        padding: desktop-vw(10px) desktop-vw(16px);
        border-radius: desktop-vw(8px);
      }
    }
  }

  :global(.hs-fieldtype-date) {
    input,
    select {
      /* biome-ignore lint: Modifying Hubspot's CSS */
      width: 100% !important;
      border: 2px solid var(--color-black);
      padding: mobile-vw(15px) mobile-vw(21px);
      border-radius: mobile-vw(8px);

      @media (--desktop) {
        font-size: desktop-vw(14px);
        padding: desktop-vw(10px) desktop-vw(16px);
        border-radius: desktop-vw(8px);
      }
    }

    > div:last-of-type {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: mobile-vw(10px);
        width: 5px;
        height: 5px;
        border-left: mobile-vw(6px) solid transparent;
        border-right: mobile-vw(6px) solid transparent;
        border-top: mobile-vw(6px) solid var(--color-black);

        @media (--desktop) {
          right: desktop-vw(15px);
          border-left: desktop-vw(6px) solid transparent;
          border-right: desktop-vw(6px) solid transparent;
          border-top: desktop-vw(6px) solid var(--color-black);
        }
      }
    }
  }

  :global(.hs-fieldtype-textarea) {
    width: 100%;
    border-radius: mobile-vw(8px);
    position: relative;
    font-family: var(--font-mono);
    line-height: 150%;
    /* biome-ignore lint: Modifying Hubspot's CSS */
    color: var(--color-black) !important;
    min-height: mobile-vw(100px);

    @media (--desktop) {
      border-radius: desktop-vw(8px);
      min-height: desktop-vw(100px);
    }

    textarea {
      border: 2px solid var(--color-black);
      padding: mobile-vw(10px);
      margin-bottom: 0;

      @media (--desktop) {
        padding: desktop-vw(6px) desktop-vw(16px);
      }
    }
  }

  :global(.hs-fieldtype-select) {
    input,
    select {
      /* biome-ignore lint: Modifying Hubspot's CSS */
      width: 100% !important;
      border: 2px solid var(--color-black);
      padding: mobile-vw(15px) mobile-vw(21px);
      border-radius: mobile-vw(8px);

      @media (--desktop) {
        font-size: desktop-vw(14px);
        padding: desktop-vw(10px) desktop-vw(16px);
        border-radius: desktop-vw(8px);
      }
    }

    select {
      /* biome-ignore lint: Modifying Hubspot's CSS */
      width: 100% !important;
    }

    > div:last-of-type {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: mobile-vw(10px);
        width: 5px;
        height: 5px;
        border-left: mobile-vw(6px) solid transparent;
        border-right: mobile-vw(6px) solid transparent;
        border-top: mobile-vw(6px) solid var(--color-black);

        @media (--desktop) {
          right: desktop-vw(15px);
          border-left: desktop-vw(6px) solid transparent;
          border-right: desktop-vw(6px) solid transparent;
          border-top: desktop-vw(6px) solid var(--color-black);
        }
      }
    }
  }

  :global(.hs-fieldtype-checkbox) {
    width: 100%;

    div > ul {
      color: var(--color-black);
      display: flex;
      flex-direction: column;
      row-gap: mobile-vw(10px);

      @media (--desktop) {
        row-gap: desktop-vw(10px);
      }

      > li {
        position: relative;

        @media (--hover) {
          &:hover {
            input {
              background-color: var(--color-green);
              color: var(--color-white);
            }
          }
        }

        > label {
          display: flex;
          align-items: center;
          position: relative;
          line-height: normal;
          font-size: mobile-vw(14px);

          @media (--desktop) {
            font-size: desktop-vw(14px);
          }

          span {
            margin-left: mobile-vw(12px);

            @media (--desktop) {
              margin-left: desktop-vw(12px);
            }
          }

          input {
            position: relative;
            width: mobile-vw(30px);
            aspect-ratio: 1 / 1;
            border: 2px solid var(--color-gray);
            border-radius: mobile-vw(4px);
            overflow: hidden;
            flex-shrink: 0;
            transition:
              500ms background-color var(--ease-gleasing),
              500ms color var(--ease-gleasing);

            @media (--desktop) {
              width: desktop-vw(30px);
              border-radius: desktop-vw(4px);
            }

            &::after {
              content: "✓";
              position: absolute;
              top: -5%;
              left: 12%;
              width: 100%;
              height: 100%;
              font-size: mobile-vw(20px);

              @media (--desktop) {
                font-size: desktop-vw(20px);
                top: -5%;
                left: 12%;
              }
            }
          }
        }
      }

      input:checked {
        background-color: var(--color-green);
        color: var(--color-white);
      }
    }
  }

  :global(.hs-fieldtype-radio) {
    width: 100%;

    div > ul {
      color: var(--color-black);
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: mobile-vw(10px);

      @media (--desktop) {
        column-gap: desktop-vw(10px);
      }

      > li {
        position: relative;

        @media (--hover) {
          &:hover {
            input {
              &::after {
                opacity: 1;
              }
            }
          }
        }

        > label {
          display: flex;
          align-items: center;
          position: relative;
          line-height: normal;
          font-size: mobile-vw(14px);

          @media (--desktop) {
            font-size: desktop-vw(14px);
          }

          span {
            margin-left: mobile-vw(12px);

            @media (--desktop) {
              margin-left: desktop-vw(12px);
            }
          }

          input {
            position: relative;
            width: mobile-vw(40px);
            aspect-ratio: 1 / 1;
            background-color: var(--color-white);
            border: 2px solid var(--color-gray);
            border-radius: 100%;
            overflow: hidden;
            flex-shrink: 0;

            @media (--desktop) {
              width: desktop-vw(40px);
            }

            &::after {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border-radius: 100%;
              background-color: var(--color-green);
              transform: scale(0.75);
              opacity: 0;
              transition: 500ms opacity var(--ease-gleasing);
            }
          }
        }
      }

      input:checked {
        &::after {
          opacity: 1;
        }
      }
    }
  }

  :global(.hs-fieldtype-booleancheckbox) {
    width: 100%;

    div > ul {
      color: var(--color-black);

      > li {
        position: relative;

        @media (--hover) {
          &:hover {
            input {
              &::after {
                opacity: 1;
              }
            }
          }
        }

        > label {
          display: flex;
          align-items: center;
          position: relative;
          line-height: normal;
          font-size: mobile-vw(14px);

          @media (--desktop) {
            font-size: desktop-vw(14px);
          }

          span {
            margin-left: mobile-vw(12px);

            @media (--desktop) {
              margin-left: desktop-vw(12px);
            }
          }

          input {
            position: relative;
            width: mobile-vw(74px);
            aspect-ratio: 2 / 1;
            border: 2px solid var(--color-gray);
            overflow: hidden;
            flex-shrink: 0;
            border-radius: mobile-vw(32px);

            @media (--desktop) {
              width: desktop-vw(104px);
              border-radius: desktop-vw(32px);
            }

            &::after {
              content: "";
              position: absolute;
              top: 50%;
              transform: translate(15%, -50%);
              left: 0;
              aspect-ratio: 1 / 1;
              border-radius: 100%;
              background-color: var(--color-gray);
              width: mobile-vw(24px);
              transition: 500ms transform var(--ease-gleasing);

              @media (--desktop) {
                width: desktop-vw(36px);
              }
            }
          }
        }
      }

      input:checked {
        background-color: var(--color-green);

        &::after {
          background-color: var(--color-white);
          transform: translate(175%, -50%);

          @media (--desktop) {
            transform: translate(160%, -50%);
          }
        }
      }
    }
  }

  :global(.hs_error_rollup) {
    /* biome-ignore lint: Modifying Hubspot's CSS */
    margin-bottom: desktop-vw(15px) !important;
    /* biome-ignore lint: Modifying Hubspot's CSS */
    color: red !important;

    @media (--desktop) {
      text-align: center;
      font-size: desktop-vw(16px);
    }
  }

  :global(.hs-form-field) {
    position: relative;
    width: 100%;
    font-family: var(--font-mono);
    line-height: 150%;
    /* biome-ignore lint: Modifying Hubspot's CSS */
    color: var(--color-black) !important;
    margin-bottom: mobile-vw(45px);

    @media (--desktop) {
      margin-bottom: desktop-vw(25px);
    }

    > label {
      position: relative;
      color: var(--color-black);
      top: mobile-vw(-5px);

      @media (--desktop) {
        font-size: desktop-vw(14px);
        top: desktop-vw(-5px);
      }
    }

    legend {
      /* biome-ignore lint: Modifying Hubspot's CSS */
      display: none !important;
    }

    &:has([role="alert"]) {
      input {
        border: 2px solid red;
      }

      > ul {
        position: absolute;
        bottom: mobile-vw(-20px);
        left: 0;
        width: 100%;
        color: red;

        @media (--desktop) {
          bottom: desktop-vw(-25px);
        }

        li {
          display: flex;
          align-items: flex-end;
          height: desktop-vw(20px);
        }

        label {
          position: relative;
          /* biome-ignore lint: Modifying Hubspot's CSS */
          font-size: mobile-vw(10px) !important;

          @media (--desktop) {
            /* biome-ignore lint: Modifying Hubspot's CSS */
            font-size: desktop-vw(10px) !important;
          }
        }
      }
    }
  }

  .custom-form {
    display: flex;
    flex-direction: column;
    max-width: 100%;
  }
}

.submit {
  cursor: pointer;
  display: flex;
  justify-content: center;
  height: fit-content;
  margin: 0 auto;
  background-color: var(--color-black);
  /* biome-ignore lint: Modifying Hubspot's CSS */
  color: var(--color-white) !important;
  /* biome-ignore lint: Modifying Hubspot's CSS */
  border: none !important;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-mono);
  border-radius: mobile-vw(10px);
  width: mobile-vw(233px);
  padding: mobile-vw(26px) mobile-vw(36px);

  @media (--desktop) {
    width: desktop-vw(233px);
    padding: desktop-vw(26px) desktop-vw(36px);
    border-radius: desktop-vw(10px);
    font-size: desktop-vw(16px);
  }
}
