.checkout-page
  header
    border-bottom: 2px solid $productOverviewBorder
    .header-placeholder
      +flex(space-between, center)
      padding: 0 16px
      height: 40px
      h1
        +bold
        color: $blue
        font-size: 16px
        line-height: 19px

  .checkout-block
    padding: 20px 0
    .checkout-row
      margin-bottom: 35px
      padding: 0 16px
      h2
        +bold
        color: $blue
        font-size: 18px
        line-height: 22px
        margin-top: 0
      .input-holder
        margin-bottom: 10px
        label
          margin-bottom: 2px
      .mobile-form-name
        margin-bottom: 10px
        .input-holder
          margin-bottom: 4px

      .mobile-multiple-inputs
        +flex(space-between, flex-start)
        +flex-rows
        label
          width: 100%

        .first-input
          width: 42.5%
        .second-input
          width: 55%
      &.shipping-info
        padding: 0
        >*
          padding-left: 16px
          padding-right: 16px
      &.order-info
        padding: 0
      &.payment-method
        padding: 0 8px
        h2
          &:before
            content: '4. '
      &.remarks
        textarea
          height: 140px

      &.payment
        .message
          display: block
          width: 100%
          margin-bottom: 10px
        .placeholder
          +flex(flex-start, flex-start)
          width: 100%
          #agree
            width: 35px
            margin-right: 5px
            margin-top: 2px
          .description
            +regular
            color: $mobileBlack
            font-size: 14px
            line-height: 17px
            a
              color: $blue
              +semibold
              font-size: 14px
              line-height: 17px
              text-decoration: none
        .btn-holder
          width: 100%
          height: 50px
          margin-top: 40px
          >.btn
            background-color: $blue
            +flex(center, center)
            border-radius: 12px
            height: 100%
            width: 100%
            position: relative
            span
              color: white
              +regular
              font-size: 17px
              line-height: 19px
              +flex(center, center)
              +order(1)
              &.lock
                +order(2)
                +icon-sprite-mobile(-10px -110px, 13px, 15px)
                display: block
                margin-left: 10px

            input
              display: block
              width: 100%
              height: 100%
              position: absolute
              left: 0
              top: 0
              border-radius: 12px
              opacity: 0

.cancel-order
  background-color: $mobileGray
  .try-again
    margin-bottom: 40px

+media-query(380px)
  .checkout-page
    header
      .header-placeholder
        display: block
        height: auto
        padding-left: 0
        h1
          padding-left: 22px