@import settings

.form,
.application-form
  display: flex
  justify-content: center

.form
  +resolution(992)
    padding: 40px 0 144px
  +resolution(0, 991)
    padding: 32px 0 64px

input
  
  &.error
    outline: 1px solid $red !important
    border: none !important

div.hbspt-form
  -webkit-box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.12)
  -moz-box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.12)
  box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.12)
  border-radius: 8px
  width: 100%
  +resolution(576)
    padding: 40px 65px
    max-width: 945px
  +resolution(0, 575)
    padding: 32px 20px

  h2,
  h3
    letter-spacing: $em
    color: $black !important
    +resolution(576)
      font-size: 24px
      margin-bottom: 12px !important
    +resolution(0, 575)
      font-size: 22px

    span 
      color: $black !important

  form
    max-width: 945px
    +resolution(576, 991)
      max-width: 100%

    > fieldset
      max-width: 100%
      margin-bottom: 20px
      +resolution(576, 991)
        margin-bottom: 15px

      &:nth-child(1):has(h3)
        margin-bottom: 10px

      &.form-columns-1

        > div.hs-message

          label
            margin-bottom: 15px

      &.form-columns-0

        p
          color: $grey-normal
          letter-spacing: $px
          font-weight: 600
          +resolution(576)
            font-size: 18px
          +resolution(0, 575)
            font-size: 14px

      > div

        > label
          color: $white
          display: block
          font-size: 16px
          margin-bottom: 4px

          > span
            margin-bottom: 10px
            color: $grey-dark
            letter-spacing: $em
            line-height: 1.2
            font-weight: 600
            font-family: $a
            +resolution(0, 575)
              font-size: 14px
            +resolution(576)
              font-size: 16px

            &:empty
              display: none

            &.hs-form-required
              color: $red

        > div.input
          margin-right: 0 !important
          display: flex

          textarea,
          input
            width: 100% !important
            color: $grey-normal
            font-size: 16px
            border: 1px solid $grey-light4
            +resolution(576, 991)
              font-size: 14px

          input
            height: 46px
            padding: 0 15px
            border-radius: 4px
            border: 1px solid $grey-light4
            +resolution(576, 991)
              height: 41px

          textarea
            height: 58px
            padding: 12px 15px
            resize: none
            line-height: 140%
            +resolution(576, 991)
              height: 53px

        > ul.hs-error-msgs
          padding: 0 !important
          list-style-type: none
          color: red

          > li
            padding: 0 !important
            margin: 7px 0 0 !important
            font-size: 14px
            +resolution(576, 991)
              margin-top: 5px !important

            &:before
              content: none !important

      &.form-columns-2
        display: flex
        justify-content: space-between
        +resolution(0, 760)
          flex-direction: column

        > div
          float: none !important
          width: calc(50% - 10px) !important
          +resolution(0, 760)
            width: 100% !important

          &:first-child
            +resolution(0, 760)
              margin-bottom: 15px

      &.form-columns-3
        display: flex
        justify-content: space-between
        +resolution(576, 991)
          flex-direction: column

        > div
          float: none !important
          width: calc(33.33% - 13px) !important
          +resolution(576, 991)
            width: 100% !important
            margin-bottom: 15px

            &:last-child
              +resolution(576, 991)
                margin-bottom: 0

    > div.hs_recaptcha
      display: none

    > div.hs_error_rollup
      display: none

    > div.hs-submit

      > div.actions

        input[type=submit]
          border-radius: 4px
          display: flex
          justify-content: center
          align-items: center
          color: $white
          font-family: $a
          font-weight: 700
          letter-spacing: $em
          border: none
          transition: outline 250ms linear, background-color 250ms linear
          z-index: 2
          background-color: $secondary
          padding: 12px 18px
          +resolution(576)
            font-size: 16px
            height: 46px
          +resolution(0, 375)
            width: 100%
          +resolution(0, 575)
            height: 40px
            font-size: 14px

          &:hover
            background-color: $tretiary

          &:active
            background-color: $secondary
            outline: 3px solid rgba(255, 144, 0, 0.25)

.hs-error-msgs
  display: none !important

.input
  input.error
    border-width: 1px !important

  textarea
    font-family: $r
    letter-spacing: $px
    color: $grey-dark
    +resolution(0, 575)
      font-size: 14px
    +resolution(576)
      font-size: 16px

.form-footer
  border-radius: 8px
  background-color: $grey-dark
  +resolution(992)
    padding: 34px 48px
    margin-top: 80px
    display: grid
    grid-template-columns: 1fr 1fr
    column-gap: 30px
  +resolution(576, 991)
    margin-top: 38px
    padding: 26px 32px
  +resolution(0, 575)
    padding: 18px 24px 24px
    margin-top: 48px
    flex-direction: column
  +resolution(0, 991)
    display: flex

  .inner
    +resolution(576, 991)
      max-width: 210px

    h3
      letter-spacing: $em
      color: $white
      +resolution(992)
        font-size: 24px
      +resolution(0, 991)
        dont-size: 20px

    p
      font-size: 14px
      font-family: $a
      font-weight: 600
      letter-spacing: $em
      line-height: 1.2
      color: $grey-light3
      +resolution(0, 991)
        margin-top: 4px

  .form-div
    +resolution(576, 991)
      width: 100%
    +resolution(0, 575)
      margin-top: 16px

    .hs_error_rollup
      display: none

    form
      display: grid
      +resolution(992)
        grid-template-columns: 4fr 1fr
        grid-column-gap: 30px
      +resolution(576, 991)
        grid-template-columns: 3fr 1fr
        grid-column-gap: 10px

      .hs_email
        +resolution(992)
          width: 95%
        +resolution(576, 991)
          width: 100%
          height: 100%

      .input
        +resolution(992)
          margin-right: 8px
          width: 100%
        +resolution(576, 991)
          height: 100%
          width: 95%
        +resolution(0, 575)
          width: 100%

        input
          font-family: $r
          font-weight: 500
          font-size: 16px
          letter-spacing: $em
          color: $grey-normal
          width: inherit
          border-radius: 4px
          border: none
          padding-block: 0
          padding-inline: 0
          +resolution(992)
            padding: 14px 18px
          +resolution(576, 991)
            padding: 14px 18px
          +resolution(0, 575)
            padding: 10px 14px
            box-sizing: border-box

      .hs-submit
        +resolution(0, 575)
          margin-top: 12px

        .actions
          width: unset

          input
            height: 46px
            background-color: $secondary
            border-radius: 4px
            display: flex
            justify-content: center
            align-items: center
            color: $white
            font-family: $a
            font-weight: 700
            letter-spacing: $em
            border: none
            transition: background-color 250ms linear
            +resolution(576)
              font-size: 16px
            +resolution(992)
              width: 120px
            +resolution(576, 991)
              width: 100px
            +resolution(0, 575)
              width: 100%
              height: 40px
              font-size: 14px

            &:hover
              background-color: $tretiary

            &:active
              background-color: $secondary
              outline: 3px solid rgba(255, 144, 0, 0.25)